[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. 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.
Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.
Responsive design - site adapté aux mobiles | Blog iMDEO | Veille technologique et technique | agence de développement web Beaucoup de personnes utilisent un smartphone pour aller sur internet, et de plus en plus de personne veulent donc un site compatible avec ces dits smartphones. Je ne vais pas faire un énième guide sur les bonnes pratiques pour réaliser un tel site, le web en est déjà bien rempli, mais je vais regrouper ici les sites ayant les informations les plus complètes pour vous permettre de produire un site adaptable aux smartphones. 1ère étape : chercher l’inspiration Avant de commencer à créer votre site, vous allez surement commencer à chercher des exemples de sites s’adaptant aux smartphones. Je ne vous en conseillerai qu’un seul, mais un bien : - Ce site référence de nombreux sites ayant un design responsive basé sur les media queries. Les média quoi ? Les média queries ! Ou pour ceux qui n’aiment pas trop l’anglais je vais être sympa : - Templating (400 / 900) x 100 = 44% Les script jQuery utile
Responsive design: retour d’experience Le développement du thème actuel m’a permis de travailler sur deux techniques: le couple HTML5/CSS3 d’une part, et le « Responsive Design » d’autre part. Comme je l’ai fait précédemment pour HTML5/CSS3, je vous présente, dans cet article, mes commentaires sur le design « responsive ». Grille fluide ou Grille fixe? Le responsive design est basé sur trois composants une grille fluide,les média-queries (voir cet article pour en savoir plus),un contenu fluide (images, …). Les grilles fluides, c’est compliqué! Hors gérer une grille fluide reste plus difficile que de gérer une grille fixe. Je me suis donc posé la question: les notions de « design responsive », et de fluidité sont-elles réellement indissociables? Dans le premier cas, nous modifions les propriétés des styles, pour que la structure soit adaptée à la taille de l’affichage,Dans l’autre, les propriétés des styles ne changent pas, mais leurs valeurs permettent d’avoir une structure proportionnelle à l’affichage. Alors grille fixe?
Gridpak - Générateur de grille CSS "responsive" - Épinards & Caramel Gridpak - Générateur de grille CSS "responsive" Par Manu · Etiquette(s) : CSS Technos Web · J'ai peut-être enfin trouvé mon bonheur dans le monde des grilles CSS et du design "responsive" ! Une grille permet de placer facilement les différents éléments de votre mise en page, d'une façon plaisante et qui s'adapte à la largeur de l'écran de vos lecteurs. Une mise en page "responsive" signifie quant à elle que l'on définit différentes grilles selon la largeur du navigateur web. Gridpak (gridpak.com) est un outil en ligne qui permet de générer facilement la base d'une mise en page en grille & "responsive". Pour créer votre grille, vous utilisez les boutons "N° of columns", "column padding", et "gutter width" à votre guise. Une fois que vous avez configuré toutes vos grilles, vous pourrez télécharger le résultat en cliquant sur le bouton rouge en bas de page. Il ne reste plus qu'à créer votre style par-dessus ce qui a été généré, ce que je détaillerai plus tard. Manu
Responsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. Aujourd’hui, la multiplication des types de terminaux fait qu’il n’est plus possible de réfléchir de manière binaire (Si l’utilisateur n’est pas sur ordinateur de bureau, alors il est sur un téléphone portable). Une nouvelle tendance est née, celle de la conception adaptative (Responsive Design) . Le Responsive Design est plutôt un concept, une manière de concevoir les interfaces web. Les autres usages du « Responsive Design » E-mail adaptés Le principe est simple. L’approche Viewport Conclusion
Media Queries La tête dans le Flux ! Ayant été interrogé par Clubic, je fais une brève double apparition dans un article intitulé "Post PC : est-il temps d’adopter le Responsive Web Design ?" (en page 4). Le billet couvre différents domaines du Responsive Web Design (du référencement, des usages, des performances web, etc.) et on y trouve - forcément - quelques raccourcis et trolls latents, mais il est loin d’être mauvais :) Je suis juste un peu vexé qu’il n’ait conservé qu’environ 10% de mes réponses à ses questions, je ne m’y attendais pas du tout… EDIT (12 septembre 2013). Finalement, après réflexion, je publie ici l’interview complète - la face cachée de l’iceberg - parce que je pense que je ne disais pas que des bêtises… (Clubic) 1- Observez-vous une demande croissante de clients souhaitant des sites développés de manière “responsive” au sein de votre agence ? RG : Oui, de toute évidence. Ceci pour une raison simple : les périphériques mobiles sont de plus en plus nombreux et de plus en plus employés pour surfer.
media queries et performances web mobile Ce billet fait suite à mes expérimentations continues concernant la performance web pour les mobiles. J’en étais arrivé à un billet nommé “comment cibler les mobiles de manière optimales (bis) ?”. Voici la suite de mes élucubrations… Un point sur l’existant Il existe grosso-modo 6 méthodes d’application des CSS3 media queries : Une méthode pour les réunir toutes ? Plus j’y réfléchis, plus je suis persuadé qu’une solution intermédiaire est de distinguer 3 parties dans le fichier CSS : les styles de base, qui doivent être affichés sur tous les supports (pas de media query)les ressources lourdes, qui doivent être chargées uniquement sur écrans larges (via media queries)les styles et adaptations spécifiques pour petits écrans (via media queries) Grâce aux classes conditionnelles, nous pourrons également en faire profiter les anciennes versions d’Internet Explorer sans douleur. Voici un exemple concret :