Guide pour débutant sur le Responsive web design

Attention ! Cet article a plus de 1 an (2488 jours), ce qui signifie qu'il n'est pas forcément à jour !

Traduction de l’article Beginner’s Guide to Responsive Web Design de Nick Pettit.

responsive1

Peu importe si vous êtes un débutant ou un professionnel chevronné du web, créer un design réactif (appelé responsive design), peut être déroutant aux premiers abords, à cause du changement radical d’approche que cela implique. Avec le temps, le design réactif s’éloigne du bassin de mode passagère pour entrer rapidement dans le domaine de la pratique courante. En fait, l’ampleur du phénomène est aussi fondamentale que la transition de la mise en page en table pour le CSS. Dit simplement, c’est vraiment une façon différente de designer des sites web et elle représente le future.

Avec le temps, responsive design est complètement devenu le sujet de l’heure dans la communauté du design web. Si tout cet engouement vous fait sentir comme Rip Van Winkle se réveillant dans le XXIe siècle, ce sommaire va vous aider à rattraper le retard.

Qu’est-ce que le design réactif ?

Allons directement au but: croyez-le ou non, le blog Treehouse sur lequel vous pouvez lire l’article original est actuellement un design réactif! Pour le voir en action, ouvrez l’article avec un navigateur d’ordinateur de bureau et lentement redimensionnez le navigateur. Vous devriez voir que la mise en page s’ajuste comme par magie pour permettre une meilleur visibilité de la page en fonction des nouvelles dimensions du navigateur, et ce même si la page est aussi étroite qu’une résolution de téléphone mobile. Voici quelques visuels de ce que le design Think Vitamin ressemble sous différentes résolutions :

responsive2 responsive3 responsive4

Difficile de parler du design réactif sans mentionner son créateur, Ethan Marcotte. Si vous n’avez pas lu son article à propos du responsive web design (voici la version française de l’article), je vous le recommande fortement (sérieusement, c’est une lecture obligatoire). Dans cet article, Ethan débat des idées principales qui forment le design réactif; et c’est vraiment ce que le design réactif est, techniquement. Ce n’est pas une simple pièce de technologie, mais plutôt, une panoplie de techniques et d’idées qui forment un tout. C’est de là que vient la principale source de confusion, et dans un moment nous allons décortiquer le tout et se pencher sur chacune de ces parties.

Donc, exactement, qu’est-ce que le responsive design ? Actuellement, une meilleure question à se poser serait, quel problème le design réactif règle-t-il ? Alors, comme vous avez peut-être remarqué, les ordinateurs ne sont désormais plus la seule pièce informatique avec un navigateur. Je peux me mettre un peu dans le trouble en disant ceci, mais le iPhone a été un des premiers appareils mobiles à avoir un bon navigateur, et a vraiment mis les projecteurs sur l’avancement de l’expérience de l’utilisation du web sur un mobile. Beaucoup d’autres appareils ont suivi et, du jour au lendemain, l’internet mobile avait changé.

Le panorama changeant des navigateurs web signifiait que les attentes des utilisateurs avaient aussi changées; les gens veulent être capables de naviguer sur leur téléphone aussi facilement que sur leur navigateur de bureau. Donc, en réponse à ceci, la communauté du design web a commencé à créer des versions mobiles de leurs sites web. Avec du recul, ce n’était pas nécessairement la façon de faire, mais à ce moment cela semblait être une idée raisonnable. Tout les sites web auraient leur version normale dite de bureau et, en bonus, leur version mobile.

La technologie n’a jamais cessé d’évoluer, donc peu de temps après le marché du matériel mobile s’est révolutionné, d’autres facteurs ont gagné en popularité. En plus des téléphones et des ordinateurs personnels, des appareils comme les tablettes électroniques et les petits ordinateurs (notebooks ou netbooks) sont apparus.

Ce n’est pas juste de petits écrans non plus. Les écrans larges et à haute résolution ont commencé à être plus communément utilisés, et cela aurait été du gaspillage pour les designers web de ne pas en prendre avantage.

En résumé, le spectre des grandeurs d’écrans et de résolutions s’agrandit chaque jour, et créer une version différente du site web qui s’adapterait à chacun des appareils n’est pas une façon viable de fonctionner. C’est à ce problème que le design réactif fait face.

Précédemment, j’ai mentionné que le design réactif n’est pas une simple pièce de technologie, mais plutôt, une panoplie de techniques et d’idées qui forment un tout. Maintenant que nous avons une meilleur idée de l’ampleur du problème, penchons-nous sur chaque partie de la solution.

Grilles fluides

La première idée clé derrière le design réactif est l’utilisation de ce qui est connu sous le nom de grille fluide (fluid grid). Récemment, créer une mise en page fluide (liquid layout) qui s’agrandit suivant la page n’a pas été aussi populaire que la mise en page aux largeurs fixes; designs de page qui ont un nombre de pixel fixé et centré sur la page. Toutefois, quand nous considérons l’immense quantité de résolution d’écrans que nous avons sur le marché présentement, l’avantage d’avoir une mise en page fluide est trop grand pour être ignoré.

Les grilles fluides vont au-delà des traditionnelles mises en page fluides. Au lieu de designer une mise en page basé sur un nombre prévu de pixels ou sur une valeur en pourcentage arbitraire, une grille fluide porte une attention particulière en termes de proportions. De cette façon, quand la page se rétrécit pour adopter la dimension d’un mobile ou s’agrandit pour un écran large, tous les éléments dans la mise en page vont se redimensionner.

Dans l’ordre, pour pouvoir calculer les proportions de chaque élément de la page, vous devez diviser l’élément cible dans son contexte. Actuellement, la meilleure façon de faire est de créer un plan très fidèle de la page dans un éditeur d’image en pixel, comme Photoshop. Avec votre maquette en main, vous pouvez mesurer un élément de la page et le diviser par la pleine grandeur de la page. Par exemple, si votre mise en page à une grandeur typique de 960 pixels, alors ce nombre sera la largeur du "contenant". Disons que votre élément à une valeur arbitraire de 300 pixels de large. Si nous multiplions le résultat par 100, nous obtenons la valeur en pourcentage de 31,25 % que nous pouvons appliquer à notre élément cible. Voici le calcul mathématique:

responsive5

Si vos valeurs ne sont pas justes, et que vous en avez quelques-unes avec plusieurs chiffres après la décimale, ne les arrondissez pas. En tant qu’humain nous aimons les beaux chiffres ronds et rendre notre code propre, mais notre ordinateur (et le résultat final du design) va bénéficier de cette précision.

Les grilles fluides prennent une partie très importante dans la création d’un design réactif, mais elles ne peuvent tout faire seules. Quand la largeur du navigateur devient trop étroit, le design commence à se briser sévèrement. Par exemple, une mise en page complexe en trois colonnes ne fonctionnera pas très bien sur un petit téléphone mobile. Par chance, le design réactif répond à ce problème en utilisant le media queries.

Requête de médias (Media Queries)

La seconde partie du design réactif est la requête de médias CSS3 (media queries), laquelle jouit d’une excellente compatibilité sur plusieurs navigateurs modernes. Si vous n’êtes pas familier avec les requêtes de médias CSS3, elless vous permettent de simplement récupérer les informations à propos du visiteur du site et de les utiliser pour conditionnellement appliquer du style CSS. Pour nos besoins, nous sommes premièrement intéressés par la valeur du média min-width, laquelle va nous permettre de spécifier au CSS si la largeur du navigateur va en dessous d’une valeur que nous avons spécifiée. Si nous voulons appliquer un peu de style pour un téléphone mobile, notre media query devrait ressembler à quelque chose du genre:

@media screen and (min-width: 480px) {
 .content{
 float: left;

 } .social_icons {
 display: none;

 } 
 // and so on...
 } 

En utilisant une série de requêtes comme cette dernière, nous pouvons continuer notre travail avec de plus larges résolutions. La série de largeur en pixel que je vous recommande de cibler est la suivante :

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Encore une fois, celles-ci ne sont que des recommandations et ne devraient servir que pour point de départ. Dans un monde idéal, vous ajusteriez votre mise en page pour parfaitement convenir à toutes les largeurs d’appareils, mais bien souvent vous devez choisir où mettre vos efforts. D’un côté pratique, les résolutions ciblées par le design vont se baser sur les résolutions du monde l’utilisant selon des contraintes de temps, de design et de budget. En résumé, quand vient le temps de décider quelles résolutions cibler, vous devriez utiliser votre jugement. Cibler plus de résolutions va prendre plus de temps, et assumant que vous n’êtes pas immortel avec du temps à l’infini, l’effort devrait être dépensé judicieusement.

Ressources

Le design web réactif date déjà de plus d’un an, et il existe une panoplie de ressources pour vous aider et pour apprendre sur le sujet. Sur notre service de vidéo d’exercice de qualité Treehouse, nous avons plusieurs vidéos qui vont en profondeur sur le sujet. En voici quelques-uns:

Bonus

Nous avons commencé à ajouter des vidéos sur YouTube gratuitement sur le design web réactif. Donc si vous êtes intéressés à en apprendre davantage, vous pouvez vous inscrire à notre chaîne ici: http://trhou.se/subscribe-treehouse-yt

Voici un vidéo pour commencer:

Catégories :

HTML CSS