Responsive design: comment faire? [Infographie]

Une infographie très complète par Splio sur le responsive design et la façon de l’implémenter.

Malgré la complexité du sujet le propos est clair concernant la mise en place des media queries selon la taille d’écran.

Quelques éléments d’information avant de découvrir l’infographie.

Pourquoi faire du responsive design?

Avec le développement des smartphone et des consultations depuis un mobile le responsive design n’est plus une option. C’est la seule technique qui permet de développer un seul site adapté à tous les environnements: mobile, tablette, fixe. C’est d’ailleurs une technique qui progresse rapidement comme le souligne les résultats de notre Observatoire 1min30 des site Internet professionnels français 4,4% des entreprises ont un site responsive.

Comment faire du responsive design?

10 conseils issus de l’infographie:

  • Simplifier la page pour facilité son adaptation au mobile
  • Utiliser les media queries pour s’adapter aux différentes résolutions d’écran
  • Définir les frontières segmentant les différentes tailles d’écran
  • Construire sa maquette sur une grille flexible
  • Adapter vos images à la taille d’écran, plus l’écran et petit plus l’image doit être ressérée
  • N’oublier pas de border les images avec des max et des min pour qu’elles restent lisibles
  • Utiliser des valeurs relatives
  • Organiser les contenus sur le mobile sous forme de colonne…
  • … et supprimer les contenus non essentiels
  • N’oubliez pas dans le header la balise <meta name= »viewport » content= »width=device-width »>

Je vous laisse découvrir l’infographie…

Pour les plus courageux qui seront allez jusqu’au bout de l’infographie, qu’en pensez-vous? Est-ce que cela vous semble clair? En tout cas pour 1min30, c’est l’un des chantiers de ce début d’année sur notre site Internet.

En effet, l’adaptabilité au mobile est l’un des critères essentielles mis en avant dans notre nouveau livre blanc sur le Marketing (Inbound) « Les 11 commandements d’un site Internet qui convertit vos visiteurs en clients« . Alors il n’y a plus qu’à;-) Par ailleurs, si vous souhaitez réaliser un site responsive, je vous invite à découvrir notre offre création de site Internet.

Si cet article vous a plu, nous vous invitons à découvrir notre agence d’Inbound Marketing et à télécharger notre livre blanc « Inbound Marketing : faire de sa marque un média et transformer son audience en clients »

Enregistrer22
Tweetez
Partagez
Partagez
Gabriel Dabi-Schwebel

Ingénieur de formation j’ai commencé ma carrière dans le conseil en télécom et en média. J’ai aussi monté de multiples projets entrepreneuriaux, marque de bijoux, bar à jus de fruits, éditeurs de logiciel avant de créer 1min30 en 2012, la première agence en Inbound Marketing en France. Avec 1min30, nous avons piloté les stratégies digitales de centaines d’entreprises mais aussi développé un blog qui a plus de 300K lecteurs par mois, une communauté de plus de 100K abonnés sur l’ensemble des nos réseaux sociaux et une maison d’édition dans laquelle nous publions nos livres et ceux de nos clients. Depuis 2017, je suis ainsi l’auteur et coauteur de 8 livres sur le marketing et la vente, dont 5 de méthodes basées sur l’intelligence collective : Acquisition Strategy Design, Customer eXperience ReDesign, Brand Strategy Design, Q2C Selling et 3 méthodes marketing pour les RHs Aujourd’hui, 1min30 fait partie des 3 plus grandes agences HubSpot en France. Nous avons fait des intégrations les plus complexes notre spécialité et proposons à nos clients un accompagnement complet sur la solution alliant conseil, intégration, formation et agence. Contactez moi si vous souhaitez dépasser les objectifs de leur investissement CRM.

Voir les commentaires

  • L'infographie est très claire et pertinente. Merci de l'avoir partagé avec vos lecteurs ;)

    Aujourd'hui la navigation mobile est un geste quotidien... il faut vraiment prendre conscience de l'utilité (je dirais même de la nécessite) d'optimiser son site.

    Notre agence a travaillé longuement sur ce projet pour fournir aux internautes une navigation agréable a travers un site responsive design. Alors je vous souhaite bon courage pour ce grand chantier 1m30 !

  • Très bon petit récapitulatif qui reprend bien les bases du responsive, après le responsive est à la mode mais il faut bien identifier les besoins car dans certains projets ça devient un peu n'importe quoi de le mettre en place ...

    • Effectivement le responsive a un coût et il faut s' assurer de sa pertinence avant de se lancer.

      Bien cordialement,

      Gabriel

  • SUperbe infographie ! D'une extrême clarté et vraiment hyper utile pour s'adapter au maximum de produit mobile. Encore une fois merci à 1m30 pour le partage et la qualité de l'article comme d'habitude qui est au top.

  • Excellente infographie très complète sur le responsive design, merci ! Quelques tuyaux supplémentaires dans cet article :
    <a href="https://www.ametys.org/fr/actualites/avis-d-experts/developper-en-responsive-web-design.html"

Laisser un commentaire