Skalowalne strony www

2016-05-23

Pod tym tajemniczym skrótem kryje się pojęcie Responsive Web Design, co w dosłownym tłumaczeniu oznacza responsywny projekt strony. Synonimem do responsywności w tym przypadku jest skalowalność. Ogólnie rzecz ujmując RWD to zbiór reguł, mechanizmów i zasad programowania stron internetowych, aby ich wyświetlanie było automatycznie dostosowane do każdej wielkości ekranu. Skalowanie stron działa bez względu na urządzenie którego używamy, tj. komputer, smartfon czy tablet. To właśnie z myślą o użytkownikach tych dwóch ostatnich urządzeń powstało RWD.

Skalowalne strony www

Oglądając strony internetowe na smartfonie, przygotowane powiedzmy pod rozdzielczość 1000-1200px, prawie zawsze musimy powiększać ich zawartość, aby przeczytać interesujące nas teksty lub kliknąć w przycisk. Często również z powodu małego ekranu smartfona strony pokazują nam zbędne informacje, utrudniające dotarcie do tych, które nas interesują. I tutaj z pomocą przychodzi nam opisany we wcześniejszym akapicie mechanizm. Dzięki niemu, strona otwierana na smartfonie lub tablecie nie wymaga skalowania, teksty i przyciski są odpowiedniej wielkości, a zawartość pozbawiona wszelkich zbędnych elementów.

Dlaczego RWD stało się tak ważne?

Wystarczy rozejrzeć się dookoła, żeby zobaczyć jak wiele osób korzysta z urządzeń mobilnych do przeglądania internetu. Można też przeanalizować statystyki z których wynika, że w drugim kwartale 2013 roku sprzedaż smartfonów wyniosła 225 milionów sztuk, czyli aż o 46,5% więcej niż w ubiegłym roku. W związku z powyższym, jeśli zależy Ci na dotarciu do szerszej grupy odbiorców w wygodny dla nich sposób, powinieneś przeczytać dalszą część artykułu.

Krok po kroku

Jak tworzy się strony www opisałem w pierwszym artykule naszego bloga. Wykorzystanie RWD nie odwraca do góry nogami procesu twórczego, a jedynie rozwija jego pewne etapy. 1. Przede wszystkim podczas tworzenia makiet musimy dodatkowo opracowač układ strony pod mniejsze rozdzielczości, czyli np. 420px oraz 800px (szerokość). Na podstawie tych makiet powstają trzy wersje rozmiarowe projektu (wersje na urządzenia mobilnego robimy dopiero po wykonaniu i wprowadzeniu uwag do głównego projektu).
2. Programista otrzymując trzy wersje projektu musi przygotować skrypty, które automatycznie wykryją rozdzielczość ekranu użytkownika, wybiorą odpowiednią dla niego wersję i wyskalują stronę, więc nie ma obaw, że wąska wersja smartfonowa wyświetli nam się na ekranie laptopa.
Dalsze prace takie jak wdrożenie systemu CMS oraz wprowadzenie treści odbywają się dokładnie tak, jak w przypadku zwykłych stron, ponieważ baza danych i domena jest jedna dla wszystkich wersji rozmiarowych strony.

Cena responsywności

Ostatnia informacja dotyczy dodatkowych kosztów, które należy ponieść decydując się na technologię RWD. Wiąże ona się ze zwiększonym czasem pracy potrzebnym na przygotowanie makiet, projektu graficznego oraz wdrożenia layoutu. Szacunkowo koszt wykonania strony firmowej wraz opartej o RWD wzrasta o ok. 50% (wzrost ceny nie dotyczy prac programistycznych przy wdroźeniu systemu CMS, a także dodatkowych modułów zwiększających funkcjonalność serwisu). Oczywiście taki wydatek należy traktować jako inwestycję, dzięki której ułatwimy użytkownikom urządzeń mobilnych dotarcie do informacji o naszych usługach lub dokonanie zakupu.

Adam Szmidt
Adam Szmidt
Manager, UI/UX Designer