50 outils de conception de site Web adaptatifs utiles pour les concepteurs
Ces derniers jours, nous vous avons présenté certains des meilleurs thèmes réactifs WordPress et Joomla que vous pouvez télécharger et utiliser sur votre site. Aujourd'hui, nous allons vous donner les outils. Composés de frameworks, de services et de scripts téléchargeables, nous pensons qu'ils vont être d'une grande aide pour le développement web réactif..
Pour faciliter la consultation de la liste complète des outils, nous les avons classés dans les sections suivantes:
- Grille et cadres
- Feuilles d'esquisse et structures filaires
- Plugins JavaScript et jQuery
- Test et aperçu
- Sliders
- Autres
Grille et cadres
[Retour au sommet]
Colonne
Columnal est un projet Pulp + Pixels, emprunté à cssgrid.net tandis que certaines inspirations de code ont été extraites de 960.gs. Columnal vous aide beaucoup dans votre conception Web réactive, en rendant vos grilles flexibles pour changer de façon dynamique lorsque la fenêtre du navigateur est redimensionnée..
Squelette
Skeleton est un framework CSS simple et puissant, qui plaît avant tout aux développeurs et aux concepteurs en raison de sa simplicité et de son efficacité. Ici, il n'y a pas de gros problèmes avec Javascript, seulement de bons et purs CSS avec une documentation propre.
LessFramework 4
Less Framework est plus ou moins un framework, au nom de son créateur. Il s'agit d'un système de grille CSS adaptatif basé sur l'utilisation de requêtes multimédia CSS en ligne, ce qui facilite beaucoup le développement de sites Web réactifs..
Système de grille sémantique
Le système de grille sémantique est utilisé pour concevoir des structures de grille réactives. Il utilise des extensions CSS pré-traitées telles que LESS, SCSS ou Stylus pour offrir une efficacité maximale. Vous pouvez sélectionner les largeurs de colonnes et de gouttières, choisir le nombre de colonnes et basculer entre les pixels et les pourcentages.
Système Golden Grid
Golden Grid System est un système à grille fluide qui constitue le point de départ de votre conception Web réactive. Il permet au site Web de servir des pages attrayantes allant de 240 à 2560 pixels..
320 et plus
320 and Up est un passe-partout CSS, qui sert de modèle de départ pour votre conception réactive. Il en découle une approche complètement inverse de celle de plusieurs autres modèles disponibles.
Inuit.css
Inuit.css est un framework CSS extrêmement facile à utiliser, même pour les novices. Il a une approche minimaliste, vous devez donc vous occuper uniquement des choses dont vous avez besoin, mais si nécessaire, il peut également être étendu avec une poignée de plugins disponibles..
Sans grille
Gridless est un passe-partout permettant de créer des sites Web réactifs et multi-navigateurs avec une belle typographie. Cet outil est axé sur le développement progressif d’un projet et sert de point de départ à toute conception..
1140 CSS Grid
1140 CSS Grid est un excellent système de grille CSS conçu par le designer de Melbourne, Andy Taylor, qui permet à votre conception de s'adapter parfaitement à une résolution de 1140px pour les grands moniteurs et votre mise en page fluide s'adaptera parfaitement à d'autres résolutions plus petites avec très peu de travail.
1KBCSSGrid
1KB CSS Grid conçu par Tyler Tate, est un générateur de grille CSS simple et léger. Il vous permettra de définir le nombre de colonnes, la largeur des colonnes et la largeur des gouttières, et vous pourrez obtenir un fichier CSS téléchargeable pour la grille de vos sites Web..
Bootstrap
Bootstrap, créé et mis à jour par Mark Otto et Jacob Thornton sur Twitter, est un excellent ensemble d’éléments d’interface utilisateur, de dispositions et d’outils javascript, que vous pouvez télécharger et utiliser librement dans vos projets de conception Web..
Calculateur de grille fluide
Cet outil simple vous aidera à saisir rapidement le CSS de la conception de votre site Web à grille fluide.
Grilles de fluide
Fluid Grid est un framework de grille fluide simple mais utile, qui crée des présentations réactives basées sur 6, 7, 8, 9, 10, 12 ou 16 colonnes..
Flurid
Flurid est un framework de grille CSS multi-navigateurs simple et très utile, comportant jusqu'à 16 colonnes. Et de plus, il ne cache pas les pixels dans les marges.
Gridset
Gridset est un outil permettant de créer des grilles de tout type, telles que colonnes, asymétriques, fixes, rapports, composés, réactives, etc. Cet outil de Mark Boulton, toujours en version bêta, s’avère prometteur. Et ai-je mentionné, son utilisation est aussi simple que l'intégration d'un lien.
Gridpak
Gridpak est un générateur de grille réactif en ligne, dans lequel vous pouvez modifier le nombre de colonnes, le remplissage et la gouttière et ajouter des points d'arrêt personnalisés. Le CSS est généré par l'outil et préparé pour le téléchargement. Il fournit également des modèles de grille PNG, qui peuvent être utilisés à des fins de conception dans Photoshop..
SimpleGrid
SimpleGrid, développé par Michael Kuhn, est un framework CSS très simple et direct pour créer des mises en page infinies à base de grille. Par défaut, SimpleGrid est préparé pour 4 plages distinctes de tailles d'écran.
Susy
Susy by Oddbird, est similaire au système de grille sémantique. Il n'utilise aucun balisage supplémentaire ni aucune autre classe spéciale, mais s'adresse uniquement aux utilisateurs de Saas et de son extension Compass.
Minuscule grille fluide
Tiny Fluid Grid est une application Web géniale, qui peut vous aider à déterminer le système de grille de votre site Web de manière interactive. Vous pouvez définir le nombre de colonnes, le pourcentage de gouttière, la largeur minimale et maximale de la mise en page de votre site Web et obtenir un fichier CSS téléchargeable..
Système de grille variable
Le système de grille variable est conçu et développé par SprySoft et est basé sur le système de grille 960. Il permet aux développeurs et aux concepteurs de générer la grille personnalisée, puis de télécharger le fichier CSS associé basé sur cette grille..
Feuilles d'esquisse et structures filaires
[Retour au sommet]
Fiches d'esquisse de conception Web réactive
Cet outil est utile pour cartographier les emplacements de divers éléments de la présentation de votre site Web sur différents appareils. À l'aide de cet appareil, vous pouvez vous faire une idée de l'endroit où placer les éléments nécessaires d'un site Web pour différentes tailles d'écran et résolutions..
Wireframes réactifs
Responsive Wireframes est un outil expérimental créé par James Mellers d’Adobe. Il est construit uniquement avec HTML et CSS (aucune image ni JS n’a été utilisée), ce qui vous permet de visualiser à quoi ressemblerait votre conception réactive sur les navigateurs réels de divers ordinateurs de bureau et appareils mobiles..
StyleTiles
Tuiles de style vous permet de développer une idée de l'apparence d'un site Web, indépendamment des styles compliqués qui entrent en jeu. Cela vous donne la possibilité d'un flux de travail de conception parfaitement réactif, ainsi que la possibilité d'intégrer les commentaires des clients..
Plugins JavaScript et jQuery
[Retour au sommet]
Adapt.Js
Adapt.js est une solution Javascript et une excellente alternative aux requêtes de médias CSS. L'utilisation de l'approche @media est une bonne pratique, mais cela ne fonctionne pas pour tous les navigateurs. Nathan Smith, le créateur de 960 Grid System, a publié Adapt.js, une bibliothèque javascript très légère pour résoudre ce problème..
Isotope
Isotope est un plugin incroyable pour jQuery, qui s'avère très utile lors de la conception d'un design réactif. Cela permet non seulement de réorganiser les éléments d'une page lorsque la fenêtre du navigateur est redimensionnée ou que la taille de l'écran est plus petite, mais également de filtrer ces éléments.
Maçonnerie
La maçonnerie est un excellent plugin jQuery, qui est utilisé pour créer des mises en page dynamiques et adaptatives. Ce plugin aide à réorganiser les éléments de votre design réactif, afin qu’ils puissent mieux s’intégrer dans les zones ouvertes de la grille..
Respond.js
Respond.js est un script rapide et léger (3 Ko compressé et 1 Ko compressé), dont le but principal est d'activer la conception Web réactive dans les environnements ne prenant pas en charge les requêtes multimédia CSS3, comme les navigateurs IE..
TinyNav.js
TinyNav.js est un plugin jQuery petit et léger, de 362 octets seulement, qui convertit les grandes listes de navigation en petits menus déroulants pour les écrans plus petits..
Wookmark jQuery Plugin
Wookmark est un plugin jQuery qui détecte la taille de la fenêtre du navigateur et organise automatiquement les éléments de la page en colonnes. Vous pouvez également voir un aperçu en direct au bas de la page elle-même.
Test et aperçu
[Retour au sommet]
ProtoFluid
ProtoFluid est un outil de prototypage basé sur le Web qui vous permet de tester les prototypes de votre site Web dans différentes tailles d'écran et résolutions. Il suffit de taper l'URL, sélectionnez le périphérique (ou toute dimension personnalisée) et appuyez sur le bouton de lancement. Comme il s’agit d’un outil Web, il vous permet également d’utiliser d’autres extensions comme FireBug..
Responsive.Is
Responsive.Is est créé par TypeCast, un autre outil d'émulateur de navigateur, que vous pouvez utiliser pour tester votre conception responsive. Il suffit de taper une URL, et sa taille changera automatiquement en fonction du périphérique que vous choisissez.
Responsivepx.Com
ResponsivePx est un outil formidable pour tester la conception de votre site Web adaptatif. La principale caractéristique qui le distingue des autres est sa capacité à redimensionner le site Web pixel par pixel. Cette fonctionnalité géniale vous permettra d'identifier les points d'arrêt et de tester le fonctionnement des requêtes multimédia CSS sur votre site..
Outil de test de conception de site Web réactif
Un outil de test génial, qui peut vous permettre de visualiser votre site Web réactif dans différentes tailles d'écran simultanément sur un seul écran, pendant que vous les construisez ou les concevez. J'aime cet outil principalement parce qu'il affiche toutes les résolutions d'écran côte à côte, ce qui facilite le débogage..
ReView.Js
ReView est un système de visualisation dynamique, développé en JavaScript pur, qui vous offre une expérience de visualisation fantastique pour votre conception Web réactive..
Moustiquaire
Screenfly de QuirkTools est un outil formidable qui vous permettra de visualiser votre site Web réactif dans une variété d’appareils: bureau, tablette, mobile et télévision. Il a également des options pour activer ou désactiver le défilement ou même pour faire pivoter l'affichage.
Screenqueri.es
Screenqueri.es est un outil de test de conception réactif parfaitement adapté aux pixels. Il suffit d'entrer l'adresse du site Web que vous souhaitez vérifier. Cet outil permet d'afficher le site Web sous différentes tailles en fonction de l'appareil. Vous pouvez également redimensionner manuellement la taille pixel par pixel pour identifier les points d'arrêt..
Le responsable
Testez votre site sur différents appareils, d'un iPhone à un iPad, en passant par le Kindle et Android sur le Responsinator. Il montre également votre site à la fois en mode portrait et en mode paysage. J'aime beaucoup plus cet outil à cause des contours des périphériques affichés sur la page, ce qui donne plus de sens à l'ensemble du processus..
Sliders
[Retour au sommet]
Myrtille
Blueberry est un fantastique curseur d'image open source jQuery, spécialement conçu pour les présentations fluides ou réactives..
Elastislide
Vous voulez un carrousel qui s'adapte automatiquement à la taille de l'écran lorsque la fenêtre du navigateur est redimensionnée ou lorsque vous êtes dans un écran plus petit? Elastislide est le plugin jQuery le mieux adapté à vos besoins.
Responsive CSS3 Slider
C’est un curseur CSS3 pur et réactif qui peut s’adapter facilement à toute taille et résolution d’écran. La bonne chose à propos de ce curseur est que, les flèches vont à l'intérieur de la boîte lorsque la taille de l'écran du périphérique est assez petite. Pas de JavaScript nécessaire.
ResponsiveSlides.Js
ResponsiveSlides.Js est un plugin jQuery très simple et extrêmement léger (seulement 1 Ko) qui crée un curseur réactif à l'aide de listes non ordonnées. Il fonctionne sur un large éventail de navigateurs, y compris sur IE6.
Autres
[Retour au sommet]
Images adaptatives
Adaptive Images est un outil en ligne de conception de sites Web adaptatifs, qui détecte la taille de l'écran des visiteurs et crée, met en cache et fournit des images redimensionnées, en fonction de la taille et de la résolution de l'écran..
FitText.Js
FitText.js est un petit outil javascript qui permet le redimensionnement automatique du texte et des titres lorsque la fenêtre du navigateur est redimensionnée. Fini les soucis de décalage de taille de texte avec cet outil intégré.
FitVid.Js
Vous souhaitez redimensionner les vidéos incorporées lorsque la fenêtre du navigateur est redimensionnée ou que la résolution de l'appareil est inférieure? FitVid.Js peut vous aider à y parvenir. C'est un plugin jQuery léger, simple et facile à utiliser, utilisé pour réaliser des vidéos intégrées en largeur fluide.
Images de la rétine
Retina Images est une solution javascript géniale, qui servira automatiquement des images haute résolution 2X plus grandes lorsqu’elles sont visualisées sur un écran Retina. Tout ce que vous avez à faire est de mettre une version haute résolution de chaque image et de gérer le reste..
Grille photo transparente sensible
La grille transparente de photos réactives affiche les images bord à bord du navigateur, sans aucun espace entre les images. Les photos sont en mosaïque et elles défilent de gauche à droite sur toute la page en colonnes. Le nombre de colonnes s'ajuste en fonction du redimensionnement de la fenêtre du navigateur..
SlabText
SlabText est un plugin ou un outil jQuery de Brian McAllister basé sur l'algorithme slabText, qui divise les titres en lignes avant de redimensionner chaque ligne pour occuper l'espace disponible. Il est assez similaire au plugin FitText.Js en action.
Zurb - ResponsiveTables
Vous êtes-vous déjà demandé comment gérer les tables de données volumineuses dans une conception réactive? Zurb, un combo CSS / JS vous donne la réponse; il prend les tables de données et les modifie afin qu'elles ne cassent pas la mise en page sensible sur les plus petits écrans.
Catégorie
Categorizr est un très petit script PHP qui offre à vos visiteurs une expérience Web plus ciblée. Il vous aidera à créer des conceptions spécifiques à chaque appareil pour tablette, télévision, mobile ou ordinateur de bureau..
Requête multimédia
Media Bookmark Querylet indique la taille de la fenêtre d'affichage actuelle et la requête multimédia qui vient d'être lancée..
Le calculateur réactif
Le calculateur réactif est un outil en ligne très simple qui peut vous aider à convertir les pixels en pourcentages lors de la conception de votre site Web réactif..
Up la semaine prochaine
Au cours de la deuxième semaine de cette série, nous vous proposerons des didacticiels qui vous permettront de vraiment vous familiariser avec le Responsive Web Design (RWD)..
Ne le manque pas.
