Réussir son responsive design !

Responsive Design : 10 conseils pour réussir !

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

10% du trafic internet mondial se fait via les smartphones ou les tablettes. Il devient ainsi incontournable d’adapter son site ou son blog aux mobiles. Pour ce faire, une nouvelle méthode de développement Web est née, le responsive design. Réussir son responsive design !   Le principe du responsive design est de rendre son site internet visible sur tous les écrans, que ce soit celui d’un smartphone, d’une tablette ou sur l’écran d’un ordinateur.

Pourquoi utiliser le responsive design ?

Le trafic sur les smartphones et tablettes ne cesse d’augmenter ! C’est un fait. Et la souris n’est pas la même chose que le doigt. Exemple, il faut au moins 50 pixels pour créer un bouton pour un doigt, alors que 10 suffiront pour une souris. Il est donc presque normal d’adapter son site web aux interfaces tactiles et plus petites.

4 raisons d’utiliser le responsive design à l’interface dédiée !

Peut être avez-vous créé un site spécialement pour les téléphones, transformant votre http://www.monsite.com en http://m.monsite.com ! Voici 4 raisons d’utiliser le responsive design :

  1. Amélioration de l’expérience utilisateur : tous les bons webmasters cherchent à rendre la visite de leurs utilisateurs la plus agréable possible. Rappelez vous que l’utilisateur vient pour trouver une information, et il doit la trouver rapidement ! Le responsive design vous permettra de n’afficher que les informations indispensables pour les utilisateurs.
  2. Supprimer les redirections : Comme vous utilisez le même site pour les terminaux mobiles et pour les écran d’ordinateur, vous n’avez plus besoin de créer de redirection vers votre site mobile ! Vous gagnerez ainsi du temps de développement !
  3.  1 site = 1 maintenance ! En utilisant le responsive design, vous éviterez de faire de la maintenance sur deux sites !
  4. Contrôle de vos visiteurs : Je pense notamment à Analytics. Plus vous aurez de sites, plus difficile il sera de faire un bilan de vos visites.

 Comment faire du Responsive Design !

Je vous proposes 10 étapes de construction d’un site Responsive Design :

Simplifier votre architecture !

La première étape est de revoir l’architecture de votre blog et de la simplifier au maximum. Vous pourriez par exemple :

  • Supprimer les <div> inutiles
  • Supprimer les styles « inline » (remplacez les par des float !)
  • Supprimer le flash ou le Javascript (Je vous conseille de le faire même si vous ne faites pas de Responsive Design)
  • Utiliser les propriétés « Absolute » et « Float » à bonne escient
  • Le superflus

Et afin d’optimiser au maximum vos chances de réussite, n’hésitez pas à:

  • Utiliser la technologie combiné HTML5/CSS3
  • Utiliser des feuilles de style des remise à zéro : resetstylesheet
  • Utiliser l’architecture la plus simple.

Pour valider cette étape, désactivez le CSS de votre site, normalement le site devrait garder sa lisibilité !

Utilisez les médias Queries !

Le media Querie est une fonctionnalité permettant de demander au navigateur quelles sont ses propriétés (taille…). C’est le meilleur moyen pour faire un simple SI « cette taille » ALORS « ce style » ! Nous allons pour le responsive design,  nous allons nous focaliser sur la taille de l’écran et donc sur la propriété WIDTH. Pour cela, il y a plusieurs méthodes. J’ai utilisé pour ce blog, la méthode qui déclare les différentes feuilles de style dans le <head> :

<link rel="stylesheet" media="screen and (min-width:1024px)"  href="/style.css" type="text/css">
<link rel="stylesheet" media="screen and (max-width:1024px)"  href="/tiny.css" type="text/css">

Mais il existe d’autres méthodes :

  • Dans les balises <style></style> du <head> :

<style>
@import url(tiny.css) (min-width:300px);
@import url(big.css) (min-width:900px);
</style>

  • Dans la feuille de style (Si vous êtes fan de « Tous dans un même fichier »
@media screen and (max-width:300px){
/* CSS pour les petits ecrans */
}
@media screen and (max-width:600px){
 /* CSS pour les grands écrans */
}

Pour ma part j’ai opté pour la déclaration dans le <head>, je trouve ça plus propre !

Quelles sont les principales résolutions d’écran !

Les différentes résolutions existantesCe schémas nous montre toutes les résolutions d’écran. Les icônes vertes sont les résolutions les plus répandues. Il faudra donc cibler ces dimensions pour notre responsive design !

Définir les résolutions englobantes !

L’objectif de cette étape est de définir quelles sont les résolutions d’écran que vous souhaitez cibler. Par exemple, sur mon site, j’ai 2 versions, celle pour les grandes résolutions et celles pour les petites. Je ne me suis pas inquiéter de faire une version pour résolution intermédiaire.
De ce fait mon design apparaît de deux manières différentes sur les tablettes en fonction de l’orientation de l’écran (portrait ou paysage !)

Selon l’image, il faut travailler en priorité sur :

  • Les résolutions inférieures à 480px (SmartPhone)
  • Les résolutions entre 480 et 768px (Tablettes)
  • Les résolutions supérieures à 768px (Les écrans de PC)

Ce qui devrait vous donner un code de ce style :

<link rel="stylesheet" media="screen and (min-width:768px)"  href="/big.css" type="text/css">
<link rel="stylesheet" media="screen and (max-width:768px) and (min-width:480px)"  href="/small.css" type="text/css">
<link rel="stylesheet" media="screen and (max-width:480px)"  href="/tiny.css" type="text/css">

 Rendez votre design flexible !

On va rentrer dans le vif du sujet pour notre tutoriel sur le responsive design, puisque nous allons attaquer la stylisation de notre site. L’objectif n’est pas de vous donner du code à copier/coller, c’est complètement inutile puisque le responsive design doit faire parti de votre style par défaut !!

Comme dit dans le sous-titre, l’objectif est de rendre votre design le plus flexible possible, il faut donc supprimer toutes tailles invariables (width:***px). Voici quelques conseils :

  • Transformez vos tailles en proportion
    • Pour un design en 3 colonnes (200px, 300px, 800px) remplacez cela par (15%, 23%, 62%)
  • ATTENTION ! La somme de vos proportions doit être égale à 100 !

En plus d’être pratique pour le responsive design, cette méthode rend votre site agréable pour les personne ayant de grandes résolutions (mais nous y reviendrons !)

Un petite astuce supplémentaire donnée par le design, l’utilisation du box-sizing:boder-box. Cette propriété CSS est tout simplement magique, elle permet d’éviter les maux de têtes de calcul des dimensions avec les width, les margin et les padding !

div
{
   width:75%;
   padding:15px;
   margin:5px;
}

Concrètement, j’ai une « div » qui a un width de 75%, un margin à 5px et un pagging à 15px. Si on calcul tout ça, on se retrouve avec un width > à 100%… Improbable. En utilisant la propriété box-sizing:border-box, si vous utilisez le width à 75%, l’ensemble fera finalement 75% ! (C’est vraiment pratique !)

 Donnez de l’intelligence à vos images !

Évitez absolument de fixer la taille de vos images, rendez les les plus fexible possible en appliquant un width:85%, au lieu d’un width:250px !

N’hésitez pas à utilisé la propriété max-width pour éviter que vos images à faible résolution ne deviennent illisibles !

J’ai un très gros écran !!!

Il en faut pour les petits comme pour les grands !

Et oui, de même qu’il faut adapter son design pour les petits écrans, il ne faut pas oublier ceux qui ont de gros écran !!

Pour se faire, utilisez un simple max-width:1200px,  sur votre body, cela devrai éviter que les résolution à 2560px ne soit troublé en arrivant sur votre site !

 Soyez relatif !

L’objectif de cette étape, est de faire en sorte que tout votre design dépende du premier bloc (body). Pour cela, deux méthodes s’offrent à vous :

  • La cascade des % : Vous déterminé la taille du bloc initial, et tous les blocs suivant devront être déterminés en % !
  • La méthode des emphemeral unit (em) : Le principe de l’unité em est très simple, il suffit de fixer l’unité de départ, puis tout dépendra de cette unité (en em) :
body{
   font-size:16px;
}

div.1{
   width:46em; /* 46*16 = 736px */
}

div.2{
   font-size:1.2em; /* 1.2*16 = 19.2px */
}

Vous avez compris le principe ? De ce fait, dans votre responsive design, si vous utilisez bien cette méthode, il ne vous suffira plus qu’à déterminer l’unité de départ (12 pour le tiny, 14 pour le small et 16 pour le big !)

Petite resolution ? Une seule colonne !

Pour les petites résolutions d’écran, il est ingénieux de tout linéarisé en une colonne. Permettant ainsi une navigation plus efficace sur les smartphones.

Le principe est simple, fixez tous vos blocs à : width:100%.

Mais attention, tous vos blocs ne sont pas forcément utile sur les smartphones, rappelez vous que les utilisateurs viennent chercher une information et si en arrivant sur votre site, ils doivent d’abord descendre tout en bas de la page pour récupérer une information, vous pouvez être certain qu’ils ne resteront pas !

Faites donc le ménage quand vous passez sur le design « tiny » (qui devrait être l’affichage 1 colonne). Vous pourriez supprimer :

  • La pub
  • Les archives
  • Les articles relatifs (ils viennent juste chercher un info… pas plus !)

Une fois que vous aurez fait tout cela, il ne vous reste plus qu’une étape pour réussir votre responsive design !

Vérifier votre viewport !

Il est possible que certain navigateur pour smartphone et tablette triche sur leur résolution en envoyant à votre site de fausse instruction sur la résolution d’écran ! Il est donc impératif de supprimer cette fausse information pour être certain que votre site apparaisse proprement sur les smartphones.

Pour cela, utilisez l’instruction :

<meta name="viewport" content="width=device-width">

Cette instruction vous permettra de récupérer la véritable valeur de la résolution d’écran du terminal !!

 

Liens vers l’auteur du design :

 

Voilà !

Une fois que vous aurez accompli toutes ces instructions, vous devriez avoir un site responsive design !

Un outil pour tester votre responsive design !

Avant de partir, je voudrais vous proposer un outil pour tester votre responsive design :

  • Un « marque page » : Lorsque vous naviguez sur votre site et cliquez sur ce marque page, des outils apparaîtront pour tester votre site sous différentes résolutions
    • Pour ajouter ce marque page, cliquez et déplacez le lien dans votre barre des favoris !

 

Voilà, j’espère que ce tutoriel vous aura aider à créer un beau responsive design ! N’hésitez pas à partager vos techniques en commentaire !

Enjoy it !

Soyez Sociable ! Partagez !

2 réflexions sur “ Responsive Design : 10 conseils pour réussir ! ”

  1. Bonjour Paul,

    C’est assez bien résumé. Par contre, je pense que c’est une bonne chose d’avoir le menu en bas sur petits écrans pour avoir l’info vraiment en premier. Vous pouvez voir un exemple d’1 menu à 3 positions différentes en fonction de la taille de l’écran sur Sitadapt avec l’aide des media-queries.
    Grand écrans : menu en haut
    Moyen écrans : menu sur le côté (droite ou gauche)
    Petit écrans : menu en bas (avec lien en haut vers le menu en bas)
    J’ai l’impression que c’est plus ergonomique.

    Et attention au « box-sizing:boder-box ». Justement, il y a un problème avec les champs de ton formulaire ci-dessus « Laisser un commentaire » sur Firefox. On ne peux pas voir ce que l’on écrit dans les champs. Du coup, on a l’impression que cela ne fonctionne pas. Mais, j’ai enlevé le box-sizing sur firebug et j’ai pu voir ce que j’écrivais, les champs ce sont agrandit.

    A+

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>