22 novembre 2015 AKOA

Responsive : où sont les (bons) pixels ?

Le constat de la mobilité

Le monde du Web poursuit sa mutation. Google ne s’y trompe pas : un site optimisé pour mobile est désormais mis en avant dans les résultats de recherche. Il faut donc en déduire qu’un site qui s’affiche mal sur mobile, est dévalué. 

Pour savoir si votre site est adapté aux mobiles, vous pourrez le vérifier ici :
https://www.google.com/webmasters/tools/mobile-friendly/?hl=fr

Le responsive

Le terme « Responsive » désigne la capacité d’un site à s’adapter en fonction de la taille d’écran disponible. Il ne s’agit pas seulement d’étirer l’affichage, les éléments du site (entête, contenus, images, colonnes, pied de page, etc.) vont se réorganiser afin de s’afficher sur différentes tailles d’écran : mobile, tablette et ordinateur.

Les points de rupture

Pour déterminer le comportement à associer selon la taille disponible, on va définir des points de rupture. Ainsi, en dessous de X pixels, on sera en mobile, entre X et Y pixels, on sera en tablette et au dessus de Y pixels, on sera sur un ordinateur. On peut  imaginer d’autres points ruptures, mais ces 2 là sont les plus courants.

Le viewport

Le premier iPhone avait une résolution de 320 pixels de large et 480 pixels de haut. Puis, les écrans Retina sont arrivés, avec beaucoup plus de pixels dans une même taille d’écran. On gagne ainsi en finesse d’affichage, mais pas en espace disponible. La résolution réelle est le nombre de pixels affichés par l’écran. Le « viewport » est l’espace disponible simulé, exprimé en pixels également. C’est ainsi qu’un iPhone 4S dispose d’une résolution réelle de 640 x 960px et pourtant, l’affichage du site web se comportera comme s’il n’avait que 320 x 480px. Pour vérifier le viewport de tous les outils existants, ce site fera des merveilles : http://viewportsizes.com

Les mobiles

En portrait comme en paysage, tous les viewport des mobiles font entre 320 et 767px, de haut comme de large. Nous préparerons donc une maquette qui fait 320px de large et ferons en sorte qu’elle puisse s’étirer en largeur jusqu’à 767px. On parle d’un design “flexible” (s’étire en largeur, sans autre adaptation).

Les tablettes

Concernant les tablettes, les viewport vont entre 768px et 1280px, à nouveau en portrait comme en paysage. A titre d’exemple, les iPad font précisément 768 x 1024px et les Galaxy Tab 800 x 1280px.

Les ordinateurs

Aujourd’hui, il est communément admis que les ordinateurs font minimum 1280px de large (c’était 1024px avant l’arrivée des tablettes). Cependant, certains écrans vont très au delà, jusqu’à 2560px et plus. Étant donné ce grand écart, il est très, voire trop complexe d’assurer un design flexible. En effet, avec de telles largeurs, il faudrait des images beaucoup trop lourdes pour couvrir l’écran. Rappelons-nous que nous sommes sur des technologies Web, que chaque image va ralentir le chargement du site. Nous allons donc avoir un tronc d’une largeur fixe de 1280px, avec des effets visuels pour occuper l’espace à gauche et à droite. Souvent, l’entête et le pied de page s’étaleront sur toute la largeur disponible, tandis que le contenu, au centre, sera figé dans 1280px de large.

Quelles maquettes dans tout ça ?

On pourrait rester sur les viewports indiqués plus haut. Mais rappelez-vous que la résolution réelle des écrans peut être plus élevée. Si on étire une image de 320px pour s’afficher sur un écran de 640px, celle-ci sera dégradée visuellement. Pour avoir un bon rendu des images, nous doublerons les résolutions nécessaires.

 Récapitulatif Viewport Maquette PSD
Mobile 320 … 767px 640px
Tablette 768 … 1280px 1536px
Ordinateur 1281 … 2562px

CONTACTEZ NOUS