5 Najważniejszych zasad RWD

W dzisiejszych czasach ponad połowa urządzeń korzystających z przeglądarek internetowych to urządzenia mobilne. Tworząc stronę czy sklep internetowy, nie decydując się na resposnywność od ręki tracimy połowę potencjalnych jej odbiorców, a być może nawet przyszłych klientów. Dlatego przygotowałem dla was kilka najważniejszych zasad RWD, czyli Responsive Web Designu. Możesz je potraktować jako check listę, pozwalającą sprawdzić swoją pracę lub jakość strony, którą wykonał dla Ciebie webdeveloper.

Sprawdź czy Twoja witryna obsługuje mobilne menu rozwijane po kliknięciu w odpowiednią ikonę. Znacząco zwiększa to przejrzystość oraz łatwość nawigacji po stronie internetowej, dzięki temu zwiększasz szansę, że użytkownik zostanie na dłużej. Takie rozwiązanie w stosunkowo łatwy sposób jest do osiągnięcia poprze zastosowanie reguł media queries i zdefiniowanie wersji poszczególnych elementów obiektu DOM dla konkretnych rozdzielczości. Więcej informacji na temat reguł @media znajdziesz w materiale MDN web docs tutaj.

Typografia jest również niezwykle ważną zasadą responsywnego tworzenia stron. Celem użytkownika odwiedzającego Twoją stronę jest znalezienie informacji, najczęściej przekazywane są one w formie tekstowej. Niestety nie każda czcionka, która świetnie zachowuje się na monitorach komputerów tak samo zachowa się na smartfonie. Najlepszym rozwiązaniem są testy, dokładne sprawdzenie jak dany font wygląda w różnych rozdzielczościach.

Na urządzeniach mobilnych bardzo porządane jest wyświetlanie treści w jednej kolumnie, z kolei tablet czy monitor zachowa czytelność przy zdecydowanie większej ilości kolumn z contentem. W tej sytuacji reguły @media również okażą się przydatne, ale bazowanie tylko na nich w efekcie końcowym przystworzy nam wielu problemów. Popularnym rozwiązaniem przy tworzeniu witryn jest korzystanie z siatki Boostrap lub nowoczesnych rowiązań które daje nam CSS takich jak Flex Box i Grid Layout.

Optymalizacja grafik, plików źródłowych strony. Przeglądając stronę na laptopie z szybkim łączem być może nie odczujemy dyskomfortu. Jednak ciężkie obrazy serwowane na smartfony mogą obciążyć stronę tak, że nie będzie się ona nadawała do użytku. Żeby temu zaradzić przygotuj różne wersje obrazów dla kilku różnych rozdzielczości, pozwoli to zaserwować użytkownikowi grafikę w optymalnym dla niego rozmiarze. Skorzystaj też z narzędzi służących do zmniejszania wagi plików jpg czy png, a najlepiej wykonaj konwersję do nowoczesnego formatu webp. Zminifikuj też pliki JS, CSS, HTML. Twoja strona internetowa na pewno na tym zyska.

Sprawdź czy rozmiar przycisków, pól formularzy pozwala na ich swobodne klikanie na urządzeniach dotykowych z mniejszym ekranem. W przypadku formularzy należy zadbać również o ich wyraźny focus, który nastąpi po kliknięciu.

Podsumowanie

Składowych dobrej optymalizacji RWD jest sporo. Jeśli nie masz pewności czy wszystkie najważniejsze zasady RWD zostały wykonane na Twojej stronie możesz skorzystać z darmowego narzędzia Mobile Friendly od Google, które pozwoli Ci sprawdzić optymalizację Twojej strony dla urządzeń mobilnych.