W dzisiejszych czasach większość ludzi korzysta z internetu za pomocą gadżetów mobilnych – tabletów, telefonów. Pod tym względem optymalizacja witryny również osiąga nowy poziom. Jeśli użytkownik wchodzi i widzi, że strona nie jest zoptymalizowana pod kątem urządzeń mobilnych: obraz nie jest widoczny, przyciski są przesunięte, czcionki są małe i nieczytelne, projekt jest przekrzywiony - 99 na 100%, że wyjdzie i zacznij szukać innego, wygodniejszego. A robot wyszukiwania zaznaczy pole, że zasób jest nieistotny, to znaczy nie pasuje do zapytania wyszukiwania. Dlatego projekt strony musi być dostosowany do różnych urządzeń mobilnych. Czym jest mobilna wersja strony, jak ją wykonać i jak najlepiej ją zastosować? Przeczytaj więcej w tym artykule.
Istnieją więc cztery kluczowe sposoby dostosowania witryny do urządzeń mobilnych.
Metoda pierwsza - projektowanie responsywne
Responsywne szablony zmieniają obraz witryny w zależności od rozmiaru ekranu. Z reguły są one ustawione na standardowe 1600, 1500, 1280, 1100, 1024 i 980 pikseli. Do implementacji wykorzystywane są zapytania o media CSS3. Sam projekt strony się nie zmienia.
Zaletami tej metody są:
- wygodny rozwój,skoro sama struktura dostosowuje się do parametrów ekranu, a każda aktualizacja nie wymaga tworzenia projektu od zera, wystarczy podkręcić CSS i HTML;
- jeden adres URL – użytkownik nie musi pamiętać kilku nazw, nie ma potrzeby wykonywania przekierowań (przekierowań z jednego adresu na drugi), co może skomplikować pracę webmastera i ułatwia wyszukiwanie silnik do sortowania i klasyfikowania zasobu za pomocą jednego adresu.
Oczywiście szablony adaptacyjne mają swoje wady, które, nawiasem mówiąc, są więcej niż zaletami. Niemniej jednak wielu programistów stosuje się do tej koncepcji, na przykład Google Corporation, której mobilna wersja witryny ma projekt adaptacyjny. A więc wady:
- Responsywny projekt nie obsługuje tych samych zadań na urządzeniach mobilnych, co na komputerze. Jeśli jest to na przykład mobilna wersja strony internetowej banku, gdzie informacje o kursie walutowym lub najbliższym bankomacie mają większe znaczenie dla użytkownika, to taki projekt jest w zupełności wystarczający. Ale jeśli jest to złożony zasób strukturalny z wieloma sekcjami i podsekcjami, zwiedzający raczej nie będą lubić układu adaptacyjnego.
- Powolne ładowanie zmienia ulubioną witrynę w nienawistną. Dotyczy to zwłaszcza zasobów, w których jest mnóstwo animacji, filmów, wyskakujących okienek i innych aktywnych elementów. Ze względu na dużą wagę strona po prostu „zwolni”, użytkownik się zdenerwuje i wyjdzie, a pozycje wyszukiwania witryny spadną.
- Brak możliwości wyłączenia wersji mobilnej jest kolejną istotną wadą. Jeśli jakiś element jest ukryty za takim układem,nie możesz nic zrobić, aby go otworzyć, w przeciwieństwie do witryn, w których można go wyłączyć i przełączyć na zwykłą domenę.
Jednak taka mobilna wersja strony szybko, bez specjalnych umiejętności i kosztów, pozwala dostosować zasób do dowolnych gadżetów. Ale ze względu na wymienione niedociągnięcia będzie pasował do małych, prostych zasobów z minimum informacji i multimediów, bez skomplikowanej nawigacji i animacji. W przypadku złożonej witryny odpowiednie są 2 inne metody.
Druga metoda - osobna wersja strony
Ta metoda jest bardzo powszechna i często skutecznie zwiększa czytelność witryny na urządzeniu mobilnym. Jego istotą jest stworzenie osobnej wersji strony, narysowanej dla aplikacji i znajdującej się na osobnym adresie URL lub subdomenie, np. m.vk.com. Jednocześnie zachowana jest główna funkcjonalność, projekt strony po prostu wygląda inaczej. Zalety tej metody są oczywiste:
- przyjazny interfejs użytkownika;
- łatwe do zmiany i edycji, ponieważ wersja istnieje niezależnie od głównego zasobu;
- ze względu na niewielką wagę oddzielna wersja strony działa znacznie szybciej niż szablon adaptacyjny;
- najczęściej można przejść do głównej wersji strony z telefonu komórkowego.
Ale tu też były pewne wady:
- Wiele adresów - komputerowa i mobilna wersja witryny. Jak sprawić, by użytkownik zapamiętał dwie opcje? Webmasterzy często zalecają przekierowanie (przekierowanie) z wersji komputerowej na mobilną, ale jednocześnie, jeśli ta strona jest w wersji mobilnejwersja nie istnieje, użytkownik otrzyma błąd. Tutaj pojawiają się trudności z wyszukiwarkami, które mają trudności z uszeregowaniem 2 identycznych zasobów, a to bezpośrednio wpływa na promocję.
- Mobilna wersja witryny z komputera, jeśli użytkownik odwiedzi ją przez pomyłkę, będzie wyglądać śmiesznie, co może również wpłynąć na ruch.
- Ta wersja jest często mocno okrojona na komputer, więc użytkownik będzie miał bardzo ograniczoną funkcjonalność. Ale jednocześnie, jeśli czegoś brakuje, odwiedzający może przejść do pełnej wersji strony.
Ogólnie rzecz biorąc, oddzielna witryna mobilna usprawiedliwia się i jest najczęstszym sposobem dostosowywania zasobów do urządzeń przenośnych. Jest popularny w dużych sklepach internetowych, takich jak Amazon.
Trzecia droga - projekt RESS
Wyszukiwarka Google aktywnie wspiera ten kierunek projektowania urządzeń mobilnych. To najbardziej złożona, kosztowna, ale skuteczna metoda dostosowania serwisu do telefonu lub tabletu. Nazywa się RESS. Jest to kierowanie zasobu do aplikacji mobilnej, którą można pobrać na każde urządzenie osobno. Dla Androida - z GooglePlay, a dla Apple - z iTunes.
Takie aplikacje są szybkie, bezpłatne, wygodne, mają możliwość przechowywania różnego rodzaju informacji, a pamięć telefonu i ruch internetowy nie są pochłaniane, jak podczas odwiedzania witryny przez przeglądarkę. Dostęp do nich jest łatwy, ponieważ link będzie zawsze pod ręką na ekranie i nie ma potrzeby wprowadzania skomplikowanej nazwy w pasku adresu przeglądarki.
Oczywiście są tutaj ijego wady, takie jak złożoność w rozwoju, wysoki koszt pracy dużej liczby programistów, konieczność wykonania kilku opcji układu. Czasami urządzenie mobilne nie jest rozpoznawane przez aplikację. Konieczna jest regularna pomoc techniczna, korekta niedociągnięć. Niemniej jednak ta opcja jest uważana za najlepszą z trzech proponowanych ze względu na jej wydajne, nieprzerwane działanie.
Najtańszy sposób na stworzenie mobilnej strony internetowej
Wszystkie powyższe metody obejmują, choć nie zawsze długą i trudną, ale nadal płatną pracę webmastera. Jeśli nie widzisz pilnej potrzeby takiego rozwoju, prosta i bezpłatna wersja mobilna strony będzie dla Ciebie odpowiednia. Jaki jest najłatwiejszy sposób na zrobienie tego?
Pobierz specjalne szablony (wtyczki) do responsywnego projektowania. Na przykład WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i inne. Pomogą bardziej poprawnie wyświetlić stronę w telefonie, a Ty otrzymasz kilka wskazówek, co należy poprawić, aby lepiej dostosować stronę do wersji mobilnej.
Oczywiście ta metoda nie jest odpowiednia dla poważnych zasobów. Ta bezpłatna funkcja jest raczej przeznaczona dla małych i prostych witryn, blogów, kanałów informacyjnych. Nie zapominaj, że wyszukiwarka Google, podobnie jak Yandex, stawia dziś poważne wymagania wobec wersji mobilnych, więc istnieje ogromna szansa na obniżenie pozycji za pomocą tej metody.
Dzięki tej metodzie najprawdopodobniej reklamy i wyskakujące okienka zostaną odciętebanery, ale strona ładuje się szybko i bez „opóźnień”.
Zasady tworzenia wersji mobilnych
Nie ma znaczenia, czy mobilna wersja strony została stworzona za darmo, czy z pomocą sztabu webmasterów, została wykonana w systemie RESS czy przy użyciu szablonu adaptacyjnego. Co najważniejsze, do jego skutecznego działania wymagane jest przestrzeganie kilku niezwykle ważnych zasad. Jaka powinna być mobilna wersja witryny? Jak sprawić, by był produktywny, wydajny i wydajny?
Usuń wszystko, co niepotrzebne
Minimalizm jest tym, do czego powinien dążyć twórca mobilnej wersji witryny. Wyobraź sobie, jak trudno jest dostrzec informacje przepełnione kolorami, guzikami, banerami, które trzeba bez końca przewijać w poszukiwaniu odpowiedniego materiału. Projekt mobilny powinien być prosty i przejrzysty. Wybierz 2-3 kolory, aby podzielić przestrzeń (na przykład markowe). Lepiej, jeśli jeden z nich jest biały. Podziel przestrzeń małego ekranu na zrozumiałe i czytelne strefy. Wirtualne klawisze powinny być widoczne, aby użytkownik wyraźnie wiedział, gdzie nacisnąć i widzi - oto produkt, oto formularz do wypełnienia danych, oto informacje o dostawie i płatności.
Wszystkie dodatkowe opcje, które byłyby przydatne w wersji na komputery i ułatwiłyby życie użytkownikowi, przyniosą tutaj tylko trudności. Zostaw tylko najważniejsze elementy. Animacja, banery reklamowe, multimedia najprawdopodobniej tylko spowolnią pracę serwisu lub aplikacji i odciągną uwagę odgłówna.
Wyrównanie
Kwestia wyrównania jest nie mniej dotkliwa, ponieważ jeśli zostanie to zrobione niepoprawnie, użytkownik otrzyma tylko końcówki ważnych słów. Ogólnie akceptowane jest wyrównanie do lewej i pionowe. Wyobraź sobie, że przeglądasz wiadomości w swoim telefonie. Robisz to od góry do dołu, a nie w lewo lub w prawo.
Zjednoczenie
Gdy nie ma możliwości długiego łańcucha przejść, spróbuj połączyć kilka kroków w jeden. Np. strona wymaga wprowadzenia danych w kilku etapach - nazwa, potem adres, gdzie w każdej komórce znajduje się osobny dom, ulica, mieszkanie itp. Aby nie zmuszać użytkownika do próby trafienia w wiele małych komórek, poproś go o wypełnienie tylko 2 - imię i nazwisko oraz adres.
I rozłączenie
Czasami wręcz przeciwnie, konieczne jest oddzielenie zbyt dużej ilości informacji. Na przykład w rozwijanym menu masz listę ponad 80 miast, w których realizowana jest dostawa. Pogrupuj je według regionu, aby użytkownik nie musiał przewijać tej ogromnej listy. Gdy najedzie kursorem na regionalne centrum lub region, zniknie kolejna lista miast.
Listy
Przy okazji, o listach. Są dwa z nich - ustalone w kolejności alfabetycznej lub innej oraz z podstawieniem. Ich wybór zależy od tego, co zostanie wyświetlone.
Naprawiono jest przydatne, jeśli użytkownik dokładnie wie, czego szuka. Na przykład miasto, numer lub data. Druga opcja jest odpowiednia dla długich, złożonych nazw lub w przypadkach, w których istnieje wiele odmian jednego i tego samegoo tej samej nazwie, a każda rozwijana lista przybliża użytkownika o krok do celu. Opcja automatycznego zastępowania jest częściej używana, gdy odwiedzający potrzebuje pomocy. Na przykład witryna dziewiarska oferuje kupno igieł do robienia na drutach. Użytkownik wpisuje zapytanie „Metalowe druty dziewiarskie”, a w podpowiedzi widzi „Druty 5 mm”, „Druty 4,5 mm” itp.
Autouzupełnianie
Ten element jest szczególnie istotny w przypadku witryn, które sprzedają coś online i musisz wypełnić standardowe formularze dotyczące płatności, dostawy itp. Jeśli dana osoba dokonuje zakupu za pomocą telefonu, najprawdopodobniej nie ma czasu dostać się do komputera, co oznacza, że proces zakupu powinien przebiegać jak najszybciej i jak najwygodniej.
W tym celu formularze mogą zawierać już wypełnione dane, możesz skorzystać z najpopularniejszych odpowiedzi. Na przykład wstaw dzisiejszą datę, metodę płatności gotówką, miasto, jeśli pracujesz w tym samym regionie. Można je zmienić, ale jeśli trafisz w cel, czas użytkownika zostanie zaoszczędzony.
Wszystko jest czytane, wszystko jest oglądane
Projektując mobilną wersję witryny, pamiętaj, że każdy telefon jest inny, podobnie jak wzrok. Być może Twoja witryna będzie oglądana z małego ekranu, więc czcionki powinny być proste i czytelne, przyciski powinny być na tyle duże, aby można było je kliknąć bez przechodzenia na inną stronę, a obrazy powinny otwierać się osobno, duże, zwłaszcza gdy przychodzi do sklepu internetowego.
Niektóre statystyki
Mówiąc o dostosowaniu serwisu do urządzeń mobilnych, nie sposób nie uciec się do statystyk, aby zrozumieć, jak ważny jest ten proces dlapromocja online.
Liczby są następujące. Dziś gadżetów używa najwyraźniej 87% populacji, z wyjątkiem najmniejszych dzieci i niektórych osób starszych. Ekonomiści przewidują, że handel mobilny wzrośnie 100-krotnie w ciągu najbliższych 5 lat. Jednocześnie tylko 21% witryn jest przystosowanych do pracy z urządzeniami mobilnymi. Oznacza to, że zajęta jest tylko niewielka piąta część ruchu internetowego i rynku e-commerce.
Pomyśl o tych liczbach. Czy ma sens dostosowywanie swojego zasobu? Oczywiście, że tak. Co więcej, chociaż na tym rynku jest tak dużo miejsca, możesz wyrzeźbić na nim swój własny segment.
Gdzie potrzebujesz wersji mobilnej
Korzystanie z wersji mobilnej ma sens w przypadku każdej platformy, której celem jest uzyskanie wysokiej pozycji w rankingu. W końcu ma to bezpośredni wpływ na użytkownika, stwarzając mu komfortowe warunki do przebywania na Twojej stronie.
Nie może istnieć bez wersji mobilnej:
- portale informacyjne, ponieważ większość z nich oglądana jest z telefonu w drodze do pracy lub szkoły;
- sieci społecznościowe - z tego samego powodu, plus istnieje czynnik komunikacji online, co oznacza, że w tym celu należy stworzyć wygodny, zrozumiały czat;
- strony referencyjne, witryny nawigacyjne itp., do których ludzie przechodzą, gdy czegoś szukają;
- sklepy internetowe – okazja do przyciągnięcia klientów, którzy nie tracą czasu na zakupy, ale kupują wszystko przez internet mobilny.
Zamiast konkluzji
Dziś technologie mobilne są na rynkuaktywny wzrost i rozwój, dlatego dążąc do pozycji lidera na rynku, każda firma musi zapewnić, że jej zasób internetowy spełnia wymagania. Ze względu na rosnące wymagania użytkowników, witryny muszą być stale unowocześniane i dostosowywane do różnych urządzeń. Oczywiste jest, że jeśli dana osoba jest niewygodna w korzystaniu z określonego zasobu, nie może uzyskać tam informacji o produkcie lub cenie, złożyć zamówienia, dowiedzieć się o dostawie, a następnie znajdzie stronę, na której wszystko to będzie możliwe. Dlatego, aby wygrać konkurs, ważne jest posiadanie elastycznego, wygodnego, funkcjonalnego i ciekawego zasobu.
Pomoże w tym mobilna wersja witryny Android lub iOS. W tym celu należy wybrać jedną z powyższych metod przeprojektowania – szablon adaptacyjny, stworzenie nowej witryny na subdomenie i przekierowanie do niej, skorzystanie z darmowych szablonów lub stworzenie aplikacji mobilnej, która ułatwi użytkownikowi wejście i bądź na stronie.
To podejście nie tylko pomoże utrzymać lojalność obecnych klientów, ale także zapewni możliwość przyciągnięcia nowych odwiedzających.
