Web Design Blog / Programowanie:

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ą 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.5 (90%) głosów: 4



Autor:

Służę pomocą w razie wykonania lub odnowienia strony internetowej dla twojej firmy niezależnie od lokalizacji czy skali przedsięwzięcia. Masz pytania? Pisz w komentarzu.

Zadaj pytanie lub skomentuj


Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail