Un site one-page responsive : Walkthrough – Partie 1, navigation

Je me suis dernièrement « amusé » à réaliser un site corporate en one page et responsive design, afin de consolider une prise d’expérience sur le sujet. J’ai donc décidé de partager les étapes de ce travail en deux parties : la première détaille la navigation et la mobilité, la seconde partie parlera des fonctionnalités du site one page. Voici la première partie !


Voir le site de démonstration Fork on GitHub

> Partie 1 : Navigation et responsive design
Partie 2 : L'ambiance par section
Partie 3 : Le portfolio et tri dynamique
Partie 4 : Membres de l'équipe en CSS3

La réalisation de ce site n’est pas si complexe que cela, il faut juste essayer de se construire un fil conducteur. Pour cela il faut se poser différentes questions… En vrac, voici celles que je me suis posées avant de démarrer :

  • Pourquoi one page ? Qu’est-ce que je veux y mettre ?
  • Et le parallax alors ?
  • Pourquoi responsive ? Mobile first ou pas ?
  • Est-ce que je veux des ambiances différentes pour chaque section ?
  • Le menu responsive : en liste déroulante, à la suite, en slide..?

noidea

Les réponses à ces questions ne sont pas universelles, chaque cas étant particulier. Néanmoins, il y a des évidences parmi lesquelles on retrouve la number one : Une site one page n’est pas fait pour un site à contenus. C’est idiot, mais il arrive de tomber sur des sites dont l’éditeur a oublié que le web est avant tout une question de contexte, et se contente de coller à un effet de mode.

Tout l’intérêt du one page est de pouvoir présenter une information compartimentée. Par exemple la présentation de l’iphone 5c par apple : http://www.apple.com/fr/iphone-5c/. On voit bien l’utilité du one page ici : parallax, effets de défilement, …

En l’occurrence, j’ai choisi de partir sur du one page pour plusieurs raisons :

  • Peu de contenus. Si j’avais opté pour un site classique j’aurais eu quoi, trois pages ? Et pour chacune, quelques ligne et 4 photos ? un site one page (ou tout autre style qui sort des classiques) est parfait pour un site de présentation de petite agence ou d’indépendant. Il y a des limites bien entendu, mais celles-ci peuvent facilement être levées (blog, recrutement dans une section à part par exemple).
  • Facilement « responsivable ». Oui je sais, ce n’est pas la meilleure des raisons, mais zut hein 🙂
  • Pour creuser un peu cette mode et ses limites, surtout
  • Et puis finalement, pourquoi pas ?

Point de vocabulaire

Juste pour être sur que l’on parle de la même chose, et au risque de défriser certains puristes, voici le vocabulaire que je vais employer :

  • Desktop : ordinateur de bureau.
  • Header (standard ou mobile) : partie qui graphiquement est en en-tête
  • Menu : self-explanatory, c’est le menu qu’il soit desktop ou mob
  • Menu desktop : menu vu sur un navigateur web standard
  • Section : section du site one page, celle qui apparait lorsque l’on clique sur une entrée du menu
  • SectionX : section1, section2, section3, …

Menu et scrolling

Scroller c’est bien, mais comment faire pour savoir où on en est ? Il y a des solutions pour ça… J’a choisi de partir sur un mix de solutions ;

Le menu sticky

Tout en scrollant, le menu doit pouvoir rester accroché en haut de l’écran. La mise en oeuvre est rapide. Prenons ce code html :

<header class="headerstandard">
  <div class="headerstandard-inner">
    <h1>Glassero</h1>
    <nav class="menu menustandard">
      <a class="target-section1 current" href="#section1">Home</a>
      <a class="target-section2" href="#section2">About</a>
      <a class="target-section3" href="#section3">Portfolio</a>
      <a class="target-section4" href="#section4">The team</a>
      <a class="target-section5" href="#section5">Contact</a>
    </nav>
  </div>
</header>

Et bien il nous suffit de lui ajouter ce bout de CSS pour le rendre « sticky » :

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  overflow: hidden;
}

Il nous suffirait d’un peu de couleurs pour nous rendre compte de ce que cela donne, mais l’idée est là : nous disposons d’une zone fixe qui restera tout le temps à l’écran.

Pour la suite, nous considérerons que le menu est stylé. Grave.

Les waypoints

Que le menu reste c’est bien, mais qu’il nous affiche notre position c’est mieux. A savoir : au niveau de mon scroll au kilomètre, j’en suis où dans mon arborescence ? Pour le savoir nous allons utiliser le plugin jquery waypoint.

Ce plugin permet de définir des points de passage, et grâce au javascript (oui oui, jquery n’est pas une technologie à part entière, mais bien juste une bibliothèque javascript) nous allons pouvoir déclencher un événement.

Par exemple au hasard : changer la classe CSS d’un élément du menu. Pour l’utiliser, là encore ce n’est pas compliqué. Prenons la structure HTML suivante :

<div class="main" id="main">
  <section id="section1" class="home"></section>
  <section id="section2" class="about"></section>
  <section id="section3" class="portfolio"></section>
  <section id="section4" class="team"></section>
  <section id="section5" class="contact"></section>
</div>

Vous vous rappelez que chaque lien du menu dont nous avons évoqué la structure HTML plus haut avait pour classe quelque chose comme « target-sectionX » ? Et bien c’est maintenant qu’on va comprendre pourquoi 🙂 Petit indice : on notera que chaque section a pour id « sectionX »…

Après avoir intégré waypoint, on va pouvoir l’utiliser de cette façon :

$("#main section").waypoint( function( direction ) {
  if( direction === 'down' ) {
    change( $( this ) );
  }
}, { offset: '20%' } ).waypoint( function( direction ) {
  if( direction === 'up' ) {
    change( $( this ) );
  }
}, { offset: '-20%' } );

Un peu d’explication peut-être : nous allons en quelques sortes poser un « listener », un espion qui va surveiller les sections du div#main. Ainsi, à chaque fois qu’une de ces sections apparaît à l’écran :

  • après un scroll vers le bas (direction === ‘down’) et avec une marge de 20% (offset: ‘20%’)
  • après un scroll vers le haut (direction === ‘up’) et avec une marge de -20% (offset: ‘-20%’)

Alors on déclenche l’appel à la fonction « change » en lui passant comme paramètre l’objet « section » qui est en train d’apparaître. Si vous avez suivi, tant mieux, sinon je résumerait en disant qu’on déclenche une fonction qui va agir sur une section données, à chaque fois que celle-ci apparaît à l’écran.

Cette fonction s’occupe de vider les classes des entrées du menu, et attribue la classe « current » à la bonne entrée. Ainsi, pour peu qu’on applique les bons styles et notamment à la classe .current, l’entrée de menu qu’on a définit comme étant liée à telle section devrait se démarquer des autres, comme ceci :

menu2

Voici la fonction :

function change($section){
  $('nav.menu a').removeClass('current');
  currentSection = $section.attr('id');
  $('.target-'+currentSection).addClass('current');
}

L’avantage que présente jQuery c’est le coté explicite de ses noms de fonctions. Cela me permet de ne pas avoir à détailler cette fonction ni ce qu’elle fait 🙂

success-baby

Optimisation

Il reste toutefois un petit détail à optimiser : Le menu reste et c’est bien. Seulement il prend la moitié de l’écran le bougre ! Ce qu’on veut donc, c’est le « shrinker », le réduire au scroll.

Pour cela, je me suis inspiré de la partie javascript d’un blueprint de chez codrops : http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/. Ce tutoriel utilise également la bibliothèque Classie qui permet de gérer les classes des objets HTML. Je ne vais cependant pas vous faire l’injure de recopier tout le tutoriel, mais rapidement l’idée consiste en quelques étapes :

  • Détecter le scroll
  • Si je dépasse un certain offset par rapport au haut de la page, je change la classe du menu (headerstandard devient headerstandard-shrink)
  • Bonus : Grâce aux effets de transition CSS3, on peut avoir un effet de transition tout smooth. Pour plus d’infos sur les effets CSS3 dont ce n’est pas ici l’objet, je vous renvoie à ce tutoriel : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Il est vrai que j’aurais pu réutiliser waypoint, mais je n’ai pas su résister à la tentation d’aller essayer quelque chose de nouveau. Oui, j’aime me casser la tête, mais je rappelle que l’objectif ici était d’approfondir ses connaissances 🙂

Navigation

Nous avons le menu, qui s’adapte au scroll et change l’élément courant en fonction de la section que l’on visualise. C’est bien, mais comment je fais pour que le clic sur un bouton m’emmène de façon smooth vers la section qui va bien ?

C’est vrai qu’il y a toujours la possibilité de faire un lien d’ancre, mais bon… C’est un peu brutal non ? Nous allons plutôt partir sur l’utilisation d’animate, « the new fragrance » maintenant inclus dans jQuery.

Là encore, beaucoup de simplicité :

$('nav.menu a').click(function(){
  $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
  }, 500);
});

Au click sur une entrée de menu, on va scroller doucement vers la cible du lien, en calant le haut de cette cible sur le haut de l’écran. Le double effet kiss cool là encore, c’est que comme on l’a vu plus haut avec les waypoints (ou points de contrôle), le menu courant se définit avec le scroll, pas au clic. Ainsi pas besoin d’aller s’embêter à gérer le changement de style du menu courant au clic.

Et juste pour se prémunir des petits malins qui redimensionnent leurs navigateurs pour tester la « responsivité » d’un site web, on va aussi utiliser jQuery Smart Resize. Cette bibliothèque a un double effet kiss cool : elle redimensionne nos petites sections pour qu’elles occupent tout l’écran, mais elle redimensionne également celles-ci en temps réel en cas de redimensionnement tout en les recalant en haut de l’écran. Pour ce faire elle ajoute un événement « debouncedresize » au catalogue d’événements jQuery, afin de détecter tout redimensionnement. Voici son utilisation :

$( window ).on( 'debouncedresize', function() {
  $('html, body').animate({
    scrollTop: $("#"+currentSection).offset().top
  }, 500);
} );

Responsive design

Ici, nous allons attaquer un morceau qui peut paraître un peu difficile. En effet, le responsive design est un sujet à part entière qui ne peut faire l’objet que d’une section sur un article. Je ne vais donc volontairement pas rentrer dans les menus détail des différentes approches mobile-first et compagnie.

A propos des styles

De façon complètement arbitraire et parce qu’au fond, c’est le résultat qui compte, je choisis comme approche:

  • de développer mon site avec des éléments flottants pour me faciliter la tâche
  • puis de spécialiser mes éléments au fur et à mesure
  • enfin, je rajouterai une sorte de surcouche à l’aide de média querries.

L’objectif est de masquer les éléments non appropriés au contexte, de révéler les autres, mais également d’adapter les assets de type images pour ne pas charger une image de 800×600 pour un smartphone par exemple, ça n’a pas de sens.

De fait, il ne me reste concrètement plus que le menu à gérer pour le coté responsive, et quelques adaptations à la marge.

Idéalement, il aurait également fallut générer des images de multiples dimensions pour l’ensemble du site (comme par exemple pour le portfolio) afin de les charger à bon escient en fonction du device, mais ayant déjà réalisé l’exercice en développant http://www.motodepotvalence.fr/, j’ai fait là encore le choix arbitraire de m’en passer 🙂

Sans spolier la fin de ce tuto, voici par exemple la structure de ma feuille de style principale :

  • $INDEX0 – FONTS AND RESET
  • $INDEX1 – GENERAL
  • $INDEX2 – HEADER COMMON
  • $INDEX3 – MENU COMMON
  • $INDEX4 – HEADER STANDARD
  • $INDEX5 – HEADER STANDARD REDUIT
  • $INDEX6 – HEADER MOBILE
  • $INDEX7 – MAIN CONTENT
  • $INDEX8 – PORTFOLIO
  • $INDEX9 – THE TEAM
  • $INDEX10 – CONTACT
  • $INDEX11 – MEDIA QUERIES : TABLETS
  • $INDEX12 – MEDIA QUERIES : SMARTPHONES

Le menu

Là encore, choix difficile. Un menu mobile peut se gérer de différentes façons : swipe, slidin, fade, sticky, et autres mots anglais bien « in » qu’on utilise quand on a le swag, et qui traduisent les usages des mobinautes.

Concrètement, il faut voir que toutes les zones de l’écran d’un smartphone ne sont pas aussi accessibles les unes que les autres :

mobile

Seulement voilà, d’un point de vue ergonomique, le mobinaute est habitué (merci facebook) à voir un menu en haut à gauche, en mode slide ou on swipe. Du coup, on a tous plus ou moins pris l’habitude d’accéder à un menu d’une certaine façon.

Sachant que le web n’est pas fait de « règle » mais de contexte, j’ai fait le choix de m’adapter à ces usages, même si je ne doute pas un seul instant que ceux-ci ne durerons pas éternellement.

Behold donc, le menu qui se déroule au touch sur un bouton :

menu

Pour le réaliser, aucun plugin ni accessoire. Non monsieur, non madame, aucun. En effet, rappelez-vous : J’ai fait le choix tout à l’heure de coder directement tous mes éléments, et de les masquer / démasquer en fonction du contexte. Voici mon header mobile, composé d’un bouton en position absolue, de mon titre, ainsi que du menu mobile masqué :

<header class="headermobile mobile col-12">
  <button id="releaseMenu" ></button>
  <h1>Glassero</h1>
  <nav class="menu menumobile">
    <a class="target-section1 current" href="#section1">Home</a>
    <a class="target-section2" href="#section2">About</a>
    <a class="target-section3" href="#section3">Portfolio</a>
    <a class="target-section4" href="#section4">The team</a>
    <a class="target-section5" href="#section5">Contact</a>
  </nav>
</header>

J’applique un peu de style dessus pour lui faire prendre toute la largeur de l’écran, le positionner comme il faut sous mon header… Et avec un petit coup de baguette magiquery CSS :

@media screen and (max-width: 767px ) {
  .headerstandard {
    display: none;
  }
  header.headermobile  {
    display: block;
  }
}

De fait, les choses sont simples :

  • Ma média querry masque le .headerstandard au profit du .headermobile
  • Mon .menumobile est toujours masqué
  • Et j’ai un button#releaseMenu

Wait, what ? Comment ça un bouton releaseMenu ? Ce bouton va me servir à dérouler le tapis rouge aux entrées de mon menu. En effet, avec un soupçon de javascript et de jQuery on obtient la chose suivante :

$('#releaseMenu').click(function(){
  toggleMobileMenu();
});
$('.menumobile a').click(function(){
  toggleMobileMenu();
});
function toggleMobileMenu(){
  $('.menumobile').slideToggle();
}

Ici encore, le code s’explique par lui-même : si je clique sur le bouton ou sur un lien du menu, je change l’état du menu (toggle) : masqué ou affiché, le tout avec un effet de slide.

Vous vous souvenez, lorsque l’on a vu comment faire en sorte que le menu associé à chaque section se démarque des autres lorsque la section apparait  l’écran (waypoint) ? On avait entre autre ce code là :

$('nav.menu a').removeClass('current');

Vous noterez également que nos deux menus, desktop et mobile, on comme classe « menu ». Cela veut simplement dire qu’il n’y a rien à faire d’autre pour adapter notre suivi du scroll : le menu courant est changé pour les deux menus.

Et voilà, j’ai mon menu mobile fonctionnel, sexy et à pas cher 🙂

pbellemar

Nous arrivons à la fin de cette première partie. Les prochaines parties aborderont le sujet de l’ambiance pour chaque section, du portolio et du tri es éléments. Pour l’un de ces sujets je me suis quelques peu renié, vous verrez comment. Nous parlerons aussi d’une manière de présenter les membres de son équipe tout en transitions CSS3, ainsi que des formulaires HTML5 et de leurs différences avec les formulaires classiques. Et à la semaine ! Prochaine !

thats-all-folks

87 commentaires

  1. Bonjour , merci d’abord pour votre site par ce que sincèrement il m’aide beaucoup pr creé mon propre site ma question est: comment je peux display le scroll dessous le site ? merci de me repondu

  2. Bonjour Patrick (c’est encore moi)

    Voici mon code toggle :
    $(‘#releaseMenu’).click(function(){
    toggleMobileMenu();
    });
    $(‘.menumobile a’).click(function(){
    toggleMobileMenu();
    });
    function toggleMobileMenu(){
    $(‘.menumobile’).slideToggle();
    }

    $(‘.menumobile a’).click(function () {
    $(‘.menumobile’).slideUp(fast);
    });
    Cette dernière ligne me permet de rétracter le menu une fois que l’on clique sur un

    Ma question (toujours la même) et mon problème c’est que
    Quand je suis sur mobile et que je vais sur le site internet, le menu est déjà déroulé, et mes utilisateurs ne comprennent pas et naviguent dans le peu d’espace qu’il reste étant donné la longueur du menu
    voir
    http://www.hairdresser-rodolphe.eu sur mobile pour s’en rendre compte tout de suite.
    Comment faire pour que ce menu soit FERME lorsque les gens arrivent sur mon site ?

    d’avance, je vous remercie beaucoup !

    Amélie

  3. Petite demande de précision à propos de
    #container {
    position: relative;
    padding-bottom: 50%;
    }
    ce padding-bottom de 50% c’est pour centrer verticalement les sections?
    le header est fixed, alors est-ce nécessaire de le laisser à l’intérieur de ce container?

    1. Le padding c’était pour l’esthétique, je n’aime pas les scrolls de fin de page qui s’arrêtent brutalement mais c’est clairement accessoire.
      Pour le positionnement du header, c’est bien vu de ta part! Je l’ai placé ici pour une simple raison logique (de mon seul point de vue, hein ^^) mais il peut être n’importe où !

  4. Bonjour,
    Magnifique tuto sur lequel je suis en train de m’appuyer pour faire un site onepage sans utiliser un script ttout fait.
    La fonction change section –> class current –> sectionvisible ne fonctione pas.
    Je viens de voir pourquoi.
    J’utilise jquery-3.1.1 ( et même avec la version 4 de waypoints.js) : bug
    si je reprends la version jquery-2.-2.4, là ça refonctionne.
    Comment dois-je modifier le code pour que cela fonctionne avec jquery 3.1.1
    Merci
    Cordialement

    1. Hello,
      Merci du compliment, ça fait plaisir 🙂
      Pour ton problème, il faudrait vérifier ce qui ne fonctionne pas exactement, quel est le symptôme ?
      As-tu vérifié si la classe était bien modifiée avec l’inspecteur ?

      1. Bonjour,
        Ce qui ne fonctionne pas
        – le lien accueil reste toujours avec la classe current et les autres liens, quelle soit la section affichée, ne prenne pas cette classe current
        – le body reste toujours avec la classe section1-visible ce qui fait qu’il n’y a pas de changement de background
        Je viens de tester à nouveau sur ta demo sans rien modifier sauf la version de jquery.
        Cordialement

          1. avec jquery-2.2.4 et waypoints-2.2.2 c’est ok
            avec jquery-3.1.1 et waypoints-2.2.2 erreur
            avec jquery-3.1.1 et waypoints-4.0.1 erreur
            Sans doute nécessaire de modifer le code dans custom.js, mais je ne sais pas trop faire.

          2. De ce que je lis sur la dernière version de waypoints, son implémentation semble nécessiter en effet d’être adaptée, bien vu !
            J’ai essayé de mettre une version intermédiaire de jquery (3.0) avec jquery-migrate, et ca fait le job (voir les sources).
            Il faudra que je prenne le temps de regarder de plus près comment mettre à jour l’ensemble des plugins, mais il faudra d’abord que le trouve ^^

  5. Bonsoir !
    Super tutoriel. Vraiment simple à reproduire et surtout à comprendre !
    Ma question porte sur le hash, le anchor tag, le # produit lors du clique. Y’aurait-il une possibilité de le supprimé en passant par JS/jQuery?

  6. Bonjour,
    Votre tuto m’a grandement aidé !
    Par contre j’ai une question, si je mets ma fenêtre en format mobile, le menu mobile se déroule automatiquement, ce que je ne souhaite pas. J’aimerais que quand l’utilisateur ailleur sur le site, le menu ne soit pas déjà déroulé.
    Voici le code js :
    function toggleMobileMenu(){
    $(‘.menumobile’).slideToggle();
    }

    $(‘#releaseMenu’).click(function(){
    toggleMobileMenu();
    });
    $(‘.menumobile a’).click(function(){
    toggleMobileMenu();
    });
    function toggleMobileMenu(){
    $(‘.menumobile’).slideToggle();
    }

    Que me conseillez-vous ?

    Bien à vous

    1. Bonjour,
      Content que ce tuto ai pu aider 🙂
      Je ne vois pas bien ce que vous voulez dire, de mon bord le menu est bien masqué au premier affichage. En revanche dans le code JS que vous avez indiqué, je note une double déclaration de la même fonction, est-ce normal ?

      1. Bonjour

        Non il a en effet erreur,
        Voici le code :
        $(‘#releaseMenu’).click(function(){
        toggleMobileMenu();
        });
        $(‘.menumobile a’).click(function(){
        toggleMobileMenu();
        });
        function toggleMobileMenu(){
        $(‘.menumobile’).slideToggle();
        }

        Donc ce que j’explique c’est que quand mon écran est en format mobile, le menu « release menu » est déjà déroulé. Hors j’aimerais que comme vous, le menu ne soit pas déjà déroulé ..

        Bien à vous

          1. Bonjour Patrick
            Désolé pour les temps de réponse mais je ne reçois pas de notifications quand vous me répondez 😉
            Non il n’est pas encore consultable mais peut-être serait-il plus facile de discuter par mail ?
            info@salon-rodolphe.eu et je vous communiquerais un adresse plus perso 🙂

  7. Bonjour Patrick,
    Tout d’abord un grand merci pour ton tutoriel!
    Il est très clair et j’ai l’impression d’avoir tout compris, mais quelque chose doit m’échapper, car j’ai beau lire et relire, m’approcher au plus de ton code, je ne parviens pas à faire fonctionner les waypoints, ou plus précisément la fonction change. Je crois que mon erreur se trouve dans le CSS, car le changement de classe ne s’opère pas, mais je ne trouve pas de solution…
    Je ne sais pas si c’est abuser de te demander ton aide?
    Voici mon code HTML :










    Le Javascript :

    $(function() {

    var currentSection = "section1";

    function change($section){

    $('nav.fixmenu a').removeClass('current');

    currentSection = $section.attr('id');

    $('.target-'+currentSection).addClass('current');

    }

    $("#main section").waypoint(function(direction){
    if (direction==='down'){
    change ($(this));
    }
    },{offset:'20%'}).waypoint(function(direction){
    if(direction==='up'){
    change ($(this));
    }
    },{offset:'20%'});

    });

    Et enfin le CSS incriminé :

    .fixmenu a{
    display:block;
    width:15px;
    line-height:23px;
    background:url(images/bouton.png) no-repeat;
    padding-bottom: 5px;
    }
    .fixmenu a.current, .fixmenu a:hover, .fixmenu a:active{
    display:block;
    width:15px;
    line-height:23px;
    background:url(images/boutonrouge.png) no-repeat;
    padding-bottom: 5px;
    }

    Je serai très reconnaissante du moindre éclairage, car là j’avoue ne plus savoir où chercher!
    Justine

    1. Salut Justine,

      Je pense que ton problème vient de la classe des liens de ton menu. Tu as oublié de rajouter class= »target-section1 current » au premier puis class= »target-section2″ au second, class= »target-section3″ au 3e, etc.

      Le code JS vient analyser cela pour retrouver ce dont il doit modifier le style.

      Bon courage !

      1. Salut Patrick,

        Merci pour ta réponse rapide!
        A force de tourner autour, je dois frôler la solution, mais… elle n’est pas encore là. Les class= »target-section1 current » , « target-section2 », etc sont bien là ; pour bien faire (?) je les ai placées en premier dans les balises de mon menu.
        La console me renvoie un message d’erreur JS : « TypeError: $(…).waypoint(…).waypoint is not a function », comme si le plugin n’était pas chargé, alors qu’il l’est, je l’ai vérifié par d’autres tests! J’ai essayé aussi plusieurs navigateurs, sans succès. Je ne perds pas courage, mais par moments, après moults recherches et stratégies diverses, je suis à cours d’idées… Est-ce abuser de te demander encore ton aide?? Merci par avance!!!

  8. bonjour
    effectivement très bon cours avec de nombreux toolkits JS utiles pour ceux qui comme moi ne sont pas des spartiates du JS ( je suis architecte JEE ) .
    Pour un projet pour une petite agence web j’ai utilisé ton code ( que j’ai un peu personnalisé) et tout fonctionne à merveille.
    bien joué et merci..cela m’a fait gagner pas mal de temps.

  9. Merci Patrick de répondre.
    oui j’ai essayé ça et bien d’autres trucs
    mais le bandeau reste désespérément collé à gauche.
    Il doit y avoir une fonction ou un truc qui passe
    au dessus de tout ça mais je ne trouve pas.
    Je dois avouer que j’ai souvent eu des soucis
    avec ces histoires de centrage mais là pour moi,
    c’est le pompon

    Enfin …. Merci encore pour tout le reste.

  10. Bonjour et merci mille fois d’éclaircir les jours sombres où j’ai bien cru que je n’y arriverais jamais.
    Et surtout bravo pour le talent pédagogique pour le gros bidouilleur que je suis, incapable de développer quoi que ce soit. (Je lis ,je pige à 70%, je teste et voilà le temps passe comme ça. Merci encore en tout cas .
    Bien amicalement.
    Bruno Marrec

    PS: si vous avez une seconde (pour vous). J’ai tenté de réduire le « header » avec le width:85%;au lieu de 100%: ça marche mais J’ai essayé plein de trucs pour le centrer sur ma page… rien à faire .Si ce n’est pas abuser…

    Merci encore

  11. Bonjour Patrick,

    J’ai le même problème que Blaise, j’ai le même code que toi mais la fonction change($section) n’ajoute pas « current » à la section active, comme si le $(this) qu’on lui envoyait était vide.
    C’est peut être quelque chose de subtil mais je n’arrive pas à avancer.
    Merci d’avance et bonne soirée.

    1. Hello,
      Est-ce que tu as aussi la même solution que Blaise? :p
      Blague à part, il m’est difficile d’apporter une réponse à ta question sans connaissance de ton contexte… Ta description correspond à plus d’explications que je ne puisse en compter…

  12. Bonjour!

    Merci pour ce tuto ci bien expliqué!
    Toute fois j’ai une question…
    J’ai une barre de recherche présente sur toutes les page de mon site, et je voudrais que lorsque l’écran est réduit, elle n’apparaisse qu’au clic sur un bouton.
    Je ne trouve pas comment faire….
    Auriez vous une idée??

    Merci beaucoup!!!!

    1. Là, je pense que tu peux jouer avec les addClass et removeClass.
      Je m’explique : le header réduit a une autre classe. Par exemple on aurait .full-header et .mini-header.
      Il suffirait d’avoir un display:none sur .mini-header .search par exemple, et de faire un slideOut au clic sur un bouton.
      Qu’en penses-tu?

  13. Bonjour,

    Tout simplement merci 🙂
    J’essaie de me faire un petit site web simple et one-page design avec peu de contenu, et ce tuto est juste parfait pour faire ce que je veux.
    J’aimerais juste trouver , en remplacement du portfolio, quelque chose( script existant? à développer?) qui me sorte non pas un agrandi de l’image, mais un popup avec un descriptif… as-tu une idée de ce que je pourrais utiliser.
    Je suis encore un néophyte total dans le domaine, et je ne trouve rien qui correspondrait.

    Merci encore.

  14. Bonjour,
    Ce tuto est vraiment top et superbement « propre » !
    J’ai une petite question… A différent endroits vous faites références à des classes « col-x », mais je n’en vois pas la trace dans les css.
    Pourriez-vous nous en donner une explication ?
    Cordialement
    Laurent

    1. Bonjour,
      Merci à vous pour les compliments, reçus avec gratitude!
      Pour ces classes, je dois avouer qu’il s’agit d’un héritage de précédentes versions, je n’ai manifestement pas fait correctement le ménage :/

  15. Bonjour Patrick,

    Tout d’abord félicitations pour ce tuto ! Il m’a beaucoup aidé j’ai juste une petite question concernant les sections. J’ai voulu mettre des images en fond et en plein écran à la place des couleurs d’ambiance et malheureusement ça me met une petite image (je vous avez déjà posé la question sur une autre partie de votre tuto car je n’avait pas vu que les commentaires avaient lieu sur la partie 1). Merci d’avance pour votre aide.

  16. Au final tout fonctionne pour moi, il fallait juste bien prendre le temps relire ton tutoriel et ton code source.
    Merci encore pour c e partage de connaissances qui m’a été fort utile !

    1. Salut Blaise,
      Désolé d’avoir tardé à revenir, j’avais un truc a faire, une histoire d’alliance et de dîner :-p
      Content que tu aies pu trouver la solution et que ce tuto t’aie aidé. Merci d’avoir partagé tes problèmes, mon walkthrough a été fait avec mon regard et mon approche, nul doute que celle de ceux qu’il l’exploitent l’enrichira !

  17. Ah, et je précise que j’utilise (encore) jQuery 1.7.1 (mais les versions plus récentes semblent interférer avec mes autres scripts): tu crois que cela peut venir de là ?

  18. Bonjour Patrick,

    Tout d’abord un grand merci pour ce partage de connaissances et pour ce très intéressant tutoriel.

    Même je ne suis pas encore arrivé à la fin, car je bloque au niveau des waypoints…

    Pour le menu fixe, le changement de hauteur et le smooth scroll pas de soucis, je l’ai déjà fait précédemment.

    Mais impossible de changer la couleur de la rubrique dans le menu en fonction de la section visitée.
    Et pourtant j’y tiens, ayant longuement cherché précédemment comment réaliser ce genre de chose…

    J’ai pourtant calqué au plus près ton code, relié le waypoint.js et inséré les scripts (dans le body)…

    Mais rien n’y fait (et je suis une buse en JS)…

    Aurais-tu une idée pour me sortir de cette ornière ? 🙂

  19. Bon, j’ai pu faire ce que je voulais grâce à vh.
    Si ça peux servir, voici ce que j’ai ajouté à mon css :
    section {
    position: relative;
    min-height: 100vh;
    text-align: center;
    }
    section::before {
    display: inline-block;
    content:  »;
    height: 100%;
    margin-right: -0.25em;
    vertical-align: middle;
    }
    .content {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    }

    .content étant un wrapper du contenu de chaque section.

    Du coup, je voulais détecter si vh était supporté par le navigateur (il y a un bug sous iOS7 par exemple). Or, tu utilises modernizer (2 !) en custom : c’est ta custom ou c’est une dép pour une lib ? Si c’est toi qui l’a faite, est-ce que tu te souviens des features dont tu avais besoin ?

    1. Eh oui, modernizr 2.6.2. Comme tu l’auras surement remarqué, il s’agit d’un article écrit fin 2013 sur un POC que j’ai mis du temps à faire sur mon temps libre. Il est donc normal que j’ai alors utilisé une version qui venait de sortir au moment de la réalisation du POC 😉

      Merci pour ton astuce sinon, n’hésite pas à forker pour ajuster si tu notes des choses qui te choquent !

      Pour te répondre, j’avais récupéré ce build car je n’avais pas besoin d’un truc trop lourd, juste de quoi faire du CSS3 à minima. Mais c’est une partie que j’ai négligée à l’époque, le POC ne visait pas le cross browser ni la rétrocompatibilité, mais bien les principes généraux d’un site responsive one-page.

      C’est clairement une version à améliorer, je n’ai pas le temps de faire vivre ça et c’est pour ça que je l’ai librement soumise à la communauté.

      1. Ok, je tacherai de voir ce qu’il faut comme « feature detection ». Je ne m’attache pas trop à la retrocompatibilité pour le moment puisque je n’ai que 3 jours pour faire le site sur lequel je travaille :/
        En tout cas, si je garde la trame pour d’autres sites, je forkerai.
        Merci à toi.

  20. Bonjour,

    Merci pour cet article. Je cherche des ressources car je tente de faire un site onepage responsive également, mais avec du contenu centré (si la hauteur de la section est < à la hauteur de la page) et un passage directe de section à section (idem).

    Sur ton github, tu as jquery.touchSwipe.min.js. Ça n'a pas l'air d'être une dépendance et tu ne le charges pas. Dans quel but (futur ?) l'as-tu mis ?

    1. Hello,
      Bien vu ! C’est un héritage d’une V0, pour la mobilité, mais que j’ai laissé tombé car pas utile dans le cas présent. Je n’ai pas nettoyé mon répertoire de scripts en me disant que peut-être j’allais revenir dessus plus tard.

  21. Bonjour !
    Merci pour ce superbe tuto j ai refondu mon site web afin que celui soit «responsive design » j ai utilisé un template responsive que j ai ensuite modifié .. j ai un soucis d affichage dans le header (décalage)et dans le footer (celui ci n est absolument pas redimensionné ) qui peux m éclairer …
    Ce template est censé est totalement responsive .. j ai gardé l ancien site en attendant que ce petit soucis soit résolu..

  22. Bonsoir Patrick,

    Je me lance depuis peu dans la création de mon site ainsi que d’un portfolio en ligne et glane ainsi le maximum d’infos que je peux trouver sur le net.
    Tout d’abord un grand merci pour toutes ces informations mises à disposition. Ça fait plaisir et c’est agréable à lire.

    Hélas…
    Je butte sur un pb, et m’aperçois que le site de démonstration que tu proposes souffre du même « bug » ; je m’explique :

    Lorsque l’on clique sur un onglet du menu de navigation ou sur la petite flèche de retour en haut de page, tout fonctionne impeccablement, ça scroll jusqu’à la zone désirée…
    Cependant, si l’on est un cliqueur fou (oui oui, ça existe) et que l’on clique frénétiquement (ou non, deux fois suffisent) sur l’un de ces éléments de nav, et que par la suite on tente de scroller manuellement avec la molette de la souris, la page bloque quelques instants (certainement pour appliquer la fonction plusieurs fois appelée par le clic répété).

    Comment faire pour y remédier ?

    Bien cordialement,
    Raphaël

    1. Bonjour Raphaël,

      Je suis presque certain que la convention de Genève condamne tes méthodes de torture de site web 🙂

      Blague à part, j’ai essayé de frénétiquement cliqueter sur le menu, et mis à part le temps d’arriver à la section sélectionnée je ne note aucun temps de latence dans le cadre d’un scroll.

      Sache toutefois que le clic sur un menu déclenche un scroll, mais seulement après un appel à la fonction stop(), qui « kill » toute action en cours. Il n’y a donc pas d’animation résiduelle après plusieurs clics. Au pire, le navigateur qui encaisse un peu mais c’est tout. Chaque clic annule le précédent en quelque sorte.

      Si tu ne souhaites pas voir le scroll vers une section au clic se compléter dès que tu utilise la molette de la souris (ce comportement n’étant pas un bug mais une feature, comme dirais Bill Gates), alors tu peux toujours essayer d’appeler stop() au déclenchement de l’événement « scroll à l’aide de jQuery. Je ne sais pas bien comment catcher cet événement, et pour être honnête je pense que cela ferait plus de mal que de bien !

    1. Bonjour,
      Et pour cause, il s’agit là d’un template et non d’un site fonctionnel avec l’arrière-boutique qui va bien.
      Pour envoyer le formulaire, il faut de fait modifier l’action du formulaire dans l’index.html vers un fichier php par exemple.

  23. Bonsoir Patrick,
    Quelle réactivité (encore une fois)… les webmasters et auteurs de tuto comme toi se font rares. Encore une fois MERCI pour ta disponibilité ! Le « méchant » était entre guillemets, car cela ne m’a pas du tout gêné lors des nombreuses fois où j’ai consulté le site et son tuto (définitivement génial) : UN MODELE !
    La bordure/contour existe aussi sur http://patrickroux.ca/work/responsive/, uniquement sur Chrome et lors d’un clic sur le bouton du Behold. Peut-être faut-il préciser que je suis sur Mac (?).
    Vraiment un bau travail, au plaisir de te rencontrer quand tu seras de passage sur Paris 🙂
    D.

  24. par contre, un « méchant » contour sur le bouton du behold (sur Chrome). Je chipote; tellement tout est extra… Mais je ne comprends pas, il y a des border:none partout !
    Bonne soirée et encore merci,
    D.

  25. Quelle rapidité ! Un grand MERCI ! Tout est très clair. Il n’y a pas d’URL dans les CSS pour le bouton (CSS en ligne), je pensais donc que cela était autre chose qu’un png.
    je vais donc faire répéter 3 points (pixels) en background, cela devrait être bon 😉 (?) Et pour ce qui est du :hover : histoire réglée (via tes sources github) 😀 Merci pour ta disponibilité et encore un grand bravo pour ce tuto (en dehors des astuces, le design est irréprochable).
    Bonne fin de week-end !
    D.

  26. Bonjour Patrick,
    Bravo sur ce tuto clair mais très balaise pour quelqu’un qui débute comme moi :p
    J’ai juste deux petites questions (stupides) concernant le menumobile :
    Comment faire pour que le bouton s’affiche (je n’ai qu’un bouton gris) ? Et comment as-tu appliqué le :hover dans le menu. Je ne vois rien dans les CSS et un « .menumobile a: hover » ne donne rien 🙁
    Merci pour ton aide… et ce tuto 😉
    D.

    1. Bonjour Dave,

      Merci d’abord pour ton appréciation du tutoriel, et je suis content que tu le trouves utile c’était le but recherché 🙂

      Tes questions ne sont pas stupides du tout, elles me font me demander du coup si tout était
      clair, peut-être un point ou deux à éclaircir du coup.

      Pour te répondre, le bouton gris peut vouloir dire que le lien vers l’image n’est pas bon, à vérifier?

      S’agissant du hover, ca se passe dans la feuille de style du « theme » qui est déclaré dans le header. Tu peux récupérer les sources sur github, dis moi si ce n’est pas clair.

      Bon courage !

  27. Bonjour Patrick,
    D’abord merci pour ce tuto, très utile.

    Quelle est la licence pour les fichiers sources? Je souhaiterais les utiliser pour faire un plugin squelette pour SPIP sous GPL, est-ce possible?

    En suite j’essaie de réduire l’espace entre chaque section sans succès.
    Comment peut-on faire? j’ai tenté en CSS mais rien à faire.
    Une soluce?

    Merci

    Seds

    1. Bonjour Seds,

      Il n’y a pas de licence sur ce code source, il s’agit d’un exercice que j’ai pris plaisir à partager. Une simple petit « bigup » sera apprécié mais nullement indispensable. J’ai vu que vous aviez trouvé la solution à votre problème, bravo ! N’hésitez pas si vous avez d’autres questions et meilleurs voeux 🙂

      Patrick

  28. Après avoir choisi la facilité avec WordPress je vais essayer d’apprendre à faire from scratch, car on n’est jamais mieux servi que par soi-même !
    Merci pour ce tuto qui m’aide beaucoup, complété avec des tutos comme le Site du Zéro pour avoir les bases HTML5/JS.

  29. Merci pour ta réponse rapide ! Le problème c’est que le système des sprites n’est pas recommandé pour l’accessibilité du site pour les mals-voyants, et j’y tiens. Bon et bien ça semble compromis !lol Ça aurait été un plus mais je crois que je vais devoir m’en passer !

    1. Pour que ton site soit accessible tu dois dans tous les cas proposer un fonctionnement viable sans javascript. Les OnMouseOver et compagnie avec MM_Preload ne sont clairement pas compatibles avec l’accessibilité.

      Une bonne technique consiste à proposer un contenu, puis à le modifier en javascript. Ainsi si le js est désactivé sur le navigateur, tout fonctionne bien. Par exemple utiliser un :hover en CSS en plus d’une fonction javascript pour les waypoints. Car dans tous les cas, pour utiliser ce mécanisme il faut que javascript soit activé e tc’est donc anti-accessible. Donc fichu pour fichu… 🙂

      Sinon s’agissant d’accessibilité pure, que ce soit les sprites ou tout autre méthode, l’utilisation d’images pour les boutons d’un menu est interdite. Et si ce n’est que pour la décoration (texture en background) alors cela ne la remet pas en cause. Quelques ressources pour valider ton accessibilité : http://patrickroux.ca/developpement/accessibilite-rgaa-wcag-accessiweb-cest-quoi-4310

  30. Ah ben on peut pas mettre de lien ! lol Bon c’est un lien en images survolées quoi (à base de onMouseOut= »MM_swapImgRestore() » onMouseOver= »MM_swapImage…)

    Merci d’avance !

    JO

    1. Hello,

      Je suis content si cet article peut aider 🙂 Et pour te répondre, sans vouloir faire de réponse de normand : p’t’êt’ben qu’oui, p’t’êt’ben qu’non !

      En fait, je commencerais par ne pas recommander l’utilisation de onMouseOut et Over. Et encore moins les fonctions natives de Dreamweaver type MM_swapImgRestore.
      Plusieurs raisons à cela : temps de chargement des images, lourdeur d’exécution du code, … J’avais fait une brève à ce sujet il y a longtemps : http://patrickroux.ca/jquery/optimiser-le-changement-dimages-au-survol-2902

      En fait, le waypoint (point de repère) ne s’applique pas mais se détecte. Cette nuance est importante car cela signifie que c’est au passage sur ce point de repère que l’on déclenche un évènement. Cet évènement c’est ici une fonction javascript. Dans mon exemple, ma fonction javascript applique la classe CSS qui va bien pour rajouter un fond de couleur. Imaginons qu’au lieu d’un fond de couleur, je déplace le background ?

      Ce que je recommanderai donc dans ce cas précis, c’est d’utiliser une classe sur ton lien qui lui définit une image de fond, en « mode sprites » :
      #monLien{
      background-image: url(‘monimage.png’);
      background-position: 0px 0px;
      }

      Puis définir en css à la fois au sur une classe distincte, déplacer le fond de ce lien :
      #monLien:hover, .monLienHover{
      background-position: 0px 50px;
      }

      Du coup le waypoint déclencherai la fonction javascript qui appliquera la classe monLienHover sur le bon lien, et ainsi déplacera l’image de fond.

  31. Bonjour,

    merci de passer du temps pour instruire les autres ! 😉

    J’ai une question à propos des waypoints (je suis moi aussi un newbie en création de site) et je ne trouve pas de réponse sur le net. Est-ce qu’il est possible d’appliquer le waypoint à un menu constitué d’images survolées ? (voilà un des lien :
    )

  32. Je suis actuellement en formation dans une école web sur Reims, mais il s’agit plus d’une garderie qu’autre chose. Un grand merci pour ce tuto, je vais au moins apprendre quelque chose aujourd’hui.

  33. Bonjour,

    Et d’abord merci pour cet excellent tuto et son partage.
    Même moi qui suit très mauvais (mais vraiment très mauvais…limite nul) en js j’ai pu suivre et le tester avec un résultat parfait…sauf que je suis confronté à un soucis dû à l’utilisation que je souhaitais en faire pour un client.
    Mon problème vient de ce que je dois afficher sur ce type de site, une première section avec une video en fond, et sans la barre de navigation (oui, je sais, c’est nul ergonomiquement, mais c’est une demande du client et une réalisation du designer…merci à eux!).
    J’ai donc une architecture tel que: body > 1 section avec cette video en fond > suivi d’une div gloabale intégrant les section du site. Sur cette div globale j’applique une « class: display: none; » que je supprime lors d’un clic pour faire apparaître cette div et basculer la class sur la section video à l’aide ce petit script:
    $(« #home_down »).click(function (){
    $(« #global »).removeClass(« cacher »);
    $(« #home »).addClass(‘cacher’);
    });
    Ceci fonctionne mais du coup, et c’est là que j’aurai besoin de ton avis (aide?), non seulement le scroll ne se fait que de manière brutale (pas du tout du tout « smoothy »), mais en plus les couleurs appliquées aux divers fonds ne ne sont pas appliquées. En observant le code source, je vois bien que la classe qui devrait s’appliquer au body n’est pas présente.
    Aurais tu une piste, une solution?
    D’avance merci pour ta réponse, et encore merci pour ce tuto.
    Cordialement.

    1. Bonjour Eric,

      Merci pour tes encouragements 🙂

      Concernant ton problème, je te recommanderait déjà d’utiliser slideToggle sur la section, de manière à la masquer avec une animation.
      Autre solution possible, les transitions CSS3 à étudier.

      S’agissant du body, quand tu dis que la classe qui devrait s’appliquer au body n’est pas présente, tu veux dire que le js ne modifie pas la classe au scroll ? Naurais-tu pas une erreur javascript quelque part ?

      1. Re!

        C’est bien cela, le js ne modifie rien au scroll 🙁
        J’ai vérifié, et non pas d’erreur; d’autant plus que lorsque j’enlève ma classe « cacher » et la section incriminée, tout fonctionne à merveille (…sans gloire pour moi je me dois de le dire, c’est ton script… 😉 )

        Sinon, bien vu, je vais effectivement me rabattre sur les css3 (que je maîtrise mieux que le js je l’avoue).

        Je vais donc continuer, je devrais bien finir par obtenir ce que je veux, mais si tu as d’autres conseils, je suis bien entendu preneur! 😉
        Au besoin je te passerai un lien pour que tu vois « ça » en live.

        Encore merci pour tout!

        Eric

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *