Tworzenie mobilnych stron www to absolutna konieczność w czasach, gdy większość z nas łączy się z siecią głównie przez smartfona. Odpowiednio dostosowana wersja strony pozwoli użytkownikom na wygodną nawigację w serwisie, a także łatwiejsze dokonywanie zakupów czy zamawianie usług. Jak jednak stworzyć dobrą stronę mobilną? O czym warto pamiętać przy jej projektowaniu? Czy strona mobilna to to samo, co strona responsywna? Jeśli nie znasz odpowiedzi na te pytania, to już wkrótce przybliżymy Ci ten temat.
Dlaczego warto przejmować się wersją mobilna strony www?
10 lat temu strony mobilne były traktowane z pobłażaniem przez twórców, właścicieli serwisów, a wreszcie przez samych użytkowników, którzy znacznie chętniej korzystali z komputera do przeglądania internetu. Mobilne wersje znanych serwisów były wtedy znacznie trudniejsze w obsłudze, a zakupy przez smartfona należały do rzadkości. Obecnie trend zdecydowanie się odmieniły. Sklepy internetowe, a także strony usługowe, większość swojego ruchu pozyskują głównie ze smartfonów. Nie jest to w dodatku ruch bezwartościowy. Większość zakupów jest dokonywana również z urządzeń mobilnych. Użytkowników, który nie będzie w stanie w wygodny sposób przejrzeć naszej witryny opuści ją natychmiast i przejdzie do strony konkurencji, które będzie oferować lepszy design i funkcjonalność.
To jednak nie wszystko. Od kilku lat również firma Google zwróciła uwagę na dostosowanie stron do smartfonów, premiując dobrze zaprojektowane serwisy wyższymi pozycjami w wyszukiwarce. W 2018 Google zaimplementowało Mobile First Index do swojego algorytmu, co oznacza, że obecnie tylko wersja mobilna ma wpływ na to, jaką pozycję zajmie nasz serwis w wynikach wyszukiwania. Rozpoczął się więc wyścig webdeweloperów, by dostosowywać tworzenie stron do nowych wytycznych Mobile Friendly.
Strona responsywna a strona mobilna?
Czy wszystkie strony, które wygodnie obsługujemy na smartfonach i tabletach, to strony mobilne? Czy strona responsywna to samo? Okazuje się, że nie są to synonimy. Strona internetowa, którą nazwiemy responsywną, będzie się wyświetlać odpowiednio na komputerze, jak i na smartfonie. Będzie wyglądała praktycznie tak samo na wszystkich urządzeniach, a jej adres będzie identyczny. Stronę RWD (ang. responsive web design) możemy rozpoznać po tym, że zmniejszając jest szerokość będzie się ona automatycznie dopasowywała do rozmiaru ekranu. Wydaje się to być idealne rozwiązanie, jednak należy zdawać sprawę, że tworzenie stron responsywnych bywa ze starych stron bywa czasochłonne i kosztowne. Inaczej wygląda sytuacja, gdy projektujemy i tworzymy stronę od nowa. Możemy wtedy skorzystać z gotowych szablonów i kreatorów w popularnych CMS-ach, takich jak WordPress.
Czym jest natomiast strona mobilna? Jest to osobna wersja strony, która posiada w adresie dodatkowy znacznik m lub mobile. Jeśli posiadasz starszą stronę i chcesz szybko wdrożyć wersję twojej strony na telefony, a przekodowanie całej witryny byłoby nieopłacalne, to wersja mobilna może być właściwym wyborem.
Czy strona mobilna pomaga w pozycjonowaniu?
Odpowiedź może być w tym przypadku jedynie twierdząca. Wspomnieliśmy oczywiście wcześnie o zmianach w algorytmie Google, które były związane z Mobile First Index. To jednak nie wszystkie argumenty za tym, że responsywność pozytywnie wpływa na SEO. Tego typu strona jest bardziej przyjazna dla użytkownika, a więc skłania go do spędzenia więcej czasu w serwisie, co przekłada się na mniejszy bounce rate, który ma już bezpośredni wpływ na ocenę serwisu jako całości w związku z algorytmem Rank Brain, którego celem jest zbadanie zaspokojenia potrzeb użytkownika poprzez wyświetlenie dla niego konkretnych wyników wyszukiwania.
W przypadku stron mobilnych zwracamy szczególną uwagę na szybkość ładowania się witryny, co również jest niebagatelnym argumentem dla Google, by poprawić pozycje dla naszej witryny.
Jednocześnie strony mobilny zazwyczaj są bardziej przemyślan, posiadają spójniejszą strukturę i charakteryzują się większą dbałością o nagłówki.
O czym pamiętać przy projektowaniu stron na urządzenia mobilne?
Od czego zacząć tworzenie strony internetowej w wersji responsywnej lub mobilnej? Skupmy się najpierw na najmniejszych wielkościach ekranów w urządzeniach użytkowników, którzy odwiedzają naszą stronę internetową. Obsługa na nich powinna być prosta, wygodna i intuicyjna. Gdy będziemy projektować wersje pod większe ekrany i tablety będzie już prościej.
Podstawowa rzecz to oczywiście fakt, że nie wszystkie elementy, które w wersji desktopowej strony są wyświetlane zmieszczą się w wersji mobilnej witryny. Musimy więc dobrze przemyśleć, które elementy są najważniejsze i jak je ułożyć w logiczną całość, by użytkownik mógł szybko dokonać konwersji. Główne składniki strony powinny się oczywiście znaleźć na samej górze. Często przy tworzeniu responsywnych stron jesteśmy w stanie przemyśleć całościowo architekturę wszystkich informacji w serwisie, poprawiając również funkcjonalność wersji desktopowej.
W tym miejscu musimy jednak zwrócić uwagę na istotną kwestię związaną z Mobile First Index. Chodzi o spójność wersji mobilnej i desktopowej strony internetowej. Możemy oczywiście modyfikować wygląd menu czy niektórych elementów graficznych, jednak co do zasady treść i najważniejsze funkcjonalności powinny być takie same w obu wersjach witryny.
Przy projektowaniu mobilnych stron internetowych powinniśmy wziąć pod uwagę wiele rozdzielczości współczesnych telefonów komórkowych. Nie może sprawdzić jedynie najmniejszych lub największych wyświetlaczy, ponieważ strona nie będzie wyglądała na innych urządzeniach naturalnie.
Telefony komórkowe dają wiele dodatkowych możliwości, które warto funkcjonalnie wykorzystać na swoich stron. Są nimi między innymi nawigacja czy dzwonienie. Zadbajmy o to, by użytkownicy mogli od razu do nas zadzwonić bez konieczności kopiowania nr telefonu, a także by po kliknięciu w adres następowało przejście do nawigacji Google Maps. To drugie rozwiązanie jest szczególnie praktyczne w przypadku usług lokalnych, np. restauracja czy mechanik.
Podczas tworzenia stron www na urządzenia mobilne powinniśmy pamiętać o tym, że powierzchnia, którą mamy do wykorzystanie jest mniejsza, a kursora, czyli nasze palce większe. Musimy więc zadbać o to, by najważniejsze elementy były odpowiednich rozmiarów, a także by znajdowały się w nieco większej odległości od siebie. Dzięki temu nie będziemy klikać przypadkowych przycisków.
Równie ważna będzie wielkość i rodzaj fontu, który posłuży do stworzenie treści na stronie internetowej. Warto pamiętać o tym, by był zarówno czcionka, jak i interlinia były nieco większe. Jeśli chodzi o wybór fontu, to lepiej postawi na rozwiązania bezszeryfowe, ponieważ na mniejszych ekranach są one znacznie bardziej czytelne. Dodatkowo nagłówki wypada pogrubić lub wyróżnić wizualnie – zyskamy w ten sposób na przejrzystości całej strony.
Niezwykle ważne jest również dobranie odpowiedniego koloru tła. Powinno być ono raczej jasne, a z całą pewnością nie może zlewać się z kolorem czcionki.
W przypadku grafik świetnym rozwiązaniem jest zastosowanie responsywnego, skalowalnego formatu, jakim jest SVG. Będą one się powiększać i pomniejszać bez straty jakości. Innym rozwiązaniem jest wprowadzenie kilku rozmiarów grafik, które będą wyświetlane alternatywnie w zależności od tego, jaka będzie rozdzielczość ekranu użytkownika.
Czy trudno zaprojektować responsywną stronę internetową?
Jeśli mamy zamiar prowadzić większy sklep internetowy z wieloma funkcjonalnościami, to zaprojektowanie praktycznej i funkcjonalnej strony na wszystkie platformy może być skomplikowane, ponieważ należy w takim przypadku zwrócić uwagę na wiele elementów. Warto wtedy zwrócić się o pomoc do specjalistów z zakresu tworzenia stron internetowych, UX i SEO, by zadbać o każdy aspekt już na etapie tworzenia strony.
Jeśli natomiast zależy nam nam stworzeniu prostej wizytówki z kilkoma podstronami, to możemy skorzystać z darmowych szablonów w darmowych systemach CMS, które są niezwykle proste w obsłudze. Musimy natomiast pamiętać o tym, by nie przesadzić z ilością grafik i wtyczek.
