Wersja mobilna strony. Czy jest konieczna?

5 min

Telefon trzymany w ręce

Czy wiesz, że w Polsce we wrześniu 2022 r. telefony komórkowe odpowiadały za aż 63% ruchu w internecie1? Na całym świecie urządzenia mobilne kreują niemal 59% ruchu. Wniosek jest jeden: klienci coraz częściej będą przeglądać Twoją stronę internetową na telefonie. Dlatego koniecznie musisz zadbać o jej wersję mobilną. 

Zmiana nawyków konsumenckich na przestrzeni ostatnich lat

Jeśli te statystyki Cię nie przekonały, pomyśl o tym, że z biegiem czasu coraz częściej będziemy robić zakupy za pomocą smartfonów. Co wpływa na tę sytuację?

  • Dostęp do nowych technologii – smartfony stają się powszechne m.in. za sprawą niższych cen. 
  • Coraz większy zasięg internetu i niższe stawki za połączenie – za sprawą nowych standardów telefonii komórkowej (słynne 5G) możemy coraz szybciej przesyłać coraz to więcej danych. Przykładowo, internet 5G pozwoli na transfer z prędkością aż 20 Gbit/sec, podczas gdy sieć 4G LTE Advanced pozwala na pobieranie danych z prędkością „zaledwie” 300 Mbit/sec2.
  • Pokolenie digital natives, czyli osoby, które urodziły się w świecie niemal wszechobecnego internetu, są już dorosłe. Smartfony stanowią więc dla nich nieodłączny element życia i korzystają z nich praktycznie wszędzie. 
  • Nowoczesne metody płatności – dziś płatności za pomocą Google Pay, Apple Pay czy BLIK-a, trwają… kilka sekund. 

Co z tego wynika dla Ciebie? Jeśli chcesz mieć ruch na swojej stronie, musisz zadbać o wersję mobilną. A jeśli zależy Ci, by klienci coś kupili – zadbaj o wdrożenie płatności bezgotówkowych!

Jak zadbać o potrzeby użytkowników mobilnych?

No dobrze, a czy nie wystarczy po prostu zmniejszyć poszczególnych elementów strony? Niestety, to nie zadziała.

Pomyśl o tym w ten sposób: wyobraź sobie stronę sklepu internetowego na ekranie komputera: jest zdjęcie produktu, opis i naturalnie, przycisk „Kup teraz”. By dokonać zakupu, trzeba najechać kursorem na przycisk. To łatwe, prawda? Jeśli tylko zmniejszymy stronę, nasz gość nagle musi trafić w przycisk kciukiem, tak, by nie kliknąć przy tym na coś innego. To trudne, a czasem nawet niewykonalne, dlatego właśnie wersje mobilne muszą być zaprojektowane inaczej. 

O co trzeba zadbać, tworząc mobilną wersję firmowej strony internetowej?

  • Tekst musi być czytelny, co oznacza, że powinien zajmować większą część ekranu, niż w przypadku wersji desktop.
  • Przyciski powinny być wygodne do klikania, tzn. większe i łatwe w obsłudze. 
  • Menu musi przybrać nieco inną formę, najczęściej jest tzw. hamburger menu (menu górne w formie trzech poziomych, równoległych linii, umieszczone w prawym górnym rogu ekranu).
  • Zdjęcia i grafiki wyświetlane na desktopie powinny mieć orientację poziomą. Aby były dobrze widoczne w wersji mobilnej, trzeba je odpowiednio wykadrować. 

Jeśli projektujesz firmową stronę internetową w jednym z tzw. website builderów, czyli narzędzi typu WIX czy Squarespace – możesz odetchnąć z ulgą. Tam jej mobilną wersję stworzysz z łatwością i możesz ją dowolnie modyfikować, podobnie jak wersję na desktop.

Przede wszystkim użytkownik mobilny

Skoro więcej użytkowników przegląda strony, korzystając z telefonów niż z komputera, to może powinno się zaczynać projektowanie właśnie od wersji mobile? 

Tego zdania są twórcy podejścia tzw. mobile first. Taki model projektowania zakłada, że trzeba zacząć od mobilnej wersji strony, a dopiero później przystosować ją do widoku na laptopie. W ten sposób od razu skupiamy się na użytkowniku mobilnym i mamy pewność, że poradzi sobie z każdym zadaniem, z którym będzie musiał się zmierzyć na stronie. 

Wadą takiego projektowania może być fakt, że od początku skupia się ono na ograniczeniach (bo małe ekrany smartfonów takowe narzucają). Wtedy przy wersji desktop możesz za bardzo przywiązywać się do utworzonej już wcześniej wersji mobile i przegapić ciekawe rozwiązania, które na Twojej stronie internetowej wyglądałyby świetnie. 

Strona mobilna czy responsywna?

W projektowaniu strony internetowej w kolejności: najpierw desktop, potem mobile, masz do wyboru dwa sposoby. Możesz stworzyć stronę mobilną lub stronę responsywną. Czym one się od siebie różnią? 

  • Strona responsywna zawiera te same informacje, które ma wersja desktopowa. Jest po prostu tak zaprojektowana, że poszczególne jej elementy zmieniają swoje położenie, gdy użytkownik zmniejsza okno przeglądarki – na pewno znasz wiele takich stron. 
  • Strona mobilna jest nową wersją strony desktopowej, tzn. zawiera nieco mniej informacji, by nie przeciążać nimi użytkownika. Często jest po prostu drugą wersją, zaprojektowaną zupełnie od nowa.

Wybrane różnice między stroną mobilną a responsywną

Mobilna Responsywna
przeznaczona na tylko wybrane urządzenia kompatybilna zarówno ze smartfonem, tabletem, jak i komputerem PC
konieczność utrzymywania na serwerze dwóch stron: mobilnej i zwykłej wystarczy utrzymanie jednej wersji strony
wymaga zastosowania odpowiednich przekierowań dla działań SEO zwykle jest dobrze zoptymalizowana dla działań z zakresu pozycjonowania
bardzo szybki czas ładowania serwisu nieco dłuższy czas ładowania serwisu
struktura takiej strony zwykle jest bardzo prosta, wręcz minimalistyczna, co utrudnia wykonywanie skomplikowanych działań, np. wypełnianie złożonych formularzy z załącznikami dobrze zoptymalizowany serwis jest zarówno prosty w obsłudze dla użytkownika, jak i pozwala na załączanie plików czy wypełnianie formularzy

W zależności od tego, jak bardzo skomplikowana jest Twoja firmowa strona, możesz wybrać albo pierwsze podejście, albo drugie. Strony tzw. wizytówkowe, na których po prostu opisujesz swoje usługi czy produkty, zwykle dobrze wypadają w wersjach responsywnych. Jeśli jednak Twoja strona internetowa zawiera wiele elementów i informacji, to… możesz albo wybrać stworzenie strony mobilnej, albo zastanowić się, czy przypadkiem nie zasypujesz użytkowników zbędnymi komunikatami.

1 https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/poland

2 https://komorkomat.pl/co-to-jest-internet-5g/

Czy ten artykuł był przydatny?
średnia: 0 | 0 ocen

Przeglądaj tematy

  • #na startwięcej artykułów z tagiem:#na start
  • #bizneswięcej artykułów z tagiem:#biznes
  • #podatkiwięcej artykułów z tagiem:#podatki
  • #marketingwięcej artykułów z tagiem:#marketing
  • #prawowięcej artykułów z tagiem:#prawo
  • #strategiawięcej artykułów z tagiem:#strategia
  • #pracownicywięcej artykułów z tagiem:#pracownicy
  • #księgowośćwięcej artykułów z tagiem:#księgowość
  • #wideowięcej artykułów z tagiem:#wideo
  • #finansowaniewięcej artykułów z tagiem:#finansowanie
  • #sprzedażwięcej artykułów z tagiem:#sprzedaż
  • #ekowięcej artykułów z tagiem:#eko
  • #markawięcej artykułów z tagiem:#marka
  • #ESGwięcej artykułów z tagiem:#ESG
  • #pomysł na bizneswięcej artykułów z tagiem:#pomysł na biznes
  • #e-commercewięcej artykułów z tagiem:#e-commerce
  • #zmiany w prawiewięcej artykułów z tagiem:#zmiany w prawie
  • #wsparcie dla firmwięcej artykułów z tagiem:#wsparcie dla firm
  • #internetwięcej artykułów z tagiem:#internet
  • #automatyzacjawięcej artykułów z tagiem:#automatyzacja
  • #przewodnikwięcej artykułów z tagiem:#przewodnik
  • #AIwięcej artykułów z tagiem:#AI
  • #samodzielna księgowośćwięcej artykułów z tagiem:#samodzielna księgowość
  • #SEOwięcej artykułów z tagiem:#SEO
  • #ZUSwięcej artykułów z tagiem:#ZUS
  • #leasingwięcej artykułów z tagiem:#leasing
  • #service designwięcej artykułów z tagiem:#service design
  • #instrukcjawięcej artykułów z tagiem:#instrukcja
  • #dokumentywięcej artykułów z tagiem:#dokumenty
  • #oszczędnościwięcej artykułów z tagiem:#oszczędności
  • #kredytwięcej artykułów z tagiem:#kredyt
  • #RODOwięcej artykułów z tagiem:#RODO
  • #fakturywięcej artykułów z tagiem:#faktury
  • #dotacjewięcej artykułów z tagiem:#dotacje
  • #bankowośćwięcej artykułów z tagiem:#bankowość
  • #ITwięcej artykułów z tagiem:#IT
  • #technologiewięcej artykułów z tagiem:#technologie
  • #google analyticswięcej artykułów z tagiem:#google analytics
  • #kontrahentwięcej artykułów z tagiem:#kontrahent
  • #media społecznościowewięcej artykułów z tagiem:#media społecznościowe
  • #ochrona środowiskawięcej artykułów z tagiem:#ochrona środowiska
  • #Polski Ładwięcej artykułów z tagiem:#Polski Ład
  • #umowywięcej artykułów z tagiem:#umowy
  • #analizawięcej artykułów z tagiem:#analiza
  • #ubezpieczeniewięcej artykułów z tagiem:#ubezpieczenie
  • #faktoringwięcej artykułów z tagiem:#faktoring
  • #badaniewięcej artykułów z tagiem:#badanie
  • #długiwięcej artykułów z tagiem:#długi
  • #USwięcej artykułów z tagiem:#US
  • #konkurencjawięcej artykułów z tagiem:#konkurencja
  • #wynagrodzeniawięcej artykułów z tagiem:#wynagrodzenia
  • #podcastwięcej artykułów z tagiem:#podcast
  • #CEIDGwięcej artykułów z tagiem:#CEIDG
  • #inwestycjewięcej artykułów z tagiem:#inwestycje
  • #urlopywięcej artykułów z tagiem:#urlopy
  • #płynność finansowawięcej artykułów z tagiem:#płynność finansowa
  • #webinarwięcej artykułów z tagiem:#webinar
  • #zdolność kredytowawięcej artykułów z tagiem:#zdolność kredytowa
  • #zakupywięcej artykułów z tagiem:#zakupy
  • #REGONwięcej artykułów z tagiem:#REGON
  • #kosztywięcej artykułów z tagiem:#koszty
  • #współpracawięcej artykułów z tagiem:#współpraca
  • #SEMwięcej artykułów z tagiem:#SEM
  • #gwarancjawięcej artykułów z tagiem:#gwarancja