Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Un Menu Principal Simple, Adaptatif et Mobile

by
Length:LongLanguages:

French (Français) translation by Thomas Triboult (you can also view the original English article)

Nous allons créer un menu simple et adaptatif. Notre solution nous permettra de mettre l'emphase sur le contenu de notre page, ce qui est la priorité absolue lors de la conception pour mobile. Il n'y aura pas de Javascipt et nous utiliserons l'approche »Mobile First«.

Nous allons créer un menu simple et adaptatif. Notre solution nous permettra de mettre l'emphase sur le contenu de notre page, ce qui est la priorité absolue lors de la conception pour mobile. Il n'y aura pas de Javascipt et nous utiliserons l'approche »Mobile First«.

Menu mobile

Si vous avez lu la critique de Mobile First par Luke Wroblewski vous connaîtrez sa déclaration :

En règle générale, le contenu a la priorité sur la navigation sur les appareils moobiles.

Ce qu'il désigne via cette expression, c'est que les utilisateurs mobile veulent une réponse immédiate ; ils souhaitent accéder directement au contenu qui les intéresse, pas être noyé par un menu.

Beaucoup de sites, mêmes adaptatifs, reste fidèles à la convention que le menu doit être en haut de page sur toutes les pages. Cette approche peut poser des problèmes d'utilisation sur appareils mobiles car leurs utilisateurs manquent souvent de choses : de place sur l'écran et de temps. Si le menu principal est en haut de page, il y a de grandes chances qu'il couvre un écran complet d'appareil mobile. Ce problème est exacerbé par les liens volumineux des interfaces tactiles, ce qui oblige les utilisateurs à faire défiler la page sous ce menu afin d'accéder au contenu désiré.

Prenez cet exemple du site London & Partners:

Une conception parfaitement convenable, mais avec une fenêtre mobile standard (320px x 480px) tout ce que vous voyez vraiment est un menu. Lorsque j'arrive sur cette page d'accueil, je préfèrerai certainement vois autre chose? London & Partners n'est pas le seul site a nous prouver cela ; c'est une pratique vue sur beaucoup de conceptions adaptatives à travers la toile.

Alors quelles sont les solutions?

Nous connaissons déjà quelques façons de contourner ce problème, souvent basées sur jQuery pour résoudre cette problèmatique. Prenez l'article de Chris Coyier sur le menu déroulant adaptatif de Five Simple Steps.


Grand écran, petit écran.

Avec jQuery, une copie du menu est créé grâce à une balise <select>, initiallement masquée par un style CSS. Quand les Media Queries détectent un écran plus petit, la liste déroulante est affichée et le menu original est masqué. C'est parfait pour les appareils mobiles comme les listes déroulantes prennent une place minimale et qu'elles utilisent l'interface utilisateur spécifique à l'appareil (comme l'ascenseur de l'iPhone).

Autrement, vous pouvez masquer votre menu et l'afficher lors du clic sur un bouton «menu». Vous pouvez avoir une démonstration de cette solution dans le dernier Bootstrap de Twitter.

Les écrans plus petits masquent les liens du menu et affichent une icone de liste (rapidement admises comme menu) qui affiche le menu au clic. De nouveau, les utilisateurs mobile ont accès à un maximum de contneu, mais avec des options de navigations dont ils n'ont pas forcément envie.

Solution CSS pure

Nous allons utiliser une technique proposée par Luke, qui se base sur du CSS et une approche »Mobile First«. Qu'est ce que l'approche »Mobile First«? Simplement, nous allons d'abord concevoir une interface pour appareil mobile, puis ajouter des informations à notre interface pour les écrans plus grands. Nous allons utiliser des Media Queries qui détecteront les tailles d'écrans par ordre croissant et ajouteront du style et des fonctionnalitées progressivement.

Ce qui signifie que le strict minimum de CSS et de ressources seront chargées lorsque votre design sera chargé sur des appareils mobiles. Mais aussi que les vieilles versions d'IE (qui ne reconnaissent pas les Media Queries) afficheront toujours la version mobile du site. Allez voir Leaving Old Internet Explorer Behind par Joni Korpi pour plus de détails sur ce point.

Etape 1 : Page HTML

Je vais vous expliquer les concepts derrière cette solution tout au long de cet article, pour l'instant ajoutons du code HTML à partir d'un fichier HTML5 vierge.

Note: N'oubliez pas la balise meta viewport!

Une fois fait nous allons ajouter du contenu à notre page, des choses simple pour notre démonstration. J'ai utilisé du texte de remplissage provenant du film Sacré Graal! des Monty Python (merci Chris Valleskey) afin de vous faire sourir pendant que vous essayerez ce tutoriel :)

Etape 2: Menu HTML

Maintenant que nous avons définit notre page de base nous allons passer au cœur du sujet, notre menu de navigation..

Oui, vous avez bien vu, on insère ce code après le dernier article. N'oubliez pas qu'on conçoit d'abord pour les appareils mobiles, nous nous occuperons de la partie ordinateur plus tard. Nous avons placé le menu en bas de page afin qu'il ne prennent pas de place à la'écran. Ajoutons un lien en haut de page pour que les utilisateurs puissent accéder à la nvigation s'ils le souhaitent.

Etape 3: Réinitialisation CSS

Suivant la façon dont vous débutez un projet web, cette étape peut changer de vos habitudes de travail. J'ai toujours trouvé que la réinitialisation de Eric Meyer est une bonne base de travail, d'autant plus qu'il l'a modifié récemment. Nous allons ajouter ses règles de réinitialisation dans une feuille de style :

Etape 4: Styles de base

Pour l'instant notre page n'a pas trop de personnalité..

.. améliorons la en ajoutant des règles simples.

Ce ne sont que des choses simples (fonts, line-heights, colors etc.), ce qui est important c'est que j'ai conçu le bouton "menu" afin qu'il flotte à droite à l'intérieur de la balise <header>, à l'endroit où on est censé trouver le menu.

En le survol vous pouvez voir son état survolé (inutile pour les interfaces tactiles bien sûr) mais ce style sera aussi utilisé sur les anciennes versions d'Internet Explorer. Pour les utilisateurs mobiles nous avons défini l'état :focus. Il est identique à l'état :hover, tout en apportant un retour aux utilisateurs d'interface tactile. Nos utilisateurs sauront qu'ils ont bien appuyé sur le bouton permettant d'accéder au menu.

En tout cas, en cliquant dessus vous verrez le menu, super.

Maintenant améliorons l'aspect graphique de notre menu.

Etape 5: Style du menu

Nous allons en réalité styliser notre menu presque comme sur l'exemple de London & Partners vu précédemment, cependant nous allons le mettre en bas de page..

C'est mieux. Nos liens de menu sont beau et larges (lisez Touch Target Sizes sur le blog de Luke Wroblewski pour plus de détails) et encore une fois n'oublions pas l'état :focus pour que l'utilisateur ai un retour visuel.

C'est aussi normal que nous ayons ajouté un lien "haut" afin que l'utilisateur puisse retourner en haut de page s'il le souhaite.

Etape 6: Agrandissons l'écran

Parfait, nous avons mis en place notre conception pour mobile, maintenant amélioront notre interface. Nous allons utiliser les Media Queries pour définir à partir de quelle dimensions notre interface mobile ne sera plus appropriée.

Mais comment définir cette limite? Il existe plein de manière d'utiliser les Media Queries, mais nous allons partir du principe qu'une fenêtre mobile fait 320px x 480px. Elle fait 320px de largeur en vue portrait et 480px en paysage, nous pouvons alors écrire une Medias Queries détectant tous les écrans plus larges que 480px.

Cependant, la prochaine étape est la tablette. L'iPad a une resolution de 980px x 768px, donc nous pouvons dire que tout ce qui est moins large que 768px peut afficher notre interface mobile. Tout ce qui est plus large que 768px peut afficher une interface dite ordinateur.

Nous pouvons maintenant ajouter nos règles Media Queries :

Cette Media Queries va appliquer toutes les règles qui y sont définies seulement lorsque la fenêtre fera au moins 768px de large. Notez bien l'utilisation du mot clé only, qui permet à Internet Explorer 8 de ne pas essayer d'exécuter notre règle. Allez voir ma dernière explication pour plus de détails.

Commencons par masquer notre bouton "menu" :

Avec un navigateur plus large, le bouton "menu" est masqué.

Etape 7: Déplacer le menu

Maintenant nous devons amener notre menu en haut de la page. Nous allons le supprimer du flux de la page en le positionnat de façon absolu en haut de fenêtre.

Afin de rendre cela possible nous devons positionner son élément parent (.wrapper) de manière relative. Nous pouvons faire ceci soit dans la Media Queries, soit dès le début de notre feuille de style.

Une fois le menu en position absolue, nous devons supprimer le style des éléments du menu. Il y a peu à faire, mais il faut afficher les éléments en ligne et il faut supprimer les bordures et les énormes marges internes des liens. Nous état de survol définis précédemment sont bons, nous n'avons pas besoin de les modifier.

Etape 8: Une dernière chose

Si vous avez fait attention, vous avez vu qu'il reste un lien "haut" dans notre menu. Nous n'en avons plus besoin maintenant.

Nous pouvons le supprimer de plusieurs manières, mais pour bien maitriser cette étape ajoutons un classe CSS à cet élément :

Et ensuite nous pouvons nous charger de le masquer dans la Media Query:

Conclusion

C'est tout! Il existe plusieurs méthodes basées sur ce principe (utiliser une icon représentant le menu peut en être une) et, bien sûr, vous pouvez ajouter d'autres Media Queries pour les largeurs d'écrans supérieures. En espérant que ce tutoriel vous ai donné les bases pour répondre à ce besoin. Nous avons créé un menu simple, responsible et compatible avec les interfaces tactiles en utilisant une approche Mobile First, tout en donnant plus d'importance au contenu de notre page et en améliorant l'expérience utilisateur. Que demander de plus?!

Ressources complémentaires

Une liste des quelques liens utilisés par ce tutoriel :

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.