Petite expérience de design mobile

J'ai commis mon premier site en HTML 5 sur un petit blog de rien du tout et j'aimerais avoir votre avis. Il s'agit de la version mobile du blog de Maître Eolas.

Je profite de cette expérience pour voir si mes lecteurs sont capables d'analyser un design en d'autres termes que « j'aime » ou « j'aime pas ». Parce qu'avec tout le respect que j'ai pour les lecteurs de mon avocat, ce n'est pas toujours leur cas. ;-)

Je préfère vous prévenir à l'avance que je n'ai qu'un iPhone à ma disposition et que je n'ai pas encore pu mettre la main sur d'autres mobiles (ou émulateurs) disposant d'un navigateur web digne de ce nom. J'ai ouïe dire que ça fonctionnait bien avec d'autres mobiles que l'iPhone, mais j'apprécierais si vous pouviez éclairer ma lanterne sur les marques, modèles et navigateurs avec lesquels le site fonctionne bien ou de manière acceptable. Je suis aussi preneur de conseils sur les bonnes pratiques de détection et de passage sur la version mobile, sachant qu'une brève discussion avec Raphaël Goetter à hier à Paris Web m'a plongé dans un abîme de perplexité.

Quelques clés qui vont avantageront par rapport aux lecteurs d'Eolas (qui tire plus vite que son ombre, je ne pensais pas qu'il sortirait ce prototype du bois aussi tôt, mais rien de tel pour faire avancer un procrastinateur) :


  • le header et son icône ne sont pas définitifs

  • le logo de Typhon n'est pas adapté au fond

12 commentaires

J'ai bien aimé le rendu sur mon iPhone globalement ! Bien que n'étant pas spécialiste :
- c'est clair, épuré, couleurs sympas, on s'y retrouve au premier coup d'oeil et on se sent directement à l'aise avec ce design
- le blog étant occupé par plusieurs auteurs, dommage de ne pas avoir le nom de l'auteur discrètement indiqué sous chaque titre à l'accueil
- léger décalage vertical entre les titres et le nombre de commentaires, ça ferait peut-être plus joli centré verticalement
- les commentaires gagneraient vus leur nombre et leur longueur à être chargés uniquement sur demande, mais c'est peut-être trop contraignant à réaliser ? Le poids des pages a son importance en Edge dans le métro...
- seul bémol sur la zone de recherche : les blancs autour font bizarre : espace perdu et ça coupe un peu trop les menus du reste

En tout cas ça me motive pour m'essayer au html5 prochainement.. Bonne continuation !

Hello

j'ai testé sur un iPhone en wifi. Le temps de chargement est très bien. Côté design, quelques remarques en vrac:
- le logo à gauche dans l'en tête n'est pas très pertinent
- je n'aime pas trop l'association du rouge (pour les liens) avec les tons bruns de la bannière
Côté lisibilité , c'est parfait. On navigue bien et les textes sont agréables à lire. un petit bémol, le texte est un peu trop collé au bord gauche de l'écran:un petit pixel de blanc rendrait la lecture plus agréable

Dans certains cas, les chiffres deviennent cliquables ( considéré comme un numéro de tel par l'iPhone) Exemple : sur le comment http://www.maitre-eolas.fr/m/post/2009/10/04/67%2C-ann%C3%A9e-%C3%A9rotique#c108877, le "1.214.268".

Bon courage

Prestigieuse association !

Voici quelques remarques :

- dans la liste, il faut cliquer sur le nom du post, ou le nombre de commentaires => ça fait beaucoup de screen-estate non cliquable dans une zone qui n'est rien d'autre qu'une liste de liens.

- dans la liste, les liens ne changent pas d'apparence quand ils ont été visités.

- sur la page d'un post, quelle est la pertinence du lien "Lien permanent" ?

- je rejoins Mathilde : sur la page d'un post, un peu de blanc autour du corps du texte, peut-être un interlignage un peu plus généreux ?

- parfois le maître répond longuement aux commentaires. La police utilisée pour ses réponses sera alors bien petite. Un changement de couleur serait peut-être suffisant, sans forcément changer la couleur de fond ?

- sur iPhone: le champ de recherche est pré-rempli par le mot anglais 'Search...'

Bref.
Le fait de savoir que padawan est plongé dans un abîme de perplexité au sujet de la détection des browsers mobile me plonge illico dans un abîme de perplexité aussi. Dans quel paradoxe une brave détection de user_agent nous plongerait-elle ?

Je viens de tester sur un Nokia E65, oui je sais ça fait pauvre ... ;-), depuis une connexion wifi livebox (pas une connexion des plus rapides).

Le système est Symbian OS 9.1 (S60 v3).

J'ai fait un premier test avec le navigateur Nokia, puis avec Opera Mini 4.2. Une dernière précision, c'est vraiment une expérience, je n'utilise pas du tout mon téléphone pour surfer habituellement...

Le temps de connexion à la page d'accueil est très bon avec le navigateur Nokia et excellent avec Opera, surprenant même.

Pour ce qui est du design de cette dernière, avec le navigateur Nokia, c'est du basique : pas de CSS, du HTML brut, sans commentaires donc.

Avec Opera, c'est autre chose : ça s'affiche comme sur mon PC, enfin presque.
Le bandeau titre ne s'adapte pas à la largeur de mon écran et déborde sur la droite, rien de très gênant puisque les titres des billets, eux, s'ajustent parfaitement. Un petit détail bizarre : Opera mini ne semble pas très à l'aise avec les italiques : que ce soit en page d'accueil ("Journal d'un avocat" apparaît droit, alors que les autres attributs sont respectés) ou dans les articles : la balise "em" ne lui fait ni chaud ni froid.

Au delà, le design est agréable et confortable, ça passe très bien.

J'en viens plus précisément aux articles et là, grosse surprise, que ce soit avec le navigateur Nokia ou avec Opera, c'est très lisible, agréable à lire même. Le texte s'adapte parfaitement à la largeur de mon écran et, contrairement à l'iphone (niark!), n'est pas trop près des bords. Et la navigation est très fluide. C'est un tout petit peu moins bien pour les commentaires ou le fond gris nuit un peu à la lisibilité et le texte est un peu trop collé au bord droit de l'écran. Mais ça reste très bien bon tout de même.

Bref! Une réussite de mon point de vue et une vraie surprise quant à la lisibilité sur un écran de téléphone (et pas d'un smartphone).

Pour juger par toi même du rendu dans Opera Mini; il ya une démo :
http://www.opera.com/mini/demo/

Bonjour François,

Testé sur mon bon vieux HTC P3600 avec un vieux internet explorer sous windows mobile 5.0.

En GPRS le chargement est rapide, pas de soucis.

Point de vue rendu visuel pas de soucis non plus.

Peut être un peu trop de padding top et bottom sur les titres d'articles, il y a beaucoup d'espace perdu sur l'accueil.

Je me pose aussi la question de la pertinence du nombre annonçant les commentaires, on ne comprends pas tout de suite l'utilité de la chose.

Pour les pages d'articles, c'est lisible, les titres sont peut être un chaouia gros.

Les commentaires sont également lisibles sans soucis, on arrive même à bien cerner les citations et les interventions d'eolas dans les commentaires.

Après pour les choix graphiques, on s'en fout un peu, le but est que l'ensemble soit propre et consultable et pour l'instant ça marche plutôt pas mal.

Alors sur un Nokia N85 (Symbian S60 3rd Edition FP2) ça passe très bien en mode paysage, mais en mode portrait le mot « avocat » se cache derrière le contenu.
http://img194.imageshack.us/img194/9508/screenshot0012.png

Et dans le pied de page, tous les logos se superposent :
http://img101.imageshack.us/img101/7803/screenshot0013.png

Sinon le texte est très lisible, mais la consultation des commentaires est très fastidieuse parce qu'il faut faire défiler la page très longtemps étant donné leur nombre. J'imagine que ça peut coûter cher à charger aussi en 3G.

Je pense qu'il serait intéressant d'avoir une version avec juste le texte des billets, ou au moins de paginer les commentaires par 10.

par curiosité quant à la dégradation, j'ai testé brièvement sur un vieux motorola L6 imode.

c'est exploitable mais les restrictions imposent un message d'erreur au début de chaque page.

je trouve que c'est plutôt à votre honneur et à celui de html 5.

Oups, je n'avais pas pris la mesure des questions que pose la détection du "sous-ensemble des navigateurs qui tournent sur un mobile et qui affichent suffisamment correctement la version mobile html 5 du site". En fait il suffit parfois de poser le problême pour commencer à s'arracher les cheveux !

Sur la façon d'activer ou d'activer le thème mobile, sans énerver l'utilisateur, sans doute faut-il suivre l'ornière qui commence à se creuser : lien de changement de thème discret et en bas de la page version mobile, sans doute avec effet permanent. Et se munir d'une bonne boîte d'aspirine avant de se prendre la tête sur le choix des statuts 3xx à utiliser, car un bon 301 a des pouvoirs que le 302 n'a pas.

Bon travail, bon courage !

Laisser un commentaire

En laissant un commentaire, vous acceptez la politique des commentaires de ce blog.

Archives mensuelles

Notes récentes