background preloader

Responsive web design & media queries

Facebook Twitter

Définition. 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. 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 La typo. Le responsive web design ou comment améliorer l’expérience utilisateur. Avec la multiplication du nombre de supports permettant de surfer sur le web, la question de l'ergonomie des sites internet peu importe le navigateur et le type d'appareil utilisé est au cœur des préoccupations actuelles. Le responsive web design est pour beaucoup la solution miracle pour universaliser un site web. Décryptage de cette évolution attrayante du Web ! Le responsive design, définition et enjeux Les usages web ont fortement évolué depuis plusieurs années. Concrètement, comment ça marche ? Le responsive design repose sur trois composants clés :Des requêtes de média (media queries) : il s’agit de critères en CSS3 qui permettent d’adapter dynamiquement le design en fonction des caractéristiques de chaque support utilisé et de la taille d’écran correspondante.Des grilles fluides : il s’agit de concevoir une interface composée de blocs en unités relatives, cette conception modulaire permet de jouer sur la composition de la page en fonction de la largeur de l’écran.

Exemples. Responsive Webdesign : 30 exemples de sites web adaptables. Le responsive webdesign continue son chemin sur la toile et commence à devenir de plus en plus présent au coeur des interfaces web. Le responsive webdesign Petit rappel sur la notion du web responsive : La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...) source : Aujourd'hui le responsive et les Medias Queries sont une réponse aux enjeux que le web connaît actuellement avec la progression des mobiles et des tablettes qui ont fait évoluer notre manière de concevoir un site web. Si vous êtes intéressé par le web design responsive, je vous conseille la lecture du très bon livre Responsive Webdesign par Ethan Marcotte qui permet une approche efficace et une mise en pratique du responsive.

Shawn Johnston CSS-Tricks. Media Queries. Création de site internet Brest dans le Finistère, communication visuelle et création de site. Outils. Bootstrap. Responsinator.