Introduction au Responsive Design

Et si on parlait …

… D’un sujet très en vogue : Smartphones ? Tablettes ? Résolution d’écran ? Media Queries ? Feuilles de style ? Tests ? Responsive Design !

« Le design et intégration responsive est donc une manière de créer un design et une manière de l’intégrer pour être compatible avec la majorité des appareils numériques pouvant afficher un site. »

responsive-design-graphique

Qui ne consulte pas son smartphone ou sa tablette à la moindre 1re notification de sms, de mails, d’actualités, de twitts, de statuts facebook ?

A l’heure où « Everybody needs to be connected » que l’on soit chez soi, au travail, en soirée, en vacances ou ailleurs, quand on travaille dans le milieu du web, on ne peut pas passer à côté du Responsive Design.

Sujet populaire, sources d’informations inépuisables, en perpétuelle évolution, difficile d’écrire sur un sujet qui regorge de préconisations différentes.

Du design à l’intégration

Démarrer un projet de site compatible pour tous les terminaux (desktop, smartphones, tablettes) nous invite à repenser le design et à prendre en compte l’expérience utilisateur.

Le challenge commence, un besoin de site flexible, fluide et non surchargé se fait ressentir.

En apparence, on pourrait imaginer qu’un site moins chargé sera moins long à concevoir. Seulement, pour commencer, le design des maquettes est à décliner sous 3 tailles de supports graphiques : desktop – smartphones – tablettes.

Partant de là, il faut anticiper les différences de navigations, de tailles d’images, des vidéos, d’interactions (tactiles ou pas), de fonctionnalités (certaines inutiles sur smartphones /tablettes) et la flexibilité du contenu (que ce soit un article, un formulaire ou un tableau).

Responsive design 2

Ensuite, l’intégrateur ou développeur front-end, doit être capable de bien construire sa structure HTML, de telle manière, qu’il adaptera ensuite le design, pour les smartphones et les tablettes, sans modifier le layout, seules les feuilles de style seront surchargées.

Les Media Queries

« Les Media Queries sont des spécifications de CSS3 qui permettent d'attribuer des propriétés CSS en fonction de conditions particulières (exemple : largeur de l'écran). »

Les media queries vont donc nous permettre de cibler la résolution, le type de média, la taille de la fenêtre, la taille de l’écran, le ratio de la fenêtre, l’orientation …

Il est alors nécessaire de déterminer dans le du code HTML un élément meta viewport :

<meta name="viewport" content="width=device-width, initial-scale=1" />

=> Pour cibler la largeur de l’écran et à l'échelle 1

ou on peut aussi le faire directement dans la feuille de style :

@viewport {
    width: device-width; /* largeur du viewport */
    zoom: 1; /* zoom initial à 1 */
}

Ensuite rajouter, par exemple :

- Soit dans le head de la page html, la balise <link> de la feuille de style spécifique à une largeur d’écran maximale :

<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" type="text/css">

- Soit à la fin de la feuille de style :

@media only screen and (max-width: 640px) and (orientation: landscape)
{
     Mettre ici vos propriétés css pour la version mobile
}

En fonction de votre besoin concernant les différentes surfaces d’un mobile ou d’une tablette, vous pouvez modifier la taille « max-width » ou y inscrire d’autres types de média.

Je vous invite à consulter 2 articles :

- Les Media Queries CSS3 : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

- Comprendre le viewport dans le web mobile : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Les feuilles de style

Pour continuer dans le vif du sujet et mieux visualiser, voici une feuille de style de base pour mobile élaboré par Raphaël Goetter, consultable sur le site « alsacreations » :

Feuille de style de base

Ce qu’on retiendra pour la feuille de style :

  • Eviter les largeurs fixes aussi bien pour les blocs que pour les images.
  • Eviter les "float"
  • Réduire à 1 seule colonne pour les smartphones puisque l’espace est réduit.
  • Aller à l’essentiel
  • Masquer certains éléments dont l'utilisateur n’aura que faire, par exemple la pub, un fond d’écran qui ralentira le chargement de la page… etc

Je vous invite à consulter un article :
http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

Et le design fluide ?

Il existe aussi une autre façon de réaliser un site en responsive design, en créant un design fluide et l’intégrer en pourcentage ou en em. Mais cette méthode ne convient pas à toutes sortes de sites. Si vous avez encore à débuguer votre site sous certains vieux navigateurs, n’y songez même pas.

Je vous invite à consulter un article :
http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html

Mais encore…

Voici une liste, de front-end frameworks responsive design, qui sera très utile à tous ceux qui n’ont pas envie de passer du temps sur les feuilles de style :

  • Bootstrap twitter : http://twitter.github.io/bootstrap/
  • Foundation : http://foundation.zurb.com/
  • Skeleton : http://www.getskeleton.com/
  • Jquery Mobile : http://jquerymobile.com/download/
  • …etc

Adobe a aussi un outil de création de sites web en responsive design « Adobe Edge Reflow » ciblant à la fois les développeurs et graphistes. « Cette solution qui s'appuie sur CSS est équipée d'une d'un environnement de visualisation redimensionnable. Il permet de vérifier comment les mises en page et éléments visuels s'adaptent aux différentes tailles d'écrans. »

Vous trouverez toutes les informations utiles sur : http://html.adobe.com/fr/edge/reflow/

Adobe Edge

Comment tester ?

Gagner à l’Euromillions et acheter tous les smartphones et toutes les tablettes ? Il y a évidemment plus simple !

Vous avez la possibilité, en redimensionnant manuellement la fenêtre de votre navigateur, d’obtenir une version assez proche de la version mobile ou tablette.
Sur Firefox, il suffit de faire le raccourci : Ctrl+Shift+M

Il existe plusieurs sites qui vous proposent aussi de retrouver presque la même interprétation des smartphones et des tablettes comme par exemple :

Pour Conclure

Dans l’univers du web, tous les chemins mènent au responsive design. Il s’agit d’un nouveau défi ergonomique puisqu’on est amené à repenser notre façon de créer un site à la racine du design.

Il existe donc plusieurs méthodes pour arriver à réaliser un site en responsive design :

  • Adapter le site grâce aux media queries
  • Concevoir un site au design fluide

Le responsive design, une solution incontournable et stratégique, vu la montée en masse des smartphones et tablettes, qui permet d’atteindre un plus grand nombre de personnes, mais pas que…
Posséder un site compatible quelque soit le support n’est pas une obligation. Certains sites n’ont pas forcément la cible. Et le client oublie souvent que concevoir un site responsive lui fera dépenser plus de temps et d’argent.

Ressources

Site W3C :

http://www.w3.org/TR/css3-mediaqueries/

Site Alsacreations :

http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *