Web Design Blog / Programowanie:

Projektowanie i tworzenie stron One-Page

Data publikacji: 11 maja 2019

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ą metody animate:

<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.

Projektowanie i tworzenie stron One-Page
4.6 (91.11%) głosów: 9


Komentarze

Brak komentarzy.

Dodaj swój komentarz