background preloader

Definition / Presentation...

Facebook Twitter

Definition. Wikipedia. Un article de Wikipédia, l'encyclopédie libre.

Wikipedia

Dessin illustrant le principe du responsive design. Dessin illustrant le concept d'adaptive design. Principe[modifier | modifier le code] La notion de web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu'il ne s'agit plus de concevoir autant de parcours qu'il y a de familles de terminaux mais de concevoir une seule interface auto-adaptable. Ainsi, les sources d'information et les socles techniques ne sont pas dupliqués. Composants principaux[modifier | modifier le code] Un site web pensé sur le principe du RWD[2] utilise la technologie CSS3 media queries[3],[4], une extension de la règle @media[5] pour adapter la mise en page à l'environnement de consultation grâce à une grille fluide dans laquelle se disposent les différents contenus de la page[6].

Technique[modifier | modifier le code] Présent et Futur du RWD. Nous reproduisons avec l'aimable l'autorisation de l'auteure la traduction de cet article, conjointement sur Alsacréations et OpenWeb.

Présent et Futur du RWD

Après plusieurs mois de recherche sur le sujet, j'ai enfin publié mon article sur Smashing Magazine qui s'intitule "The State Of Responsive Web Design". Ce qui suit en est la traduction. Avertissement avant la lecture : Je n'ai pas la prétention de changer le monde, d'avoir la vérité absolue. Dans cet article – qui est long, je le sais – je souhaitais juste rendre attentif le lecteur au reste de ce gigantesque iceberg dont les Media Queries n'en sont que la surface.

Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd'hui appelé "Adaptive Webdesign". On entend parler de "Responsive Webdesign" depuis plusieurs années maintenant, et le sujet s'est vraiment démocratisé et popularisé en 2012. L'état des images dans le responsive webdesign Deux solutions du côté du code : l'élément <picture> et l'attribut srcset Conclusion. 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”.

Définition, fonctionnement, ressources et tutoriels

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. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus. Définition du responsive web design La mise en page.