8 Outils de conception clés pour optimiser le trafic vers votre site Web |

Selon une étude de la Banque mondiale, environ 75% des personnes dans le monde ont accès à des appareils mobiles. CNET rapporte que les abonnements aux services de communication mobile sont passés de 1 milliard en 2000 à plus de 6 milliards en 2012. En raison de l'expansion rapide de l'utilisation des téléphones cellulaires, il est plus important que jamais que les sites fonctionnent sur plusieurs plates-formes. Utilisez ces huit outils pour améliorer votre conception Web réactive et maximiser le nombre de personnes qui peuvent afficher et cliquer sur vos sites.

8. Adobe Edge Inspect

Mis à jour et publié en 2013 avec une nouvelle image de marque liée à Creative Cloud, Adobe Edge Inspect vous permet de prévisualiser vos conceptions Web pour voir leur aspect sur différentes plates-formes. L'atout principal d'Edge est sa capacité à vous faire gagner du temps en visualisant en temps réel les changements entre les plateformes.

Cet outil permet de synchroniser votre ordinateur et vos appareils mobiles. En faisant cela, vous pouvez parcourir et inspecter la conception Web sur plusieurs plates-formes en même temps. En outre, lorsque vous apportez des modifications à la conception Web et que vous la mettez au point, votre travail s'affiche immédiatement sur votre appareil, tant que vous utilisez le codage Java, CSS et HTML.

7. Squelette

Cet ensemble de fichiers CSS de la société permet le développement d'un site Web sans faille qui a l'air élégant, qu'il soit affiché sur un écran de bureau ou sur un petit écran lumineux dans votre main. Considéré comme un passe-partout facile à utiliser pour la conception Web réactive, Skeleton porte bien son nom parce qu'il crée un cadre qui se dilate et se contracte en fonction de la taille de l'appareil de l'utilisateur. Bien qu'il contienne des éléments de conception de base, il est assez flexible pour permettre aux concepteurs d'apporter des styles plus sophistiqués.

6. Responsive Wireframe

Présenté comme un outil expérimental utilisant des techniques de conception Web réactives, Responsive Wireframe utilise HTML / CSS pour fournir une grille de superposition qui vous permet de voir les vues de votre conception sur les ordinateurs et les mobiles. L'idée avec cet outil est de le rendre facile à concevoir dans le navigateur. Alors que certains concepteurs peuvent prétendre que ces wireframes écrasent la créativité, d'autres disent que c'est un moyen simple et rapide de créer des designs qui fonctionnent sur toutes les plateformes. L'utilisation de cet outil vous fait gagner du temps lorsque vous testez des conceptions à l'aide des structures filaires réactives pour voir à quoi elles ressembleront sur les ordinateurs portables, les ordinateurs de bureau et les mobiles.

5. Style Tiles

Plus concrets qu'un moodboard, mais moins statiques qu'une maquette, les Style Tiles permettent aux concepteurs de montrer aux clients différentes mises en page de sites Web. En présentant les dalles, les concepteurs évitent d'avoir à réaliser plusieurs versions terminées.

Ces dalles en cascade présentent des designs sans les adapter à aucun périphérique, ce qui en facilite la création et les partage avec les clients avant de prendre en compte les nombreuses considérations associées. avec un design réactif. En d'autres termes, cette approche libère les concepteurs des restrictions dimensionnelles. Un produit similaire de Style Tiles, «Component Style Guide», propose des conseils pour prendre votre design et le faire fonctionner sur des plates-formes telles que l'iPhone et le nouveau smartphone Blackberry 10.

4. La calculatrice adaptative

Cette calculatrice vous permet d'obtenir les données dont vous avez besoin pour transformer une conception PSD en un élément de votre projet Web réactif. Vous entrez six champs, puis cliquez sur "Envoyer la requête." Optez pour les bordures, les marges et le remplissage de votre PSD avec cette calculatrice.

3. Wookmark

Ceci est un plug-in jQuery qui prend les composants d'une page Web et les met dans des colonnes. La disposition des colonnes est basée sur la taille de la fenêtre du navigateur. Cet outil pratique est un excellent moyen de rendre un site sensible à différentes tailles d'écran.

2. ProtoFluid

Avoir un avantage parce qu'il est basé sur le Web, cet outil rend indolore de voir des maquettes de votre conception avec différentes résolutions et dimensions. Amusez-vous à utiliser Firebug lorsque vous vérifiez vos codes HTML, CSS, JS et d'autres éléments. Les raccourcis clavier, un passage rapide entre différentes vues et un code propre garantissent la rapidité d'utilisation de cet outil pour tester l'aspect de votre conception sur différentes tailles d'écran, y compris Nexus, iPhone et iPad.

1. Foundation

Ce framework frontal offre l'option de coder plus intelligemment et plus rapidement. Parmi ses fonctionnalités, cet outil vous permet de commencer par concevoir pour les petits écrans. Au fur et à mesure que vous développez votre design pour de plus grands écrans, Foundation vous aide à améliorer les éléments de conception. En outre, cet outil vous apporte des modèles HTML géniaux qui vous donnent un bon départ pour la conception du site.

Profitez de la flexibilité de cet outil, des mises en page réactives et de la production rapide de prototypes. L'efficacité et la crédibilité de Foundation sont évidentes dans la liste des sites qui l'utilisent, notamment National Geographic, Pixar et Los Alamos National Laboratories.

Pour maximiser votre conception de sites Web réactifs, quels sont les plus grands défis auxquels vous devez faire face? Quels outils vous ont été les plus utiles?

[Images via]