Le Web mobile a depuis longtemps envahi notre quotidien de concepteur de sites web : aujourd'hui, smartphones et tablettes font partie intégrante du parc de périphériques sur lesquels nous jouissons de notre dose quotidienne d'Internet, sur lesquels nous consultons nos sites web préférés, et pestons - à juste titre - lorsque celui-ci ne s'affiche pas correctement.

Afin de mieux dégrossir ce vaste sujet, voici une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique.

Glossaire

Application native

Correspond aux logiciels à télécharger que l'on peut trouver sur les boutiques "stores" (AppStore pour Apple, GooglePlay pour Android,…) développés dans un langage spécifique à chaque plateforme : Objective-C pour Apple, Java pour Android, …

Application web

Une application web est le nom que l'on donne à un site web "classique" que l'on a adapté pour les mobiles.
La structure existante reste en place (HTML, scripts, bases de données, médias) et est complétée par une couche graphique dynamique (en CSS) adaptée aux écrans de taille réduite dans un principe général de design adaptatif (Responsive web design et avec des outils CSS3 tels que les Media Queries. Des retouches ou sur-couches JavaScript sont parfois également à l'ordre du jour.

Site web dédié

Il s'agit d'une nouvelle version du site web complètement adaptée aux terminaux nomades en terme de technologies (HTML, vidéo, audio, images) et de performances (optimisations, préchargements, mises en cache).

Habituellement, une détection du périphérique utilisateur (via User Agent, JavaScript, autre) permet de le rediriger vers l'URL de la version mobile dédiée du site (m.monsite.com, monsite.mobi).

Navigateurs mobiles

Le marché des navigateurs pour mobiles se distingue de celui des ordinateurs de bureau par sa diversité et sa vivacité concurrentielle et technologique. Parmi les plus employés dans le monde : Opera Mobile, Opera Mini, Safari Mobile (sur iPhone, iPad), navigateurs Android, Internet Explorer mobile, Blackberry, Firefox mobile, Chrome mobile, UCweb, etc.

Densité de pixels

Correspond à la résolution d'un écran numérique exprimée en DPI (Dots Per Inch : points par pouce) ou PPI (pixels par pouce). Une densité élevée correspond à un écran dit "HD" ou "Haute Définition". Quelques exemples de densités : 326 PPI pour iPhone 4 et 4S, 264 PPI pour iPad 3, 220 PPI pour MacBook Pro 3.

Retina

"Retina display" est une marque déposée par Apple pour désigner des écrans dont la densité de pixels est telle que l'oeil humain n'est plus censé pouvoir distinguer de défauts dans les détails. Il ne s'agit ni plus ni moins d'écrans de haute définition (densité de pixels élevés). Cette ...

Par qu...