Responsive Web Design odgrywa coraz większą rolę w projektowaniu stron, które będą dobrze wyglądać zarówno na komputerach, jak i smartfonach. RWD to nie tylko lubiane, estetyczne rozwiązanie, ale przede wszystkim standard i wymóg, jaki jest efektem najnowszych zmian Google co do niepozycjonowania stron niedostosowanych do urządzeń mobilnych. Nawet, jeśli oddajecie stworzenie strony mobilnej lub responsywnej w ręce specjalistów, warto znać kilka zasad, którymi należy się kierować tworząc możliwie idealny landing page, czyli stronę docelową. Poniżej przedstawiamy 5 zasad, których warto przestrzegać tworząc stronę RWD z myślą o mobile.
1. Kieruj się prostotą.
Niejednokrotnie pisząc o stronach responsywnych podkreślaliśmy istotność zachowania prostoty i umiaru. Ważny jest zarówno aspekt wizualny, aby użytkownik łatwo dotarł do informacji, jakich potrzebuje, ale również aspekt „wagowy”. Pod kątem wizualnym, warto ograniczyć elementy do minimum – logo, nagłówka i stopki, z odnośnikami do poszczególnych sekcji. Ponadto strona nie może być przeładowana zbyt długo ładującym się kodem, albowiem cierpliwość użytkownika mobilnego zwykle kończy się po trzech sekundach. Jeśli po tym czasie strona nie załaduje się, użytkownik najprawdopodobniej ją zamknie i na zawsze o niej zapomni.
2. Ukryj zbędne elementy.
Użytkownik mobilny odwiedza stronę w określonym celu – chce znaleźć podstawowe informacje o działalności firmy, dane kontaktowe, lokalizację najbliższej siedziby czy dane kontaktowe. Wszystkie pozostałe elementy są raczej zbędne. Warto wykorzystać media queries w CSS, aby ukryć zbędne dla mobilnych użytkowników elementy, takie jak ikony czy długi tekst, który zdecydowanie wydłużyłby stronę wyświetlaną na urządzeniach mobilnych. Elementy te nadal będą widoczne dla użytkowników desktopowych.
3. Podziel treść na części.
Aby strona wyglądała dobrze na desktopach, może mieć szerokość nawet 1200 pikseli. Oczywistym jest, że taka szerokość nie ma możliwości zmieścić się na ekranie mobilnym. Dlatego projektując stronę RWD warto podzielić szerokość strony na kilka kolumn, które na desktopie czytane będą od lewej do prawej, natomiast na urządzeniu mobilnym ułożone zostaną w jedną długą kolumnę, pozwalając na przeglądanie treści od góry do dołu.
4. Pamiętaj o atrybutach alt.
Atrybut alt to tekst, który będzie wyświetlał się w miejscu obrazka, w przypadku, gdy ten nie zostanie załadowany. Istnieje możliwość, że obrazki nie będą wyświetlały się poprawnie na wszystkich urządzeniach mobilnych. Dlatego warto zadbać o to, aby zamiast niezaładowanego obrazka pojawił się tekst alternatywny, który tekstowo uzupełni treść, jaka miała widnieć na grafice.
5. Ułatw dostęp do „call to action”.
Call to action, inaczej CTA, to „wezwanie do działania”. Użytkownik mobilny bardzo często wchodzi na stronę w określonym celu, np. aby znaleźć kontakt do firmy. Dlatego ważne jest, aby dane, które mogą być potrzebne użytkownikowi i które będzie mógł on wykorzystać, były łatwo dostępne i nie wymagały długiego poszukiwania ich na stronie. W przypadku numerów telefonów warto zadbać o to, aby stanowiły one „link” umożliwiający bezpośrednie połączenie telefoniczne po tapnięciu w numer na ekranie.
Istnieją trzy najczęstsze sposoby, które sprawiają iż otwieramy jakąś stronę na urządzeniu mobilnym. Po pierwsze, sami znamy jej adres i potrzebujemy na niej coś sprawdzić. Po drugie, otwieramy ją po wyszukaniu w Google. Po trzecie, otwieramy ją z innych źródeł, takich jak mailowy newsletter czy udostępnienie w aplikacjach społecznościowych. Bardzo ważne jest więc, aby użytkownik odwiedzający stronę, trafił na stronę dostosowaną do ekranu jego urządzenia. Google przestaje pozycjonować strony niedostosowane do mobile, więc niejako problem rozwiązuje się sam, niestety kosztem widoczności strony w wynikach wyszukiwania, jeśli ta jest niedostosowana do warunków mobile. W pozostałych przypadkach strona jest zdana „sama na siebie” i wystawiona na niedostosowanie, a co za tym idzie – na stratę potencjalnych odwiedzających.
Koniecznością więc jest dostosowanie strony do ekranów mobilnych, tworząc dedykowaną stronę mobilną albo decydując się na RWD. Warto nie zwlekać, ponieważ niedostosowana strona przynosi znaczące straty w liczbie odwiedzających, którzy coraz częściej surfują po internecie ze smarfonem w ręku. Jeśli chcesz zadbać o dobry wizerunek swojej firmy, zachęcamy do stworzenia własnej strony responsywnej, korzystając z usług firmy ClickMaster Polska.
Źródło:
http://www.digitalmarketingdirection.com/blog/mobile-part-3-how-to-create-mobile-friendly-landing-pages
Zdjęcie:
ronstik © Więcej zdjęć na Fotolia.pl