Jak optymalizować witrynę do wyświetlania na tabletach?
Stale 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.
