5 zasad responsywnego webdesignu

To wiadomo już od dawna - responsywny webdesign nie jest tylko przejściowym trendem. W obecnych czasach stanowi standard, i odpowiednie dopasowanie projektowanej witryny do wyświetlania jej na każdego typu urządzeniach - stacjonarnych, jak i mobilnych - stanowi obowiązkowy element przygotowania strony internetowej.

Z roku na rok oczekiwania użytkowników rosną, a wraz z nimi - wzrasta również poprzeczka wyznaczające wymagania wobec webdesignerów. Responsywna strona internetowa lepiej pozycjonuje się w Google, wymaga mniejszego nakładu pracy i oszczędza Twój czas oraz pieniądze. Jakie zatem jest pięć zasad, o których trzeba pamiętać w kwestii responsywnego webdesignu?

Nie tylko urządzenia mobilne

To właśnie na urządzeniach mobilnych w zeszłym roku otworzono więcej witryn internetowych, niż na komputerach stacjonarnych. To najczęstszy argument designerów, którzy w nurcie “mobile-first” podczas procesu projektowania strony www stawiają znacznie większy nacisk na staranne dopracowanie mobilnej wersji portalu, niż jej pełnowymiarowego odpowiednika.

O ile jeszcze kilka lat temu webdesignerom trzeba było przypominać o tym, by pamiętali o tym, by ich projekt był czytelny i wygodny w użyciu na urządzeniach przenośnych - teraz zdają się czasem zapominać, że dopracowana musi zostać również wersja witryny przeznaczona na duże ekrany o wysokiej rozdzielczości.

“Rule of thumb” i wygodna nawigacja

Przed designerami, którzy projektują mobilną wersję strony internetowej, stoją znaczne ograniczenia. Podstawowym jest to, że korzystając z ekranu telefonu czy tabletu - nie mamy możliwości wygodnego sięgania do pewnej części ekranu. Dlatego też dostęp do najczęściej używanych i najbardziej niezbędnych opcji - menu, wskazówki dojazdu, kontakt czy inne - powinny być rozmieszczone w witrynie w wygodny i intuicyjny sposób.

Kolejnym aspektem, o którym warto pamiętać, jest zasada kciuka - która mówi o tym, jak duża powinna być powierzchnia przycisku, który musi wcisnąć użytkownik. Jeżeli umieszczone przyciski będą zbyt małe lub zbyt blisko siebie - wybranie jednego z nich kciukiem będzie niewygodne. Z kolei za duży przycisk może psuć layout strony i w zbędny sposób zajmować - i tak bardzo ograniczone - miejsce na ekranie.

Trzy sekundy na dostarczenie treści

Badania Google pokazują, że jeżeli strona internetowa nie załaduje się w ciągu 3 sekund od wpisania jej adresu - 53% użytkowników ją wyłączy. Szczególnie w przypadku stron projektowanych na urządzenia mobilne - czas jest Twoim wrogiem. Jeżeli użytkownik witryny chce znaleźć wskazówki dojazdu, poznać szybką odpowiedź na swoje pytanie albo zająć sobie czas podczas podróży do pracy, gdzie o jego uwagę walczą setki linków, odnośników i aplikacji - nie możesz pozwolić sobie na to, by spowalniać działanie strony dużymi, niezoptymalizowanymi grafikami, nadmiarem treści lub przeładowanym kodem.

Efektowne animacje i długie akapity treści pozostaw w wersji na komputery stacjonarne, natomiast w wersji mobilnej - postaw na krótszy przekaz, responsywne obrazki i pomyśl o podzieleniu niektórych podstron na drobniejsze fragmenty, które szybciej się załadują.

Rozmiar ma znaczenie

Jak już pisałam w poprzednim artykule na temat trendów w typografii w 2018 roku - typografia ma obecnie znaczenie większe niż kiedykolwiek. W przypadku zasad responsywnego webdesignu musisz jednak pamiętać o tym, że to, co będzie wyglądało efektownie i ciekawie na ekranie o dużej rozdzielczości, na mniejszym urządzeniu może okazać się kompletnie nieczytelne.

Przede wszystkim zbyt małe, ale też zbyt cienkie, minimalistyczne fonty, niedostatecznie duże nagłówki, zbyt mały kontrast lub zbyt małe odstępy między linijkami to tylko niektóre z błędów, które przy wyborze odpowiedniej typografii popełniają webdesignerzy. Warto pomyśleć również o tym, by duże napisy lub obrazki zamienić na niewielkie, czytelne i możliwie proste ikony. Zajmują mniej miejsca, są bardziej intuicyjne dla użytkowników i mogą stanowić łatwy, ciekawy sposób na poprawienie wyglądu strony.

Projektuj dla człowieka, a nie dla najnowszego iPhone’a

Gdy Apple wypuściło na rynek swój najnowszy produkt, iPhone X, w środowisku webdesignerów zawrzało. Wycięcie na górze ekranu spędzało sen z powiek projektantom aplikacji i stron internetowych, którzy prześcigali się w jak najbardziej kreatywnych sposobach na wykorzystanie nowej rozdzielczości. Tego typu trend można zauważyć po każdej premierze najnowszych urządzeń czołowych producentów urządzeń mobilnych.

Zdecydowanie zbyt mało projektantów skupia się jednak na tym, by ich strona wyglądała nie tylko estetycznie i czytelnie na najnowszym smartphonie, ale i… Na jego odpowiedniku z 2014 roku.

Czy Twoja witryna będzie użyteczna nawet wtedy, gdy użytkownik nie będzie miał włączonego JavaScript? Czy jeżeli nie będzie dysponował szybkim łączem, to nie straci cierpliwości w połowie ładowania się strony? Czy grafiki i detale, nad którymi spędzasz kolejne godziny, będą docenione tylko przez posiadaczy najnowszego sprzętu, a może tworzysz stronę, która będzie wygodna i czytelna dla każdego typu użytkowników? Projektując nie zawężaj się do konkretnej niszy, a raczej postaraj się odpowiedzieć na oczekiwania ogółu odbiorców.

Jeśli chcesz poznać skuteczne techniki pracy związane z optymalizacją witryn pod urządzenia mobilne i konkretne rozdzielczości sprawdź Kurs Responsive Web Design - Skuteczne Techniki na eduweb.pl