Nie zostawaj w tyle! Kilka słów o RWD

Przepis na idealną szarlotkę napisany ręką babci pięćdziesiąt lat temu nie zdezaktualizuje się prawdopodobnie do ostatniej jabłonki na Ziemi. Ale to wyjątek. Strona napisana pięć lat temu jest już prawdopodobnie przeżytkiem i albo trzeba ją napisać na nowo, albo wprowadzić poważne zmiany.

W 2011 roku wielu jeszcze myślało, że RWD (Responsive Web Design) to moda, która minie tak szybko jak się pojawiła. Stało się jednak inaczej i projektowanie dostosowane do wyświetlania na urządzeniach mobilnych jest już oczywistością, a nie kwestią do rozważania. Według różnych szacunków około połowa wszystkich wyświetleń stron internetowych w Polsce odbywa się na smartfonach i tabletach, a tendencja ta jest wzrostowa. Ale od początku…

Responsywność (od ang. response – odpowiedź)

Strona responsywna to taka, która na bieżąco „odpowiada” na to, na jakim urządzeniu jest wyświetlana. Jako użytkownicy widzimy to między innymi w zamianie standardowego menu do formy rozwijanej ikony przy mniejszych rozdzielczościach, skalowaniu tekstów i obrazów, wyłączaniu widoczności pewnych treści, a także sprawnym układaniu się jednych bloków z treścią pod drugimi. To jak na bieżąco zmienia się układ strony, zaobserwujemy najłatwiej zmieniając układ trzymanego w ręce telefonu z pionowego na horyzontalny.

Wybierz procenty czyli jak zaprojektować responsywną stronę?

Często zaleca się tworzenie makiety strony od widoku przeznaczonego na ekrany urządzeń mobilnych, a dopiero potem przełożenie jej na widok ekranu komputerowego. To, co ułoży się nam w widoku mobilnym bez problemu przeniesiemy na stronę o większym formacie. Projektujemy odpowiedni rozmiar przycisków i innych elementów klikalnych, w wygodnej dla użytkownika wielkości.

Po przygotowaniu wersji graficznej przychodzi pora na programowanie. Jedną z nowości z jakimi trzeba się zmierzyć, to unikanie wprowadzania bezwzględnych wartości. Zamieniamy piksele na procenty lub inne wartości, które operują jednostkami relatywnymi. Wykorzystujemy Media Queries w arkuszach stylów z wytycznymi do wyświetlania dla poszczególnych rozdzielczości. Jednym z koniecznych działań jest też takie zaprogramowanie bloków z treścią, by odpowiednio układały się na stronie mobilnej.

Korzyści

Użytkownik, który szuka informacji na smartfonie jest dużo mniej cierpliwy niż ten, który zasiada przed ekranem monitora, choć to najczęściej ta sama osoba. Przeglądając strony na urządzeniach mobilnych jesteśmy dużo bardziej wymagający, często robimy to w pośpiechu i szukamy konkretów. Dłuższe ładowanie się strony, zaśmiecenie niepotrzebnymi treściami czy problemy z wyświetlaniem to wystarczające powody by nacisnąć strzałkę powrotu i poszukać co słychać u konkurencji.
To jest jeden z argumentów przemawiających za dostosowaniem strony do mniejszych rozdzielczości. Drugi podpowiada nam algorytm Google – jeśli liczymy na wysokie pozycje w wyszukiwarce musimy postarać się o responsywność naszej strony.

Strona responsywna to już nie podążanie za trendami i wyznacznik nowoczesności,  a obowiązek każdej firmy czy instytucji, która dba o swojego klienta.