Responsive Web Design – nowoczesność na miarę XXI wieku
Responsive Web Design to bardzo interesująca koncepcja tworzenia i wdrażania stron internetowych.
Naczelna idea brzmi: strona WWW ma być zoptymalizowana i dostępna zawsze. Rozmiar urządzenia, na którym treści są wyświetlane nie ma znaczenia. Responsive Web Design pozwala na zachowanie idealnej jakości: na komputerach, laptopach, tabletach i smartfonach.
Strona internetowa, którą projektujemy w zgodzie z Responsive Web Design, ma nawigację dostosowaną do rozmiaru ekranu. Jest czytelna na każdym sprzęcie. Scroll’owanie następuje tylko w osi góra-dół. Strona WWW ma wbudowaną technologię, która umożliwia jej automatyczne reagowanie na preferencje użytkownika. Precyzując: przy przechodzeniu z laptopa na iPada, strona internetowa automatycznie przełączy swoją rozdzielczość, pomniejszy format obrazu, itp.
To jednak nie wszystko!
Responsive Web Design to nowe podejście do projektowania, zmiana sposobu myślenia na bardziej abstrakcyjny.
Codziennie powstają nowe urządzenia. Mają różną rozdzielczość ekranu, różne orientacje, różne funkcjonalności. Mnóstwo sprzętu wyświetla treść w widoku pionowym i poziomym. Przełączenie orientacji zajmuje mniej niż sekundę.
Jak projektować stronę internetową, by uwzględniała taką różnorodność?
Odpowiedzi dostarczają elastyczne układy. Całą konstrukcję strony internetowej traktujemy jako sieć płynu (z różnymi elementami, które muszą sprawnie dostosować się do zmiany urządzeń mobilnych). Podstawowe techniki Responsive Web Design to ukrywanie i ujawnianie zawartości strony WWW. Na mniejszym ekranie duża ilość zawartości może przytłaczać.
Jakie praktyki stosujemy by temu zaradzić?
Prostszą nawigację oraz skoncentrowane treści. Zamiast wielu kolumn koncentrujemy uwagę na listach lub wierszach. Przy projektowaniu trzeba myśleć o potencjalnych użytkownikach. Całość ma być dla nich zrozumiała i przyjemna w obsłudze.
Co ze zdjęciami?
Maksymalną szerokość grafiki ustawiamy na 100% szerokości przeglądarki. Co się dzieje, gdy przeglądarka jest mniejsza? Automatycznie zmniejsza się nasze zdjęcie. Nie deklarujemy wysokości i szerokości w kodzie. Przeglądarka, korzystając z CSS, sama to zrobi. Ogromne znaczenie ma też… rozdzielczość obrazu!
Wyobraź sobie piękną grafikę strony internetowej, którą oglądasz na komputerze. W drodze do pracy chcesz zerknąć na nią jeszcze raz. Wpisujesz adres na smartfonie i … całość ładuje się bardzo długo! Dlaczego? Bo obraz w dużym rozmiarze nie nadaje się do wyświetlania na małych urządzeniach. Nie dość, że zwalnia stronę WWW, to jeszcze znacznie zużywa transfer danych! Rozmiar ma znaczenie. Jakość nie ucierpi, jeśli zmniejszysz swoją grafikę.
Man with tablet computer reading news at motning in cafe
Nie można zapominać o ekranach dotykowych. Użytkownicy bardzo często przeglądają strony internetowe, dotykając ekranu. Nawigacja na małym ekranie nie może sprawiać trudności. Postaw na odpowiedni rozmiar ikon.
Wiesz, że większość ludzi jest praworęczna?
Dobrym pomysłem jest więc umieszczenie nawigacji po prawej stronie. Eliminujemy w ten sposób ilość przypadkowych „kliknięć” w trakcie trzymania urządzenia w lewej ręce. Tekst również musi się dostosować. Na mniejszym ekranie powinien automatycznie zostać powiększony – ma przecież być czytelny.
Responsive Web Design to wyjątkowe podejście do tworzenia stron internetowych. Zadbaj, by Twoja firma była nowoczesna. Postaw na jakość.
