Responsive Web DesignStale rosnąca popularność urządzeń mobilnych – telefonów komórkowych, smartfonów i tabletów – spowodowała, że użytkownicy mogą przeglądać strony internetowe na urządzeniach o bardzo różnych rozmiarach i rozdzielczościach ekranu, różnych sposobach nawigacji (ekrany dotykowe lub nie) oraz z możliwością zmiany orientacji ekranu (z wertykalnej na horyzontalną).

 

Wskazówki Google

Rekomendacje tworzenia witryn zoptymalizowanych dla urządzeń mobilnych dość szczegółowo opisują rozwiązania dla smartfonów. Brakuje tam jednak konkretnych wytycznych optymalizowania witryn na tablety. Google nie posiada specjalnych zaleceń budowania witryn zoptymalizowanych pod tablety i przyjaznych wyszukiwarce internetowej, można jednak sformułować wskazówki jak projektować serwisy dobrze obsługujące użytkowników smartfonów i tabletów.

Ważne jest, aby rozróżnić użytkowników smartfonów od użytkowników tabletów. Tablety to w porównaniu ze smartfonami urządzenia o większych ekranach dotykowych, zwykle wykorzystujące połączenie Wi-Fi. Przeglądanie stron na tabletach nie musi odbiegać od możliwości oferowanych przez komputery stacjonarne czy laptopy. Dlatego, jeśli witryna nie prezentuje zawartości w wersji zoptymalizowanej dla tabletów, to użytkownicy oczekują wyświetlenia pełnej wersji serwisu, a nie wersji zoptymalizowanej dla smartfonów.

Responsive Web Design

Do niedawna zalecanym rozwiązaniem było tworzenie mobilnej wersji serwisu internetowego, co przy takiej różnorodności urządzeń nie jest rozwiązaniem elastycznym. Projektowanie większej liczby wersji witryny na różne urządzenia jest pracochłonne i nie uwzględnia możliwości pojawienia się urządzeń o nowych wymaganiach. Właśnie naprzeciw tym problemom wychodzi rozwiązanie Responsive Web Design, które przez wielu specjalistów zostało wskazane jako trend w projektowaniu witryn internetowych na rok 2012.

Responsive Web Design (RWD) zasadniczo oznacza wykorzystanie reguł CSS3 Media Queries do budowania layoutu witryny internetowej, który dostosowuje się do środowiska wyświetlania – rodzaju urządzenia, rozdzielczości i orientacji ekranu. RWD pozwala na dostosowanie układu strony, sposobu nawigowania, wyglądu i widoczności elementów. W rezultacie użytkownicy szerokiej gamy urządzeń i przeglądarek internetowych mają dostęp do jednego źródła treści, która jest rozmieszczona w sposób wygodny do czytania i nawigowania przy ograniczeniu potrzeby zmieniania rozmiaru strony i przewijania.

W przypadku optymalizacji witryn dla użytkowników smartfonów Google zaleca wykorzystywanie metody Responsive Web Design. Witryna wykorzystująca RWD powinna być przetestowana na różnych tabletach (o różnych rozmiarach i rozdzielczościach ekranu), aby upewnić się, że na wszystkich jest wyświetlana poprawnie.

Wersja desktopowa i mobilna witryny

Innym popularnym rozwiązaniem jest posiadanie oddzielnych wersji witryny dla komputerów i smartfonów. Użytkownik odwiedzający witrynę jest przekierowywany do odpowiedniej wersji na podstawie wykrytego urządzenia. W przypadku takiej konfiguracji należy uważać, aby przypadkowo nie przekierowywać użytkowników tabletów do wersji mobilnej serwisu.

W przypadku urządzeń z systemem operacyjnym Android rozróżnienie tabletów od smartfonów polega na odnalezieniu słowa „Mobile” w łańcuchu User-Agent dostarczonym przez przeglądarkę. Tylko dla smartfonów zawiera on słowo „Mobile”. Pozostałe urządzenia to tablety lub inne o większym ekranie, którym w tym przypadku należy prezentować wersję standardową witryny.

A kto z tego korzysta?

W przypadku naszego bloga liczba odwiedzin z urządzeń mobilnych w roku 2012 stanowi tylko 1,8%. Mimo to wyraźnie widać tendencję wzrostową – w styczniu odsetek ten wynosił 0,1% w porównaniu do 3,5% odwiedzin obecnie. Może dane te nie są zachęcające, jednak nie ulega wątpliwości, że wraz z boomem na tablety znacząco wzrośnie udział osób odwiedzających witryny za pośrednictwem urządzeń mobilnych. Dlatego już teraz warto zadbać o pozytywne doświadczenia użytkowników mobilnych.

A jak jest w przypadku Waszych witryn? Są dostosowane do różnego typu urządzeń, czy ruch mobilny jest na tyle nikły, że nie zawracacie sobie tym głowy?

Infografika

Zapraszamy także do zapoznania się z naszą infografiką na temat Responsive Web Design.

Źródło: Giving Tablet Users the Full-Sized Web

3 komentarzy:
  1. Kamil Adryjanek
    Kamil Adryjanek says:

    RWD to obecnie najlepsze rozwiązanie dla właścicieli stron, którzy chcieliby niewielkim kosztem uruchomić wersję mobilną swojej strony czy też dostosowaną pod tablety. Modyfikacje w tym wypadku obejmują tylko „widok” aplikacji i w większości przypadków w ogóle nie ma potrzeby ingerowania w „core” serwisu. Oczywiście dodatkowa optymalizacja jest wskazana ale nie wymagana. Cieszyć może natomiast fakt, że klienci w swoich wymaganiach coraz częściej wymieniają wersją mobilną serwisu (rzadziej dostosowaną pod tablety) i tu Responsive Web Design jest rozwiązaniem idealnym.

  2. Paweł
    Paweł says:

    U mnie na serwisach z urządzeń mobilnych mam po kilka % wejść. Jak wyżej Łukasz napisał, wiele zależy od tematyki serwisu i grupy docelowej. Zatem przedziałem jest tutaj 0,5 – 30% (oczywiście podaję orientacyjnie, być może ktoś wyszedł poza którąś skrajność).
    Tez jestem zwolennik elastycznych szablonów, a mniej osobnych serwisów pod urządzenia mobilne. Na przykład dla bloga można kupić za kilkadziesiąt złotych szablon, który całkowicie rozwiązuje ten temat. Oczywiście blog to nie np. sklep internetowy – tam jest inna bajka, jak i funkcja serwisu.
    A tablety już mają swój boom. Popularność tabletów rośnie (w Polsce) w tempie 100-150% rocznie (moje szacunki) i ten proces obecnie bardzo przyspiesza. W przyszłym roku wzrost może być nawet 300% (w porównaniu do obecnego roku). Zatem te nasze procenty będą gwałtownie rosły. Tym bardziej, że Internet w smartfonie to niezbyt wygodna sprawa, ale w tablecie – tutaj jest pełna wygoda.

  3. Chu Van Cuong
    Chu Van Cuong says:

    Szanuję wiedzę , aczkolwiek czy trzeba aż tak się gimnastykować ? Co do css3 absolutnie się zgadzam , co do reszty wystarczy odwiedzić drobną moją robotę domową http://cvc4you.pl lub http://cvc4you.neostrada.pl . Preferuję jedną wersję witryn dla wszystkich urządzeń i przeglądarek . Bez kłopotów obchodzenie ze zdjęciami , filmami … Dla niedowiarków może to coś przemówi https://developers.google.com/speed/pagespeed/insights/?url=http://cvc4you.pl/

Dodaj komentarz

Chcesz się przyłączyć do dyskusji?
Feel free to contribute!

Dodaj komentarz