10 pages d'atterrissage réactives à la mâchoire
«Responsive» est le dernier mouvement en matière de développement Web - et celui-ci a vraiment besoin d’être amélioré. Chaque jour, le nombre d'appareils, de plates-formes et de navigateurs utilisés pour accéder à Internet augmente. Et tandis que la majorité des utilisateurs accèdent toujours au Web à partir de plates-formes traditionnelles, la demande de sites Web fluides et adaptatifs est plus forte que jamais.
De nombreux concepteurs prennent ce changement à cœur et créent des pièces spectaculaires qui prospèrent dans les environnements mobiles, tablettes et ordinateurs de bureau.
Les sites suivants fusionnent la beauté avec des techniques de conception Web réactives et présentent vraiment ce qui peut être réalisé avec un peu d’innovation. Alors, prenez du pop-corn et un bloc-notes, vous allez vouloir faire attention.
StephenCaver.com
Quand vous ouvrez ce site sur votre bureau, il est immédiatement captivant. Le titre audacieux, noir et justifié contraste magnifiquement avec la qualité presque aquarelle du fond du désert de Mojave. Lorsque ce site s’adapte à la taille du mobile, le changement est important et le site est toujours aussi beau.
FoodSense.is
Avec sa disposition large, les lignes épurées et la structure simple ce site est un exemple fantastique de design web minimaliste. Lorsqu'il est affiché sur une tablette ou un mobile, il s'ajuste sans compromettre la composition ou le flux.
Warface.co.uk
L'utilisation de la couleur est frappante et le placement innovant des figurines 3D au premier plan du site engage vraiment le spectateur. Le site est unique et excitant, et aucun impact n'est perdu sur le mobile.
DanielVane.com
Là encore, le designer laisse parler son travail. La page de destination est magnifique dans sa simplicité pleine grandeur et cela se reflète parfaitement sur le mobile, laissant une illustration particulièrement saisissante qui comprend un logo subtil.
SasquatchFestival.com
Ce site est amusant et ludique et unique parmi les autres sites de cette liste. Ils renoncent à la simplicité pour s'amuser avec les couleurs, les images et les icônes d'une manière qui réussit encore à donner du style. Cela peut être difficile à faire dans un petit espace, mais les concepteurs de Sasquatch se débrouillent sans effort.
GravitateDesign.com
L'utilisation de la forme dans ce site se distingue immédiatement. En évitant l'utilisation de bordures et de boîtes de contenu, ils ont réussi à créer un site qui met en valeur leur travail.
VisualSupply.co
De la même manière que pour Warspace, c’est l’image qui fonctionne vraiment pour ce site . Il est parfaitement structuré et beau sur tous les appareils.
StudioMds.co
Les couleurs sombres peuvent parfois être négligées dans la conception Web, mais Studio Mds améliorer leur contenu avec leur décision audacieuse. La mise en page s’ajuste à une taille d’écran plus petite en ne perdant que des liens superflus.
ForefathersGroup.com
Ce site a une grande sensation vintage et utilise la texture, l'imagerie et la police pour créer cela. Il se réduit à merveille (mais c'est dommage de perdre ce singe).
MapBox.com
La palette de couleurs et l'utilisation des photos donnent Mapbox un espace propre dans lequel présenter leur produit. Là encore, la simplicité l'emporte sur la conception complexe ou complexe, et c'est précisément pour cette raison qu'elle fonctionne bien sur un écran plus petit.
Les choses à garder en tête lors de la conception
Donc, maintenant que vous avez regardé quelques sites réactifs stellaires, vous avez probablement envie de commencer à concevoir votre propre site. Mais avant de partir, voici quelques points à retenir.
Photos
Un obstacle à la conception réactive est la manière dont les appareils affichent les photos. Un MacBook Pro avec un écran rétine va rendre une image avec une résolution beaucoup plus élevée qu'un téléphone portable, ce qui peut souvent créer des problèmes. Une solution consiste à télécharger des copies haute et basse résolution de vos photos. En utilisant CSS, vous pouvez ensuite déterminer quelle image est chargée en fonction de la résolution d'écran du périphérique. Si vous utilisez des photos de stock, assurez-vous de faire des folies pour l'option de rez-de-chaussée supérieure.
Déterminer les points d'arrêt
Souvent, les conceptions réactives sont construites autour de ce que l'on appelle des «points de rupture» ou de la résolution à laquelle la disposition change, principalement basées sur des tailles d'écran de périphérique communes. Le problème avec cette approche est toutefois qu’elle ne prend pas en compte la diversité réelle des tailles d’écran. Il n'y a plus de taille "universelle". Ainsi, au lieu de prédéterminer les points d'arrêt sur 360px (mobile), 768px (tablette) et 1024px (bureau), il est préférable de laisser votre conception parler d'elle-même. Commencez par une mise en page terminée, puis redimensionnez votre fenêtre jusqu’à ce que la conception se casse - faites-en l’un de vos points d’arrêt puis continuez. Vous constaterez que votre site est beaucoup plus fluide.
Avez-vous trouvé une fantastique page de destination réactive? En avez-vous conçu vous-même? Faites le nous savoir dans les commentaires.