Responsive design a créé une toute nouvelle liste de défis pour les concepteurs Web qui ont décidé de franchir le pas et de laisser le design statique derrière eux. Créer une mise en page qui fonctionne bien avec plusieurs largeurs possibles, voire même avec toutes les largeurs possibles, exige de la patience, de la créativité et, bien sûr, de nombreux tests.
Rien ne remplace l'analyse de votre conception sur les appareils que vous ciblez, mais au fur et à mesure que vous construisez, il est agréable de pouvoir obtenir un aperçu rapide de la mise en page à différentes largeurs directement sur votre ordinateur. Vous pouvez redimensionner manuellement la fenêtre de votre navigateur, mais cela devient ridiculement fastidieux si vous utilisez des dimensions de pixels précises. Heureusement, plusieurs développeurs talentueux ont déjà construit d'excellents outils pour vous aider dans ce processus. Rejoignez-nous aujourd'hui pour en examiner trois.
Attendez, pourquoi ai-je besoin de cela?
Si vous débutez avec le concept de conception Web réactive, vous ne savez peut-être pas pourquoi les utilitaires suivants sont utiles. Fondamentalement, l'objectif de la conception réactive est de créer un site qui s'adapte et évolue vers différentes tailles de fenêtres d'affichage. Par conséquent, au lieu de créer un site qui fonctionne bien sur les ordinateurs de bureau, un autre pour les mobiles et un troisième pour les tablettes, vous créez une présentation unique qui répond parfaitement à tous ces scénarios.
Pour ce faire, vous devez bien sûr pouvoir visualiser votre mise en page dans différentes largeurs. Personnellement, je recommande de concevoir toutes les largeurs possibles au lieu de simplement cibler les largeurs d’appareils les plus courantes, mais c’est toujours une bonne idée d’essayer d’avoir une idée de la disposition que verront les utilisateurs de certains appareils. Les outils suivants vous aideront à simplifier cet effort.
Le responsable
Le Responsinator est probablement le moyen le plus simple d’obtenir un aperçu rapide de votre mise en page sur des largeurs de périphérique courantes. C'est rapide, c'est simple et l'expérience a été conçue pour que tout le monde puisse immédiatement savoir ce qui se passe. C'est un concept important que nous n'avons pas encore abordé. Parfois, vous devez montrer votre conception réactive à votre client, et des outils comme celui-ci simplifient considérablement ce processus.
La raison pour laquelle ce site communique si bien le concept de responsive design est qu’il utilise des silhouettes d’appareils populaires, dans lesquelles le site de votre choix sera affiché.
Pour commencer, il vous suffit de taper l'URL d'un site Web que vous souhaitez tester. Il ne doit pas nécessairement s'agir d'un site que vous possédez, ce qui constitue également un excellent moyen d'enquêter sur ce que d'autres concepteurs ont fait. Pour cet exemple, j'ai ajouté le site Web de United Pixel Workers.
À partir de là, il vous suffit de faire défiler la page et de voir les aperçus de la disposition de tous les appareils disponibles. Ces aperçus sont en direct et peuvent être parcourus, cliqués, etc. La gamme de prévisualisations ici est assez impressionnante. Non seulement ont-elles inclus des périphériques majeurs tels que les iPads, mais elles ont également été lancées dans des largeurs communes utilisées sur plusieurs périphériques tels que le? Android? exemple ci-dessous.
Le Responsinator est le seul outil de ce type que je connaisse à prendre en compte l'interface utilisateur du logiciel. Par exemple, plutôt que d'afficher votre site à la totalité des 1024 x 768 pour un iPad horizontal, ils réservent en réalité les 125 premiers pixels au moins pour le navigateur Chrome de Safari pour mobile.
Avant de passer à l'outil suivant, voici un bref aperçu des avantages et des inconvénients de cette application.
Responsinator Pros
- Presque sans effort, il suffit de coller un lien et de faire défiler
- Plusieurs aperçus d'appareils différents
- Belle représentation visuelle que les clients comprendront
- Les dimensions de l'interface utilisateur du logiciel sont clairement prises en compte
Responsinator Cont
- Doit charger plusieurs instances de chaque site
- Pas moyen d'explorer les tailles qui ne sont pas listées
Responsive.is
L'outil suivant de la liste est Responsive.is. Le concept est le même que précédemment, le site fournit un moyen rapide de visualiser votre mise en page à différentes largeurs. Cependant, l'approche est radicalement différente.
Pour commencer, il n'y a pas de silhouettes d'appareils. Il y a une petite barre d'outils en haut de l'écran, mais le reste est réservé à un aperçu du site unique qui change en fonction du périphérique sélectionné. Ceci est un peu plus pratique car il élimine le défilement apparemment sans fin ainsi que le chargement de plusieurs aperçus, mais une partie de l'évidence de ce qui se passe est perdue dans le processus. L’interface minimale est vraiment agréable, ce que j’ai apprécié après avoir passé beaucoup de temps avec les silhouettes volumineuses de The Responsinator.
Responsive.is est livré avec un menu qui contient des sites responsive intégrés pour tester le lecteur afin que vous puissiez avoir une idée du fonctionnement du service (j'ai utilisé Food Sense). Si vous souhaitez tester un autre site, entrez-le simplement dans la case.
La barre d'outils en haut vous propose six options différentes pour les tailles de fenêtres, chacune étant représentée par une petite icône: Bureau, Paysage de la tablette, Tablette verticale, Paysage du smartphone, Smartphone vertical et Auto.
Comme vous vous en doutez, cliquer sur un appareil vous donne un aperçu du site à cette largeur. J'aime beaucoup la façon dont l'aperçu a été traité ici. Le site complet est affiché à la largeur spécifiée, mais tout ce qui est en dehors de la partie visible de la fenêtre est assombri.
Ma plus grande bêtise ici est que les largeurs réelles des périphériques ne sont pas vraiment spécifiées. Au lieu des dimensions en pixels, il ne reste que des icônes génériques. Étant donné que tel est le cas, ce site est définitivement plus destiné à des tests généralisés qu'à des circonstances spécifiques (vous pouvez toutefois mesurer vous-même les différentes tailles).
Responsive.is Pros
- Interface propre et minimale qui se concentre sur le contenu
- Une seule instance du site de test est chargée
- Pas besoin de faire défiler, il suffit de cliquer sur une icône pour changer de fenêtre
- Options de test intégrées
Responsive.is Cons
- Vous êtes limité à six fenêtres génériques
- Aucune dimension spécifique répertoriée
- Peut-être plus difficile à comprendre pour les clients que le responsable
Responsivepx
Jusqu'ici, tous les outils que nous avons vus vous obligent à définir des dimensions prédéfinies pour les tests. Si vous n'aimez pas les tailles de test ou si vous voulez simplement en ajouter une autre, c'est difficile! Il n'y a aucun moyen de le faire. Alors, vers qui vous dirigez-vous si vous voulez dicter avec précision les dimensions du test? La réponse est un site appelé Responsivepx.
Ici, nous avons un simple écran de bienvenue avec quelques instructions et un lien vers un didacticiel vidéo. Pour commencer, entrez simplement une URL dans la zone en haut à droite. Responsivepx est génial dans la mesure où il vous permet même de tester des sites locaux résidant sur votre ordinateur et sur lesquels vous travaillez actuellement. Nous utiliserons le site de Bryan Connor comme exemple pour ce test.
Une fois que vous avez entré un site, il est temps de modifier les dimensions à l'aide des outils en haut de l'écran. Comme vous pouvez le voir sur la photo ci-dessous, il n'y a pas de taille prédéfinie cette fois-ci. Vous contrôlez complètement les dimensions de l'aperçu en entrant un nombre ou en utilisant les curseurs.
Lorsque vous modifiez les paramètres, l'aperçu du site est mis à jour pour refléter ces modifications. Il est affiché sur une grille de transparence similaire à celle de Photoshop.
À mon avis, Responsivepx est de loin l’option la plus utile pour les développeurs travaillant sur leur propre site responsive. Il ya un certain nombre de raisons à cela. Tout d'abord, il est spécialement créé pour vous aider à trouver des points d'arrêt en fonction de votre conception unique. Vous pouvez charger un dessin, déplacer la largeur à un point où la disposition ne fonctionne plus, puis saisir les valeurs de pixels spécifiques répertoriées à insérer dans votre requête multimédia. Une fois que vous avez pris en compte les modifications, enregistrez votre fichier, actualisez l'aperçu et vous êtes prêt à attaquer votre prochain point d'arrêt. Encore une fois, le fait que cela fonctionne avec des fichiers locaux est vraiment utile ici.
De plus, lorsque vous entrez des scénarios de test et modifiez les paramètres, l'adresse dans la barre d'URL de votre navigateur est mise à jour pour refléter ces modifications, ce qui facilite grandement le partage d'un scénario de test spécifique avec des collègues.
Étant donné que cette application est un excellent moyen de décider des points d'arrêt potentiels, j'aimerais voir un bouton inclus qui génère une requête multimédia en fonction de la taille actuelle de la fenêtre d'affichage. Cela rendrait vraiment Responsivepx un outil de choix pour les concepteurs réactifs.
Pro responsivepx
- Vous décidez les dimensions de l'aperçu
- Parfait pour trouver des points d'arrêt
- Test à distance et local
- Facile à partager des cas de test spécifiques
Contivepx Contre
- Principalement pour les développeurs, utilisez une option différente pour les clients.
- L'interface utilisateur de la barre d'outils pourrait utiliser du travail
Conclusion
Vous avez maintenant trois nouvelles armes dans votre arsenal de conception Web réactif. Tous ces sites ont leurs points forts et méritent d'être mis en favori pour plus tard. Le Responsinator vous permet de simuler rapidement et facilement de nombreux appareils et peut aider les clients à comprendre ce que vous tentez d'accomplir. Responsive.is est une manière décente d’avoir une idée générale de la manière dont une disposition réactive s’effectue sur différents types d’appareils. Ce n'est pas le meilleur pour des tests spécifiques, mais cela peut être utile pour un test rapide. Enfin, Responsivepx est l’outil ultime pour trouver des points de rupture idéaux pour votre conception. Vous prenez le contrôle des dimensions exactes en pixels et pouvez tester les fichiers locaux sur lesquels vous travaillez actuellement.
Avez-vous essayé l'un des outils ci-dessus? Que penses-tu d'eux? Comment pourraient-ils être améliorés? Veillez également à nous informer de tout autre outil similaire que vous avez trouvé.
Images fournies par: Bigstock.