Les dernières actualités de la techTECH
[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.
Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.
- 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.
Pour nous contacter, nous vous avons préparé un petit formulaire pour bien gérer votre demande et pouvoir l'adresser en toute confidentialité. Cliquez ici pour y accéder
Les derniers articles par LA REDACTION DE FRENCHWEB.FR (tout voir)
- Northvolt se débranche de ses créanciers / Plan marketing 2025, la méthode Maxime Baumard (Pennylane) / SOLTEO lève… - 22/11/2024
- SOLTEO lève 1,5 million d’euros pour développer les micro-centrales solaires - 22/11/2024
- EDEN AI lève 3 millions d’euros pour démocratiser l’accès à l’IA en entreprise - 21/11/2024
Très belle infographie.
Merci pour les infos.
Excellent !
Un grand merci pour ce travail.
Cela répond presque à ma question d’il y a 15 jours sur le sujet : http://domiblog.palacci.fr/post/2012/11/11/Responsive
Que faire pour Gmail qui ne supporte toujours pas les media queries ?
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 :)
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.
Bonjour,
Super travail est vraiment une belle infographie.
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 ?
« Les balises « Div » sont à bannir ! »
OMG ! Les balises div superflues vous voulez dire j’espère.
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.
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 ».
« 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 !
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.
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
@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 !
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.