Un design réactif vraiment facile
Ce n'est un secret pour personne que beaucoup pensent que le Web réactif est l'avenir. Créer un site réactif signifie qu’il est capable de s’adapter aux nombreux navigateurs et tailles disponibles. Si je veux m'assurer que mon site Web que j'ai créé sur mon bureau peut être vu sur une tablette avec minium scrolling et zooming, je vais être intéressé par la création d'un site réactif.
Une des raisons pour lesquelles les sites sensibles sont devenus populaires est que cela a du sens. C'est moins cher que de créer un ou plusieurs sites supplémentaires pour les téléphones mobiles et les tablettes. Il garantit également une expérience d'affichage cohérente entre les périphériques et les écrans de bureau. Ce n'est pas amusant d'avoir à augmenter la taille de votre fenêtre ou de faire défiler horizontalement pour voir un site Web entier.
Bien que la création de conceptions Web réactives soit de plus en plus facile, il existe des moyens d’y parvenir encore plus rapidement. Grâce au CSS et au HTML, nous pouvons le coder directement dans nos sites. D'autres éléments nécessitent un peu plus de travail. Quoi qu’il en soit, nous avons mis au point une liste pour vous aider à mettre en place votre site réactif avec un minimum de complications et des résultats optimaux.
plugins jQuery
Isotope
Isotope est un plugin jQuery qui prétend créer des mises en page magiques qui ne peuvent pas être créées par CSS et HTML. Il a la capacité de réorganiser les éléments à l’intérieur d’un conteneur pour qu’ils s’intègrent au fur et à mesure de son redimensionnement. Vous pouvez également utiliser Isotope pour filtrer et trier les éléments par catégories et autres.
Points d'arrêt.js
Breakpoint a été conçu pour les développeurs et les concepteurs. C'est un plugin qui vous permet de créer des points d'arrêt pour différentes tailles de navigateur. Lorsque votre navigateur est redimensionné à l'une de ces tailles, les éléments peuvent être intégrés à l'écran.
FitText.js
C'est l'un de mes plugins jQuery préférés car il est destiné aux polices. Bien trop souvent dans le design web réactif, les gens ne prennent pas en compte le fait que les titres devraient être réactifs au lieu d'être écrasés dans un certain espace. FitText vous permet de faire exactement cela, mais n'oubliez pas de l'utiliser uniquement pour les titres!
Response.js
Si vous aimez l'idée de Breakpoint.js mais souhaitez plus de personnalisation, Response.js est la solution. C'est vraiment génial pour ceux qui connaissent jQuery mieux que CSS et HTML et ont besoin de créer des sites web réactifs. Vous utilisez vos points d'arrêt, mais il y a beaucoup plus de personnalisation, comme la taille de l'appareil, les rations de pixels et la possibilité de charger différentes sources pour différentes tailles.
TinyNav.js
TinyNav est un plug-in jQuery léger qui vous permet de modifier n'importe quel élément de menu à l'aide de listes afin de le transformer en menus déroulants lorsque le navigateur est redimensionné. Vous pouvez spécifier les tailles ainsi que les menus qui changent. Ce n'est pas une fonction aussi large, mais elle est très efficace pour ce qu'elle fait.
Frameworks et systèmes populaires
Système de grille réactive
Ce système prétend ne pas être un cadre ou un cadre, mais simplement un système pour rendre vos conceptions réactives. Il semble être l'un des plus flexibles car il ne vous limite pas à une certaine taille ou à une taille donnée. Ils utilisent différentes classes CSS capables de flotter et de créer leurs propres colonnes.
Système de grille d'or
Le GGS est également un système et non un «cadre». Ils aiment se référer à eux-mêmes comme point de départ ou ligne directrice pour ceux qui souhaitent utiliser un certain nombre de grilles dans leur conception Web. Vous avez 18 colonnes à l'écran, mais 16 à utiliser dans votre conception. Vous créez vos propres largeurs et gouttières à utiliser et vous allez essentiellement à partir de là.
Système de grille 1140
Pendant un certain temps, de nombreux concepteurs utilisaient des conceptions Web d'une largeur de 960 pixels. Alors c'est devenu trop petit et ils sont montés. Maintenant, de nombreux modèles sont développés en utilisant une largeur de 1140px. Ce système de grille 1140 vous permet de créer 12 colonnes à utiliser dans une conception Web de grande largeur.
Twitter Bootstrap
Bootstrap est l'un des frameworks les plus populaires disponibles. Il s’agit d’un framework de 12 grilles qui est devenu utilisable par tous les navigateurs (y compris Internet Explorer 7) et qui peut être utilisé de manière réactive dans les appareils portables. Il est fourni avec divers composants de style, typographie et JavaScript pour utiliser et créer des sites élégants et intuitifs.
SimpleGrid
SimpleGrid prend l'idée des grilles et la simplifie. Avec la plupart des systèmes de grille et des frameworks, vous avez ces classes inconnues et ces colonnes inconnues. La grille simple a des classes qui spécifient quelles colonnes sont les premières, les moyennes et les dernières. De plus, vous pouvez ajouter différents «slots» aux colonnes pour donner l'impression qu'il y a plus de colonnes. C'est un cadre très simple et direct.
Autres outils réactifs
Feuilles de croquis pour la conception Web réactive
Tout comme n'importe quel concepteur ou développeur, vous réalisez probablement vos dessins avant de les fabriquer. J'espère que vous le faites. Sinon, vous devriez peut-être commencer par utiliser ces feuilles de croquis RWD. Ils sont livrés avec des tailles de périphérique et de bureau différentes afin que vous puissiez tout planifier.
Carnet de croquis de conception adaptative
Si vous aimez l'idée de faire des croquis sur papier, mais que vous souhaitez rassembler tous vos griffonnages, vous pouvez envisager de vous procurer le carnet de croquis responsive. Il est livré avec 50 pages, reliées en spirale avec différentes tailles d'écran sur chaque page. Toutes les grilles et tous les maths sont déjà faits pour vous, donc c'est un excellent outil pour les débutants et les experts du design réactif.
Tuiles de style
Ceci est une belle petite ressource pour les concepteurs Web, qu'ils recherchent quelque chose pour un design réactif ou non. C'est un PSD qui vous permet de comprendre l'essence d'un site Web en ajoutant des titres (typographie), des logos, des couleurs et d'autres éléments. La raison pour laquelle cela fonctionne pour la conception Web réactive est que cela n'implique aucune dimension, juste une idée numérique sans restrictions.
Calculatrice adaptative
Il y a une tonne de mathématiques impliquées dans la création de designs réactifs parfaitement adaptés aux pixels. Il est également nécessaire que vos calculs soient corrects, car vous aurez affaire à différents pourcentages, largeurs et tailles de navigateur. Pour vous aider, voici une calculatrice qui vous donne le bon calcul et le CSS pour l'accompagner.
Conclusion
Il est impératif que nous prenions conscience de ce que fait le Web réactif. De nombreux clients voudront que leurs sites soient disponibles sur divers appareils, et la création de sites réactifs est plus rentable. De plus, la plupart de vos frameworks et autres ressources pour une conception réactive vous aident vraiment à cultiver des sites Web standardisés et de haute qualité.
Quelles sont vos façons préférées de créer des designs réactifs? Avons-nous manqué une ressource sur laquelle vous comptez? Faites le nous savoir dans les commentaires.