Bidaya, votre site Web adaptatif et optimisé - Troisième partie : navigation améliorée en JavaScript

 A. Bennouna  175270 vues  0 commentaire
 tutoriel, responsive, RWD, mobile, Web, CSS, HTML, PHP, RESS, JavaScript, Zepto

Dans ce troisième post, nous allons améliorer en JavaScript la navigation de notre site monopage responsive Mobile-First : Bidaya. A la fin de la série, vous aurez appris à réaliser des sites optimisés et performants pour navigateurs Web et mobiles !

Rappel sur les billets précédents de la série

Dans les deux premiers posts précédents de la série Bidaya, nous avons vu :

1. Comment concevoir notre site adaptatif monopage sur ordinateur et tablette, et multi-écrans sur mobiles,
2. Comment implémenter notre approche RESS codée en PHP, ainsi que le markup et les styles adaptatifs Mobile-First.

Du JavaScript pour améliorer la navigation sur petits écrans

Vous pouvez vite vous rendre compte que notre site monopage adaptatif de base souffre d’une navigation désagréable sur petits écrans, notamment sur mobile, à cause de la longueur de la page. En effet, même avec du contenu assez réduit, il faut défiler l’écran plusieurs fois pour pouvoir tout consulter. Nous transformerons ainsi notre site monopage en multi-écrans sur navigateurs de petite largeur.

Par ailleurs, à moins d’utiliser un markup et une feuille de style assez complexes, nous avons besoin de JavaScript pour gérer le menu escamotable.

Finalement, pour agrémenter l’expérience utilisateur, nous avons opté pour un affichage progressif des contenus sur écrans de petite largeur : exceptée la section principale, nous n’afficherons par défaut que les premiers paragraphes dans chaque section, et cacherons ainsi les paragraphes suivants. L'utilisateur déroulera ou escamotera ces contenus à son initiative.

Petits ajustements CSS pour largeurs d’écran inférieures à 480 px

Menu escamotable

Nous avons modifié notre image de fond (illustré par une flèche descendante) pour la modifier en sprite incluant l’image précédente, et son image inverse (flèche montante). Ainsi la propriété background de notre balise #nav_toggle doit être ajustée en conséquence :

Affichage progressif des contenus

Nous allons inclure une image de fond en bas de chaque section .main-section pour indiquer la présence de contenus cachés. Nous allons aussi prévoir une classe supplémentaire .main-section-disclosed quand les contenus sont dévoilés, et utiliser dans ce cas une autre image de fond :

Bloc CSS mis à jour pour les largeurs d’écran inférieures à 480 px

Et voici tout le bloc CSS concerné par les ajustements ci-dessus :

Code JavaScript

Utilisation de Zepto.js

Pour supporter le mieux possible les appareils tactiles et la plupart des navigateurs sur un grand nombre de plates-formes, nous allons utiliser la bibliothèque JavaScript Zepto.js, qui présente de nombreux avantages : compatible jQuery, elle supporte nativement les appareils tactiles, est plus rapide, et est vraiment modulaire.

Par contre, Zepto.js a un inconvénient principal : elle ne supporte officiellement aucune version du navigateur Internet Explorer, même sur mobile. Bien entendu, vous pouvez utiliser le même code avec jQuery en effectuant les ajustements nécessaires.

Modules Zepto.js utilisés

Pour notre implémentation, nous avons utilisé le commit 5a59c50e93, et nous aurons besoin des modules suivants :

• zepto.js (core), le noyau minimal (et non celui inclus dans le fichier à télécharger du dépôt Github),
• event.js, le fichier facultatif gérant les événements,
• touch.js, le fichier facultatif gérant les appareils tactiles,
• fx.js, le fichier facultatif gérant les effets d’animations,
• zepto-slide-transition.js, un plugin implémentant, notamment, les méthodes slideDown() et slideUp().

Initialisation du script et quelques variables

Pour profiter de notre variable PHP $isMobile, nous allons inclure le script en ligne à la fin de notre code PHP / HTML, juste avant la balise fermante </body>.

Nous engloberons tout le code JavaScript une fois le document prêt, et nous commencerons par initialiser quelques variables DOM, et la largeur seuil breakingPoint que nous utiliserons plus loin.

Nous détecterons ensuite si nous sommes en présence d’un appareil tactile en testant le support de l’événement tactile createTouch, et dans l’affirmative on initialisera la variable activate à l’événement tap, plus rapide que l’événement standard click.

Fonctions d’initialisation du mode multi-écrans et de l’affichage progressif

Nous déclarons ensuite la fonction initTabs() pour basculer au besoin le site monopage en écrans séparés, et la fonction initSections() pour démarrer le mode progressif d’affichage des contenus.

Code JavaScript conditionnel valable pour mobiles

Nous allons maintenant, grâce à la variable PHP $isMobile inclure un code JavaScript spécifique si nous sommes sur mobile, pour exécuter notamment les fonctions d’initialisation du mode d’affichage multi-écrans initTabs() et de l’affichage progressif initSections().

Code JavaScript conditionnel valable pour navigateurs bureau

Dans le cas contraire, nous incluons un code JavaScript spécifique aux navigateurs bureau, qui détecte d’abord si la largeur est inférieure au seuil breakingPoint, et dans ce cas, exécute les fonctions initTabs() et initSections().

Pour les navigateurs bureau toujours, nous ajoutons la gestion de l’événement resize : quand la fenêtre est redimensionnée, nous testons si nous franchissons le seuil breakingPoint :

• Si nous franchissons le seuil breakingPoint vers le bas, nous exécutons les fonctions initTabs() et initSections().
• Si nous franchissons le seuil breakingPoint vers le haut, nous annulons le mode d’affichage multi-écrans ainsi que l’affichage progressif.

La variable compactScreen sert à tester si le franchissement se fait pour la première fois. Cela nous évite des exécutions successives inutiles des blocs de codes appelés dans l’événement resize.

Gestion du menu escamotable

Nous incluons maintenant le code nécessaire pour détecter l’événement personnalisé activate pour dérouler ou escamoter le menu suite à une touche ou un clic.

Gestion de la navigation sur tout type d’écran

Ce bloc de code intercepte les événements de touche ou de clic sur tout élément du menu de navigation, y compris le bouton call-to-action.

Nous mettons ensuite en valeur le lien actif du menu.

Ensuite, pour les mobiles, ou sur bureau quand le mode compact est actif, nous basculons l’écran affiché vers la section demandée.

Gestion de l’affichage progressif pour mobiles et petites largeurs

Sur mobile ou sur bureau quand le mode compact est actif, nous dévoilons ou escamotons les paragraphes, excepté le premier, de chaque écran (ou section) :

Démonstration et résultat final

Vous pouvez maintenant tester le site monopage adaptatif et amélioré en multi-écrans sur mobile. Vous pouvez aussi retrouver le code PHP / HTML / JavaScript à jour sur Github et la feuille de style regroupant les différents blocs ci-dessus.

Etape suivante : Optimisation de la Performance Web front-end

Dans la quatrième (et dernière) partie de cette série, nous verrons comment optimiser la performance Web front-end de notre site monopage Bidaya.

Licence d’utilisation : CC-BY-SA 3.0

Tous les éléments de ce billet de blog, y compris les images, peuvent être utilisés et adaptés dans toute autre œuvre, même commerciale, en gardant la même licence, et à condition que l’origine des éléments soit attribuée à tellibus. Pour plus de détails, veuillez vous référer au texte complet de la licence d’utilisation CC-BY-SA 3.0.