En-têtes et logos réactifs - Astuces et pièges

Le concept de conception Web réactive a pénétré le Web et est devenu un élément essentiel pour les développeurs front-end. On ne peut nier la valeur du design réactif dans le monde moderne, mais il est difficile de comprendre comment concevoir correctement des mises en page réactives..

Le sujet pourrait être long car il existe de nombreux domaines uniques sur un site Web, mais se concentrer sur des éléments individuels peut vous aider à mieux comprendre les objectifs d'un utilisateur et à déterminer comment atteindre ces objectifs avec une conception réactive..

Je voudrais couvrir conseils de conception pour en-têtes, logos, et menus de navigation, comme ils se rapportent à la conception réactive. Tenez compte de ces suggestions qui s’appliquent à votre propre travail et veillez à concevoir vos interfaces en gardant à l’esprit le comportement des utilisateurs..

Barres de navigation plus minces

Sur de grands écrans, il est normal d'avoir de grands en-têtes, peut-être même des en-têtes surdimensionnés avec des niveaux de liaison à plusieurs niveaux. Mais les écrans plus petits n'ont pas le même espace et devraient être restreints au besoin.

Depuis que les applications mobiles natives ont généralement en-têtes fixes, c'est aussi une pratique courante dans le responsive design. Un en-tête fixe devrait également diminuer quand sur de plus petits appareils: cela laisse plus de place pour le contenu, mais donne toujours aux lecteurs un accès direct à l'en-tête et à la navigation.

Prenons l'exemple de la disposition Cartoon Brew sur un moniteur de taille normale et sur un appareil mobile..

Au point d'arrêt 600px, la navigation est réduite à presque la moitié de sa hauteur sur la page. Cela réduit le logo et le menu de navigation cliquable, mais ils sont moins beaucoup plus proportionnelle à l'espace d'écran relatif.

Considérez également que Cartoon Brew dispose d’un menu déroulant en tant que menu réactif sur l’écran du mobile. Cela veut dire superposition de contenu sur la page lorsqu’il est ouvert, il est donc important de laisser beaucoup d’espace pour cela..

Un exemple similaire peut être trouvé sur le site Web de Jacksonville Art Walk. La barre de navigation supérieure reste fixe lors du défilement mais se réduit sur de plus petits appareils. C'est mieux pour un design réactif car la barre de navigation plus mince laisse plus de place au contenu sur un écran mobile plus petit.

Chaque lien de la barre de navigation est associé à une icône associée au lien de texte. Cela a l'air génial sur un écran large, mais c'est trop détaillé pour les petits écrans.

La navigation Art Walk devient un menu déroulant avec des liens fixes autour du point d'arrêt de 770px. Les icônes sont cachées dans le menu déroulant car elles seraient trop petites et trop petites sur des appareils plus petits..

Lors de la conception d’un en-tête responsive, tenez toujours compte des éléments suivants: espace d'écran total tout en stylant la barre de navigation. Si vous ne voulez pas que l'en-tête reste fixe, c'est très bien, mais vous pouvez quand même vouloir réduire un peu économiser de la place en haut de la page.

Iconifier le logo

La plupart des logos contiennent du texte et une icône ou un graphique représentant la marque. Cela signifie que vous pouvez toujours iconifier (oui c'est un vrai mot) ce genre de logos jusqu'à un symbole de sa version complète.

C'est une technique puissante pour les en-têtes réactifs car il n'y a pas toujours assez de place pour un logo complet. Vous perdez un peu du faste et du glamour d'un logo en taille réelle, mais c'est le prix à payer pour une mise en page nette et réactive..

Découvrez le logo de Web Designer News et voyez comment il change à mesure que vous redimensionnez le navigateur..

Peut-être que tout le monde ne reconnaîtra pas cette icône lors de sa première visite sur le site, mais grâce à la reconnaissance de formes ce n'est pas un gros problème.

Les gens utilisent Internet suffisamment longtemps pour savoir que le coin supérieur gauche de la page est généralement réservé à un logo. Cette petite icône rose est également utilisée dans les favicon. Il est donc facile de tirer des conclusions sans aller trop loin dans le site..

Vous n’avez pas toujours besoin de vous fier aux graphiques pour cette technique de logo condensé. L'en-tête de Young And Hungry utilise un texte vert vif pour le logo, qui se termine par la suite par le texte "Y & H"..

Cela pourrait ne pas fonctionner pour tous les sites si l’image de marque n’était pas facile à reconnaître. Mais cela montre que les logos peut être simplifié dans les deux graphiques et texte, et les deux variantes prendre moins de place sur des écrans plus petits.

Gestion des arrière-plans plein écran

De nombreuses pages de destination utilisent des arrière-plans plein écran pour attirer davantage l'attention. C'est une technique puissante mais qui fonctionne souvent mieux sur de grands moniteurs.

Alors, comment gérez-vous cela sur un écran plus petit? En règle générale, les concepteurs soit enlever l'image de fond passé un certain point d'arrêt, ou l'image elle-même se réaligne s'insérer dans la fenêtre.

Cap Radio Raffle utilise cette technique sur sa page d'accueil. L'image de fond garde le point focal en vue à tout moment, peu importe la taille de l'écran redimensionné.

Ce genre de solution typiquement nécessite un peu de positionnement CSS mais c’est vraiment simple quand on s’y prend. Juste garder le point focal en vue à tout moment, et redimensionner le conteneur d'image s'adapter à la taille de l'appareil.

Au-delà des grands arrière-plans pour des raisons esthétiques, vous pouvez également utiliser de grandes images pour le contenu de la page. La page d'accueil de Mashable utilise un fond d'image en vedette pour l'histoire principale qui couvre toute la mise en page..

Leur mise en page réactive compresse l'image tandis que garder un point central. C'est difficile à faire, car les changements d'image décrits changent en même temps que l'histoire. Les photos doivent donc être soigneusement préparées. La solution de Mashable reste une excellente méthode de traitement des photos en plein écran pour les blogs et les présentations de magazines correctement conçues..

Simplifier la navigation

Lors de la réorganisation pour des écrans plus petits, garder autant de liens que possible dans la navigation, et le rendre facilement accessible. Cela signifie que vous devrez peut-être supprimer quelques liens si vous avez des menus déroulants à plusieurs niveaux..

Bien que si vous avez la bonne stratégie, il est toujours possible de garder toutes les listes déroulantes dans le vif du sujet. Par exemple, Kidscreen utilise un menu déroulant avec petites icônes de flèche indiquant des sous-liens dans le menu réactif.

De nombreuses personnes s’opposent au menu des hamburgers, mais j’ai fini par l’accepter comme élément nécessaire pour les longs menus de navigation. Il fonctionne simplement et est devenu largement compris par la plupart des utilisateurs de smartphones comme "le bouton du menu".

En fait, vous auriez du mal à trouver un site réactif qui ne repose pas sur le menu des hamburgers à trois barres. CyberChimps est un excellent exemple utilise un menu déroulant vertical plutôt qu'un slide-in.

La structure de navigation de CyberChimps est réorganisée pour glisser en haut de la page. Le menu tombe d'en haut avec gros éléments de bloc pour les liens.

Avec plus de domaine à cliquer et texte de lien plus grand, le processus de navigation dans les pages devient beaucoup plus simple. Essayez de suivre cette philosophie avec votre entête réactif complet, et vos conceptions s’amélioreront considérablement..

Construit le tien

Avec ces conseils à votre disposition, il ne devrait pas être difficile de créer des en-têtes adaptables utilisables. Bien qu’il existe de nombreux outils pour vous aider, le seul moyen de vraiment comprendre consiste à pratiquer.

Alors prenez ces techniques avec vous et commencez à créer des sites Web! J'ai également répertorié une poignée de ressources supplémentaires pour les en-têtes sensibles que vous pouvez consulter ci-dessous..

• Créer un menu de navigation réactif pour CSS mobile de base (teamtreehouse.com)
• Meilleure pratique pour l'en-tête de site Web réactif (ux.stackexchange.com)
• Comment puis-je rendre mon image d'en-tête correctement sensible? (stackoverflow.com)