FreshMail.pl
responsive web design | MarketingMobilny.pl

Responsive Web Design: od laika do praktyka, cz. I

Autor / 01 grudnia 2013

Strony internetowe w standardzie Responsive Web Design to trend, który w ostatnich miesiącach podbija rynek. Wciąż niewiele osób wie jednak, czym RWD naprawdę jest. Żeby zrozumieć jego istotę (i wartość), należy spojrzeć na zagadnienie szerzej – rozważając możliwe inwestycje w mobile, kalkulując ich opłacalność i dobierając najlepsze dla siebie opcje.

Jak to się zaczęło?

Gwałtowny wzrost liczby dostępnych na rynku urządzeń mobilnych oznaczał także koniec spójnych i estetycznych stron www. Dlaczego? Różnorodność rozdzielczości nie sprzyjała korzystnemu wyglądowi serwisu na coraz nowszych nośnikach. Projektowanie stron w dziesiątkach wersji byłoby nie tylko nieekonomiczne, ale także po prostu uciążliwe. Na dodatek: nie ma gwarancji, że kolejny projekt strony byłby już ostatnim! Wyparte kiedyś małe rozdzielczości wróciły przecież po długim czasie w postaci tabletów czy smartfonów. Kluczem do sukcesu była więc gruntowna zmiana sposobu myślenia o stronach i – zmiana sposobu ich projektowania.

Projektowanie doświadczeń

To nie projektowanie kanałów informacyjnych gwarantuje sukces. Kluczem są doświadczenia użytkownika. To one warunkują stworzenie rozwiązań wygodnych, praktycznych i wartościowych. RWD niezaprzeczalnie takie jest.

Responsive Web Design to standard tworzenia stron internetowych, który umożliwia ich pełną optymalizację pod kątem różnych rozdzielczości ekranu monitora. Dosadniej rzecz ujmując: każda strona, która została zaprojektowana w RWD, będzie czytelna i wizualnie atrakcyjna, bez względu na nośnik, na którym jest wyświetlana. Jej poszczególne elementy będą się układać zgodnie z rozmiarem nośnika, na którym je wyświetlimy. Dzięki innemu layoutowi treści będą rozmieszczone racjonalnie i odpowiednio do rozdzielczości urządzenia.

Jak to działa?

Technicznie podchodząc do zagadnienia: Media Queries w CSS3 umożliwiają tworzenie jednego kodu HTML, który zależnie od rodzaju urządzenia i jego rozdzielczości, orientacji pionowej lub poziomej będzie wyświetlał dopasowaną do niego stronę. Sama zmiana szerokości serwisu nie jest tu kluczowa – RWD pozwala na zmianę jego układu, sposobu nawigacji, ilości elementów i ich ułożenia. W zależności od potrzeb wyznaczane są breaking points – punkty, w których strona ma zareagować, zmieniając swój układ i wygląd. Jeśli będą one dostosowane do urządzeń typu: smartfon, tablet i komputer – strona będzie funkcjonowała prawidłowo na każdym z nich.

Po kolei

Projektując w RWD należy mieć jasno przemyślane i określone cele biznesowe serwisu oraz potrzeby jego użytkowników. Warto określić, które mogą być realizowane na poszczególnych urządzeniach (o różnych rozdzielczościach). Kolejnym etapem wdrożenia będzie zaprojektowanie wersji mobilnej (zgodnie z idą Mobile First, dokładanie treści na coraz większych rozdzielczościach będzie łatwiejsze niż odwrotnie – redukowanie ich). Mamy mało miejsca – wybierzemy więc jedynie kluczowe zagadnienia, dokładając następnie coraz istotniejsze.

Mocne strony responsywności

RWD kusi swoimi niezaprzeczalnymi zaletami. Dostępność strony na wszystkich urządzeniach oznacza możliwość dotarcia do nowych użytkowników i odbiorców produktów i usług; jedna strona dla wszystkich użytkowników ułatwia spójne i jasne komunikowanie marketingowe. Elastyczność zdjęć i multimediów gwarantuje czytelność i przejrzystość rozwiązania oraz szybkość odnajdywania strony w sieci. Jak więc skutecznie podnosić sprzedaż, budować wizerunek firmy nowoczesnej i otwartej na potrzeby użytkowników, jeśli nie… inwestując w mobilność?

Czy są tu jakieś wady?

Oczywiście nie ma rozwiązań idealnych. Wady RWD do końca jednak… wadami nie są. Największym zagrożeniem może być pominięcie na mniejszych rozdzielczościach strony treści istotnych dla użytkownika. Dokładna analiza użyteczności serwisu powinna temu jednak zaradzić.

Co dalej?

Inwestować czy nie? Czy o RWD nadal będzie głośno? Jestem przekonany, że nie. Z czasem już nikt nie będzie zastanawiał się nad skutecznością tego rozwiązania. Dlaczego? Bo projektowanie w Responsive Web Design stanie się standardem. Zamiast analizować, czy warto w RWD projektować, każdy… będzie to po prostu robił.



Rafael Moucka

Rafael Moucka – Założyciel i Prezes Zarządu Positive Power Sp. z o.o. Od początku odpowiedzialny jest za zarządzanie kluczowymi obszarami funkcjonowania firmy oraz budowę jej wartości. Od 2013 roku pełni funkcję Prezesa Zarządu spółki Positive Technology skupiającej udziały mailPro Sp. z o.o., Invisio Sp. z o.o., Positive Power Sp. z o.o. Jest absolwentem programu doskonalenia umiejętności Menedżerskich MANAGEMENT 2009 oraz AKADEMII STRATEGICZNEGO PRZYWÓDZTWA (Harvard Business School & ICAN Institute). Prywatnie – pasjonat wspinaczki sportowej, golfa i rozwoju osobistego.



  • Tomek

    „Projektowanie stron w dziesiątkach wersji byłoby nie tylko nieekonomiczne, ale także po prostu uciążliwe. Na dodatek: nie ma gwarancji, że kolejny projekt strony byłby już ostatnim”

    Czy tworzenie breaking pointsów o którym pan Rafael wspomina nie wyklucza się ze wcześniejszym rozważaniem na temat mnogości rozdzielczości?

    Przecież breaking pointsy oznaczają nic innego jak właśnie projektowanie pod wiele rozdzielczości osobnych layoutów! I nie możemy mieć pewności czy obecna wersja serwisu jest „ostateczną”. Artykuł jest niespójny wewnętrznie i niewiele wnosi a wręcz jest kolejnym z serii, który zaciemnia temat RWD.

  • Rafael

    Nie do końca się wyklucza, ponieważ przy mobilnych stronach skupiamy się na jednej, konkretnej rozdzielczości, a w przypadku RWD wyznaczamy breaking points, które umożliwiają spójne wyświetlanie się na wielu rozdzielczościach w danym zakresie rozdzielczości ekranu. Owszem w RWD, projektujemy więc szablon graficzny na kilka rozdzielczości, ale w wyniku tego otrzymujemy jedną stronę kompatybilną z wieloma rozdzielczościami, a nie kilka stron tworzonych pod różne. Poza tym mowa tu o genezie rozwiązania, które umożliwiło wdrażanie jednej strony, a nie kilku, tyle że mobilnych, co myślę, jest mniej uciążliwe finansowo i bardziej praktyczne, bo np. ta w RWD posiada zawsze jeden adres. 🙂

    Ostateczna? Oczywiście, że nie mamy takiej pewności, ale wyznaczenie kolejnych przedziałów breaking points na pewno będzie łatwiejsze w przypadku strony w RWD niż stworzenie nowej strony mobilnej dedykowanej zupełnie nowej rozdzielczości.

  • Szymon Słowik

    RWD w moim odczuciu jest znacznie praktyczniejsze także z perspektywy marketingu. Jeśli mamy jeden adres to łatwiej jest np. integrować strony z social media (plusy, like’i itp. są zliczane dla konkretnego adresu).

Zapisz się do newslettera

Newsy z bloga, aktualności, najbliższe wydarzenia z branży

FreshMail.pl