Responsywność strony (RWD - Responsive Web Design) to układ strony internetowej, który automatycznie dostosowuje się do wielkości ekranu urządzenia, na którym ta strona jest wyświetlana.
Strona responsywna jest uniwersalna, bo jej treści skalują się i dostosowują do wielkości ekranu urządzenia. Nie ma znaczenia, czy oglądamy taką stronę na komputerze, tablecie, czy smartfonie - strona responsywna na wszystkich tych urządzeniach będzie wyglądała równie dobrze i będzie wygodna w odbiorze dla użytkownika.
Najprościej jest po prostu wykorzystać swój telefon - ja podczas pracy nad stroną internetową zawsze mam pod ręką mój smartfon i od czasu do czasu otwieram na nim stronę nad którą pracuję, aby zobaczyć co z jej responsywnością.
Przy tak wielu różnych rozmiarach i rozdzielczościach ekranów na rynku, zaprojektowanie strony dla każdego możliwego scenariusza jest prawie niemożliwe… ale to nie znaczy, że nie powinniśmy próbować!
Istnieje wiele narzędzi do testowania stron w różnych rozdzielczościach, ale z mojego doświadczenia wynika, że testowanie ręczne jest najbardziej efektywne. Wystarczy przetestować witrynę na kilku najczęściej spotykanych rozmiarach ekranów, aby wychwycić ewentualne błędy w układzie i poprawić doświadczenia użytkownika.
Przeglądarka internetowe Google Chrome pozwala na przetestowanie strony internetowej pod kątem jej responsywności.
W menu podręcznym przeglądarki klikając trzy kropki (1), wybierz zakładkę Więcej narzędzi (2) i dalej wybierz Narzędzia dla developerów (3).
Następnie musimy uruchomić tryb responsywny przeglądarki Chrome, w którym możemy symulować różne rozmiary ekranów.
W trybie symulacji ekranów mamy do dyspozycji kilka predefiniowanych rozmiarów wyświetlaczy, według nazwy urządzenia, albo możemy wybrać opcję "Responsive", gdzie możemy podać konkretne wymiary w pikselach.
Możemy też szybko sprawdzić zachowanie się strony internetowej podczas zmiany rozmiaru okna przeglądarki, wykorzystując uchwyty na obrzeżach okna symulatora i zwyczajnie przeciągając krawędzie.
Oto kilka rzeczy, o których warto pamiętać podczas testów na różnych urządzeniach:
Test optymalizacji mobilnej od Google da Ci ocenę pozytywną lub negatywną z kilkoma (aczkolwiek czasami mylącymi) instrukcjami, co należy poprawić.