Szykujcie się na “atak” stron mobilnych!

Przeczytasz w około: 3 minuty

Wróć do Bloga

Wszyscy widzą, patrząc na różne promocje w marketach i oferty operatorów, że zalewa nas od dłuższego czasu fala urządzeń mobilnych. Zarówno smartphone’ów jak i tabletów. I to dzięki nim mamy niesamowicie ułatwiony dostęp do sieci.

Jeszcze jakiś czas temu przeglądanie stron w telefonie było naprawdę koniecznością i nie kojarzyło się z czymś przyjemnym. Teraz niejednokrotnie nie chce nam się podchodzić do komputera i sprawdzamy informacje czy po prostu przeglądamy strony właśnie za pomocą urządzenia mobilnego.

Widzimy przez to rosnący trend odejścia od komputerów PC czy Mac na poczet, też telewizorów z wbudowaną kartą sieciową, ale głównie tabletów i coraz większych(?) telefonów, czyt. smartphone’ów.

Dlatego też, nie ma się co dziwić, że Google postanowiło położyć większy nacisk na wersje mobilne stron internetowych. Gigant zapowiedział, że posiadanie wersji mobilnej będzie liczone jako kolejny czynnik rankingowy co w skrócie mówi nam, że strony te będą faworyzowane. Strony główne (pełne), które mają odpowiedniki.

Jak zrobić dobrze stronę mobilną?

Pierwsze co nasuwa nam się to to, że ekrany urządzeń mobilnych są mniejsze (głównie chodzi o szerokość) więc wystarczy stworzyć odmianę strony, która jest węższa. Do tego mniej obrazków i tyle. I tak i nie. Jest kilka zasad o których należy pamiętać:

  • szerokość strony nie powinna być stała tylko dopasowująca się do rozdzielczości urządzenia. Tutaj wkraczamy na temat responsywności, która mówi właśnie o automatycznym dopasowaniu strony do każdego typu urządzenia
  • duże i ciężke grafiki nie pasują do strony mobilnej, ale również filmiki wstawiane na stronę, które stwarzają problemy z otwarciem – pamiętajmy, że mamy różne urządzenia o różnych mocach
  • przekierowanie na stronę o innym rozmiarze (na stronę mobilną) powinno być niezauważalne dla użytkownika. Wszystko ma się wykonywać szybko i bez przerw czy problemów
  • każda podstrona pełnej wersji strony powinna mieć mobilny odpowiednik. Wdrożone powinno byc przekierowanie 1:1 odpowiednich wersji. Nie możemy sobie pozwolić na taki system przekierowań:

redirects

Najczęstsze błędy

Każdy popełnia błędy. Błędy w świecie stron mobilnych są tym częstsze i łatwiejsze do popełnienia, że urządzeń różnego typu jest cała masa – różne wielkości ekranów, różne moce… można tak dalej.

Jednakże jesteśmy w stanie wytypować najczęściej popełniane błędy przy tworzeniu takich stron:

  • zbyt ciężki, rozpraszający użytkownika layout strony
  • zbyt duże, spowalniające witrynę obrazki
  • nie dające się odtworzyć filmy

Użyteczność strony mobilnej (UX)

User eXperience (UX) stron mobilnych to temat na cały wykład i osobne publikacje, ale o kilku prostych, a często zapominanych, należy pamiętać. Zwróćmy uwagę, że w przeważającej większości już teraz mamy do czynienia z urządzeniami dotykowymi, więc:

  • twórzmy łatwo dostępne przyciski
  • wyróżniajmy najważniejsze rzeczy na stronie – reszta na bok (po co rozpraszać użytkownika?)
  • pamiętajmy i prostocie i stonowanej kolorystyce

Trochę przykładów

Świat stron opiera się aktualnie na różnego rodzaju systemach zarządzania treścią (CMS).
Elegant Themes – twórca szablonów premium dla systemu Wordpess – każdy proponowany produkt optymalizuje do wersji mobilnych.

ElegantThemes-Responsive-Theme

Ale nowoczesne strony to niejednokrotnie 100%-owa unikalność i projekty stworzone od zera – niewielkie wizytówki czy proste strony. Sposób na pomoc urządzeniu na wykrycie strony mobilnej:

Zaraz bo znaczniku <html> przed załadowaniem wszystkich dyrektyw i reszty kodu, sprawdzamy rozdzielczość urządzenia. Jeżeli szerokość jest niż np. 700 px kierujemy użytkownika na wersję mobilną. Przykład kodu:

<script type="text/javascript">
if (screen.width <= 700)
{
window.location = "https://m.example.com";
}
</script>
ROCKETMEDIA

Rocket Media Sp. z o.o.
ul. Wagonowa 2D
53-609 Wrocław

KRS: 0000490521
NIP: 8943050211

Ochrona prywatności

Szanowny Kliencie, chcemy oferować Ci usługi i materiały marketingowe, które będą przydatne w rozwoju Twojej firmy. Naszym celem jest precyzyjne i skuteczne wsparcie Twojego biznesu. Żeby móc go osiągnąć, potrzebujemy Twojej zgody na dopasowanie naszych działań do Twojego zachowania. Gwarantujemy, że zadbamy o Twoją prywatność, Twoje dane będą u nas bezpieczne, a Ty będziesz mógł cofnąć swoją zgodę w każdej chwili poprzez specjalny formularz, który utworzyliśmy na podstronie polityka prywatności.

Prosimy o zapoznanie się z treścią i wyrażenie zgody:
Zgadzam się na przechowywanie w moim urządzeniu plików cookies oraz na przetwarzanie moich danych osobowych zapisywanych w tych plikach, które pozostawiam w ramach korzystania z niniejszego Serwisu. Mam świadomość, że moje dane będą przetwarzane w celu analizy mojego zachowania na stronie Rocketmedia.pl przez Rocket Media Sp. z o.o. z siedzibą we Wrocławiu przy ul. Wagonowej 2d oraz zaufanych partnerów tej firmy. Zgodę mogę wycofać w każdej chwili za pomocą formularza zamieszczonego w zakładce polityka prywatności.

Chcę korzystać z serwisu Rocket Media i  wyrażam zgodę