10 Outils pour améliorer votre responsive design

10 Outils Pour Ameliorer Votre Responsive Design Logo

Saviez-vous qu’en 2014 le nombre d’utilisateurs mobiles a surpassé ceux qui utilisent des ordinateurs ? Dans un monde aussi ouvert socialement (d’un point de vue virtuel) et mobile vous êtes obliges de penser au responsive design de votre site web.

Pour améliorer le web design, la tendance est d’accorder une priorité plus élevée au contenu et à l’expérience utilisateur. C’est l’essence même du responsive web design. Pour y arriver, voici une liste d’outils qui pourront vous aider :

 

Style Tiles

10 Outils Pour Améliorer Votre Responsive Design Style Tiles

Le premier obstacle du design web responsive n’est pas le design lui même ; c’est plutôt comment votre page sera affichée chez les utilisateurs.

Style Tiles rend les choses plus simples. Il vous permet de montrer de quoi aura l’air un design pendant des réunions avec vos clients. Sa prise en main est simple et flexible ; ainsi donc les « thèmes » peuvent être modifiées pour montrer différentes étapes de développement. Pour des projets collaboratifs, ces thèmes sont excellents pour montrer de nouvelles idées et trouver la meilleure solution : simplement parce que vous serez en mesure de percevoir chaque changement de police, couleur et d’affichage des blocs en temps réel.

C’est beaucoup mieux que de créer des maquettes dans Photoshop.

Foundation 5.5

10 Outils Pour Améliorer Votre Responsive Design Foundation 5.5

 

Foundation 5.5.0 pour les sites web est l’une des trois versions de ce framework.

Il possède toutes les fonctionnalités dont un site web a besoin et même plus encore. Il propose des tableaux fluides, de superbes outils capables d’améliorer l’expérience utilisateur, une compatibilité avec Sass 3.4 (libsass est inclut) pour une meilleure performance, de nouvelles fonctionnalités pour les menus déroulants pour une meilleure navigation, ils supporte jQuery 2, et est compatible à la majorité des navigateurs web et mobiles.
Si vous aimez être créatifs en utilisant la navigation, vous aimerez Foundation.

Respond.js

10 Outils Pour Améliorer Votre Responsive Design Respondjs

Ce script vous permet d’économiser du temps que vous pourrez perdre face aux problèmes de compatibilité entre navigateurs.

Il fonctionne sur des navigateurs qui ont des versions (IE6-8 et autres) plus vielles, leur permettant de supporter du CSS3. Il est très bien développé et est très compact (1kb compresser). Vous pourrez utiliser respon.min.js (script respond.js) le plus tôt possible.

Il y a d’autres plugins de script mais c’est l’un des plus rapides. Gardez en tête qu’il ne pourra pas analyser les feuilles de style grâce à @import (ce que vous n’utiliserez pas si vous aimez la performance). Vous aurez aussi besoin d’enchaîner les lignes de référence si vous faites appels a plus de 32 feuilles de style.

Wookmark jQuery Plugin

10 Outils Pour Améliorer Votre Responsive Design Wookmark JQuery Plugin

Celui ci est plutôt simple à utiliser et le résultat final est très agréable à regarder.

Essentiellement, ce script arrange les éléments en colonnes dynamiques basées sur les tailles d’écrans. Parmi les fonctionnalités, vous pouvez personnaliser l’alignement, utiliser des espaces réservés pour remplir l’espace vide en bas des colonnes pour un meilleur rendu, personnaliser les espacements entre les éléments, ajouter un scroll et plus encore.

Ils développent actuellement une API qui vous permettra d’améliorer ce fantastique plugin.

Typecast by Monotype

10 Outils Pour Améliorer Votre Responsive Design Typecast

Les designers doivent rendre le contenu attrayant. C’est suffisamment compliquer à faire avec Photoshop ou InDesign ; nous vous proposons donc Typekit qui est un peu plus intimidant pour un débutant (cher).

C’est un outil en ligne qui vous permet de voir les modifications que vous faites et le fruit de votre travail en temps réel. Il y a des thèmes par défaut pour ceux qui commencent ainsi que les possibilité de réaliser un thème à partir de zéro. Vous pouvez l’utiliser gratuitement (plus de 3500 polices) ou avoir un compte payant (3 utilisateurs et plus de 23000 licences de polices).

Les polices ne peuvent pas être téléchargés mais vous pouvez obtenir leur code HTML/CSS.

Adaptive Images

10 Outils Pour Améliorer Votre Responsive Design Adaptive Images

Ce script convient a plusieurs plateformes, peut être utilisé pour des sites web existants et privilégié les appareils mobiles avant tout.

Tout ce que vous avez à faire est d’ajouter le fichier adaptive-images.php dans votre dossier source (avec le fichier .htaccess si vous en avez déjà un). Il permet de modifier la résolution des images au pixel prêt afin que votre page s’affiche aussi bien sur les appareils mobiles que sur les navigateurs web classiques. Il permet aussi de compresser la taille de l’image afin de leur permettre d’être sauvegardé dans le cache avec le reste de la page, épargnant ainsi la bande passante des utilisateurs.

Il fonctionne avec des annotations existantes ; vous n’aurez pas de modifications importantes à faire.

Retina Images

10 Outils Pour Améliorer Votre Responsive Design Retina Images

Les écrans Retina d’Apple sont très bien conçus mais adapter les images de votre site pour atteindre une telle perfection demandera des fichiers médias de grande résolution et donc lourds. Cela aura certainement un impact sur la vitesse de chargement de vos pages.

Retinaimag.es rend la tache plus simple. En général, vous créer une page classique avec des images et vous ajouter une version retina de ces images. A partir de la, retinaimages.php verifie la résolution de l’appareil. Si l’appareil a un écran Retina, il affichera les images optimisées retina au lieu des images classiques.

ZURB – ResponsiveTables

Les tableaux sont faciles a remplir et sont facilement compris par les utilisateurs ; de plus vous pouvez y afficher beaucoup d’informations à la fois. Court, simple et efficace. Mais adapter des tableaux à un affichage responsive est un vrai cauchemar.

Plus maintenant gra ce aux tableaux de ZURB. Vous téléchargez deux fichiers : responsive-tables.js et responsive-tables.css, vous y ajouter les annotations des blocs de vos pages et c’est tout.

Il permet d’adapter les tableaux sans cacher des lignes ou colonnes ou mutiler vos tableaux à moins que ce ne soit absolument nécessaire.

FitVids.js

10 Outils Pour Améliorer Votre Responsive Design FitVids Js

C’est beaucoup plus simple d’inclure des vidéos grâce à ce plugin jQuery.

Les développeurs de ce plugin sont les mêmes que ceux qui ont développé un autre outil magnifique (FitText.js pour rendre les textes larges plus fluides en responsive) ; ce plugin ultra léger vous permet de manipuler des vidéos comme vous manipuler des images en modifiant leur taille.

Il est construit selon le principe de ratio intrinsèque, modifiant les unites de marge en pourcentage afin qu’elles s’adaptent aux blocs.

Cet outil démontre que parfois la meilleure solution est la plus simple.

Screenfly

Aussi simple que ça puisse être : Screenfly teste votre page sur des tailles d’écran différentes pour vérifier le responsive design. Vous indiquez l’url de votre page et vous verrez comment elle s’affiche sur les résolutions de votre choix.

Il y a plusieurs émulateurs mais Screenfly est l’un des plus populaires, probablement parce qu’il est amusant et facile a utiliser grâce à son interface ; des dimensions prédéfinies de la majorité des appareils mobiles sur le marché et permet d’utiliser des dimensions personnalisées pour des tests plus efficaces.

A vous de choisir l’outil qui correspond le mieux à vos besoins ; mais selon nous ils font partie des meilleurs outils de design même s’ils sont toujours en cours de développement.
Si vous êtes du même avis, n’hésitez pas à laisser des commentaires.

Articles similaires

Comment lier votre site web aux réseaux sociaux

Aujourd’hui nous pouvons constater que les réseaux sociaux sont devenus une partie indispensable de la vie de chaque utilisateur d’internet. Les gens communiquent, échangent des informations, des médias et mènent une vie commerciale à l’aide des ...