{"partition": "head_middle", "source_domain": "www.alsacreations.com", "digest": "sha1:333LROUOTGVNYTB2PCJL72P4B2GJY5RQ", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2014-15/000_00032.parquet"}
Aller à la recherche TutorielsAstucesOutilsLivresQuiz Web mobile : introduction et glossaire
Article par Raphael (Intégrateur du Dimanche, Strasbourg)
Créé le 03 Juillet 2012, mis à jour le 13 Janvier 2013 (41150 lectures)
Tags : viewport, mobile, webmobile, responsive, retina, device-width
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.
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 (Web App)
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.
Pixel ratio
Correspond au ratio entre les pixels réels (screen width) et la valeur de device-width du navigateur. Par exemple, un iPhone 4 a un ratio de 2 (640/320) tandis qu'un iPhone 3 a un ratio de 1 (320/320). Il est possible de détecter le pixel-ratio via Media Queries ou en JavaScript via window.devicePixelRatio.
"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 technologie équipe des terminaux iPod, iPhone, iPad et MacBook Pro. Du côté de la concurrence, par exemple Samsung, on retrouve le terme (Super-)AMOLED.
L'orientation correspond, pour un écran numérique, à son sens d'affichage : si le périphérique est tenu dans le sens de la largeur, on parle d'orientation paysage (landscape en anglais); s'il est tenu dans le sens de la hauteur, on parle d'orientation portrait.
Les récents navigateurs de bureau reconnaissent également l'orientation : si la fenêtre est plus large que haute, l'orientation sera définie en paysage par exemple. Il est possible de détecter l'orientation via CSS Media Queries.
screen width (ou screen height)
Correspond à la largeur (ou hauteur) d'un écran numérique. Que cela soit sur un écran de bureau, une tablette ou un téléphone mobile, cela se traduit par la (mal nommée) résolution : par exemple 1024x768, 320x640, etc.
device-width (ou device-height)
Correspond aussi à la largeur (ou hauteur) d'un écran numérique. Ou plutôt celle qui est déclarée par le périphérique.
Un certain nombre de terminaux mentent sur la valeur de device-width et device-height. En effet, ceux-ci ne correspondent pas à la largeur réelle de l'écran (screen-width) mais à une valeur exprimée en "Device Independant Pixels (dip)" ou "Pixels Indépendants du Terminal". Ainsi, un iPhone 4 dont la largeur physique réelle est de 640px retournera une largeur device-width de 320px, ceci pour des raisons de compatibilité ascendante avec son aîné iPhone 3.
Désigne la zone de la fenêtre du navigateur.
Les navigateurs mobiles trichent en reconnaissant par défaut une surface de viewport plus élevée que la surface physique réelle en pixels.
Par exemple la largeur de viewport par défaut sur Safari mobile est de 980px, elle est de 850px sur Opera, 800px sur un navigateur Android, 1024px sur IE mobile.
Pour s'affranchir des tailles de sites minuscules (puisque le mobile affiche une largeur de 980px dans une surface de 320px), il est possible de modifier cette valeur par défaut et d'imposer ses valeurs à l'aide de l'élément HTML - propriétaire - <meta name="viewport"…>, ou selon les spécifications CSS, à l'aide d'une règle-at @viewport.
Module des spécifications CSS3 permettant la sélection fine de périphériques selon divers critères (largeur, hauteur, résolution, orientation,…), puis d'appliquer spécifiquement un ensemble de styles CSS dédiés à cette sélection.
Cet outil est devenu une étape incontournable de l'adaptation de designs aux écrans de différentes tailles. Pour tous les détails, voir l'article Media Queries.
Ensemble de techniques et principes permettant d'adapter un design web à différentes tailles d'écran : de l'écran de bureau géant au smartphone, en passant par les tablettes, les netbooks et autres formats de TV. Ceci afin d'offrir aux visiteurs la meilleure expérience possible quel que soit le support de consultation et quitte à réorganiser l'affichage et la disposition des éléments (par exemple passer d'un site à 4 colonnes sur grand écran à un site mono-colonne sur mobile). Ce terme a été introduit par Ethan Marc