Porównanie technologii tworzenia stron mobilnych

fot. unsplash.com

Dodatkowym bodźcem sugerującym potrzebę zadbania o prezentację naszej witryny na urządzeniach przenośnych jest koncepcja Mobile First.

Developerzy przez wiele lat opracowali różne podejścia do przygotowania mobilnych wersji serwisu. To, jaka wersja będzie optymalna dla naszego serwisu, jest kwestią bardzo indywidualną. Jeśli nie mamy pewności, czy nasz serwis jest przystosowany do wyświetlania na urządzeniach mobilnych, możemy sprawdzić to pod poniższym adresem.

Powrót do korzeni – czyli dedykowana strona mobilna

Jest to jedno ze starszych rozwiązań, które dalej bywa stosowane. Może się sprawdzić zwłaszcza w przypadku małych stron, które bazują na starym szablonie. W tym przypadku strona mobilna najczęściej znajdowała się w osobnym katalogu na serwerze pełnej wersji witryny (np. domena.pl/mobile/) lub na subdomenie (np. mobile.domena.pl). Była ona przygotowana niemalże od zera w oparciu o szablon, który wyświetla się w sposób prawidłowy na urządzeniach przenośnych. W tym przypadku należy traktować wersję mobilną jako osobny serwis. Trzeba o tym pamiętać zwłaszcza podczas aktualizacji zawartości na wersji strony przystosowanej do komputerów. Najczęściej należy dokonać wspomnianej aktualizacji zarówno na stronie przeznaczonej dla urządzeń desktopowych, jak i przenośnych. W przypadku dużych serwisów może to przysporzyć dużo dodatkowej pracy przy każdorazowej aktualizacji. Należy wtedy dodatkowo pamiętać o tym, że strony te muszą mieć identyczną zawartość. Brak treści w wersji mobilnej, a posiadanie ich w wersji na komputery, może negatywnie wpłynąć na ocenę witryny przez algorytm wyszukiwarki.

Natomiast w systemie WordPress warto zainteresować się wtyczką WPTouch. Wtyczka ta przygotuje w sposób automatyczny mobilną wersję serwisu, nie naruszając naszego aktualnego szablonu. Wersja darmowa umożliwia pracę na jednym szablonie, gdzie będziemy mieli możliwość umieszczenia logo naszej witryny oraz dostosowania koloru akcentów. Jest to ciekawe rozwiązanie na szybkie dopasowanie naszej witryny pod kątem urządzeń mobilnych.

Pułapka pozycji zero. Dlaczego Twoja strona traci kliknięcia i jak to naprawić?  

Ponadto, biorąc pod uwagę to, że w przypadku tego rozwiązania wersja mobilna witryny znajduje się pod całkowicie innym adresem, może zostać uznana przez Google jako duplikat naszej witryny. To mogłoby wpływać w sposób niekorzystny na proces związany z jej pozycjonowaniem. Trzeba wtedy poinformować roboty wyszukiwarek o istnieniu wersji mobilnej poprzez zastosowanie tagu link zawierającego atrybuty rel=”canonical” oraz rel=”alternate”. Więcej na ten temat można przeczytać na stronach pomocy Google.

Oczywiście należy wykonać tego typu operacje dla każdej z podstron w serwisie, za każdym razem wskazując ich drugi wariant. Dodatkowo należy pamiętać o odpowiedniej konfiguracji Google Analytics oraz o przeniesieniu zdarzeń z Google Analytics (np. po wysłaniu formularza) dla obu wersji witryny w przypadku wersji mobilnych tego typu.

Biorąc pod uwagę wszystkie powyższe czynniki, można wywnioskować, że jest to rozwiązanie kłopotliwe, które nadaje się do stosowania tylko w nielicznych przypadkach. Koszty związane z dodatkowymi działaniami w perspektywie czasu mogą wygenerować większy koszt niż przygotowanie od podstaw responsywnego szablonu strony.

Jedna strona, by wszystkimi rządzić – strony responsywne (RWD)

Jest to odmienne podejście od powyższego. W tym przypadku strona jest oparta o jeden szablon, który dostosowywany jest do wielkości ekranu, na którym jest ona wyświetlana. Dodatkowo strona działa wtedy w oparciu o jeden panel zarządzania. Wprowadzając modyfikacje w pełnej wersji serwisu, nanoszone są one również w jego wersji mobilnej. Wiąże się z tym dodatkowa zaleta – wszystkie treści znajdują się pod jednym adresem. Niestety, dostosowanie istniejącego serwisu pod RWD najczęściej wymaga przygotowania szablonu od nowa. Należy wtedy pamiętać o tym, by strona wyglądała poprawnie na każdym urządzeniu oraz by prezentowała w miarę możliwości tę samą zawartość.

Samodzielne prace nad dostosowaniem szablonu do różnych ekranów mogą okazać się bardzo czasochłonne. Z biegiem czasu powstało jednak wiele platform, które wspomagają tego typu realizacje. Poniżej podaję przykłady tych najbardziej popularnych:

• Bootstrap,
• Foundation,
• Skeleton,
• HTML5 Boilerplate.

W kwestiach związanych z pozycjonowaniem takiej witryny, prace pod tym względem są ułatwione. Nie musimy się martwić elementami związanymi z eliminacją duplikatów czy trudnościami związanymi z monitorowaniem statystyk Google Analytics. W przypadku RWD wdrażamy optymalizacje pod kątem wyszukiwarek internetowych jednorazowo dla wszystkich urządzeń. Dodatkowo udostępnianie adresów jest również bardziej przyjazne niż w przypadku osobnej wersji mobilnej. Nietrudno wyobrazić sobie sytuację, w której wysyłamy znajomym ze smartfona adres podstrony wyłącznie przystosowanej do urządzeń mobilnych, a oni korzystają aktualnie z komputera stacjonarnego.

Responsywne szablony stron zapewniają naszej witrynie elastyczność oraz wygodę użytkowania na każdym urządzeniu. Taki szablon również z założenia będzie sprawiał mniej problemów w zakresie optymalizacji treści oraz wdrożenia optymalizacji pod kątem wyszukiwarek internetowych niż dedykowana wersja mobilna.

Przyspieszone Strony Mobilne – AMP

Jest to stosunkowo nowe podejście do projektowania stron mobilnych. Niesie ono ze sobą wiele zalet – przynajmniej na papierze. Google dodatkowo daje sygnały, że wspiera rozwiązanie tego typu poprzez dodanie specjalnych funkcjonalności w Google Search Console. Od pewnego czasu mamy możliwość sprawdzenia, czy podstrony w naszym serwisie są zgodne z tym standardem, np. przy pomocy Testu AMP. Dodatkowo, dzięki współpracy z Google, strony korzystające z tej technologii korzystają z cache znajdującego się na serwerach Google, przez co wczytywane są jeszcze szybciej. Niestety standard AMP może wydawać się krokiem wstecz w stosunku do responsywnych stron mobilnych. Dodatkowo sam standard AMP jest dość rygorystyczny, jeśli chodzi o korzystanie z JavaScript oraz standardu HTML. Wymusza to na developerze niejednokrotnie pracę od podstaw nad kodem witryny. W przypadku tego standardu nawet przewidziane są inne tagi HTML niż te znane z HTML5.

Dlaczego zatem warto korzystać z AMP? Zaletą jest nie tylko szybkość ładowania strony, ale również dodatkowe wyróżnienie naszej strony w mobilnych wynikach wyszukiwania poprzez dodanie ikony błyskawicy. Może to nam pomóc w zdobyciu dodatkowego zainteresowania naszą witryną.

Czy warto zainteresować się przystosowaniem naszej witryny do standardu AMP? Na to pytanie musimy odpowiedzieć sobie sami. Jeśli posiadamy stronę, która jest zgodna ze standardem RWD, korzyścią staje się jedynie szybkość działania oraz szansa na dodatkowe wyróżnienie naszej witryny w wynikach wyszukiwania, oraz na LinkedInie. Natomiast jeśli są to dla nas kluczowe elementy – a nie mamy i nie planujemy przygotowywać responsywnego szablonu strony – wydaje się, że warto zainteresować się takim rozwiązaniem.

Podobnie jak w przypadku dedykowanej strony mobilnej, jeśli posiadamy system WordPress, możemy za pomocą zewnętrznej wtyczki w sposób automatyczny przygotować odpowiednik naszego serwisu zgodny ze standardem AMP. Przykładem wtyczki, która może nam w tym pomóc, jest AMP By Automattic. Jednak zalecałbym w tej kwestii eksperymentowanie z różnymi rozwiązaniami. Każde z nich może posiadać swoje plusy oraz minusy. Dodatkowo każde z nich opiera się o standardowy szablon, więc warto sobie wybrać ten, który nam najbardziej odpowiada.

Podsumowując

Chcąc dostosować swoją witrynę do urządzeń mobilnych, mamy do dyspozycji parę rozwiązań. Każde z nich ma swoje wady i zalety.

Jeśli posiadamy małą witrynę, która nie jest często odświeżana, korzystnym rozwiązaniem może być dedykowana wersja mobilna. Należy jednak wtedy pamiętać o jej odpowiednim przystosowaniu pod roboty wyszukiwarek. W większości przypadków najlepszą i najbardziej uniwersalną opcją będzie zbudowanie strony zgodnie z koncepcją responsywnych szablonów stron. Wtedy prace związane z rozbudową strony i jej optymalizacją wykonujemy tylko raz, co w przypadku często aktualizowanych witryn pozwoli nam zaoszczędzić sporo czasu.

Jako ciekawostkę i jednocześnie zadanie z gwiazdką można traktować Przyspieszone Strony Mobilne. Mogą one wpłynąć na to, jak nasza strona jest wyświetlana w mobilnych wynikach wyszukiwania – a co za tym idzie, przynieść nowych potencjalnych klientów.

Jedno jest pewne – ruch generowany z urządzeń mobilnych rośnie! W przypadku USA aż 94% użytkowników szuka informacji lokalnych za pomocą swojego telefonu. Aż 77% z tych wyszukiwań jest wykonanych w miejscu pracy lub w domu – gdzie zazwyczaj jest dostęp do komputera. To daje nam jasny sygnał, że zamiast pytania „, czy nasz serwis potrzebuje wersji mobilnej”, powinniśmy zapytać o to, które z rozwiązań dla wersji mobilnej będzie w naszym przypadku optymalne.

 

O autorze:
Damian Smilgin – Specjalista ds. pozycjonowania w Grupie TENSE. Odpowiedzialny za optymalizację stron internetowych pod kątem pozycjonowania i przygotowanie strategii SEO.