Projektowanie i tworzenie stron One-Page

Po zapoznaniu się z zaletami i wadami stron One-Page a tym bardziej z kompromisem, który polega na ulokowaniu wszystkich informacji ofertowych (marketingowych) na jednej podstronie nie ograniczając się jednak tylko do jednej podstrony, stworzenie strony typu one-page może być kuszące. W tym przewodniku stworzymy taką podstronę i rozwiążemy kilka problemów, które pojawią się w trakcie projektowania i tworzenia stron tego typu.

Jak wspomniano w wyżej podlinkowanym artykule. Ilość informacji jaką możemy zamieścić na stronie one-page jest skończona. Stąd logiczne wydaje się zorganizowanie wszelkich informacji w sekcje. Sekcje takie możemy odróżnić od siebie barwą tła lub jakiegoś rodzaju krawędzią.

Przewijana nawigacja na stronie one-page

Nawigowanie na stronie one-page polega na przewijaniu bądź korzystaniu z linków, które po prostu przewijają widok do tzw. kotwicy. Aby wymusić takie zachowanie się linków wystarczy stosować nazewnictwo identyfikatorów sekcji w atrybutach „href” linków poprzedzając ich znaczkiem hasha: „#”.

<nav>
   <ul>
      <li><a href="#raz">raz</a></li>
      <li><a href="#dwa">dwa</a></li>
      <li><a href="#trzy">trzy</a></li>
   </ul>
</nav>    
<main id="spa-container">
   <section id="zero">
      Test
   </section>
   <section id="raz">
      Test
   </section>
   <section id="dwa">
      Test
   </section>
   <section id="trzy">
      Test
   </section>
</main>

To będzie działać, jednak takie skokowe przejścia mało mają wspólnego z dobrym User Experience. Dodajmy animowane przejścia za pomocą natywnej metody CSS

html{
   scroll-behavior: smooth;
}

Niektóre starsze przeglądarki mogą nie obsługiwać tej metody i na upartego można wykorzystać tradycyjną metodę animate korzystając z jQuery:

<script src="jquery-3.4.1.min.js"></script>
<script>
   $('nav ul li a').click(function(e){
      e.preventDefault();
      let section = $(this).attr('href');
      $('html, body').animate({ scrollTop: $(section).offset().top}, 1000);
    });
 </script> 

Dzięki temu, że używamy standardowych odsyłaczy do kotwic (anchorów), nawigacja będzie zgodna z podejściem progresywnego ulepszania (progressive enhancement).

Stały nagłówek (sticky header)

Jednokrotne skorzystanie z menu powoduje przewinięcie całego widoku i nagłówek z menu jest teraz poza naszym zasięgiem. Ten styl załatwi sprawę:

nav{
   position:fixed;
}

Końcowy efekt powinien wyglądać tak:

Pozostałe wyzwania stron One-Page

Oczywiście w sekcjach można umieścić dowolną zawartość. Strony One Page wymagają rozwiązania jeszcze kilku innych problemów. Możemy do nich zaliczyć

• lazy load (leniwe ładowanie) obrazków
• transformację menu mobilnego
• dodanie efektów i przejść przy przewijaniu aby urozmaicić przeglądanie strony

Podsumowanie

Tworzenie stron One-Page to dobre ćwiczenie optymalizacji wydajnościowej. Dodawanie kolejnych treści zmusza do optymalizacji zawartości i implementacji zaawansowanej techniki podnoszącej wydajność strony – mowa o lazy load. Próba napisania takiej strony od podstaw daje do zrozumienia skąd się biorą dobre praktyki i łamie stereotyp jakoby tworzenie stron bez frameworka i gotowych bibliotek było trudne lub nadmiernie czasochłonne.