Le Responsive Design : un livre blanc pour comprendre la méthode

Le responsive design permet d’adapter le design d’un site web à tous types de terminaux : smartphone, ordinateur, télévision, tablette…

Quels sont les principes à respecter pour réussir son site web en responsive design ? Quels sont les écueils à éviter ? Quelles sont les limites de la méthode ?

Le livre blanc présente les guidelines illustrées des meilleures pratiques, ainsi que l’analyse d’un cas e-commerce concret.

47 pages pour saisir l’essentiel sur le responsive design ! Télécharger gratuitement Le Responsive Design : Livre Blanc Miratech

Le Responsive Design : sommaire du livre blanc

Introduction

Qu’est-ce que le « Responsive Design » ?
Pourquoi le Responsive Design ?

Guidelines

Les blocs de contenu

  • Penser en bloc
  • Conserver un ordre logique
  • Adapter les blocs

Les menus mobiles

  • Présentation du menu en haut de page
  • Menu en liste déroulante ‹select›
  • Déploiement du menu « Toggle »
  • Menu déroulant par la gauche
  • Menu avec ancre vers le footer
  • Menu uniquement dans le footer
  • Supprimer l’accès au menu

Les visuels

  • Supprimer les visuels trop importants
  • Adapter les icônes d’un site

Les éléments cliquables

  • Rendre explicite les éléments cliquables
  • Etendre les zones d’interaction
  • Adapter le nombre de fonctionnalités présentées

Les fonctionnalités des terminaux mobiles

  • Géolocalisation
  • Attention aux animations
  • Gestion du clavier tactile

Le développement technique

  • En bref
  • Grille relative
  • Media-queries
  • Penser Responsive Design

Etude d’un cas e-commerce concret

Présentation du cas
Revue de l’adaptation du contenu

  • Menu « toggle »
  • Gestion des visuels
  • Longueur de page
  • Interactions

Un développement vraiment Responsive ?
Les limites du Responsive Design

Conclusion

Télécharger gratuitement Le Responsive Design : Livre Blanc Miratech

Pour la suite…

Miratech intervient sur vos projets mobiles avec notamment :

  • Des méthodes de test utilisateur responsive : nous mesurons le comportement et nous recueillons l’opinion des utilisateurs de votre site en versions desktop, smartphone et tablette
  • La conception responsive : nous utilisons nos méthodes centrées utilisateurs pour concevoir une interface responsive belle et efficace
  • La recette web et mobile : nous vérifions que votre site fonctionne sur tous les équipements du marché, du desktop à la tablette en passant par tous les smartphones

Exemple de notre expertise : Miratech a reçu le Premier Prix du Be-UX Paris pour la conception en responsive de Wonder.Legal, le site pour créer des contrats, lettres et statuts à partir de n'importe quel support.