ActualitéDesignTech

[Infographie] 10 choses à savoir sur le responsive design

Splio, prestataire spécialiste de la relation client multicanal, vient de réaliser une infographie sur le responsive design. Cette notion consiste à repenser la manière de concevoir les parcours de navigation en ligne. L’objectif est donc de réorganiser l’information en fonction des paramètres de l’appareil. Outre une véritable tendance, ce concept constitue un enjeu majeur compte tenu de l’explosion des usages mobiles.

Relativement technique, l’infographie met en avant, sur un ton décalé, 10 conseils clefs à destination des designers et développeurs.

  • Mettre en place une mise en page simple. Les balises « Div » superflues sont à bannir !
  • Utiliser les « médias queries », indispensables à un design adaptatif.
  • Définir les frontières. Sur cet aspect, l’agence identifie 6 points de ruptures majeurs en fonction des différents terminaux.
  • Privilégier une mise en page flexible pour que le design soit adapté à tous les appareils.
  • Dompter les images. Splio livre ici quelques astuces techniques pour que les images, elles aussi, s’adaptent aux différents terminaux.
  • Recourir aux : « Max » et « Min ». L’idée est d’empêcher le design de s’élargir ou de se réduire à des proportions ridicules sur des appareils très larges ou très petits.
  • Définir une unité au début du contenu et l’utiliser pour calculer le reste.
  • Organiser le contenu sur une seule colonne  pour les mobiles basse résolution.
  • Supprimer les rubriques inutiles à une navigation sur mobile.
  • Et enfin vérifier son meta Viewport.

Afin d’illustrer l’ensemble de ces « tips », l’agence Splio renvoie les curieux vers le site mediaqueri.es, qui propose une série d’exemples.

 

 

Tags
Microsoft Experiences les 3 et 4 octobre 2017

La rédaction

Pour contacter la rédaction, cliquez ici / Devenez "la start-up de la semaine" : faites vous connaitre! / Ajoutez un événement à notre agenda: cliquez ici

Sur le même sujet

16 thoughts on “[Infographie] 10 choses à savoir sur le responsive design”

  1. Merci pour ces sympathiques commentaires :)

    Paul> de manière générale, si une approche basée sur des media queries est impossible, on peut miser sur les layouts à dimensions relatives. Sur gmail, avec des designs fluides, on s’en sort très bien :)

  2. Merci pour cette infographie. Le responsive est un élément à prendre en compte lors de la création d’un nouveau site. En effet il plus facile de la prendre au début du projet que de le rajouter sur un projet déjà existant.

    Le responsive est à ses début, en effet la grand majorité des entreprises n’ont pas encore capté son réel intérêt.

  3. Hum… Je crois qu’il y a une sérieuse différence entre « Supprimer les div imbriqués superflus » et « Les balises div sont à bannir », non ?

  4. Petite erreur dans votre synthèse : « Les balises « Div » sont à bannir ! ». Seul les balises IMBRIQUES SUPERFLUES sont à bannir. Heureusement que les balises div sont à conserver.

  5. Bonjour,

    > Les balises « Div » sont à bannir !

    euh non. éviter une soupe de div, ok, les bannir, vous y allez un peu fort non ?

    Et c’est marrant de parler de « responsive design », en l’expliquant dans une image de 1.4Mo. Non seulement c’est pas « responsive design » puisque taille fixe, mais en plus 1.4Mo à charger par un mobile, c’est encore moins « responsive ».

    Et je ne parle pas de l’accessibilité, étant donné qu’il n’y a aucune alternative textuelle de vos propos (à part le résumé en début de billet).

    C’est dommage, parce que votre infographie, étant plutôt simple graphiquement, aurait pu être faite en HTML… (et en « responsive design » évidement)

    Bref, « faites ce que je dis, pas ce que je fais ».

  6. « Mettre en place une mise en page simple. Les balises « Div » sont à bannir ! »
    Euh t’es sûr de toi là ? Moi je lis « Divs imbriquées superflus » dans l’infographie… C’est très différent quand même !

  7. Bonne idée …mais malheureusement c’est incomplet (et donc peut aiguiller certaines personnes dans une mauvaise direction).

    Premier oubli crucial : l’approche Mobile 1st.
    Aussi, ne pas faire de design en fonction des dimensions du matériel … choisir plutôt une approche « content-driven » ou « device-agnostic » avec bien-sur un layout toujours fluide.
    Enfin, faire des breakpoints en « em » et pas en « px », pour régler les pbm lies au zoom et changement de taille de caractères.

    Moins important : les unités en « rem », et pour les images ajouter height:auto , etc.

  8. Arnz> « 10 petits conseils », bien évidemment c’est incomplet :) Le « device-agnsotic », c’est une bien belle philosophie, dans les projets pratiques et dans un contexte de production, c’est malheureusement plus difficile (et couteux) à défendre. Nous sommes partis du principe que des breakpoints proches de la « réalité actuelle » en terme de devices étaient un bon début.

    Laurentj> c’est au départ un PDF, ce qui explique le format monstrueux :) http://www.splio.com/responsive/10_basic_tips_about_responsive_design_fr.pdf

    1. @Rémi :
      « « device-agnsotic », c’est une bien belle philosophie… »
      Ce n’est pas une philosophie, c’est une méthode de travail. Un workflow. Elle est, bien au contraire, BEAUCOUP plus intelligente, économique et pérenne donc aucun problème pour l’argumenter auprès de vos clients, encore faut-il la connaitre.

      Parmi les multiples erreurs sur votre joli PDF, j’en oubliais encore une : l’utilisation de ‘display:none’ … vous devriez monter en compétence sur le sujet avant de faire ce genre de chose, vous allez désinformer les jeunes devs et entretenez de mauvaises pratiques.

      Googlez : Luke Wroblewski, Brad Frost, Jeremy Keith etc.
      Courage !

      1. Une fois de plus : « 10 petits conseils ».
        Maintenant je ne doute pas que nos amis les jeunes devs monteront directement en compétence grâce à vous en googlant ces quelques noms.

Laisser un commentaire

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

Share This