RWD – czyli responsywna strona www
Zastanawiasz się, czym jest responsywna strona internetowa? Warto na wstępie wyjaśnić pojęcie RWD (Responsive Web Design). Jest to technika tworzenia stron www w taki sposób, aby ich wygląd i układ w sposób automatyczny dopasowywał się do rozmiaru okna przeglądarki, w której witryna się wyświetla.
Dzięki temu strona internetowa responsywna jest w pełni funkcjonalna zarówno na ekranie smartfonu, jak i dużego monitora. Nie ma potrzeby powiększania czy przybliżania żadnych elementów. Ponadto Google premiuje strony responsywne HTML i CSS, przyznając im wyższą pozycję w wynikach wyszukiwania.
10 najlepszych praktyk dla stron responsywnych
Sprawdź, jak zrobić dobrą stronę responsywną w oparciu o 10 istotnych zasad.
Elastyczność: musi dotyczyć wszystkich elementów na stronie responsywnej, takich jak bloki tekstu, grafiki, układy i pozostałe komponenty.
Skalowalna grafika wektorowa SVG: znacznie lepiej nadaje się do tworzenia responsywnych stron CSS i HTML niż standardowa grafika rastrowa. Pliki SVG automatycznie zmieniają swoją rozdzielczość, więc pozostają czytelne niezależnie od rozmiaru.
Responsywne obrazy: są bardzo ważne, aby strona była prawidłowo wyświetlana na różnych nośnikach. Może być niezbędne automatyczne zmienianie ich rozmiaru i przycinanie. Przykładowo, na urządzeniach mobilnych najlepiej sprawdzają się grafiki kwadratowe.
3 podstawowe urządzenia (breakpoints): strona musi prawidłowo działać na komputerze, tablecie i telefonie.
Interfejsy kart: automatyczny układ UXPin pozwala na łatwe zmienianie parametrów, a także kopiowanie, wklejanie i przenoszenie gotowych fragmentów kart na stronie.
Mniej zawartości: ułatwia korzystanie ze strony, poprawia czytelność i zwiększa szybkość ładowania strony. Jednym słowem – minimalizm zawsze się sprawdza.
Priorytetowanie treści: na niewielkim ekranie użytkownik nie zobaczy wszystkich elementów dostępnych na dużym monitorze. Trzeba zatem określić, która zawartość jest najważniejsza, a którą można ukryć.
Skupienie się na urządzeniach mobilnych: projektowanie responsywnej strony internetowej warto zacząć od najmniejszych (czyli najbardziej wymagających) rozmiarów ekranu.
Duży obszar klikalny: przyciski muszą mieć taką powierzchnię, by można było wygodnie je naciskać, także na ekranie telefonu.
Badanie konkurencji: jest przydatne w każdej branży. Warto sprawdzić, jak do projektowania responsywnych stron podchodzą liderzy rynku.
Sprawdź, co jeszcze warto wiedzieć o projektowaniu stron RWD oraz web usability.
Strona mobilna a strona RWD
Te pojęcia są ze sobą często mylone. Łączy je to, że obie strony prawidłowo wyświetlają się na urządzeniach mobilnych. Warto jednak wiedzieć, że strona mobilna jest przeznaczona tylko na smartfony czy tablety (ma inny adres URL niż strona na komputery). Strona RWD ma jeden adres i dostosowuje się do urządzenia, na jakim jest wyświetlana.
Przykłady serwisów responsywnych
Sprawdź przykłady 3 dobrze zaprojektowanych stron responsywnych
Shopify – niektóre opcje na stronie są ukryte, gdy korzysta się z niej na urządzeniu mobilnym. To poprawia czytelność. Dodatkowo menu zostało podzielone na oddzielnie grupy, tworzące „dwa obszary poznawcze”.
Slack – uwagę przykuwa ciekawe podejście do przycisków CTA. W widoku mobilnym i na tablecie dwa z nich zastąpiono jednym dużym – zajmuje on prawie całą szerokość ekranu.
Starbucks – strona responsywna wyróżnia się przede wszystkim prostym, statycznym projektem, który mimo to przyciąga wzrok (głównie za sprawą dobrze dobranych kolorów).
Strona responsywna – to warto wiedzieć
Responsywna strona internetowa to obecnie must have, jeśli chcesz sprostać oczekiwaniom algorytmów wyszukiwarek, a przede wszystkim swoich odbiorów. Dobrze zaprojektowana strona RWD jest tak samo funkcjonalna na małym ekranie smartfona i na dużym monitorze komputera.