21
mai
Design mobile trend, textures

Version mobile de site web/blog, quelques règles

/
21 mai 2011
/
4 Comments

La version mobile d’un site internet ou d’un blog est par définition une variante de ce dernier dont la lecture est adaptée pour les smartphones. Vous pensez que cela n’est pas vital pour votre site internet? Détrompez vous !

Selon Mary Meeker, dans les 3 à 5 années à venir, la majorité du trafic web viendra des mobiles et non plus de nos classiques PC. Quand on sait qu’en France, nous avons déjà dépassé les 10 millions de smartphones vendus, ça fait un nombre important de cibles dont vous vous privez, vous ne trouvez pas?

Le design d’un site version mobile

Design mobile trend, textures
Sur une version mobile de site internet, vous devez faire très attention à plusieurs éléments. Un temps de chargement trop important sur un site mobile que l’on regarde de façon rapide pour trouver en général quelques informations clefs lors de ses déplacements, peut grandement décourager l’internaute mobile. Rappelez vous que la connexion internet sur un téléphone, ainsi que ses capacités générales sont très très loin de celles de votre ordinateur.

Ne surchargez pas le design. Evitez les gros visuels, une trop grande multitude d’images.. Pour rendre votre site attractif, il est facile de compenser les gros visuels, animations flash et autres images par le travail de textures/couleurs. Gardez cependant toujours en tête le poids de votre travail, optimisez, optimisez, optimisez !

N’en faites pas trop, restez simple. Épurez la version web classique pour répondre aux attentes des internautes mobiles. Limitez le scroll avec 15 infos différentes par page. Invitez l’internaute à choisir par un call-to-action amenant à une action précise.

Et comment intégrer tout ça? Lisez le slide ci-dessous : Adapter un design au Web Mobile grâce aux CSS – Confoo 2011

La navigation et le contenu d’un site version mobile

La navigation sur mobile doit être optimisée de façon totalement différente par rapport à la version complète sur site internet classique. Vous devez la simplifier au maximum, après tout la taille de l’écran est réduite de façon considérable. Ne mettez pas plus de 5 éléments dans votre navigation, les « internautes mobiles » veulent souvent aller à l’essentiel lors de leurs recherches (principalement une information de contact, des éléments clefs en rapport avec votre cœur de métier/activité). Il en va de même pour le contenu de cette version mobile, les longs pavés du site classique n’ont pas d’intérêt sur un écran sur lequel la lecture n’est pas autant facilitée. Limitez donc la lecture aux informations clefs.

Il peut être intéressant (je pense surtout aux blogs, sites d’actualités etc) de laisser l’encart de partage toujours visible sur l’écran. Cela vous fera toujours de la publicité supplémentaire gratuite, cependant prenez garde à ce que cela ne gène pas le confort de lecture/recherche de l’internaute mobile.

Et du côté des blogs high tech et du classement wikio

Je me suis amusée à fouiller dans les classement High tech du classement wikio (les 50 premiers) pour voir ce que donnaient les versions mobiles de nos blogs préférés. Le verdict est sans appel :

  • 25 blogs n’ont pas de version mobile
  • 20 ont une version basique (type wp-touch, iWPTouch)
  • 5 ont une version customisée de leur blog

Pourquoi j’ai choisi cette section plutôt qu’une autre? Car ce sont le plus souvent des gens « à la pointe« , donc je me suis dit que si il y avait bien une section où je pourrais trouver mon bonheur dans adaptation pour mobile, ça ne pouvait être que là !

Où trouver d’autres design


, , ,
Ce qui fait le web, Pannel
Nayka