30 didacticiels utiles sur la conception de sites Web adaptatifs
Nous avons donc atteint la fin de notre "Semaine du design Web réactif", Le post de ce soir sera le dernier de la série. Nous mettons tout en œuvre pour vous aider à perfectionner vos compétences en matière de manipulation de ces codes afin de répondre à volonté lorsqu'ils sont affichés sur différents appareils. Et pour ce faire, nous présentons 30 didacticiels de conception Web réactifs trouvé en ligne. Cette liste n’est pas exhaustive, mais elle vous aidera à comprendre les bases de la conception d’un site Web adaptatif adapté à toutes sortes de tailles d’écrans..
Nous commencerons par des tutoriels d'introduction à «Breaking the Ice», qui ressemblent à un cours RWD: 101 auquel vous devriez assister pour bien comprendre le concept avant de passer aux exercices «Démarrer la construction»..
Enfin, nous terminerons par une section "Faire plus" dans laquelle nous présenterons des tutoriels jouant avec les dispositions horizontales, les vidéos "élastiques", les menus déroulants et la navigation vers le haut des accordéons, les vignettes et le problème persistant des tableaux..
Mais d'abord…
Voici un récapitulatif des deux tutoriels présentés plus tôt cette semaine par nos auteurs:
Navigation de site Web sensible
Par Thoriq Firdaus - [Voir le tutoriel]
Voici un tutoriel pour vous aider à faire votre propre navigation sur le site responsive. L’un des aspects les plus importants d’un site Web est la facilité avec laquelle il est possible de naviguer dans ses différentes parties. Découvrez comment optimiser cela avec CSS3 avec ce tutoriel.
CV réactif
Par Jake Rocheleau - [Voir le tutoriel]
Si vous êtes un professionnel du Web et qu'un CV en ligne fait déjà partie intégrante de votre carrière, vous devriez en profiter pour le réactiver également. Rendez plus facile pour les employeurs et les clients de vous trouver sur n’importe quel appareil. Et pendant que vous y êtes, votre propre CV sert également de portefeuille de ce que vous pouvez faire en tant que développeur..
Briser la glace
Maintenant où nous étions Ah oui, commençons par briser la glace!
Guide du débutant pour la conception Web réactive
Par Nick Petit - [Voir le tutoriel]
Ce didacticiel est un excellent point de départ pour les débutants. Il décrit en quoi consiste la conception Web réactive, comment elle est apparue, ainsi que des explications sur les grilles fluides et les requêtes de médias, entre autres. Consultez également les ressources répertoriées au bas du didacticiel..
Introduction à la conception Web réactive: vidéo
Par Nick Petit - [Voir le tutoriel]
Il s’agit d’un didacticiel d’une durée de près de 9 minutes qui décrit en détail ce qu’est un web design responsive, son origine, son impact sur le design d’un site web et les éléments qui entrent en jeu pour produire un design web responsive. . Si vous cherchez à comprendre en quoi consiste la conception Web réactive sans passer au codage, commencez par cette vidéo..
Comment transformer n'importe quel site web en site responsive
Par Rochester Oliveira - [Voir le tutoriel]
Ceci est un autre tutoriel qui commence par les bases mais décompose tout, petit à petit, y compris le système d’exploitation et les navigateurs pour lesquels votre site Web est réactif, ainsi que les éléments affectés lorsque le site Web est visualisé depuis différents appareils. L’auteur a également présenté des plugins WordPress et jQuery utiles pour faciliter votre travail..
Conception sensible en 3 étapes
Par Nick La - [Voir le tutoriel]
Ce didacticiel expliquera comment créer une conception Web réactive avec des balises méta, une structure HTML et les requêtes multimédia essentielles. Vous avez besoin de connaissances en CSS pour le comprendre…
Concevoir pour un Web réactif
Par Max Luzuriaga - [Voir le tutoriel]
Voici un article qui n’est pas tant un didacticiel qu’un guide pour la création de sites Web réactifs. Cela dit, l'auteur vous dit littéralement ce qu'il faut faire et ne pas faire pour un design web réactif. Certaines explications expliquent pourquoi certaines fonctionnalités ne sont pas suffisamment réactives, comment utiliser des proportions et des modules et, mieux encore, elles sont relativement courtes et faciles à absorber..
Responsive Web Design: Un guide visuel
Par Andrew Gormley - [Voir le tutoriel]
Si les tutoriels contenant du texte ne sont pas des options viables, essayez plutôt ce tutoriel vidéo. C'est encore assez technique, mais si ça vous fait vous sentir mieux, vous n'avez pas à lire beaucoup. Il dure environ 25 minutes et le vidéaste avance rapidement dans les parties où il code, puis revient en arrière pour expliquer ce que font les codes..
Commencer la construction
Bon, commençons par construire des designs réactifs, en commençant par…
Grilles de fluide
Par Ethan Marcotte - [Voir le tutoriel]
Dites grille et vous pensez «structures rigides», dites fluide et pensez que cela pourrait couler d'un côté de l'écran vers le bas, le haut ou le côté lorsque vous appliquez une pression sur le navigateur, mais mettez ces deux ensemble en même temps. vous penserez probablement que vous devez consulter ce didacticiel pour bien comprendre en quoi des grilles fluides peuvent vous aider à rendre votre conception plus réactive..
Images fluides
Par Ethan Marcotte - [Voir le tutoriel]
À la fin de cet article, vous devriez savoir qui est Ethan Marcotte. Voici un indice: c'est lui qui a mis au point le concept et le terme de conceptions Web réactives. Son nom apparaîtra assez souvent dans tous les autres tutoriels de cette liste, alors pourquoi ne pas prendre conseil auprès du Maître lui-même concernant les images fluides?.
Modèles de navigation évolutifs dans la conception Web réactive
Par Michael Mesker - [Voir le tutoriel]
Ce tutoriel présente les leçons que l'auteur a tirées d'un projet de conception Web réactif à grande échelle. Lisez son «guide» sur la création de modèles plus faciles à configurer pour des résultats conviviaux et réactifs. C'est un bon aperçu des coulisses pour comprendre comment concevoir des interfaces de la meilleure façon possible pour les vues de bureau, de tablette et de mobile..
Conception Web réactive avec des requêtes multimédia CSS3
Par Nick La - [Voir le tutoriel]
Et un autre excellent tutoriel pour vous apprendre à concevoir un modèle de site Web réactif multi-navigateurs avec HTML5 et CSS3. C'est une approche étape par étape et il y a des démonstrations d'une conception Web avant et après la mise en œuvre des requêtes multimédia pour mieux apprécier l'impact des requêtes multimédia..
Effets CSS: espacez les images pour qu'elles correspondent à la hauteur du texte
Par Zoe Mickley Gillenwater - [Voir le tutoriel]
Ce tutoriel vous apprendra à faire en sorte que les images à largeur fixe changent de taille et d'espacement afin de s'aligner sur le texte qui les accompagne, quelle que soit la taille de la fenêtre du navigateur..
Mises en page adaptatives avec requêtes multimédia
Par Aaron Gustafson - [Voir le tutoriel]
Apprenez à utiliser des mises en page adaptatives ou flexibles avec des requêtes de média CSS. Il vous suffit de suivre l’exercice pour apprendre à adapter votre conception à une vue en colonne double ou simple, ainsi qu’à la préparation de la conception pour iPhone et iPad..
Images réactives: expérimenter avec le dimensionnement d'images sensible au contexte
Par Scott Jehl - [Voir le tutoriel]
Voici un tutoriel qui utilisait l’approche build-from-mobile-first. Cette technique spécifie une taille plus grande pour les images à utiliser sur des résolutions d’écran plus grandes, moins les demandes d’image, ainsi que le reniflement UA..
Faire plus
Vidéos élastiques
Par Nick La - [Voir le tutoriel]
Ce tutoriel traite de la mise à l'échelle des vidéos lorsque la fenêtre de votre navigateur est redimensionnée. C'est essentiellement une astuce CSS et il y a une démo pour voir l'astuce à l'œuvre dans le tutoriel lui-même.
Cacher et révéler des portions d'images
Par Zoe Mickley Gillenwater - [Voir le tutoriel]
Le tutoriel est en réalité tiré du livre de l'auteur, décrivant comment afficher ou masquer des parties d'images en fonction de la résolution de l'écran. Il vous apprend à rogner des images de façon dynamique lorsque la taille de l’écran change, pour ne vous montrer qu’une partie de l’image complète lorsque l’espace est limité..
Navigateur de contenu réactif avec CSS3
Par Mary Lou - [Voir le tutoriel]
Vous préférez un moyen plus sophistiqué pour les utilisateurs de naviguer autour de vous? Ensuite, vous devriez lire ce didacticiel pour apprendre à coder dans certaines transitions intéressantes: ouverture en fondu, diapositives, rotations et mise à l’échelle. Les transitions sont essentiellement des couches de contenu qui ont été affichées ou masquées avec un codage spécifique.
Créer un modèle de conception Web adaptatif
Par Harry Atkins - [Voir le tutoriel]
Ceci est un court tutoriel pour produire un responsive modèle web cela fonctionne aussi bien sur le bureau que sur l'iPhone.
Mise en page horizontale réactive
Par Mary Lou - [Voir le tutoriel]
Ce tutoriel vous apprend à créer une mise en page horizontale avec plusieurs panneaux de contenu déroulants. En utilisant L'origine des espèces Comme exemple de texte, chaque chapitre du livre est séparé en colonnes placées côte à côte en mode navigateur complet, mais lorsque réduit au minimum, la mise en page se transforme en un "livre" à défilement entièrement vertical..
Convertir un menu en un menu déroulant pour petits écrans
Par Chris Coyier - [Voir le tutoriel]
Ce didacticiel vous montrera comment convertir un menu en liste déroulante lorsque la fenêtre du navigateur est étroite ou lorsque vous êtes sur un appareil mobile. La rangée de liens dans le coin supérieur droit de la page est convertie en un menu déroulant pour économiser de l'espace sans sacrifier les options de navigation..
Accordéon flexible coulissant
Par Mary Lou - [Voir le tutoriel]
Apprenez à créer une disposition en accordéon simple et flexible, avec des transitions de fondu en entrée et des largeurs ajustables en fonction de la taille de l'écran et des résolutions.
Comment utiliser les requêtes de média d'orientation CSS3
Par Ryan Seddon - [Voir le tutoriel]
En vous basant sur la règle simple qui définit les modes portrait (hauteur supérieure à la largeur) et paysage (largeur supérieure à la hauteur), vous pouvez écrire une requête multimédia pour cibler des styles spécifiques en fonction du mode d'affichage. Ce tutoriel va nous montrer comment faire exactement cela et il est accompagné d'un lien vers un caméléon aux couleurs changeantes qui utilise la couleur pour illustrer ce changement lorsque vous réduisez la fenêtre du navigateur..
Tableaux de données réactifs
Par Chris Coyier - [Voir le tutoriel]
Les tableaux sont une source de maux de tête s’agissant des écrans de petite taille, mais cela ne signifie pas pour autant que nous devions les éviter complètement. Apprenez à utiliser les requêtes multimédia pour que votre table change complètement de format lorsque vous passez aux tailles d'écran mobiles. Regardez la démo pour avoir une idée de la magie que vous pouvez créer à partir de ce tutoriel..
Diaporama fluide CSS3 avec effet de parallaxe
Par Ring Wing - [Voir le tutoriel]
Créez un diaporama CSS3 dans lequel deux images d'arrière-plan sont utilisées et lorsque les positions des arrière-plans sont modifiées, un effet de parallaxe est visible. En dehors de cela, le diaporama est flexible et se redimensionne au fur et à mesure que la fenêtre du navigateur se ferme.
Comment construire une galerie de vignettes réactive
Par Joshua Johnson - [Voir le tutoriel]
C'est idéal pour les sites Web qui comportent des vignettes dans une galerie. Lorsque la fenêtre du navigateur est redimensionnée, la disposition est modifiée pour occuper entre deux colonnes (tailles d'écran plus petites) et cinq colonnes (maximum). Pour plus de diaporamas et de curseurs similaires, consultez notre article sur les 10 meilleures galeries d'images / diapositives réactives..
Optimiser votre courrier électronique pour les appareils mobiles
Par Ros Hodgekiss - [Voir le tutoriel]
Même les e-mails peuvent être optimisés pour un affichage sur un petit écran, comme le sont les sites Web. La plupart du temps, le texte d'un e-mail HTML est redimensionné à un point qui ne facilite pas la lecture. apprendre à gérer cela et plus de ce tutoriel.
en utilisant des cadres
Construire un site Web mobile convivial avec Skeleton
Par Joshua Johnson - [Voir le tutoriel]
Skeleton est un cadre génial pour créer des sites Web réactifs avec. Ce tutoriel explique pas à pas comment utiliser le framework Skeleton pour créer d’impressionnants designs réactifs. Vous serez étonné de voir à quel point il est facile à mettre en œuvre.
Conception Web réactive avec HTML5 & Less Framework 3
Par Louis Simoneau - [Voir le tutoriel]
Si vous n'avez pas été correctement initié à Less, consultez d'abord notre didacticiel Less CSS pour avoir un aperçu de Less. Dans ce tutoriel, le framework Less a été utilisé pour vous permettre de voir clairement les effets des requêtes de média..
Conclusion
Et cela conclut notre Site Web adaptatif séries. Nous espérons que les thèmes, outils et autres ressources présentés dans cette série ont permis d’exposer le concept de conception Web réactive à nos lecteurs. Mais comment saurions-nous si vous ne nous dites pas?
Faites-nous savoir vos commentaires sur la série et si vous avez des suggestions pour plus d’idées que vous voudriez voir sur hongkiat.com. Laissez-nous un commentaire ou un commentaire ci-dessous.
