Czym jest one page website?

One Page Website to strona www która składa się z jednej pod strony na której znajdują się sekcje do których dostajemy się poprzez menu. Niema podstron. Jest to prosta struktura idealnie nadajaca się dla stron intenetowych mających być firmowa wizytówką.

Na pierwszy rzut oka strona one page wygląda jak normalna strona www ma strone głowna, menu, stopke i na tym koniec. Klikajac w poszczegolna pozycje w menu nie otwiera się kolejna podstrona tylko okno przeglądarki przewija się do pozycji poszczególnej sekcji.

Strony tego typu powstały głównie z myślą o urządzeniach mobinych gdzie użytkownicy są przyzwyczajeni do przewijania treści w dół. Klikanie po zakładchach/podstronach jest o wiele bardziej problematyczne

Przykład budowy strony one page:

Schemat budowy strony typu One Page Website

Kiedy stosować One Page Website

Tego typu strony idealnie sprawdzają się jako strony firmowe niezawierające zbyt dużej ilości treści, skoncentrowane głównie na przedstawieniu firmy, produktów, informacji o klientach firmy, dane kontaktowe.

Jak również do pozyskiwania Leadów poprzez zapisanie się do newslettera

One page dobrze się sprawdza gdy chcemy klientowi przedstawić nowy produkt. Wtedy w efektowny sposób można przygotować taka stronę i umieścić na niej wystarczające informacje o produkcie

Zalety One Page Website

Prezentacja firmy, produktu w efektowny sposób nastawiony na skondensowaną treść. Dzięki temu łatwiej można zaprezentować stroną tak aby Klient kliknął w przygotowany przez nas link np. Zamów, Zostaw swój email itp.
Strony typu one page website dobrze działają na urządzeniach mobilnych. Różnie z tym bywa n przypadku klasycznych stron zawierających kilka podstron.
Szybkość budowy – z uwagi na fakt ze są to strony zbudowane z jednej strony nakład pracy włożony w wykonanie takiej strony jest stosunkowo mniejszy niż w przypadku rozbudowanych stron.
Szybkość strony. Strona wczytuje się raz więc przechodzenie do poszczególnych sekcji odbywa się płynnie. Dodatkowo można zastosować opóźnione ładowanie sekcji które jeszcze nie zostały wyświetlone.
Wyświetlanie na urządzeniach mobilnych. Tak jak wspominałem na początku strony one page website wyświetlają się dobrze na urządzeniach mobilnych

Wady One Page Website

Ograniczony rozwój strony. Z założenia tego typu strony przeznaczone są dla ograniczonej ilości treści. Dlatego gdy będziemy chcieli bardzo rozpisać się o firmie lub naszym nowym produkcie, może to wpłynąć na wygląd naszej strony
Jeżeli mamy ograniczoną ilość treści to mamy też ograniczone pole jeżeli chodzi o pozycjonowanie takiej strony aby w wyszukiwarkach wyświetlała się na wyższych pozycjach. Nie twierdze że takich stron nie da się pozycjonować ale wymaga to więcej zachodu.
Jeżeli będziemy chcieli przeanalizować ruch na naszej stronie, dane będą nas informować o wejściu użytkowników na stronę główną, bo tylko taką posiadamy 😊 nie widać, które podstrony cieszą się popularnością a które mniej.

Podsumowanie

Jeżeli chcemy w sposób zgrabny, zwięzły zaprezentować swoją firmę, produkt strony one page website nadają się do tego doskonale. Należy zestawić opisane tu wady i zalety i podjąć dezycje czy tego typu rozwiązanie jest dla nas odpowiednie

Czas na praktykę:

Poniżej prezentuje jak one page website działa w praktyce na prostym przykładzie. Poniżej mamy 2 sekcje. Pierwsza to proste menu, druga to

<div class="nav">
   <ul>
      <li><a href="#poz_1"> Pozycja 1</a> | </li>
      <li><a href="#poz_2"> Pozycja 2</a> | </li>
   </ul>
</div>

<div class="content">
   <section id="poz_1">
      <h1>Pozycja 1</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </section>
   <section id="poz_2">
      <h1>Pozycja 2</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </section>
</div>

Dla uzyskania efektu płynnego przewinięcia strony do wybranej sekcji należy użyć stylu:
html { scroll-behavior: smooth; }

Przykład on-line + pełny kod: