21 excellents outils pour une conception Web réactive
En tant que concepteur de sites Web, nous savons que la conception de sites Web réactifs est venue pour rester. Vous avez pris votre temps pour créer un site Web très beau et robuste, avec un nombre considérable de trafic vers votre site provenant des moteurs de recherche. Ensuite, vous arrivez à la réalité des appareils. Quel appareil sera utilisé pour ouvrir votre site Web ?. Qu’en est-il de la hauteur et de la largeur de l’appareil ? Il existe des milliers d’appareils, ainsi que plusieurs dimensions et fenêtres.
En tant que concepteurs Web, nous savons que notre conception sera visualisée à partir de divers appareils et navigateurs, et en même temps, nos blocs de code seront exécutés par divers appareils.
Il y a eu une augmentation massive du nombre d’appareils compatibles avec le Web, accompagnés d’une grande densité de pixels, d’interactions, de résolutions, etc. À en juger également par les tendances actuelles de la technologie, il y aura plus d’appareils avec lesquels les gens pourront accéder au Web.
Le fait que la conception Web réactive soit nécessaire pour chaque site Web ne signifie pas que c’est aussi simple que cela, compte tenu du fait que vous devez prendre en compte plusieurs appareils ainsi que les dimensions et les fenêtres. Le défi est que nous devons créer une interface qui s’adaptera à pratiquement tous les appareils, du petit écran au grand écran de la salle de cinéma.
Cela rendait simplement impératif que tous les sites Web soient réactifs à divers appareils pour une navigation facile et une meilleure expérience utilisateur.
Si vous avez vu l’un de nos précédents articles sur la boîte à outils de conception Web réactive utile, vous savez qu’il existe de nombreux outils sur le Web pour la conception Web réactive. Mais, grâce à mes nombreuses années d’expérience en tant que concepteur, développeur et consultant Web, associées à des recherches approfondies que j’ai effectuées, je partagerai 21 excellents outils et ressources pour la conception Web réactive. Attention, pour les concepteurs qui n’ont pas encore accepté la conception Web réactive. Je vous recommande de lire Importance et raisons de la conception Web réactive, vous pouvez également poser votre question et un expert vous répondra via votre adresse e-mail. Après quoi, vous pouvez continuer ici avec 21 excellents outils pour la conception Web réactive.
01 Fondation ZURB
ZURB Foundation est l’un des cadres les plus acceptés et les plus avancés au monde pour un site réactif. Beaucoup de ressources avaient été dépensées par ZURB sur le framework, en plus des nombreux efforts qui avaient été consacrés au projet open source sur le framework.
ZURB Foundation a une énorme stratégie d’amélioration, car vous êtes autorisé à augmenter la couche de complexité en fonction de la taille de l’écran et des capacités de conception. Non seulement cela, vous trouverez également une bibliothèque complète composée de plusieurs composants d’interface utilisateur, ce qui vous permettra de prototyper plus facilement n’importe quelle interface que vous pouvez imaginer.
02 Jetsangle
Il y a eu un revirement massif dans le processus de conception de wed, car le wireframe ne montrera pas à quoi ressemblera une conception particulière dans plusieurs environnements Web. Et des connaissances en codage sont nécessaires pour utiliser certains outils de prototypage.
C’est là qu’intervient Jetstrap. Il permet au concepteur d’assembler rapidement un prototype simplement en faisant glisser et en déposant des composants de l’interface utilisateur vers le canevas. Des compétences en développement frontend ne sont pas nécessaires pour démarrer, et vous vous retrouverez avec une page Web qui respire. Il vous suffit d’utiliser les outils de glisser-déposer sur l’interface.
03 Conception réactive hebdomadaire
Le développeur Web Justin Avery passe du temps à envoyer une newsletter dédiée sur les ressources, les outils et les techniques de conception Web réactive. En tant que designer, je passe une partie de mon temps sur twitter à lire des flux sur le responsive web design. Certains des flux incluent les dernières ressources et des conseils utiles sur la création d’une conception Web réactive. Rejoindre une discussion sur la conception de sites Web réactifs à partir de LinkedIn améliorera sûrement vos compétences et vous donnera les dernières idées sur les tendances actuelles en matière de conception de sites Web réactifs.
04 Style Prototypage
Le prototype de style est une page HTML montrant le style de bouton, la typographie, la couleur, le style de photographie, le survol et d’autres éléments pour un site proposé.
L’un des principaux objectifs du prototype de style est de créer des livrables utiles et reproductibles. Bien qu’il n’y ait pas de règles pour créer un prototype de style, vous devez inclure certains éléments de base, comme le style de bouton, la typographie, la couleur et le survol en plus d’autres éléments qui peuvent être inclus.
Le prototype de style vous permet d’ajouter de l’animation, de la couleur et d’autres éléments dans l’environnement Web.
05 Éléments Collages
Lors de la création de maquettes pleine page, l’une des choses les plus difficiles auxquelles nous devons faire face en tant que concepteur est la conception de la minute de chaque page. Professionnellement, il est conseillé de passer plus de temps à concevoir les messages de héros sur la page d’accueil que de passer plus de temps sur le reste des pages.
En tant que concepteur, créer des maquettes de votre site dans Photoshop n’est pas conseillé avec les tendances actuelles de l’industrie du développement Web, car vous avez beaucoup d’autres choses à faire.
Le fondateur de l’agence SuperFriendly, Dan Mall, est allé encore plus loin dans la simplification des choses avec Element Collages.
Element Collages a une très bonne interface utilisateur pour l’exploration visuelle des composants de l’interface. Les collages vous aident dans la direction visuelle, et vous n’avez pas à créer l’ensemble du composant par vous-même, compte tenu du fait que vous ne concevez pas pour un seul appareil.
06 Poires
Certains avantages importants des guides de style frontend impliquent de permettre des tests plus faciles, un meilleur flux de travail, un vocabulaire partagé et de servir de référence sur laquelle revenir sans cesse. Pears est un thème wordpress open source créé par Dan pour créer un guide de style frontend.
Pears permet aux concepteurs d’utiliser facilement une bibliothèque commune pour un système de conception cohérent.
07 Icomune
Retina et d’autres écrans haute résolution deviennent rapidement à l’ordre du jour, les icônes bitmap ne s’adaptent pas très bien à ces appareils haute résolution. Heureusement, l’industrie du développement Web est à la hauteur de la tâche.
La solution efficace consiste à créer une icône indépendante de la résolution, qui peut être obtenue en créant une police d’icône personnalisée et en l’intégrant avec CSS @font-face.
Iconmoon facilite simplement le processus de création et d’affichage de la police d’icônes. Vous pourrez choisir parmi une bibliothèque d’icônes, avec des options pour télécharger votre icône. À partir de là, vous pouvez ensuite générer votre police d’icônes personnalisée et télécharger un package comprenant la police et le CSS approprié. Lorsqu’il s’agit de créer une icône indépendante de la résolution, Iconmoon est un outil important.
08 Foresight.js
Divers appareils ont différentes manières d’afficher les images bitmap, mais en tant que concepteur, vous devez garder à l’esprit que le chargement d’images haute résolution peut augmenter le poids de la page. Foresight.js détecte a la capacité de détecter l’affichage et la connectivité de l’appareil pour déterminer s’il faut charger ou non des composants haute résolution.
09 Détecteur
La détection et le profilage des appareils peuvent parfois être délicats, car la bibliothèque d’appareils est difficile à gérer. Étant donné que la détection des fonctionnalités repose sur la détection côté client, le seul fait de dépendre de celle-ci peut limiter la flexibilité lors de la fourniture de fonctionnalités à une large gamme d’appareils.
Cela conduit à la création d’un détecteur par Dave Olsen, à l’aide d’un script PHP et d’un navigateur basé sur Javascript, ainsi que d’une bibliothèque de détection de fonctionnalités. La bibliothèque modernise les utilisateurs et la détection des agents utilisateurs pour déterminer les classes de périphériques. Detector a la capacité de s’adapter seul aux nouveaux appareils et navigateurs sans avoir besoin d’extraire de la base de données centrale des informations du navigateur.
10 Enquire.js
Chaque concepteur connaît l’importance d’utiliser des requêtes multimédias en CSS. Que se passe-t-il alors lorsque vous souhaitez modifier certaines expériences à un certain moment ? Ceux-ci peuvent être facilement réalisés avec le script Enquire.js.
Le script Enquire.js utilise matchmedia pour exécuter conditionnellement certaines fonctions et charger un script si certaines conditions sont remplies. Avec cela, vous pouvez vous attendre à une meilleure expérience utilisateur et facile de la part des utilisateurs.
11 SocialCount
Le chargement de widgets de partage de médias sociaux tels que Facebook, Twitter et Google nécessite 19 widgets de requête HTTP et ajoute 246,7 Ko supplémentaires au poids des pages, ce qui augmente souvent le temps de chargement des pages Web et consomme plus de bande passante.
Zach Leatherman y a remédié en créant une solution légère, nommée social count. Il s’agit d’un petit script qui charge paresseux les widgets sociaux, afin que les utilisateurs ne soient pas du tout pénalisés.
12 FitVidéos
Plusieurs objets multimédias, y compris les vidéos, sont différents par rapport aux images, en ce sens qu’ils ne conservent pas certains de leurs proportions après le redimensionnement. Cela crée un problème de mise à l’échelle lors de la visualisation de vidéos à partir d’une multitude d’appareils Web différents.< br/> Chris et un autre concepteur ont réussi à développer un plugin appelé FitVids.js.le plugin est capable de détecter et d’utiliser le bon rapport de vidéo ou tout autre objets multimédias lors du redimensionnement. Avec cela, vous pouvez obtenir un rapport de redimensionnement correct lorsque votre vidéo est redimensionnée et, par conséquent, obtenir des objets multimédias finement affichés, y compris des vidéos dans vos applications.
13 CSS mobile-first compatible avec IE
Chaque concepteur sait à quel point les requêtes multimédias sont importantes, mais le fait est qu’Internet Explorer ne prend pas en charge les requêtes multimédias. Dans le même temps, en tant que concepteur, vous ne pouvez pas décider de supprimer la requête multimédia, simplement parce que vous souhaitez prendre en charge l’ancien IE. Ce problème peut être facilement surmonté en utilisant Sass. Sass nous aidera à adopter des styles axés sur les mobiles et, en même temps, fournira des styles de bureau appropriés à l’ancienne version d’IE.
14 emplois.
En tant que concepteur, si vous vérifiez en ligne pour rechercher des outils de test de port d’affichage, vous trouverez de nombreux outils de test de port d’affichage. Mais le problème est que la plupart des outils de test de la fenêtre d’affichage reposent sur des largeurs d’appareils populaires telles que 320, 768, 1024, etc.
Ish classe et fait ressortir les plages générales (petite, moyenne, grande, etc.) juste pour s’assurer que vous faites ressortir le spectre de résolution général.
15 requêtes média proportionnelles
Certains concepteurs utilisent encore des valeurs de pixel pour définir des points d’arrêt, alors que nous utilisons des largeurs, des mesures et des unités de police par rapport au point de vue de divers appareils. Un bon tutoriel a été donné par Lyza Gardner qui explique comment nous pouvons utiliser des unités relatives pour les points d’arrêt afin de créer une meilleure expérience utilisateur.
16 MQTest.io
En tant que concepteur, il peut parfois être intimidant de suivre les requêtes multimédias prises en charge par un navigateur particulier. Ceci est facilement résolu en utilisant MQTest.io développé par Viljami Salminen. L’outil vous aidera à reconnaître et à analyser diverses requêtes multimédias auxquelles répondent différents navigateurs Web. Avec cela, vous pourrez peut-être également utiliser des requêtes multimédias qui ne sont pas couramment utilisées.
17 Bookmarklet de requête multimédia Sparkbox
Sparkbox est un bookmarklet de requête multimédia qui aide à déterminer les requêtes pour les médias actuels ou en cours d’utilisation. Il est impératif que les concepteurs aient accès aux dimensions de l’écran, car cela permet de gagner du temps et aide également à déterminer les requêtes média proportionnelles.
En tant que concepteur, nous savons à quel point cela peut être coûteux, difficile et même intimidant lorsqu’il s’agit de tester dans une pile représentative de navigateurs et d’appareils. Ceci est facilement résolu lorsque nous utilisons BrowserStack.
La pile de navigateur fournit un accès à distance à plusieurs appareils et environnements, vous permettant ainsi d’effectuer des tests d’assurance qualité. BrowserStack est aussi impressionnant que n’importe quoi car il est également efficace lors des tests sur les anciennes versions d’Internet Explorer.
19 Mobitest
La performance est l’un des aspects les plus essentiels de la conception Web. Avec Mobitest, vous pourrez voir comment vos conceptions fonctionnent avec quelques analyses.
Lorsque vous testez votre conception sur Mobitest, il vous suffit de saisir une adresse Web, après quoi l’outil affiche le site sur un appareil réel, et vous donne en même temps de nombreuses statistiques de performances, car vous pourrez également connaître la charge le temps et la taille moyenne des pages ainsi que d’autres statistiques.
20 Adobe Edge Inspecter
L’importance de tester sur un appareil réel ne peut pas être surestimée pour un concepteur Web, car vous devez voir et analyser le type de performances que votre conception apportera à un utilisateur avant la publication. Un Adobe Edge Inspect a rendu les tests sur un appareil réel très simples et directs, car vous disposez de l’outil d’actualisation automatique de tous les appareils connectés. Vous pouvez également tester le code sur une large gamme d’appareils.
21 Codepen Pro
CodePen est un outil qui permet de démontrer rapidement des modèles et des techniques réactifs. C’est un outil qui aide également les performances de nos conceptions sur différents appareils et ordinateurs, tout en continuant à taper.
CodePen est un outil puissant qui vous aide à voir les résultats de votre code sur plusieurs appareils et ordinateurs au fur et à mesure que vous tapez.
Conclusion
Tous les 21 outils mentionnés ci-dessus sont bons pour la conception Web réactive. Mais, chacun des outils a des fonctionnalités différentes, personnellement, je n’ai pas de préférence, car tous les outils sont efficaces, mais avec une interface et des fonctionnalités différentes. Le choix t’appartient.