10 kroków prawidłowego funkcjonowania strony głównej

10 kroków prawidłowego funkcjonowania strony głównej

Strona główna jest zdecydowanie najważniejszą częścią każdej strony internetowej. To, jak ją przedstawimy zarówno od strony prezentacyjnej oraz technicznej ma ogromne znaczenie, szczególnie dla odwiedzających naszą witrynę pierwszy raz.

W artykule przedstawię kilka ogólnych i technicznych aspektów, nad którymi warto pomyśleć zarówno na etapie projektowania, jak i kodowania a następnie przesyłania witryny na serwer produkcyjny.

1. Najważniejsze informacje dostępne bez przechodzenia do podstron

Strona główna przede wszystkich powinna zawierać najważniejsze informacje. W przypadku małych witryn, może się okazać, że wszystko co chcemy zamieścić na stronie zmieści się na stronie głównej ale pamiętać trzeba, aby zachować umiar. Gdy stronę przewija się i przewija bez końca, to użytkownik wyjdzie ze strony nawet nie przeglądając głównej do końca. Dlatego warto dodać na stronę główną jedynie kilka najważniejszych sekcji, a pozostałe elementy można przenieść do podstron.

2. Slogan, slogan i jeszcze raz slogan

Odwiedzający naszą witrynę, w pierwszej kolejności chciałby wiedzieć, czego może oczekiwać po odwiedzanej stronie. Do tego celu bardzo dobrze zastosować slogan. Obecnym trendem jest umieszczenie go na głównym bannerze (często rozciągniętym na całą szerokość) z powiększoną i dobrze widoczną czcionką. Krótkie dwa ogólne zdania wprowadzające w świat strony, poinformują użytkownika, że znajduje się tam gdzie chciał się znaleźć.

3. Struktura nawigacyjna ułatwiająca poruszanie się po stronie

Utworzenie menu, to czynność wydaje się łatwa, jednak trzeba pamiętać o kilku aspektach. Po pierwsze i najważniejsze w przypadku stron głównym typu „one page, single page”. Podczas scrollowania strony, bardzo dobrze aby aktualnie wyświetlana na ekranie użytkownika sekcja strony, była podświetlana w menu. Jest to absolutnie wymagane, aby użytkownik mógł się łatwo zorientować gdzie się znajduje. Przejdź na stronę główną studioleopard.pl, i zobacz, jak zmienia się kolor odnośników w menu w zależności od sekcji, na jakiej się znajdujesz. Jest to bardzo łatwe do zaimplementowania i ogromnie pomaga zorientować się użytkownikowi, gdzie się znajduje.

4. Formularz i inne dane kontaktowe

Gdy zamieścimy wszystkie potrzebne sekcje, to warto ułatwić użytkownikowi z nami kontakt. Wystarczy zwykły prosty formularz z takimi polami jak imię, adres email i wiadomość. Nie warto przesadzać z rozbudowanymi formularzami, nikt ich nie chce wypełniać! Znacznie łatwiej jest też omówić pewne kwestie poprzez rozmowę telefoniczną, dlatego warto wyeksponować numer telefonu.

5. Call To Action

Call To Action lub po polsku wezwanie do akcji, to proste elementy, które odróżniają się na tle całej strony i pomagają użytkownikowi – jak sama nazwa mówi – w podjęciu pewnej akcji. Dobrym przykładem tutaj są strony  sprzedające produkty i przycisk „Zamów”, „Kup”. Są one bardzo często mocno wyeksponowane, poprzez swój rozmiar czy kolor odróżniający się na tle strony.

6. Scrollująca strona główna

Nawiązując do punktu pierwszego, od strony technicznej bardzo częstym rozwiązaniem jest strona typu „one page” lub „single page”. Charakteryzują się one tym, że można je przewinąć z góry na dół za pomocą kółka myszki. Jest to bardzo wygodne rozwiązanie, do którego użytkownicy stron internetowych są już przyzwyczajeni od lat. Jeszcze zanim pojawiły się koncepcje „scrollujących stron” to użytkownicy byli przyzwyczajeni do przewijani chociażby długich artykułów. Warto wykorzystać gotowe rozwiązania np.: fullPage.js czy skrollr aby uatrakcyjnić całą zawartość.

7. Skrypty ładuj na samym końcu

Większość z tego, co jest zakodowane na stronie głównej wykorzystuje się na pozostałych podstronach. Czyli całe menu, nagłówki czy stopki. Warto więc zadbać aby były one poprawnie napisane. Jeżeli skrypty znajdują się w sekcji <head> to blokują renderowanie strony, zanim się wszystkie nie wczytają. Przerzucenie skryptów z nagłówka <head> tuż przed zamknięciem znacznika </body> przyspieszy ładowanie twojej strony.

8. Skompresuj swoje obrazy i filmy

Grafika jest jednym z najcięższych elementów na stronie tuż po filmach(i audio). Dlatego zawsze pamiętaj o ich skompresowaniu. Możesz do tego wykorzystać swój ulubiony edytor graficznych lub skorzystać z narzędzia online tinypng.com. Jeżeli Twoje zdjęcia nie wymagają obsługi przeźroczystości, dobrym pomysłem jest zmiana formatu z png do jpg. Identyczna sytuacja dotyczy filmów, w przypadku dużych filmów proponuję skompresować za pomocą x264 do rozdzielczości HDTV. Taki format ogromnie zmniejszy rozmiar pliku przy okazji nie psując zbytnio jakości filmu.

9. Minifikacja skryptów i stylów

Można przyspieszyć swoją stronę, poprzez wrzucenie wszystkich stylów do jednego i wszystkich skryptów do drugiego. Google PageSpeed Insights potrafi pozbawić nawet kilkanaście punktów przez to, że jest więcej niż 1 plik css i 1 plik js oraz nie są skompresowane. A jak pewnie dobrze wiesz, Google znacznie lepiej patrzy na strony, które są poprawnie napisane i łatwiej je wypozycjonować. Dlatego warto o to zadbać już od samego początku. Warto zastosować tutaj takie narzędzia jak gulp czy grunt gruntjs, które po wstępnym skonfigurowaniu automatycznie połączą nam wiele stylów i skryptów w 1 plik css i 1 plik js, przy okazji kompresując je do absolutnego minimum poprzez usunięcie nowy wierszy i białych znaków.

10. Zewnętrzne skrypty wczytuj w trybie asynchronicznym lub defer

Stronę główną bardzo często spowalniają zewnętrze skrypty, np. widgety do portali społecznościowych. Zadbaj o to, aby zawsze były one ładowane w trybie asynchronicznym(async) lub defer. Czym różnią się oba te tryby? Po dodaniu do znacznika script atrybutu async, skrypt jest pobierany bez blokowania wczytywania się pozostałych skryptów i zostanie wykonany natychmiast po jego pobraniu. Czasami może to być problematyczne, gdy skrypt próbuje się wykonać przed pełnym załadowaniem modelu DOM. Z pomocą przychodzi defer, który pobierze się również bez blokowania pozostałych skryptów, ale wykona się dopiero po pełnym wczytaniu modelu DOM.

Powyższych kilka wskazówek jest bardzo pomocnych przy tworzeniu stron internetowych, szczególnie w przypadku one page gdzie cała strona jest tak naprawdę stronę główną. Poprawne funkcjonowanie takiej strony jest wymagane, aby użytkownicy chcieli odwiedzić naszą stronę kolejny raz. Zachęcam do zgłębienia powyższych informacji oraz do podzielenia się swoimi spostrzeżeniami.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.