Nie denerwuj internautów i projektuj strony w RWD

Ekspert radzi, na co zwracać uwagę.

Adam Srebniak, senior web designer z Grupy Płodni.com specjalnie dla Interaktywnie.com poleca na co zwrócić uwagę przy projektowaniu stron RWD i podaje cenne linki.

RWD (Responsive Web Design) to zbiór technik służących tworzeniu stron i aplikacji internetowych dostosowanych nie tylko do urządzeń przenośnych, ale także do takich rozdzielczości, które dopiero się pojawiają. Bo nic tak nie irytuje, jak brak możliwości efektywnego i szybkiego skorzystania z ulubionej strony lub zamówienia czegoś do jedzenia, gdy jesteś w plenerze z kiepskim zasięgiem, a w koszyku już się więcej nie zmieściło.

Na szczęście, dostęp do internetu mobilnego w Polsce, a także przepustowość łączy i dostępne nam pakiety są coraz korzystniejsze. Przy projektowaniu stron RWD trzeba mieć na uwadze wagę witryny w kilobajtach i wydajność poszczególnych elementów. Ściągamy niemal takie same informacje na telefon, komputer czy telewizor, a nasza przeglądarka musi to jeszcze wyrenderować.

Śmiało, zrób szybki audyt swojej stronie przez np. Pingdom i zobacz, co Ci wyszło. Każdy z nas tutaj lubi popodglądać i porównać się z konkurencją, prawda?

Podpowiem, że dwie sekundy i poniżej to zalecana szybkość ładowania strony. Strona główna Google dla Polski ładuje się około 700 ms i jest wydajniejsza niż 95% testowanych stron internetowych. Nie wiem, jak u Ciebie to wygląda, ale gdy nie widzę ulubionej wyszukiwarki w pierwszej sekundzie, zaczynam nerwowo spoglądać na zasięg internetu.

Temat był już niejednokrotnie wałkowany, więc poniżej postaram się przybliżyć nieco kilka wad i zalet RWD na dzień dzisiejszy.

Responsive Web Design
Zalety	Wady
Jeden adres URL	Wczytywana zawartość jest często tylko wyłączona lub zmniejszona, choć przeglądarka i Twój internet wykonuje taką samą pracę.
W zasadzie ta sama zawartość (tekst,, obrazy, filmy)	Dłuższy czas realizacji w przypadku wykonania kompletnego i odpowiedzialnego projektu.
Jedna strona do zaprojektowania, wdrożenia, utrzymywania i promocji (w zasadzie to 4 osobne podpunkty)	Możliwa potrzeba stworzenia wielu kreacji graficznych

Gdzie zapoznać się z podstawami kreacji stron responsywnych? Polecam serwisy, takie jak SmashingMagazine.com, stanowiący solidny zbiór pomocy i wytycznych na temat RWD, Awwwards.com, który zawiera przykłady docenionych przez społeczność międzynarodową stron responsywnych, Mediaqueri.es ze zrzutami z tych stron, Alistapart.com i wreszcie z Stuffandnonsense.co.uk, stronę dobrze znanej ekipy, która również w ciekawy sposób ogrywa graficznie nagłówki swojej strony.

Wszystkie temat traktują co prawda dość pobieżnie, bo umożliwiają jedynie wstępne poznanie technologii i jej ograniczeń. Niemniej - każdy grafik powinien się z nimi zaprzyjaźnić, jeśli nie chce zirytować programistów, którzy będą wdrażali jego projekty w życie.

Adam Srebniak, senior web designer, Grupa Płodni.com Na pokładzie Grupy Płodni.com od 2013 roku. Odpowiedzialny głównie za kreacje webowe. Specjalizuje się w zadaniach związanych z użytecznością i interfejsem grafik dla stron i aplikacji internetowych. Na swoim koncie ma kreacje dla klientów takich jak: Merlin.pl, Czerwona Torebka, Casussoft, Asprod, dlaSchroniska.pl, ZarazWracam.pl, MW-Spedition czy Piotr i Paweł.

Pobierz ebook "Social media marketing dla firm i agencje się w nim specjalizujące"