1. Grzegorz Langner, Senior Web Designer, PromoAgency
2. Eryk Bochenski, Solution Consultant, Optivo
3. Dominik Piłat, Junior UX Designer, Grupa Me & My Friends
4. Tomasz Stężycki, Ekspert SEO, Grupa TENSE
Zobacz inne odcinki cyklu Encyklopedia Marketingu >
Zobacz również
RWD
[Grzegorz Langner:] RWD (ang. responsive web design) (projektowanie responsywne) – jest to projektowanie strony www w taki sposób, który umożliwi automatyczne dostosowanie jej do urządzeń, na których będzie wyświetlana (np. tablet, smartfon).
RWD pozwala nam na swobodne przeglądanie strony internetowej bez utraty danych czy estetyki. Do największych zalet projektowania RWD należą: zwiększona czytelność strony, prostsza nawigacja, wzrost liczby odwiedzin użytkowników na stronie oraz budowanie innowacyjnego wizerunku.
Technologia responsywności daje nam możliwość edycji treści w odpowiedni sposób – możemy sprecyzować, które elementy strony będą widoczne/ukryte na wybranym urządzeniu. W ten sposób możemy poprawić i utrzymać czytelność komunikatów, które trafią do użytkownika – wszystko niezależnie od tego, czy strona zostanie odtworzona w formacie full HD (1920px) czy mobile (480px). Strona powinna płynnie dostosować się do szerokości wyświetlacza. RWD daje nam możliwość sprecyzowania, które elementy będą wyświetlane w danych rozdzielczościach, aby czas potrzebny na dotarcie do nich był podobny.
Poznaj Cropink – szybko i prosto twórz reklamy produktowe. Uwolnij Twoją kreatywność
Jest to swojego rodzaju połączenie cech strony responsywnej oraz mobilnej. Należy pamiętać o tym, że jeżeli mówimy o stronie mobilnej, to nie jest ona tożsama z stroną RWD. Strona mobilna charakteryzuje się innym podejściem na etapie projektowym – to strona zaprojektowana specjalnie na urządzenie mobilne (jest niezależna od strony desktopowej, ma uproszczony styl, zawiera zupełnie inną treść. jest pozbawiona zbędnych grafik).
Słuchaj podcastu NowyMarketing
Liczba odwiedzin stron www z urządzeń mobilnych jest coraz większa i cały czas rośnie. Zależy nam na treści, która jest maksymalnie dopasowana do urządzenia, z którego korzystamy – to gwarantuje RWD. Nie dziwi więc fakt, że jeżeli dana firma chce się liczyć na rynku, musi postawić na dostępność. Strona musi docierać do odbiorców w taki sam, czytelny sposób. Dodatkowo zaprojektowanie strony www pod RWD daje nam gwarancję lepszego pozycjonowania oraz większego wsparcia robotów Google.
Przykłady stron internetowych opartych na rozwiązaniach RWD:
Autor definicji:
Grzegorz Langner
Senior Web Designer, PromoAgency
Odpowiada za realizację projektów dla kluczowych klientów agencji. Posiada ponad 7-letnie doświadczenie przy realizacji reklam oraz serwisów na potrzeby online. Pasjonuje się Visual Design oraz User Experience Design.
–––
[Eryk Bochenski:] Konsumenci odchodzą powoli od wyszukiwania informacji i dokonywania transakcji w Internecie za pośrednictwem komputerów stacjonarnych na rzecz urządzeń mobilnych. Jak wynika z badania przeprowadzonego w kwietniu 2016 roku przez firmę Litmus, wskaźniki otwarć e-maili za pośrednictwem kanału mobile sięgają nawet 56%. Przy tworzeniu strony oraz komunikatów marketingowych skierowanych do klientów, warto więc objąć kierunek mobile-first, koncentrujący się przede wszystkim na modelu RWD, czyli Responsive Web Design.
RWD to technika budowania strony, na przykład sklepu internetowego, polegająca na projektowaniu witryny w taki sposób, by mogła być ona odczytywana na urządzeniach przenośnych różnego formatu oraz dostosowywała swoją szerokość do ich specyfiki. Strona, aby być czytelna i funkcjonalna na tabletach i smartfonach, musi być zaprojektowana w odpowiedni, przemyślany sposób – zawierać wyłącznie kluczowe informacje oraz widoczne przyciski w najistotniejszych miejscach. Korzystanie z serwisu opartego na RWD, bez względu na urządzenie, na jakim jest wyświetlany, ma być dla użytkownika przede wszystkim wygodne i intuicyjne. Projektowanie stron zgodnie z zasadami RWD sprawi, że doświadczenie użytkownika stanie się bardziej pozytywne i chętniej skorzysta on z naszych usług po raz kolejny.
O responsywności należy także pamiętać w kontekście komunikacji z klientami za pośrednictwem kanału e-mail. Jak więc powinien być zbudowany responsywny newsletter? Przede wszystkim warto upewnić się, że przyciski call-to-action są duże i znajdują się w odpowiedniej odległości od tekstu czy użytych w newsletterze grafik. Należy także pamiętać o odpowiednim rozmiarze czcionki (około 14 pikseli), trzymaniu się zwięzłej, relatywnie krótkiej treści i nie przesadzaniu z ilością zdjęć. Warto także ograniczyć się do designu jednokolumnowego – więcej kolumn znacznie utrudnia odbiorcom jakąkolwiek interakcję.
Optymalizacja pod kątem urządzeń mobilnych to dziś absolutna podstawa, jeśli chcemy, by oferowane przez nas produkty lub usługi spotkały się z pozytywnym odbiorem jak największej liczby potencjalnych i obecnych klientów. Rezygnacja z modelu RWD to dobrowolne godzenie się na odchodzących – wraz z ich pieniędzmi – klientów.
Autor definicji:
Eryk Bochenski
Solution Consultant, Optivo
Od lat związany z branżą internetową i IT, absolwent kierunku „eBusiness – Zarządzanie i tworzenie systemów dla eBusinessu”. Od 2011 roku pracuje w firmie Optivo, doradzając i współtworząc rozwiązania dla największych klientów.
–––
[Dominik Piłat:] RWD (ang. responsive web design) jest techniką projektowania stron www odpowiedzialną za automatyczne dostosowywanie ich layoutu do rozmiaru i ułożenia okna przeglądarki urządzenia. Dzięki temu projektanci mogą zoptymalizować wygląd strony pod kątem użyteczności (user experience), zarówno na ekranach komputerów stacjonarnych, laptopów, jak i smartfonów czy tabletów.
Coraz większa różnorodność urządzeń wpłynęła na wzrost znaczenia RWD, a co za tym idzie, na jakość odbioru contentu w internecie. W szybkim tempie rośnie liczba użytkowników, która częściej odwiedza strony www przy pomocy urządzeń mobilnych niż z poziomu komputerów stacjonarnych czy laptopów. Projektowanie serwisów wyłącznie na potrzeby monitorów komputerów utrudnia wyświetlanie treści i nawigację po witrynie, jeżeli użytkownik przegląda stronę na mniejszym ekranie, o niższej rozdzielczości. Takie problemy z użytecznością rozwiązywane są przez deweloperów właśnie przy pomocy techniki RWD, co zapewnia internautom wygodne i przystosowane do ich urządzenia przeglądanie treści. Co więcej, strony responsywne jako przyjazne dla użytkowników mobilnych są premiowane przez Google i uzyskują wyższe pozycje w wynikach wyszukiwania, co przekłada się na wzrost ruchu organicznego.
Cechy strony responsywnej:
- Czytelność wyświetlania contentu, niezależnie od urządzenia. Odpowiednia wielkość fontu pozwala komfortowo przeczytać tekst, bez konieczności jego powiększania.
- Dopasowanie rozmiaru w poziomie. Witryna wykorzystuje całą szerokość ekranu, na urządzeniach mobilnych nie trzeba przesuwać jej na boki w celu zobaczenia pełnej zawartości.
- Łatwość nawigacji po stronie. Elementy menu oraz linki są na tyle duże i oddalone od siebie, aby nie sprawiać problemów przy poruszaniu się po serwisie.
Case studies:
Teatr Lalka
(realizacja Huncwot, Polska)
fot. www. teatrlalka.pl
Strona należy do najstarszego w Warszawie teatru lalek, mimo to jej forma i przekaz są na wskroś nowoczesne. Duże wrażenie na odbiorcy robi zwłaszcza bogata w animowane ilustracje szata wizualna. Jednocześnie witryna pozostaje przejrzysta i responsywna. Strona na różnych nośnikach nie tylko zachowuje swoją pierwotną formę nawigacji, ale i bajkowy charakter, który tworzy szczególny klimat teatru.
Catch Fish and Chips
(realizacja: ED., Australia)
fot. www.catchfishandchips.com.au
Australijska restauracja Catch Fish and Chips postanowiła pokazać od kuchni, w jaki sposób przygotowuje serwowane przez nią ryby. Jej strona internetowa przedstawia proces przyrządzenia potrawy krok po kroku, zachęcając do próbowania lokalnych produktów najwyższej jakości. Płynnie zmieniające się animacje połączone z chwytliwym tekstem skutecznie przykuwają uwagę użytkownika, a responsywna budowa witryny sprawia, że działa ona na różnych urządzeniach, nie tracąc nic ze swojej angażującej formy.
The International Football Association Board
(realizacja Grupa Me & My Friends, Polska)
fot. mamfgroup.com/realizacje/ifab
The IFAB to jedna z najstarszych organizacji sportowych na świecie, która od 1886 roku tworzy Przepisy Gry w piłkę nożną, obowiązujące na całym świecie. Intuicyjna i nowoczesna platforma webowa pozwala przedstawić te zasady w czytelny i usystematyzowany sposób. Strona internetowa była projektowana z myślą o szerokim gronie odbiorców: amatorów i profesjonalistów, sędziów, trenerów, dziennikarzy czy przede wszystkim kibiców. Dzięki niej każdy adept piłki nożnej znajdzie w jednym miejscu informacje na temat zasad swojej ulubionej dyscypliny, które może w wygodny sposób sprawdzić w dowolnych warunkach, nawet na smartfonie podczas meczu.
Autor definicji:
Dominik Piłat
Junior UX Designer, Grupa Me & My Friends
Specjalista w dziedzinie projektowania użyteczności, na co dzień odpowiedzialny jest za dbanie o to, aby przygotowywane produkty spełniały postawione przed nimi zadania i były przyjazne dla użytkowników. Biegła znajomość projektowania graficznego, a także umiejętność strategicznego i analitycznego myślenia pozwala mu na tworzenie stron i aplikacji mobilnych spełniających potrzeby nawet najbardziej wymagającego odbiorcy.
–––
[Tomasz Stężycki:] RWD (ang. responsive web design) to projektowanie responsywnych stron WWW lub elastycznych stron WWW dostosowujących swoją zawartość do różnych urządzeń i rozmaitych rozdzielczości. Technologia ta pozwala na wykonanie jednej szaty graficznej, która będzie wyświetlała się poprawnie (bez konieczności scrollowania lewo-prawo) na różnego typu urządzeniach, począwszy od dużych ekranów telewizorów, monitorów komputerów, laptopów, netbooków, tabletów, na smartfonach skończywszy. Przed powstaniem omawianej technologii konieczne było tworzenie osobnych aplikacji, uwzględniających poszczególne typy urządzeń.
Wizualizacja przykładowej strony RWD na różnych urządzeniach
Oprócz dostosowywania się zawartości strony do rozdzielczości ekranu, RWD rozwinęło szereg zmian związanych z interfejsem. Poza obsługą klasycznych urządzeń, jakimi są klawiatura i mysz, uwzględniono także zdarzenia związane z ekranami dotykowymi, gestami oraz kontrolerami do gier.
Historia technologii
Za ojca technologii stron responsywnych uznawany jest Ethan Marcotte, który jako pierwszy w swoim artykule poruszył zagadnienia związane z płynnymi siatkami (fluid grids), responsywnymi obrazami oraz zapytaniami o media (media queries), stanowiącymi podstawy tej technologii.
Filary RWD
Płynne siatki – pierwszy filar RWD, będący spadkobiercą płynnych układów, które pozwalały rozwiązać problem wyboru szerokości strony między 800 a 1024 pikselami. Powstanie narzędzia działającego na siatkach i kolumnach było marzeniem każdego projektanta. Rozwiązanie to pozwala w łatwy i szybki sposób tworzyć układ kolumn, który – poprzez odpowiednie przesuwanie się – wraz ze zmianą rozdzielczości dostosowuje się do ekranu.
Responsywne obrazy (obrazy adaptacyjne) – technologia pozwala rozwiązać problem przewidywania rozdzielczości oraz wymiarów, jakie będzie miał wyświetlany obraz. W tym celu wykorzystywane są rozmaite techniki – dostosowywanie się do płynnych siatek lub rozwiązania technologiczne z języka HTML5, pozwalające na pobieranie obrazów z różnych źródeł dla konkretnego urządzenia.
Zapytania medialne (media queries) – najpopularniejsze rozwiązanie spośród wszystkich przedstawionych, będące częścią języka HMTL5. Popularność zawdzięcza dużemu wsparciu i obsłudze praktycznie przez wszystkie przeglądarki. Zapytania medialne działają na urządzeniach i przeglądarkach, zapewniając dostosowanie się układu strony do tych urządzeń.
Popularne frameworki i szablony
Technologia przyniosła popularne frameworki, które znacznie ułatwiają część deweloperską przy tworzeniu strony WWW. Zawierają one gotowe klasy odpowiedzialne za dostosowywanie się zawartości strony do rozdzielczości i odpowiednio ostylowane elementy, takie jak formularze i przyciski. Przykłady:
- Bootstrap – najpopularniejszy framework, z którego w chwili obecnej korzysta znaczna część nowo powstałych stron internetowych. Szybki i intuicyjny, daje nam gotowe rozwiązania dla wielkości czcionek oraz systemu siatek – zarówno dla urządzeń mobilnych, jak i dużych ekranów.
- HTML5 Boilerplate – popularny szablon z narzędziem pozwalającym generować strony responsywne.
- Foundation – responsywny szablon stworzony przez zespół ZURB, oparty na siatce, która może dostosowywać się do różnych urządzeń. Nie korzysta on z jQuery, tylko z lżejszej biblioteki Zepto.
- Skeleton – minimalistyczna platforma ukierunkowana na tworzenie stron wyświetlanych na niewielkich ekranach. Nastawiona głównie na tworzenie witryn mobilnych.
Podsumowując, technologia RWD pozwoliła na tworzenie jednej aplikacji dostosowującej się do rozmiarów ekranów na wielu urządzeniach. Dzięki temu nie ma konieczności wykonywania oddzielnych wersji dla różnych rozdzielczości. Powstanie RWD przyczyniło się także do stworzenia szablonów i frameworków znacznie ułatwiających prace web-developerom.
Autor definicji:
Tomasz Stężycki
Ekspert SEO, Grupa TENSE
Wśród ciekawych stron RWD można trafić np. na „responsywnego jamnika” czy „responsywnego kota” 😉
Więcej ciekawych przykładów stron RWD znajdziecie w naszym przeglądzie Polskie strony responsywne
Jeśli chcecie dowiedzieć się, jak stworzyć stronę zgodną z RWD, zapoznajcie się z naszym Kursem Responsive Web Design