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.
Opublikowano 29 maja 2017 w kategorii blog, poradnik, strona www, użyteczność.
