La tête dans le Flux !

Deux (ah non, cinq) tests de navigation mobile

Très rapidement, voici pour partage et discussion, quelques expériences de menus de navigation adaptés pour le Web mobile (redimensionnez la fenêtre si vous consultez à partir d’un ordinateur de bureau)

1. Premier menu (navigation défilant de la droite vers la gauche) : http://bit.ly/goetter-menu3
2. Deuxième menu (navigation défilant de la gauche vers la droite) : http://bit.ly/goetter-menu3b
3. Troisième menu (navigation défilant du haut vers le bas) :
   http://bit.ly/goetter-menu3c
4. Quatrième menu (navigation sur une ligne apparaissant par en haut) http://bit.ly/goetter-menu4
5. Cinquième menu (le corps de page descend et dévoile le menuà :
   http://bit.ly/goetter-menu5

Objectif et contraintes

Mes contraintes étaient celles ci : n’avoir aucune requête, aucun fichier à télécharger, ni aucun script à faire mouliner (bref : pas d’image, ni JavaScript, ni icon-font)

Compatibilités :

• OK sur iPhone3 Safari, iPhone4 Safari, Android 3, Android 4, Opera mobile
• Pas OK sur Firefox mobile, Opera mini et anciens navigateurs de manière générale

Attention : Ces expériences ont été réalisée rapidement et je n’ai pas testé sur tous les environnements existants. En clair, je ne suis pas responsable si tout explose :) (merci en passant à @walterstephanie pour les tests)

Unicode c’est fantastique !

La ruée vers le Web mobile apporte de nouveaux questionnements et de nouvelles techniques de conception web. Notamment de performances web et d’adaptation des images aux écrans haute-définition.

Le sujet des pictogrammes, icônes et autres petites images décoratives est à la mode et un bon nombre de techniques existent pour cumuler le maximum d’avantages à la fois :

• le moins de requêtes serveur possible, voire aucune
• format le plus léger possible
• pas de dégradations visuelles lors de l’agrandissement
• pas de dégradations visuelles sur écrans “rétina”

Le format Unicode, via l’encodage Utf-8 permet d’afficher un nombre (presque) incalculable de caractères dont la plupart sont totalement inconnus.

Et pourtant, beaucoup de ces caractères sont parfaitement capables de remplir un rôle parfait de pictogramme… sans avoir à charger de fichier puisqu’il existe déjà dans les polices de caractères classiques.

Tous les avantages sont réunis… à condition que tous les navigateurs les interprètent correctement, ce qui n’est pas toujours le cas (à vous de vérifier au cas par cas). Ce serait trop simple sinon.

A des fins personnelles, je me suis construit une petite base de pictogrammes qui me semblent intéressants pour illustrer des sites web.

Vous la trouverez à l’adresse http://goetter.fr/unicode/

Et pour rappel, j’avais déjà fait quelques tests sur le sujet, visibles ici : http://www.ie7nomore.com/css2only/characters/

EDIT : puisque j’ai de nombreux retours et commentaires (justifiés) concernant l’accessibilité de ces pictogrammes, je vous renvoie vers un article récent : “Icônes @font-face et accessibilité”. J’y décris différentes méthodes pour résoudre les gênes pour lecteurs d’écrans.