19 tutoriels de conception Web réactifs vraiment utiles
La conception Web réactive n'est plus facultative; les sites doivent simplement être réactifs de nos jours. Heureusement, RWD est plus facile que jamais à mettre en œuvre car il existe de nombreux outils formidables pour vous aider à créer et tester vos conceptions et vous assurer de créer le meilleur expérience utilisateur .
Voici notre tour d'horizon de certaines des meilleures ressources qui vous aideront à faire en sorte que vos sites Web fonctionnent bien et aient une belle apparence sur n'importe quel appareil. Vous voulez des ressources plus utiles? Nos guides du meilleur Générateur de site Web et hébergement Web service sont là pour vous aider. Et si vous souhaitez stocker des fichiers en toute sécurité, vous avez besoin de ces stockage en ligne options.
01. Comment commencer à penser de manière réactive
Dans cet article sur FreeCodeCamp , Kevin Powell souligne le fait que la conception de sites Web réactifs n'est plus une tendance; c'est la façon dont les sites sont censés être construits, et cela signifie penser de manière réactive dès le départ. Ici, il montre comment entrer dans un état d'esprit réactif, tout en créant un site Web de 3 pages entièrement réactif.
02. 9 conseils typographiques réactifs
La conception Web réactive, naturellement, a besoin d'une typographie réactive pour l'accompagner. Mais qu'est-ce que cela signifie même et comment le mettez-vous en œuvre? Nous avons demandé à sept concepteurs Web de premier plan pour leurs conseils sur la création de texte élégant et lisible dans chaque fenêtre.
03. Les règles de la typographie Web réactive
La typographie Web réactive est difficile - vous devez avoir à la fois des compétences en conception et un savoir-faire technique. Mais aussi délicat que cela puisse être, se tromper n'est pas une option, car la typographie est la pierre angulaire de la conception Web. Suivre ces principes de conception et solutions pratiques pour bien faire les choses.
04. Concevoir un site réactif avec un dimensionnement basé sur EM
En utilisant des unités em pour le dimensionnement de la police, vous pouvez concevoir des composants sur la page qui répondent automatiquement en cas de changement de taille de police. Ensuite, avec une astuce intelligente pour une taille de police réactive, vous pouvez produire une page entière qui s'ajuste dynamiquement en fonction de la largeur de la fenêtre d'affichage du navigateur. Suivez ce tutoriel pour apprendre à tirer parti du comportement «relatif» des ems pour créer des conceptions évolutives et réactives.
05. Guides de priorité: une alternative au contenu d'abord aux wireframes
Les wireframes sont peut-être l'outil le plus utilisé pour la conception de sites Web, d'applications et d'autres interfaces numériques, mais ils ne sont pas sans inconvénients, en particulier en matière de conception réactive. Ici, Heleen van Nues et Lennart Overkamp présentent leur alternative préférée aux wireframes: guides prioritaires , qui contiennent du contenu et des éléments pour un écran mobile, triés par hiérarchie de haut en bas et sans spécifications de mise en page.
06. Le guide du pro pour la conception Web réactive
Écrit par Justin Avery , commissaire de la newsletter hebdomadaire Responsive Design, ce guide de net magazine emmène les professionnels du Web à travers les bases jusqu'aux techniques de conception Web réactive les plus avancées.
07. Comment concevoir des formulaires réactifs et indépendants de l'appareil
Les formulaires sont l'un des éléments les plus importants de toute conception de produit numérique, et que vous ayez besoin d'un flux d'inscription ou d'un stepper à vues multiples, vous devez le concevoir de manière à ce qu'il fonctionne efficacement sur les appareils mobiles ainsi que sur le bureau. Voici comment faire , avec des conseils utiles sur l'utilisation de Flexbox.
08. Créez une mise en page réactive avec CSS Grid
CSS Grid Layout prend de plus en plus en charge les navigateurs chaque jour, et bien que ce ne soit pas un remplacement pour Flexbox ou même pour les flotteurs, lorsqu'il est utilisé en combinaison avec eux, c'est un excellent moyen de créer de nouvelles mises en page réactives passionnantes. Suivez ce guide étape par étape pour créer un site de portefeuille réactif à l'aide de Grid.
09. Le guide du concepteur Web sur Flexbox
Avez-vous déjà commencé à utiliser Flexbox? Dans ce didacticiel, Wes Bos fournit un guide complet aux concepts de base qui vous donneront une solide compréhension de tout ce dont vous avez besoin pour maîtriser cet outil puissant.
10. Référence Codrops Flexbox
Ce guide complet de Flexbox est écrit par Sara Soueidan, une auteure réputée pour sa capacité à expliquer les concepts d'une manière facile à suivre sans lésiner sur les détails. Le guide Codrops est régulièrement mis à jour, c'est donc une excellente ressource à consulter lorsque vous en avez besoin.
11. Piles: Flexbox pour Sketch
Les piles, qui font partie du plugin Auto Layout, vous permettent d'utiliser la technologie Flexbox dans Sketch, sans utiliser de CSS. Cet article explique comment vous pouvez utiliser cette technique puissante pour un design réactif facile.
12. Un cours intensif en RWD technique
Écrivant sur le blog Treehouse, Jerry Cao a condensé de nombreuses informations utiles dans un article relativement court et lisible.
13. Créez des mises en page flexibles avec Susy et Breakpoint
Si vous ne souhaitez pas utiliser de framework pour créer votre site réactif, ces extensions Sass sont une belle alternative, chacun avec ses propres atouts. Ils se chargeront des mathématiques réactives pour vous afin que vous puissiez vous concentrer sur la conception.
14. Comment créer des guides réactifs dans Adobe XD
Si vous avez envie d'essayer Adobe Experience Design (XD) , voici un bon tutoriel pour vous aider à démarrer. Il comprend une démonstration vidéo qui vous guide à travers chaque clic du processus.
15. CSS chez BBC Sport
Ce n'est pas un tutoriel en soi, mais il y a beaucoup à apprendre ici. Dans ce post , le premier d'une série en deux parties, le développeur frontend Shaun Bent nous emmène dans une visite détaillée de la façon dont le CSS est fait à BBC Sport. Ils ont réussi à maintenir la base CSS de ce site massif sous 9 Ko, et il est fascinant de voir comment cela a été fait.
16. Pied de page collant, cinq façons
Pied de page collant ... cela devrait être assez simple, non? Malheureusement non. Il peut être plus difficile que vous ne le pensez de placer ce pied de page au bon endroit sur chaque appareil. Heureusement, Chris Coyier a mis en place cinq astuces qui vous aidera à y arriver en utilisant calc () , Flexbox, marges négatives et Grille.
17. S'adapter à l'entrée
La conception réactive ne consiste pas seulement à faire afficher correctement votre page sur n'importe quel appareil, vous devez également la faire fonctionner correctement - et cela signifie qu'elle doit être efficace pour accepter les entrées dans un monde où les ordinateurs de bureau ont des écrans tactiles et les téléphones ont des claviers. Cet article par Jason Grigsby de Cloud Four a quelques conseils judicieux.
18. Nos meilleures pratiques détruisent les performances du Web mobile
Appliquées sans considération, certaines bonnes pratiques conçues à l'ère des ordinateurs de bureau peuvent avoir un effet néfaste sur les performances du Web mobile. Cet article vous fera réfléchir plus profondément à la façon dont vous faites fonctionner votre site sur mobile.
19. Comment créer des applications Web réactives avec des requêtes de conteneur
Apprenez à transformer une application Web belle et complexe - avec des composants, des états et des interactions - à travers différentes dimensions et résolutions, utilisation de la requête de conteneur .
Articles Liés:
- Créez des formulaires et des tableaux réactifs
- Comment la conception Web réactive a changé le monde
- 7 outils de conception Web révolutionnaires pour 2018
