Na co zwrócić uwagę przy tworzeniu własnej strony internetowej?

Na początku tego artykułu pragnę zwrócić uwagę na fakt, iż kwestii, które warto, a nawet trzeba wsiąść pod uwagę przy tworzeniu strony, jest naprawdę wiele, a ich tematyka jest najprzeróżniejsza. Artykuł ten jednak w dalszej swojej części będzie traktować o kluczowych kwestiach mające fundamentalne znaczenie od samego początku wdrażania serwisu internetowego i odnoszących się bardziej do kwestii technicznych funkcjonowania i budowy strony internetowej.

#Wartościowa treść jako podstawa dobrej strony

Gdy mówimy o kluczowych sprawach związanych z dobrą stroną internetową nie sposób na wstępie nie zatrzymać się na chwilę przy chyba najważniejszym jej składniku, który często jest pomijany. Mowa oczywiście o wartościowej treści, która powinna być sercem każdej dobrej witryny internetowej.

Obecnie strony internetowe często są małymi dziełami sztuki — z licznymi animacjami, piękną kolorystyką oraz multimediami. Warto jednak pamiętać, że strona internetowa to pewnego rodzaju dokument, a najważniejszy cel sieci internet pozostał niezmienny i dotyczy on tego, aby w prosty sposób dostarczać informacje szerokiej grupie odbiorców. I to właśnie informacje, treść naszej strony internetowej powinna i często przyciąga naszych użytkowników.

Sam wygląd strony internetowej oraz jej funkcjonalność jest bardzo ważna, lecz powinno to stanowić piękne opakowanie dla naszej treści, którą chcemy się podzielić z innymi — czy to informacjami o naszych usługach, przemyśleniami na naszym blogu w postaci wpisów, czy ofertą naszego sklepu internetowego.

Tego właśnie szukają nasi użytkownicy — wartościowej treści i to o nią w pierwszej kolejności trzeba zadbać, aby wiedzieć w jak najbardziej skuteczny sposób móc ją zaprezentować oraz promować poprzez stronę czy sklep internetowy.

#Stosuj semantyczne znaczniki HTML

Dobrze zbudowana strona internetowa jest czytelna. Obecnie w tworzeniu czytelnych stron internetowych bardzo pomaga najnowszy standard języka znaczników HTML. Zawiera on liczne znaczniki dedykowane do konkretnych typów treści: listy, nagłówków, elementów multimedialnych jak zdjęcia, filmy. Strukturę strony internetowej również można nakreślić, stosując odpowiednie znaczniki HTML takie jak: section, header, article, aside, footer, main, picture - wszystkie one bez dodatkowych stylów doskonale opisują poszczególne elementy na stronie internetowej. Ma to znaczenie nie tylko dla użytkowników końcowych, lecz również dla robotów indeksujących naszą stronę internetową w wyszukiwarkach internetowych takich, chociażby jak Google.

Jeśli chciałbyś dowiedzieć się więcej o znacznikach HTML, aby wzbogacić swoją wiedzę o nich, warto zerknąć np. dokumentację, którą udostępnia Mozilla.

Omówienie każdego z dostępnych znaczników starczyłoby na niejeden artykuł. Podpowiem jednak, że warto zacząć od takich kluczowych, jak znaczniki poziomów nagłówka (H1, H2, H3, ...), ponieważ często można spotkać się z tym, iż nie są one stosowane, aby odzwierciedlić prawidłową strukturę treści strony, lecz większą uwagę przywiązuje się do kwestii estetycznych — jak dany nagłówek wygląda na stronie.

Z własnego doświadczenie mogę polecić tworzenie w pierwszej kolejności struktury strony, stosując odpowiednie, semantyczne znaczniki HTML. W dalszej kolejności zajmuje się pisaniem stylów strony. Takie podejście może wymagać trochę doświadczenia, lecz pozwala skupić się na tym, aby wszystkie znaczniki miały odzwierciedlenie w treści, którą zawierają.

#Pamiętaj o tym, aby strona była dostępna dla każdego

Powyższy nagłówek nie odnosi się tylko do tego, aby nasza strona była dostępna w sensie, że jest możliwa do załadowania w naszej przeglądarce. Chodzi o coś więcej. Z naszej strony internetowej mogą korzystać różni ludzie z różnymi potrzebami, o czym przekonasz się, czytając ten podtytuł.

#Korzystasz z ekranu

Najczęściej strony internetowe odwiedzane są przez przeglądarkę internetową i są w niej wyświetlane w formie graficznej. Warto zatem zadbać o układ jej elementów, aby były czytelne oraz rozmieszczone w sposób intuicyjny — nic tak nie irytuje, jak poszukiwania menu nawigacyjnego czy guzika zamykającego wyskakujące okienko. Kwestią tą zajmuje się cała dziedzina zwana 'UX' skrótowo od angielskiego user experience.

Ważne jest, aby kolorystyka naszej strony internetowej, zapewniała odpowiedni kontrast dla elementów, które zawiera, aby tekst nie zlewał się z tłem naszej strony, a etykiety np. guzików były koloru pozwalającego na bezproblemowe odczytanie przez osoby z chorobami oczu. Sam często korzystam z narzędzia organizacji WebAIM 'Contrast Checker', które wskazuje czy dane kolory mają wystarczająco duży kontrast.

Czasem jednak niektóre kolory są tak silnie związane z naszą marką, że nie chcemy ich na siłę zmieniać. Warto w takim przypadku wprowadzić możliwość przełączenia kolorystyki strony na bardziej kontrastującą.

Przy doborze odpowiedniego koloru najbardziej wyczerpujące wytyczne można znaleźć w wytycznych WCAG 2.1 zawierających dokładne wskazówki, jak dostosować stronę do potrzeb osób z problemami wzroku. Dokument ten porusza również inne wskazówki, które wyjaśniają, jak tworzyć strony internetowe i aplikacje, aby udostępnić je osobom z niepełnosprawnościami np. wzroku, słuchu, ruchu, ale też z niepełnosprawnością intelektualną czy zaburzeniami poznawczymi.

#Jedziesz samochodem i 'przeglądasz' internet — czyli urządzenia wspomagające przeglądanie internetu

Ważne jest, aby elementy graficzne takie jak zdjęcia miały odpowiednio uzupełniony atrybut alt, czy width i height — są one wykorzystywany przez czytniki ekranowe do opisania znajdujących się na stronie grafik.

Odpowiednia hierarchia nagłówków ma ogromne znaczenie dla użytkowników czytników ekranowych, gdyż często stanowią one punkty odniesienia na stronie internetowej i służą jako swego rodzaju nawigacja.

Warto dodać ukryty odnośnik pozwalający szybko przeskoczyć do głównej treści strony pomijając menu nawigacyjne.

Do opisywania zawartości strony dla czytników ekranowych służą nie tylko znaczniki HTML. Można, a nawet trzeba w pewnych przypadkach wspomagać się atrybutami aria — np. niektórą treść można przecież przedstawić tylko wizualnie i należy ją ukryć przed czytnikiem ekranowym, aby nie kłopotać lektora :). Poniżej kilka zastosowań atrybutów aria:

• Elementy pełniące funkcję ozdobników takie jak ikony powinny zostać ukryte dla czytników ekranowych. Służy do tego atrybut aria-hidden.

• Poszczególne interaktywne elementy np. nawigację warto dodatkowo opisać atrybutem aria-label.

• Atrybutem aria-haspopup zaznaczamy, że dany element pozwala otworzyć na okienko.

#Popsuła Ci się myszka — obsługa strony klawiaturą

Funkcją często pomijaną lub – co gorsza – całkowicie wyłączaną jest prawidłowe oznaczanie (focusowanie) elementów na stronie podczas nawigowania po niej klawiaturą. Strona internetowa powinna zawierać czytelny i wyraźny 'focus' pozwalający bezproblemu namierzyć aktywny element. Rozwijane listy, guziki czy wyskakujące okienka powinny prawidłowo reagować przy naciśnięciu, czy to spacji, czy klawisza Escape.

#Optymalizacja szybkości ładowania strony

Żyjemy w zabieganych czasach. Warto zatem zadbać aby nasza strona internetowa szybko się wczytywała. Jak przedstawaiją liczne badania użytkownicy internetu często rezygnują z odwiedzenia strony, która wolno się wczytuje. Warto przyjrzeć się czy nasza strona:

• posiada responsywne grafiki — dla różnych wielkości ekranu pozwala załadować zdjęcie, które będzie czytelne, lecz nie za duże (zerknij na znacznik source),
• multimedia w tym grafiki zapisane ma w nowoczesnych formatach np. webp pozwalających zachować dobrą jakość przy jednoczesnej redukcji wagi danego pliku w porównaniu do starszych formatów,
• korzysta z zminifikowanych plików źródłowych, czyli ma maksymalnie 'odchudzone' pliki — tj. pozbawione zbędnych spacji, tabulatorów czy komentarzy,
• wczytuje tylko konieczne pliki css, js oraz czcionki,
• wczytuje skrypty napisane w javascript tak aby nie blokować renderowania strony internetowej (atrybuty: defer, async, odpowiednie miejsce wczytywania w dokumencie HTMl),
• zasoby potrzebne zaraz po załadowaniu strony są odpowiednio oznaczone atrybutem preload pozwalającym wskazać przeglądarce, iż należy pobrać je priorytetowo w pierwszej kolejności,
• wykorzystuje pamięć przeglądarki użytkownika (pamięć podręczna) do zapisu rzadko zmieniających się plików np. css,
• w miarę możliwości i potrzeby korzysta z serwisów CDN pozwalających serwować treść naszej strony z serwera możliwie jak najbliższego naszemu odwiedzającemu.
• obrazy niebędące w obszarze okna przeglądarki, gdzie dochodzi do renderowania treści stron internetowej (dowiedz się węcej o Largest Contentful Paint' (LCP)) posiadają atrybut loading="lazy" pozwalający wczytywać obrazy tylko gdy powinnny pojawić się w oknie naszej przeglądarki.

#Zadbaj o kwestie związane z SEO

Dobra strona internetowa to również taka strona, którą można łatwo znaleźć w wyszukiwarce internetowej. Choć jest to temat bardzo szeroki, a w niektórych konkurencyjnych branżach ciężko jest się wybić na szczyt list wyszukiwarek, każdy może wykonać kilka czynności, aby przyspieszyć indeksowanie naszej strony.

Znaczniki meta pozwalają opisać treść strony, wskazać autora, czy wymienić słowa kluczowe. Odpowiednio wygerenowana tzw. sitemapa zawierająca wszystkie strony w naszej witrynie znacznie ułatwia pracę robotom indeksującym naszą stronę. Warto dodać plik robots.txt pozwalający wskazać miejsce, gdzie znajduje się nasza 'site mapa' oraz zezwolić lub zabronić indeksowania wybranych zasobów naszej witryny.

Wszytkie omawiane wcześniej aspekty dobrej strony internetowej również mają ogromny wpływ na pozyscję oraz jakość naszej witryny.