50 outils fantastiques pour une conception Web réactive

Auteur: Monica Porter
Date De Création: 17 Mars 2021
Date De Mise À Jour: 17 Peut 2024
Anonim
How to Make a Coloring Book with FREE Art - KDP Self Publishing
Vidéo: How to Make a Coloring Book with FREE Art - KDP Self Publishing

Contenu

Comme introduit / inventé par Ethan Marcotte à la fois dans son article "Responsive Web Design" ainsi que dans son best-seller, il faut trois éléments pour rendre un site responsive:

  1. Une grille flexible / fluide
  2. Images réactives
  3. Requêtes médias

Il existe de nombreux autres articles intéressants qui couvrent les motivations, les concepts et les techniques de la conception Web réactive. Nous allons donc nous concentrer dans cet article sur certains des principaux outils qui vous aideront à devenir responsable de manière responsable.

Outils pour débuter

Avant de commencer à créer votre site, il est préférable d'esquisser comment les éléments de la page s'adapteront pour s'adapter aux différentes tailles de navigateur des différents appareils sur lesquels ils seront visualisés, et pour éviter la déconnexion qui vient souvent de penser principalement la conception du bureau et le reste des itérations réactives après coup (voir en particulier le commentaire de Stephanie (Sullivan) Rewis).

01. Feuilles de croquis de conception Web adaptative

Cet ensemble de feuilles de croquis réactives, par Jeremy P Alford, est un excellent point de départ pour commencer à cartographier comment les sections de page se déplaceront dans différentes résolutions.


02. Cahier de croquis Responsive Design

Si vous préférez conserver tous vos croquis au même endroit, vous pouvez envisager ce livre relié de 50 feuilles de croquis réactives de la société App Sketchbook.

03. Wireframes réactifs

L'une des difficultés de la création de sites Web réactifs consiste à utiliser des wireframes pour montrer comment la conception réactive fonctionnera. James Mellers d'Adobe a mis au point cet outil expérimental pour montrer comment le wireframing réactif de mises en page complexes peut fonctionner.


04. Modèles de disposition multi-périphériques

Lors de la planification d'un design réactif, il est utile de voir comment d'autres personnes l'ont abordé avant vous, c'est pourquoi les modèles de disposition multi-périphériques de Luke Wroblewski, qui répertorie les modèles populaires avec des liens vers des exemples, sont un excellent point de départ.

05. Carreaux de style

Style Tiles de Samanatha Warren propose une nouvelle technique de design à l'ère de la réactivité; plutôt que des maquettes de conception à largeur fixe, ce sont comme des échantillons ou des moodboards qui montrent l'approche de conception générale sans entrer dans les détails granulaires.

Outils pour une grille flexible / fluide

Comme indiqué précédemment, le premier composant nécessaire pour une conception réactive est une grille flexible / fluide.Les éléments suivants sont déjà prédéfinis: il vous suffit de les télécharger et vous serez rapidement sur la voie d'un site plus réactif.


06. Système Golden Grid

Joni Korpi, qui a également développé Less Framework, a récemment publié cette nouvelle version d'un système de grille fiable pour une conception réactive. Considéré comme "pliable" car il s'adapte facilement de 16, à huit, à quatre colonnes, le système Golden Grid dispose également d'une petite superposition de navigateur qui expose la grille sur vos pages pour les tests.

07. Foldy960

Les hommes talentueux de Paravel, Inc. ont publié la grille 960.gs modifiée qu'ils utilisent comme base pour leurs projets réactifs.

08. SimpleGrid

SimpleGrid, de Conor Muirhead, a été conçu avec une réactivité intégrée, il est donc facile de démarrer avec votre projet de site Web réactif.

09. La grille CSS 1140px

Un autre excellent système de grille réactif est le 1140px CSS Grid par le concepteur de Melbourne Andy Taylor, qui va d'une large résolution de bureau à mobile.

10. Système de grille CSS en colonnes

Le système de grille en colonnes, créé par Pulp + Pixels, alias directeur créatif Nick Gorsline, est basé sur le système de grille 1140px, mais avec quelques avantages supplémentaires tels qu'un kit de conception avec des feuilles de croquis et des modèles de wireframing, ainsi que des styles de débogage CSS.

11. Système de grille sémantique

Les extensions CSS prétraitées telles que Sass et LESS sont de plus en plus populaires, et le système de grille sémantique de Tyler Tate les utilise au maximum dans ce système de grille qui prétend n'utiliser aucune classe ou élément inutile. En savoir plus sur coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Comme le système de grille sémantique, SUSY d'Oddbird a créé un système de grille qui n'utilise pas de balisage supplémentaire ni de classes spéciales, mais SUSY est destiné uniquement aux utilisateurs de Sass (et de son extension, Compass).

13. Gridpak

Gridpak, par Erskine Design, est l'un des plus récents générateurs de réseau réactifs. Il vous permet de définir vos colonnes et vos gouttières à un certain nombre de points d'arrêt, puis génère des fichiers CSS, JavaScript et PNG afin que toute votre équipe travaille à partir du même point de départ.

14. Gridset

Il y a encore un léger air de mystère sur Gridset car, au moment où j'écris ceci, il n'a pas encore été publié. Mais l'outil de Mark Boulton Design promet des systèmes de grilles sur mesure, non normatifs et un moyen de sauvegarder et de gérer vos grilles en ligne.

15. Une meilleure grille Photoshop pour RWD

Elliot Jay Stocks propose d'abandonner l'ancien standard de grille de facto 960px et de travailler à partir d'une base de 1000px à la place, ce qui rend tous les calculs de pourcentage plus faciles à travailler. Si vous êtes d'accord, il a créé un PSD pour que vous puissiez commencer à travailler.

16. Grilles de fluides

Si votre conception est hautement spécialisée et que vous avez besoin de créer votre propre grille personnalisée, vous pouvez le faire avec le brillant calculateur de grille fluide Harry Roberts, nominé pour le nouveau venu .net Awards.

17. Calculatrice réactive

Un autre calculateur de pixels en pourcentages, mais celui de Stu Robson va plus loin que les autres en générant toutes les règles CSS pour vous, ce qui signifie que vous pouvez simplement les copier et les coller dans vos feuilles de style.

Outils pour les images réactives (et le texte)

Les images fluides sont un autre élément crucial de la conception Web réactive. Bien que la technique pour obtenir des images fluides soit simple, l'optimisation des performances et du chargement des pages pour différents appareils semble être l'un des plus grands défis de la conception Web réactive. Voici quelques ressources pour aborder le problème.

18. Images réactives

Le groupe Filament a mis au point un moyen d'envoyer une image de taille appropriée en fonction de la résolution de l'écran. Cette expérience avec des images mobiles d'abord qui s'adaptent de manière réactive et responsable nécessite d'avoir deux images de tailles différentes à référencer.

19. Images adaptatives

Matt Wilcox s'est inspiré de l'outil Responsive Images pour créer des images adaptatives, qui utilise PHP et un peu de JavaScript pour diffuser des images appropriées sur l'appareil de l'utilisateur sans nécessiter de balisage supplémentaire.

20. Sencha.io Src (anciennement Tinysrc)

Sencha fournit un service cloud qui envoie des versions optimisées des images hébergées pour la taille de l'appareil qui les demande. Pour savoir comment l'utiliser, consultez docs.sencha.com/io/src/.

21. FitText

Un autre joyau de Paravel, Inc est FitText.js, un plug-in jQuery pour rendre le type de site Web réactif à la conception et à l'appareil. Pour plus de détails, consultez trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Inspiré de FitText et de l'algorithme SlabType, slabText de Brian McAllister est un plug-in jQuery qui crée des blocs de texte gras qui se redimensionnent de manière réactive tout en conservant une largeur définie.

Outils pour les requêtes multimédias

Maintenant que vous avez une idée de la façon dont votre mise en page va changer pour différents appareils, une grille fluide et des images fluides, vous avez besoin de requêtes multimédias pour faire passer les éléments de la page dans un état de réactivité.

23. Respond.js

Le seul problème avec la conception réactive est que les navigateurs qui ne peuvent pas lire les requêtes multimédias sont laissés pour compte. Cela ne pose peut-être pas de problème avec votre public cible, mais il est toujours recommandé de s'adapter aux utilisateurs de navigateurs plus anciens. Respond.js, de Scott Jehl, prend uniquement en charge les propriétés min-width et max-width.

Pour plus d'informations, consultez filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, de Wouter van der Graaf, permet aux anciennes versions d'IE et d'autres navigateurs de tester et d'appliquer efficacement toutes sortes de requêtes multimédias.

25. Adapt.js

Nathan Smith, auteur du système de grille original 960.gs, a écrit Adapt.js, un script qui détecte les dimensions du navigateur et ne sert que les feuilles de style requises - comme les requêtes multimédias mais sans requêtes multimédias, ce qui signifie qu'il fonctionne également dans les navigateurs plus anciens.

26. Catégorizr

Il s'agit d'une détection d'appareil abordée sous l'angle opposé - le script Categorizr de Brett Jankord suppose que les appareils sont mobiles, sauf s'ils sont détectés autrement comme un ordinateur de bureau ou une tablette, ce qui vous permet de fournir des ressources aux navigateurs de manière sympathique.

Passe-partout au design réactif (et mobile)

Dans l'esprit d'un flux de travail réactif efficace, les passe-partout facilitent le processus de transfert des conceptions vers le navigateur le plus tôt possible. La plupart de ces passe-partout combinent le meilleur des outils mentionnés ci-dessus dans un ensemble soigné: une grille flexible améliorée avec des scripts, tout en mettant en œuvre les philosophies mobile first, content-out.

27. 320 et plus

Le 320 and Up d'Andy Clarke est un passe-partout mobile qui s'intègre à de nombreux autres outils de conception Web modernes, tels que LESS et Bootstrap (voir # 30). C'est un moyen léger et agile de mettre en place un site et de le faire fonctionner rapidement. Consultez également notre entretien avec Andy, dans lequel il nous en dit plus sur la nouvelle version.

28. Sans grille

Gridless est un passe-partout HTML5 et CSS3 qui peut servir de base à vos conceptions réactives, en mettant l'accent sur la typographie et la compatibilité entre les navigateurs intégrés.

29. Squelette

Contrairement aux deux modèles standard précédents, dont le point de départ est avec la plus petite résolution, le kit de développement Skeleton, créé par Dave Gamache, est basé sur le système de grille 960.gs et évolue vers le mobile. Skeleton dispose également d'un excellent cadre de style pour que les développeurs puissent créer des styles par-dessus.

30. Bootstrap

Construit par Twitter et maintenant open-source, Bootstrap est un cadre et une série de composants pour mettre rapidement un site en ligne, et à partir de la version deux, toutes ses parties de base fonctionnent de manière réactive.

Plugins, shims et polyfills

Bien que les navigateurs et les logiciels modernes aient tendance à être conçus pour être réactifs, nous devons parfois utiliser des outils supplémentaires pour offrir une expérience cohérente.

31. Plugin réactif

Marios Lublinski a écrit un plug-in WordPress qui promet de transformer n'importe quel thème WP actuel en un thème réactif. Comment cela fonctionne, je ne sais pas encore car il n'a pas été publié au moment de la rédaction de cet article, mais s'il tient ses promesses, il devrait être très utile.

32. Renversement

La gestion du débordement de contenu fonctionne bien sur les navigateurs de bureau, mais les anciens navigateurs mobiles la gèrent de manière incohérente. Le polyfill Overthrow de l'industriel Filament Group ajoute une dégradation gracieuse constante sur tous les appareils, garantissant que tous les utilisateurs mobiles bénéficient de la meilleure expérience possible.

33. MediaTable

Le plugin jQuery de Marco Pegoraro, MediaTable, fonctionne avec Respond.js pour vous aider à contourner le problème d'affichage de grandes tables de données sur des appareils à petit écran, en créant des colonnes réactives et en ajoutant une bascule afficher / masquer le cas échéant.

"Test, test: 1-2-3 ..."

Un autre aspect du flux de travail réactif consiste à connaître vos appareils et résolutions cibles, puis à les tester.

34. resizeMyBrowser

resizeMyBrowser, du développeur frontend Chen Luo, propose plusieurs dimensions prédéfinies pour la fenêtre de votre navigateur afin de tester des pages conçues de manière réactive ou de créer un nouveau paramètre prédéfini si vous ne trouvez pas celui qui correspond à vos besoins.

35. responsivepx

Tout comme resizeMyBrowser, responsivepx, construit par Remy Sharp, charge vos pages dans une fenêtre où vous pouvez tester la largeur et la hauteur pour déterminer dans quelle mesure vos requêtes multimédias se déclenchent et où se trouvent les points d'arrêt dans la conception.

36. Essais de conception adaptative

Un outil incroyablement utile du concepteur et développeur Matt Kersley: entrez simplement l'URL de votre site réactif dans Responsive Design Testing pour voir comment il se rend à différentes tailles de navigateur.

37. Le responsable

Entrez une URL et le responsable vous montrera comment il s'affiche dans de nombreuses tailles d'appareils courantes - avec une efficacité robotique impitoyable. Tama Pugsley et Andy Hovey sont responsables de celui-ci.

38. Responsive.is

Un autre émulateur de périphérique sur la page, Responsive.is, vous permet de saisir une URL, puis de la redimensionner rapidement entre une plage de préréglages différents. Il est réalisé par l'équipe derrière la prochaine application Typecast.

39. Screenqueri.es

Un autre outil de dimensions du navigateur, mais Screenqueri.es de Mandar Shirke se différencie en ayant un vaste ensemble de préréglages mobiles et tablettes, ainsi qu'une grille et des règles qui facilitent tellement les mesures fines.

40. Aptus

Une autre application pour tester des sites à plusieurs tailles définies, mais Aptus est natif pour Mac. Il est disponible sur le Mac App Store, et le fait d'être natif apporte des fonctionnalités supplémentaires telles que des captures d'écran faciles et une prise en charge hors ligne.

41. Signet de conception adaptative

Victor Coulon a réalisé un bookmarklet très simple mais efficace; lorsque vous l'activez sur n'importe quelle page Web, il ajoute une barre d'outils qui vous permet de basculer entre quatre dimensions d'écran communes afin que vous puissiez voir comment votre site s'affiche à différentes tailles.

42. Signet du test de conception adaptative

Ce bookmarklet de Benjamin Keen permet une plus grande personnalisation en vous permettant de définir vos propres tailles d'appareil, et autant ou peu que vous le souhaitez. Lorsqu'il est activé, il affiche le site dans toutes les tailles sélectionnées, côte à côte pour une comparaison facile.

43. Screenfly

Screenfly, par QuirkTools, vous permet de tester un site sur différentes résolutions sur bureau, tablette, mobile et télévision. Les tests de bureau sont actuellement limités à Safari, tandis que la tablette et le mobile ont plus d'options pour les appareils et les navigateurs. La télévision est limitée à l'opéra.

44. Indicateur de requête multimédia

Johan Brook offre un moyen purement CSS pour tester lorsqu'une requête multimédia a été déclenchée par le navigateur. L'indicateur de requête multimédia est un autre bon outil pour tester et jouer avec les points de rupture de la conception.

45. Cale

L'un des outils utilisés dans la refonte du Boston Globe, le garçon d'affiche du mouvement RWD, Shim est une application Node.js qui exécute une page Web sur plusieurs appareils sur le même réseau Wifi, ce qui facilite grandement les tests inter-appareils. .

46. ​​Drive-In

Si vous n'avez pas de serveur Node.js en place pour exécuter Shim, Scott Jehl a créé une version plus simple appelée Drive-In qui fonctionne fondamentalement de la même manière, mais en utilisant PHP, Apache et un fichier .htaccess.

47. Adobe Shadow

Adobe poursuit sa progression dans les technologies Web avec cet outil de débogage à distance. Installez Shadow et l'extension Chrome sur Mac ou Windows, ainsi que le client Shadow sur Android ou iPhone, et vous pouvez partager des pages Web entre de nombreux appareils différents.

48. Émulateur Opera Mobile + Débogage à distance

Un moyen plus simple de déboguer les pages mobiles est d'installer Opera et de l'émulateur Opera Mobile et de connecter les deux avec leur option de débogage à distance. Simple et rapide à installer, et a l'avantage supplémentaire de tester sur plus que WebKit.

Une inspiration supplémentaire

Vous voulez avoir une idée de la façon dont les autres rendent leurs conceptions réactives?

49. MediaQueri.es

Si vous ne l'avez pas déjà vu, le site Mediaqueri.es possède un nombre toujours croissant de sites qui sont passés du côté réactif.

50. @RWD

Ethan Marcotte gère un compte Twitter qui apporte les dernières nouvelles, outils et vitrines du monde de RWD.

Denise Jacobs adore être conférencière, auteure, formatrice en conception Web et évangéliste de la créativité, tandis que Peter Gasston est l'auteur de The Book of CSS3 et un développeur Web chevronné qui blogue sur Broken Links.

Aimait ça? Lisez-les!

  • Conseils de pro pour créer un site Web mobile
  • Meilleures techniques CSS et JavaScript
  • Comment créer une application
  • Les meilleures polices Web gratuites pour les concepteurs
  • Découvrez les prochaines étapes de la réalité augmentée
  • Téléchargez des textures gratuites: haute résolution et prêtes à l'emploi maintenant
Article Précédent

Maîtriser la peinture négative à l'aquarelle
Article Suivant

Un nouvel outil aide les créatifs à transformer leurs idées en code
Messages Fascinants
Les 3 meilleures façons de réparer Windows 10 ne démarrent pas
Découvrir

Les 3 meilleures façons de réparer Windows 10 ne démarrent pas

Peut 2024
Ce n’et rien de moin qu’un cauchemar lorque votre ytème Window ne démarre pa et que vou ête coincé ur un écran bleu / noir aléatoire an nulle part où aller. Éta...
Comment réinitialiser le mot de passe oublié d'un ordinateur portable Windows
Découvrir

Comment réinitialiser le mot de passe oublié d'un ordinateur portable Windows

Peut 2024
Vou avez oublié le mot de pae de connexion de votre ordinateur portable aprè une longue période an utilier? La perte de mot de pae du compte utiliateur Window et devenue un problèm...
Comment protéger par mot de passe un fichier ZIP sur Mac en détails
Découvrir

Comment protéger par mot de passe un fichier ZIP sur Mac en détails

Peut 2024
Le gen eaient toujour de convoquer le précieue donnée à un eul endroit, zip et un logiciel étonnant qui peut être utilié à cette fin. Vou pouvez en fait compreer de ...