Le résumé final de la conception Web
Le design réactif est le nouveau chouchou du monde du design web. Il semble qu’il ne se passe pas une semaine sans que de nouvelles ressources soient disponibles pour le faire, des avis sur la façon de le faire ou même de le faire du tout, et de nouveaux sites qui en font un bel usage.
Il peut rapidement devenir écrasant en essayant de suivre le rythme.
Ici, nous avons compilé une liste de plus de soixante-dix ressources pour créer des conceptions réactives.
Vous y trouverez des articles sur le design réactif et les théories, frameworks et modèles associés pour des mises en page réactives, des outils pour tester vos conceptions réactives, des techniques pour des images redimensionnables et bien plus encore.
Pour couronner le tout, nous avons rassemblé une centaine des meilleurs designs réactifs pour vous inspirer et vous donner des idées concrètes.
Articles et publications
Vous trouverez ci-dessous un certain nombre d’articles de qualité sur le design réactif et les techniques utilisées. Certains peuvent inclure quelques extraits de code ou d'autres informations techniques, mais pour la plupart, il s'agit de discussions au niveau conceptuel.
Site Web adaptatif
C'est le poste d'origine par Ethan Marcotte qui a été posté sur A List Apart. Il aborde le raisonnement et les principes qui sous-tendent le design réactif, ainsi que des techniques pratiques pour créer des sites réactifs.
Livre de conception Web réactif
Site Web adaptatif par Ethan Marcotte, publié par A Book Apart, traite de l'état du Web réactif, des grilles flexibles, des images flexibles, des requêtes médiatiques et de la création de designs réactifs.
Les aspects pratiques des requêtes médias CSS, leçons apprises
Ce poster , de Bloop, offre un aperçu fantastique de la manière d’utiliser les requêtes médias (et de leurs avantages et inconvénients par rapport à la création d’un site mobile dédié), ainsi que des conseils utiles pour les mettre en œuvre. Certains extraits de code utiles sont également inclus.
Big vs Small: les défis de la conception Web réactive
Ce article discute de certains des défis que la conception Web réactive peut présenter, y compris les considérations uniques requises au fur et à mesure que la taille des écrans de bureau continue de croître, alors que de nombreux utilisateurs accèdent désormais davantage au Web sur des tablettes ou des smartphones.
Guide du débutant sur la conception Web réactive
Ce Guide du débutant de Think Vitamin offre une excellente introduction au design réactif, y compris des informations sur les grilles de fluides et les requêtes médiatiques.
Conception Web réactive: qu'est-ce que c'est et comment l'utiliser
Cette introduction au design réactif de Smashing Magazine est une excellente introduction sur le sujet. Il couvre le concept de base, tel que décrit par Ethan Marcotte, ainsi que des préoccupations pratiques pour la création de designs réactifs. Des exemples de code sont également inclus.
Réactif par défaut
Ce article Andy Hume explique pourquoi le Web est réactif par défaut et que les concepteurs l’ont obligé à ne pas réagir pendant des années. C'est une idée intéressante, discutée principalement du point de vue d'un développeur.
Chorégraphie de contenu
Nous parlons souvent de conception réactive uniquement du point de vue technique, mais le but de la conception réactive est d'améliorer l'expérience de contenu. Ce poster de Trent Walton parle de cela, comment l’empilement de contenu n’est pas toujours la meilleure solution et ce qui peut être fait à la place.
Comprendre les éléments de la conception Web réactive
Ce post de Six révisions couvre les bases du design réactif: grille flexible, images flexibles et requêtes multimédia.
Un bref aperçu du design réactif
Voici un autre grand résumé de ce qu'est le responsive design et comment y parvenir, cette fois-ci à partir de 1er concepteur Web .
Responsive Web Design a créé des opportunités dans tous les domaines
Ce poster couvre certaines des opportunités offertes par le design réactif aux concepteurs et aux développeurs.
Concevoir pour un site Web réactif
Ce article de Webdesigntuts + discute du design réactif en termes de grille de fluides, d'images fluides et de requêtes média.
Expérimenter avec la conception Web réactive
Ce article Lee Munroe donne un aperçu simple du design réactif, en particulier des questions relatives aux médias, ainsi que des exemples.
CSS3 Media Queries
Mur Web Designer Cet article présente un aperçu complet des extraits de code de requête multimédia, des exemples de conception réactive et bien plus encore.
20 exemples étonnants d'utilisation de requêtes multimédia pour une conception Web réactive
Ce post de Cabane Design offre d'excellents exemples de design réactif, ainsi que de nombreuses informations sur la façon de créer vos propres sites réactifs.
Le contexte
Ce poster d'Adactio couvre une partie de la confusion qui entoure souvent le design réactif, en le décomposant en termes simples et en offrant des informations utiles.
Une toile plus riche
Cet article de Mark Boulton présente certains des avantages que la conception adaptative, CSS3 et d'autres outils offrent aux concepteurs et aux créateurs de contenu, en particulier le fait que nous devrions concevoir du contenu plutôt que l'inverse.
Quelques réflexions sur la conception Web et les requêtes médias réactives
Ce poster Jon Phillips discute des inconvénients potentiels de la conception adaptative et, plus important encore, propose des solutions intéressantes.
Conception Web réactive et contexte mobile
Ce poster explique comment les appareils mobiles sont utilisés pour parcourir le contenu Web et comment cela peut affecter vos choix de conception réactifs.
La nouvelle pile de conception frontale: le rôle du design réactif
Ce post de Acquia discute de l'importance du design réactif, offre quelques excellents exemples, les éléments techniques qui entrent dans la création de designs réactifs, et plus encore.
Conception Web réactive du futur
Conception Web réactive du futur est une présentation de Kyle Neath qui traite de l'avenir du design web en relation avec les principes de conception réactifs.
To Hell With Bad Devices: Conception Web réactive et normes Web
C'est un regard approfondi sur le design réactif , discuter de la conception spécifique au périphérique, de la conception réactive des applications, etc.
Les avantages et inconvénients de la conception Web réactive
Beaucoup d'articles discutent de la façon de créer un design réactif, mais pas que beaucoup discutent des points positifs et négatifs des conceptions réactives. La pam fait juste cela, en donnant une liste assez complète des points positifs et négatifs associés.
11 raisons pour lesquelles la conception Web réactive n'est pas si cool
Ce post de WebDesignShock présente certains des défis et problèmes potentiels que la conception adaptative peut présenter.
Des tutoriels
Les didacticiels ci-dessous vous renseigneront sur les requêtes médias CSS et autres techniques de conception réactives.
Astuce: un cours intensif sur les requêtes médias CSS
Ce Nettuts + tutoriel propose quelques bases pour travailler avec les requêtes multimédia, avec un didacticiel vidéo et des extraits de code.
Dispositions adaptatives avec des requêtes média
Ce Didacticiel à partir de .Net Magazine offre un aperçu des techniques de base des requêtes CSS3. Il comprend de nombreux extraits de code et des informations pratiques sur la création de vos propres mises en page réactives.
Conception Web réactive: un guide visuel
Ce didacticiel vidéo Tuts + offre une excellente introduction à la conception responsive, avec des exemples. Il explique ensuite comment créer votre propre design réactif, en tenant compte à la fois des aspects visuels et techniques.
CSS Media Queries et utilisation de l'espace disponible
Ce post de Astuces CSS explique le concept d'utilisation des requêtes multimédia pour tirer parti de l'espace disponible dans la fenêtre du navigateur. Il comprend de nombreux extraits de code utiles et des exemples.
Travailler avec des requêtes multimédia
Voici un court Didacticiel pour travailler avec des requêtes multimédias, avec de nombreux exemples de code. C'est simple et à la pointe, mais une introduction parfaite aux questions de base sur les médias.
Comment utiliser les requêtes de support d'orientation CSS3
Les requêtes multimédias sont idéales pour ajuster la manière dont votre conception adaptative s’affiche sur différentes tailles de navigateur, mais de nombreux concepteurs négligent contrôles d'orientation . Celles-ci vous permettent de modifier la manière dont votre site est affiché en fonction de l'orientation actuelle d'un périphérique vers le mode portrait ou paysage, ce qui est utile à la fois pour les smartphones et les tablettes.
Optimisation de votre messagerie pour les appareils mobiles avec la requête @media
Nous négligeons souvent les newsletters HTML lorsque nous pensons à un design réactif, mais compte tenu du nombre de personnes susceptibles de consulter vos emails HTML sur leur téléphone, il est judicieux d'utiliser les requêtes média dans ce cas. Ce post de Moniteur de campagne explique comment ça se passe.
Comment utiliser les requêtes de médias CSS3 pour créer une version mobile de votre site Web
Ce post de Smashing Magazine explique comment utiliser des requêtes multimédias pour créer un site mobile ou lier des feuilles de style distinctes.
Conception adaptative et réactive avec les requêtes médias CSS3
Ce post fantastique de Mur Web Designer comprend un modèle de conception responsive, ainsi qu'un didacticiel sur la création du modèle. C'est une excellente ressource pour ceux qui aiment apprendre de nouvelles techniques en disséquant des projets terminés.
Conception Web réactive avec HTML5 et le moins structuré 3
Cet article de SitePoint offre des instructions complètes pour créer un design réactif en utilisant HTML5 et Less Framework. Il comprend tout le code dont vous avez besoin pour la conception finale, ainsi qu'une bonne ventilation de ce que fait ce code.
Outils et techniques
Les techniques et outils ci-dessous facilitent la création de conceptions répondant à vos attentes. Beaucoup sont destinées au traitement des images (sans doute l'un des aspects les plus difficiles du design réactif), mais il y en a d'autres également.
Effet CSS: espacement des images pour correspondre à la hauteur du texte
En fonction de votre mise en page, il se peut que vous ayez besoin de texte pour s’aligner correctement sur les images, quelle que soit l’espacement des images et du texte. Ce technique de Zomigi vous montre comment faire exactement cela.
Cacher et révéler des portions d'images
Le redimensionnement des images ne peut que vous amener jusqu'à présent avec des conceptions réactives dans certains cas. Parfois, il est plus important qu'une partie particulière d'une image soit visible ou lisible que pour l'image entière à afficher. C'est là que cette technique de Zomigi peut être utile. Il est possible de recadrer dynamiquement les images d'arrière-plan et de premier plan à mesure que la largeur de votre disposition change.
Création d'images composites coulissantes
Cette technique, issue de Zomigi, vous permet de créer une image qui semble unique, mais qui est en réalité constituée de plusieurs images superposées. De cette façon, vous pouvez contrôler l'emplacement exact des différents éléments de l'image lorsque la fenêtre de votre navigateur change de taille et de forme.
Grille de photos adaptative transparente
Ce Galerie de CSS-Tricks propose une grille photo transparente qui redimensionne automatiquement vos images et la grille globale pour s'adapter à la fenêtre de votre navigateur.
Tableaux de données réactifs
Les techniques de conception réactives ne sont pas très conviviales pour les tableaux de données. Il est facile de se retrouver avec des tables où le type est si petit qu'il est impossible de lire. Ou vous pouvez spécifier une largeur minimum, mais cela va à l'encontre du but d'un design réactif. Ce technique de CSS-Tricks offre une solution pour afficher en réponse des données tabulaires sur un appareil mobile.
Images de premier plan à l'échelle avec la mise en page
Il est donc assez facile de créer des images d'arrière-plan à l'échelle, mais les images de premier plan sont un peu plus délicates. Cet article traite d'une technique de Zomigi pour créer des images de premier plan dans votre contenu qui s'adapteront à votre mise en page.
FitText
FitText est un plugin jQuery pour redimensionner le texte des titres dans vos designs responsive. En utilisant ceci, votre texte remplira toujours la largeur de l'élément parent.
Sencha.io Src
Sencha.io Src est un service d'hébergement d'images qui redimensionne vos images à la taille appropriée pour le périphérique qui les demande. Les images sont également optimisées pour une livraison répétée efficace.
L'approche de Goldilocks pour un design réactif
Cet article de Chris Armstrong parle de la " Approche Goldilocks "Pour créer des designs réactifs qui sont" juste "pour tout appareil.
Images réactives
Images réactives est une expérience dans les premières images mobiles qui s'adapte à votre conception. L'idée est de fournir des tailles d'image contextuelles optimisées dans des mises en page réactives.
Lettering.js
Lettering.js est un plug-in jQuery qui vous permet de contrôler avec précision la manière dont votre typographie Web apparaît, ce qui peut vous aider à maintenir la lisibilité dans un design réactif.
Images fluides
Ce technique Ethan Marcotte crée des images de largeur de fluide pour vos conceptions fluides. Il fonctionne également pour les vidéos intégrées, et il existe une solution de contournement pour la compatibilité avec IE.
Répondre
Répondre est un script polyfill léger pour les requêtes de média CSS3 de largeur min / max, pour les faire fonctionner dans Internet Explorer 6-8. C'est seulement 3kb minifié, ou 1kb gzippé.
Modernizr
Modernizr est une boîte à outils pour HTML5 et CSS3 qui fournit une détection de fonctions basée sur JavaScript combinée à des requêtes multimédias.
Feuilles de croquis pour la conception Web réactive
Si vous filmez vos dessins sur papier, vous les trouverez Feuilles de croquis pour la conception Web réactive être très utile. Vous pouvez télécharger gratuitement plusieurs mises en page, chacune affichant une poignée de fenêtres de périphériques.
Cadres et Chaudronnerie
Les cadres et les passe-partout peuvent grandement accélérer votre processus de conception. La bonne nouvelle est qu'il existe déjà des tonnes de modèles et de frameworks pour créer des designs réactifs.
Système de grille d'or
le Système de grille d'or utilise un design de base à 16 colonnes pour les moniteurs à écran large. Sur les tablettes, les colonnes se plient en une disposition de 8 colonnes. Et sur des écrans de smartphone plus petits, les colonnes se replient à 4 colonnes, ce qui permet au design de s'adapter à tout, d'un écran large de 2560 pixels à un écran de 240 pixels.
Le système de grille sémantique
Le système de grille sémantique permet des configurations fluides et des conceptions réactives, tout en utilisant un balisage sémantique (qui fait cruellement défaut dans la plupart des frameworks de grille).
Sans grille
Sans grille est un passe-temps HTML5 et CSS3 pour la création de sites Web adaptés aux besoins des utilisateurs mobiles. Il ne comprend aucun système de grille prédéfini et aucune classe non sémantique.
Moins de cadre 4
le Moins de cadre est un système de grille CSS pour la conception de sites réactifs qui s'adaptent à la taille de la fenêtre du navigateur. Il comporte quatre dispositions: par défaut (pour les ordinateurs de bureau et les tablettes en mode paysage), la disposition de la tablette, la présentation mobile large et la présentation mobile. C'est une bonne option pour les concepteurs qui veulent un design réactif mais qui ne veulent pas nécessairement des colonnes fluides.
Responsive Twenty Ten
Responsive Twenty Ten est basé sur le thème WordPress Twenty Ten. Un plugin est également disponible pour transformer votre thème enfant Twenty Ten en un design réactif.
Colonne
Colonne est un système de grille CSS qui est un "remix" de certaines autres grilles, avec un code personnalisé ajouté. La base de la grille élastique est extraite de cssgrid.net, tandis que les autres parties du code sont extraites de 960.g.
1140 CSS Grid
le Système de grille CSS 1140 est une grille souple et fluide qui sera réorganisée en fonction de la fenêtre du navigateur. Il est conçu pour s'adapter parfaitement à un moniteur de 1280 pixels de large, mais devient fluide au-dessous de cela.
320 et plus
320 et plus utilise le principe du premier mobile pour empêcher les appareils mobiles de télécharger des ressources de bureau. C'est une alternative à commencer avec une version de bureau et à réduire.
Squelette
Squelette est un boilterplate pour des conceptions réactives et mobiles. Il commence par la grille 960 mais se réduit pour les écrans plus petits et est conçu pour être rapide à la fois avec un style indépendant.
Système de grille de fluide
le Système de grille de fluide est basé sur une grille de six colonnes et dispose de 720 possibilités de mise en page différentes. En raison de sa simplicité, il se dégrade bien dans les navigateurs plus anciens.
Système de grille Fluid 960
le Système de grille Fluid 960 est basé sur 960.gs, mais a une disposition fluide quelle que soit la taille du navigateur.
Foldy960
Foldy960 est une version réactive de 960.gs. Il se compose de quelques classes supplémentaires et d'autres choses pour transformer un design 960.gs en un design réactif.
SimpleGrid
SimpleGrid est un autre cadre de grille réactif qui prend en charge l’imbrication infinie. Il est configuré pour des écrans de quatre tailles différentes, dont 1235px et 720px.
Outils de test
Ces outils facilitent grandement le test de vos conceptions réactives sans avoir à utiliser un tas de périphériques différents.
redimensionner mon navigateur
redimensionner mon navigateur est un outil de test utile pour les conceptions réactives. Il suffit de cliquer sur l'un des boutons de taille de navigateur prédéfinis et votre navigateur redimensionnera. Chaque taille porte le nom d'au moins un périphérique qui utilise cette résolution.
responsivepx
responsivepx est un outil de test de navigateur qui vous permet d'entrer une URL (locale ou en ligne), puis d'ajuster la hauteur et la largeur de la fenêtre du navigateur pour voir les largeurs de points d'arrêt exactes en pixels.
Test de conception réactif
Matt Kersley a créé cet outil de test de navigateur qui vous permet de voir exactement comment votre site s’affiche à des largeurs de navigateur communes, à partir de 240 pixels jusqu’à 1024 pixels.
Mouche
Mouche vous montre comment un site Web regardera différents appareils, y compris les téléviseurs compatibles Internet et les appareils mobiles.
Adobe Device Central
Un certain nombre de produits Adobe Creative Suite sont livrés avec Device Central , qui peut être un outil très précieux pour tester vos conceptions réactives. Il vous permet non seulement de prévisualiser, mais également de tester vos conceptions sur le périphérique de votre choix.
Exemples
Vous trouverez ci-dessous 100 exemples de conceptions réactives fantastiques. Il y a beaucoup plus de sites utilisant cette technique, et de nouveaux sites sont lancés chaque jour. Une excellente ressource pour trouver de nouveaux sites est Requêtes médias , une galerie dédiée spécifiquement aux sites utilisant des techniques de conception réactive.
Profi Span
Présidents oubliés
Ben Handzo
Aaron Shekey
L'autoroute des ouragans
dConstruct 2011
Merlin Ord & Media
Le bit heureux
Aïeux
Easy Readers: Web Design adaptatif
Plus de dangers Plus de héros
Facts Regula
Bonjour, je m'appelle Andrew
Tamis
FoodDrinkEurope
La société évidente
Geek dans le parc
Mapalong
JCHELBY
10K à part
Exposition
Sens de la nourriture
Nouvelles conférences sur la conception de sites Web
Cisco London 2012
Team PAWS Chicago
Diablo Media
Andersson-Wise Architects
Concevoir avec des données
Full Frontal 2011
Web Design Yorkshire
Winnie Lim
Urban Svensson
Luke Williams
Upperdog
Écrivain
Norme de Toronto
Professionnalisme Design
Composition à impact
Modernizr
Johan Brook
Conception de la poussière et des moisissures
Gridchin
Staffanstorp
El Sendero del Cacao
Dustin Senos
Kisko Labs
51bits
digitalhappy
Patrick Grady
Trent Walton
Changement de tête
Owltastic
WeeNudge
Entraînement physique des cendres
Mark Boulton
Le gentilhomme moderne
Construire la guilde
Faire des conférences
David Hughes
320 et plus
About.com
Vraiment simple
Splendide
Leica Explorer
Spigot Design
Cohenspire
Jason Weaver
Joni Korpi
iwantedrock.com
Converge SE
Pelican Fly
Bits simples
Architectes d'Information
Andy Croll
Hicks Design
