Jak stworzyć stronę przyjazną dla wielu różnych urządzeń?

Responsive-web-designRosnąca popularność urządzeń mobilnych spowodowała, że użytkownicy mogą przeglądać strony internetowe na urządzeniach o bardzo różnych rozmiarach i rozdzielczościach, dodatkowo umożliwiających zmianę orientacji ekranu.
Dla projektantów witryn stwarza to problem dostarczenia w pełni funkcjonalnych, czytelnych i atrakcyjnych wizualnie serwisów internetowych użytkownikom wszystkich typów urządzeń. Naprzeciw tym wyzwaniom wychodzi nowe podejście do projektowania witryn internetowych – Responsive Web Design (RWD).

Co to właściwie jest RWD?

Projektowanie Responsive Web Design wykorzystuje reguły CSS3 Media Queries do budowania layoutu witryny internetowej, który dostosowuje się do środowiska wyświetlania. RWD oznacza rezygnację z odrębnych wersji witryny dla komputerów, tabletów, smartfonów i innych urządzeń mobilnych, ponieważ sposób wyświetlania strony internetowej jest dostosowywany do specyfiki urządzenia.

RWD pozwala na dostosowywanie układu, sposobu nawigowania, wyglądu i widoczności elementów w zależności od parametrów urządzenia, na którym wyświetlana jest strona internetowa. W rezultacie wszyscy użytkownicy mają dostęp do jednego źródła treści, która jest rozmieszczona w sposób wygodny do czytania i nawigowania.

Samo posiadanie strony wykonanej w RWD nie jest jeszcze jednak złotym środkiem na sukces. Możemy wyodrębnić co najmniej cztery podstawowe aspekty, na które należy zwrócić szczególna uwagę:

  1. Ciekawa zawartość – kontent.

Każda strona musi posiadać to przysłowiowe „coś” co zachęci użytkowników do jej odwiedzenia. Na tym etapie ciężko jednak przewidzieć czy większość użytkowników będzie odwiedzała naszą witrynę za pośrednictwem tradycyjnego laptopa, tabletu czy smartphone. Bardzo ważne są treści komunikatów, które powinny być jak najbardziej zwięzłe. Tego typu przekaz jest też zdecydowanie wartościowszy dla odwiedzającego witrynę.

  1. Łatwa nawigacja

Małe ekrany wymagają maksymalnego uproszczenia. Tutaj powinniśmy swoją uwagę skierować na możliwie jak najbardziej intuicyjnym podejściu do tematu. Nikt przecież nie będzie chciał przechodzić kilkunastu podstron, aby dowiedzieć się np. jak jest cena lub jakie dane posiada produkt.

  1. Łatwość zrozumienia

Większość treści internetowych stanowi teks pisany, dlatego uważajmy aby były one możliwie jak najbardziej przejrzyste i czytelne. Użytkownik z łatwością powinien przeczytać tekst bez konieczności używania powiększenia.

  1. Szybkość ładowania

Wydawcy witryn powinni dodatkowo rozważyć kilka ze scenariuszy, w których np. strona będzie „ładować się” na różnych urządzeniach (nie zawsze wyposażone w najnowszą technologię) lub użytkownik będzie posiadał dostęp do łącza o różnej prędkości – nie koniecznie tej szerokopasmowej. Jednym z rozwiązań może być np. zastosowanie wysoce zoptymalizowanych obrazów. Obciążenia zdecydowanie spadnie co umożliwi szybsze ładowanie zawartości strony.

covershutterstock51955312Po raz pierwszy Responsive Web Design zostało zastosowane we wrześniu 2011 roku przez portal BostonGlobe.com (pierwszy dziennik on-line wykorzystujący technologie RWD).

Jeszcze do niedawna zalecanym rozwiązaniem udostępniania serwisu internetowego na urządzeniach mobilnych było stworzenie odrębnej witryny mobilnej umieszczanej pod innym adresem URL. Obecnie rekomendowanym rozwiązaniem jest Responsive Web Design, jednak obie techniki mają swoje wady i zalety. Dlatego wybór techniki projektowania witryny dla urządzeń mobilnych powinien być dostosowany do indywidualnych potrzeb serwisu internetowego.

Wasza strona także działa w technologii RWD?

 

 

Źródło: http://blog.performancemedia.pl/, http://responsivedesign.ca/