Hurricane Script

Responsive web design: Présentation et Tutoriel

Charles Serra 27 septembre 2012 Actualités, Articles, Mobile, Tutoriels, Web, Web Mobile Pas de commentaire
Responsive web design: Présentation et Tutoriel

 I. Le web face à la diversité des supports

De nos jours, les smartphones, tablettes tactiles, notebooks, écrans larges, smart tv ont littéralement envahis le marché pour nous permettre entre autre de surfer sur internet. Les différences de caractéristiques de ces supports comme le type d’interactions (écran tactile / boutons), la taille de l’écran (très grande diversité), l’environnement d’utilisation (chez soi, dans les transports…), mais aussi le taux de connexion grandissant à partir des mobiles ont fait naître le besoin d’adapter les sites web pour plusieurs résolutions ou dimensions d’écran.

 

Cependant, il est impossible de développer une version dédiée à chaque support car ils sont trop nombreux, et vite démodables. Cibler quelques marques représentant la majorité des visiteurs serait une option. Mais les couts de développement restent élevés, et les choix trop risqués. Cette problématique a longtemps été bloquante. Mais grâce à la volonté de tous de normaliser l’utilisation du web, une solution très satisfaisante est née.

II. Quelle stratégie adopter?

Au lieu de créer autant de version du site web que de périphérique pouvant se connecter dessus, il est préférable d’adapter automatiquement le design de son site en fonction du support, on parle alors de « Responsive web design ». Le responsive web design est une philosophie de développement qui consiste à utiliser le maximum de la surface disponible d’un support, en fonction de son orientation, ou sa résolution tout en adaptant l’ergonomie du site. Ainsi, le même site web, répond exactement aux attentes des utilisateurs. Une méthode de conception consiste à développer une version mobile, puis d’étendre la conception vers des dimensions habituelles. Cette approche nommée « Mobile first » permet de se focaliser sur les besoins des visiteurs utilisant un smartphone, plutôt que de décliner une version comportant des éléments peu serviables en réalité.

III. Conclusion

Adopter la philosophie d’un web design responsive n’est pas compliqué si on y réfléchit dès la conception du site. Aussi, nous verrons qu’un web design responsive ne consiste pas uniquement à réorganiser les quelques colonnes proposée par le site : On peut retravailler l’ergonomie selon le support du visiteur. On notera quand même que le responsive web design est difficile à appliquer lorsque les sites proposent beaucoup d’information (les magazines et journaux par exemple), il s’agit d’un nouveau défi.

IV. Tutoriel

Concrètement, Le web design responsive est une feuille de style CSS3 composée de balises spécifiques qui vont permettre d’utiliser tel ou tel bloc de style en fonction du support.

IV.1. Déroulement

Dans ce tutoriel, nous allons prendre comme exemple une pizzeria « Pizza-Yellow » qui souhaiterait avoir son site vitrine, avec un design responsive 3 en 1 qui couvre les smartphones, tablettes tactiles et ordinateurs. Nous nous limiterons à la page d’accueil, mais il vous sera très facile de faire les autres pages si vous le souhaitez.

Voici le résultat obtenu à la fin du tutoriel: Pizza-Yellow

IV.2. Cahier des charges

Globalement, le site aura :

  • Un menu
  • Un bandeau permettant d’afficher une photo (différente pour les smartphones)
  • Un bloc de contenu principal
  • Un bloc latéral présentant divers aspect de la pizzeria
  • Un footer composé de liens utiles

Page d’Accueil :

  • Le contenu principal proposera les actualités de la pizzeria

IV.3. Conception

IV.3.1. Smartphone (à partir de 0px)

On proposera un bouton de type « quick to call » pour faciliter la prise de contact avec le restaurant. Il y aura le bandeau avec la photo du moment, les actualités, et les différentes pages du menu dans le footer.

IV.3.2. Tablettes tactiles / Netbooks (à partir de 600px)

On proposera le menu, le bandeau, les actualités, et nous ajouterons les mentions légales, les CGV et des infos sur l’entreprise dans le footer.

IV.3.3. Ordinateur (à partir de 900px)

Par rapport à la version pour les tablettes tactiles / netbooks, nous ajouterons un bloc lattéral qui présentera un peu plus la pizzeria.

IV.3.4. Croquis

SMARTPHONES

TABLETTES tactiles

ORDINATEURS

IV.4. Codage du site PIZZA-YELLOW

IV.4.1. Responsive & CSS3

Jusqu’ici, j’ai parlé de «balises» pour ne pas aller trop loin trop vite. Il ne s’agit pas de balises à proprement parler, mais de  « Medias Queries », soit requête de média. Elles permettent de cibler un support par rapport à une ou plusieurs expressions qui la composent, et d’appliquer le style définit dans son bloc si toute les expressions qui la composent sont vraies.

Syntaxe:

Information! «@media» Précise que nous allons utiliser une Media Queries

 

En voici un premier exemple simple:

Information!

- screen est un type de média. Ils permettent de cibler le type de support (imprimante, vidéo projecteur, etc etc).

- min-width permet de tester la largeur du support. Consultez la liste des fonctions permettant de tester entre autre la résolution, l’orientation ou comme ici, la largeur du support utilisé.

Comme vous l’aurez deviné, tant la syntaxe est parlante, si le support qui veut afficher la page est un écran (smartphone, tablette, ordinateur…), et que sa largeur est supérieur à 900 pixels, alors le style qui est définit dans le bloc sera appliqué.

Si vous trouvez ce premier exemple assez clair, réjouissez-vous: Je n’ai pas trouvé de requête plus complexe, si ce n’est d’ajouter une expression supplémentaire à la requête finale mais rien de bien méchant.

Nous allons maintenant commencer le codage du site! :-)

IV.4.2. Structure HTML

La structure du site étant assez simple, justifiée et schématisée précédemment, nous n’allons pas nous attarder dessus, au profit de la définition de la feuille de style.

Attention! Sans la balise << <meta name=”viewport” content=”width=device-width” /> >>, le navigateur du support risque de bloquer le desgin responsive que nous allons définir.

Information! J’ai ajouté les classes css “min…” et “max…” pour vous permettre de repérer facilement les éléments qui s’afficheront ou non en fonction de la taille du support. Ces classes ne servent strictement à rien d’autres puisqu’elles sont trop génériques pour que leur style associé soit appliqué.

Structure HTML de Pizza-Yellow

IV.4.3. Style de base

Comme dans toute feuille de style, nous allons définir les styles de base:

Information! Comme précisé côté html, j’ai fais des les classes css “min…” et “max…” pour mettre en évidence les éléments qui sont affichés ou non en fonction des versions

IV.4.4. CSS Smartphones

Afin de continuer dans notre approche de conception Mobile First, nous allons commencer par définir les styles des éléments de la page lorsqu’un smartphone souhaite l’afficher. Ce bloc sera le plus complexe (toutes proportions gardées) puisque que nous allons définir pour la première fois les styles à appliquer. Les autres blocs de styles issus des medias queries (dédiés pour les tablettes et pc) hériterons des styles définit par ce media queries dédié au smartphone (en effet, lorsqu’une tablette tactile ou un pc souhaitera afficher la page, la taille sera forcément supérieure à 0px), à condition que ces derniers ne les redéfinissent pas. Ça tombe bien, nous n’avons pas l’intention de tout réecrire à chaque fois, ce ne serait pas productif, et encore moins logique.

Après avoir comparé les croquis, on peut voir que le style dédié au smartphone cache:

  • L’image du bandeau dédiée aux tablettes et ordinateurs
  • Tous les éléments du menu, sauf l’élement avec la classe “telephoner” qui est en fait notre bouton “quick to call” permettant de téléphoner rapidement au restaurant.
  • Le bloc latéral présentant divers aspect de la pizzeria
  • Des éléments du footer, dédiés aux tablettes et ordinateurs

Une fois les spécificités de la version traitées identifiée, il est facile de définir les styles à appliquer, et on se retrouve à traiter une feuile de style CSS2. Nous souhaitons que la media queries dédiée à la “version” smartphone démarre à une largeur du support supérieure à 0px, ce qui se traduit par:

@media screen and (min-width: 0px).

Nous obtenons donc le bloc suivant:

Information! Vous devez absolument styliser  les dimensions de vos éléments en pourcentage: Même si les medias queries permettent de cibler le support avec précision, c’est à vous qu’il appartient de définir le style à appliquer.

Cette trentaine de ligne permet de définir la plupart du style à appliquer pour notre site. Nous venons de faire le plus dur! Surtout, n’hésitez pas à passer un peu de temps dessus, analyser les styles appliqués à tel ou tel endroit grâce aux outils de développement des navigateurs. Si vous avez des questions, je me ferai un plaisir de vous répondre!

IV.4.5. CSS Tablettes tactiles / Netbooks

Nous devons analyser à nouveau quels sont les éléments à afficher ou cacher. Cette fois, la comparaison est à faire par rapport à la version mobile: Comme je l’ai dit plus haut, la requête dédiée aux smartphones sera toujours vérifiée (la largeur de l’écran sera toujours >0px). Nous avons juste à redéfinir les éléments qui sont déjà affichés ou définir ceux qui ne l’ont jamais été.

  • Cacher l’image du bandeau dédiée au smartphone et afficher celle disponible à partir de la version tablette.
  • Cacher le bouton de type “quick to call” dédié à la version smartphone, et afficher le menu disponible à partir de la version tablette.
  • Cacher les éléments du footer dédiés à la version smartphone et afficher ceux qui sont disponibles à partir de la version tablette.

La version tablette tactile / notebook du site démarre à 600px. La media queries sera donc:

@media screen and (min-width: 600px).

Nous nous retrouvons à nouveau à traiter du css assez simple, et nous obtenons le bloc suivant:

…une vingtaine de lignes de plus et nous avons notre version Tablette tactile / notebook fonctionnelle, n’est-ce pas merveilleux? Continuons…

IV.4.5. CSS Ordinateurs

Comme précédemment, nous devons analyser ce qui diffère entre la version que nous traitons, et la version antérieure que nous venons de définir. Reprenons les croquis. Clairement, il n’y a que le bloc latéral qui apparaît dans cette version. Nous allons devoir apporter les modifications suivantes:

  • Afficher le bloc latéral
  • Mettre le bloc principal(actualités) à gauche et le bloc latéral à droite

Rappelons que la version bureau du site commence à 900px, ce qui donne la media queries suivante:

@media screen and (min-width: 900px).

Et nous obtenons le bloc de style suivant:

Et oui, cette quinzaine de ligne définit notre version bureau qui sera désormais de moins en moins affichée… Mais nous n’avons pas vraiment finis encore…

IV.4.6. CSS Finitions

Rappelez vous, même si les medias queries permettent de cibler précisément le support, c’est à nous qu’il appartient de définir le style à appliquer. Or, il y a un problème: Les tailles des polices ne peuvent pas être définit en pourcentages. Faisons donc quelques finitions…

  • Nous allons ajouter quelques clauses dans notre feuille de style afin de gérer les débordements de police
  • Pourquoi pas aussi modifier la propriété “letter-spacing” (écart entre les lettres) de notre élément “h1″ pour qu’il soit plus adapté au support.
  • Actuellement, le bandeau grandit proportionnellement à la largeur du support. Ce n’est pas très utile, d’autant plus que le bandeau prendra trop de place au risque de nuire. Nous allons donc le limiter à 700px lorsque l’écran fait au moins 700px de large (devinez la media queries…).

Attention! Ajoutez ces clauses entre les blocs de styles de la version tablette et ordinateur, sinon le css ne sera pas appliqué en fonction des priorités (typique au css tout court)

 

Retrouvez la démo de ce tutoriel grâce à ce lien: Pizza-Yellow

Ce tutoriel est maintenant terminé, j’espère que vous aurez appris pleins de choses! J’attends vos réactions et vos questions si vous en avez!

A bientôt!

 

Tu as aimé cet article ? Partage le ! ;)

À propos de l'auteur

Développeur passionné par le web depuis quelques années. Ces domaines sont le .Net, Entity Framework 4.1, MVC3, Razor Engine, POCOs, SQL Server, jQuery, HTML(5) & CSS(3) et Référencement. Pour en savoir plus sur moi.

Laisser une réponse

Tu dois être connecté(e) pour poster un commentaire.