Wersja responsywna lub mobilna. Wersja adaptacyjna lub mobilna. Wszystko jest czytelne, wszystko jest widoczne

Jest to dodatkowa, uproszczona wersja serwisu, zwykle umieszczona na subdomenie z prefiksem „m” (np. M. Witryna).

Jak widać na zdjęciu, wersja na telefony otwiera się również na tabletach i jest rozciągnięta na szerokość, bo tablet to praktycznie bardzo, bardzo szeroki smartfon 🙂

Zewnętrznie i stylistycznie, oczywiście, może być wykonana jako strona główna (aby nie było wrażenia, że \u200b\u200bjesteś na stronie innych osób): te same kolory, czcionki, elementy. Ale struktura może być drastycznie inna i najczęściej tak jest. Mało prawdopodobne jest, aby ktoś wybierał mieszkanie, wybierał dla siebie samochód przez telefon, czy starał się o kredyt w banku. W końcu jest to niewygodne, ekran jest mały (w porównaniu z laptopem lub komputerem). Ale znalezienie najbliższego bankomatu lub adresu pizzerii jest odwrotne. Dlatego wersje mobilne są znacznie uproszczone, bez skomplikowanych kalkulatorów, ogromnych tabel porównawczych dla dwóch lub więcej podobnych produktów. Usuwają wszystkie najbardziej skomplikowane i upraszczają dostęp do kontaktów, godzin pracy i tak dalej.

Korzyści

Ponieważ jest to dodatkowa wersja witryny, jest ona ładowana oddzielnie (tj. Strona główna nie jest ładowana). I jeszcze raz powtarzam: z reguły jest to znacznie uproszczone. Dlatego ładuje się szybko stosunkowo adaptacyjnie.
Utrzymanie wersji mobilnej jest dość proste: zmiany i ulepszenia nie mają wpływu na komputery.

niedogodności

Jako projektant od razu wyrażę swoją „bajkę” o tabletach: wersja na smartfony, rozciągnięta na szerokość, wygląda na nich okropnie. Nie, cóż, oczywiście, możesz go użyć. Ale adaptacja w tym względzie uciekła dość daleko.
Wszystko to jest niezwykle niewygodne w optymalizacji SEO. Dwa adresy - strona główna i wersja mobilna - oznacza to, że zawartość zostanie zduplikowana.

Pozdrowienia, drodzy czytelnicy, w tym artykule chcę porozmawiać z wami o mobilnej wersji strony. A może raczej potrzebujesz wersji mobilnej i jakie są jej zalety.

Dlaczego zdecydowałem się w ogóle rozpocząć temat o mobilnych wersjach witryn? Wszystko jest bardzo proste! Jeśli porównamy ruch w witrynach obecnie i powiedzmy 2-3 lata temu, to dużo użytkowników korzysta ze smartfonów i tabletów. A takich użytkowników jest wielu! Dlatego powinni sprawić, że ich życie będzie wygodniejsze, widzisz, pełna wersja strony do czytania na smartfonie nie jest zbyt przyjazna. O tym porozmawiamy, ale najpierw chcę wyjaśnić, czym jest mobilna wersja witryny.

Mobilna wersja serwisu - to osobna wersja serwisu, która powiela stronę główną, ale jest okrojona, względnie desktopowa iz reguły wersja mobilna jest wykonana w jednej kolumnie, do wygodnego użytkowania na smartfonach bez użycia skalowania. W wersji mobilnej pozostaje tylko najbardziej podstawowa funkcjonalność serwisu, a wszystkie drugorzędne są usuwane. Dzięki temu użytkownik może w wygodny sposób poruszać się po serwisie, czytać informacje na jego temat oraz uzyskać pełną odpowiedź na swoje pytanie.

Jak widać, wszystko jest dość proste, mobilna wersja strony to specjalny układ, który będzie wygodny do oglądania na smartfonach i tabletach. Ale to tylko ogólne kwestie, ponieważ mobilne wersje witryny można nadal podzielić na różne opcje ich implementacji, głównie istnieją 3 różne typy układu strony mobilnej: projekt adaptacyjny, oddzielna wersja mobilna, RESS (Projekt responsywny + po stronie serwera). Przyjrzyjmy się każdemu wdrożeniu osobno.

Projekt adaptacyjny

Responsywny projekt, włączony ten moment, jest najpopularniejszy. Istnieje wiele powodów, o których porozmawiamy nieco dalej, ale teraz powiem Wam, czym jest responsywny design i jakie są jego charakterystyczne cechy.

Projekt adaptacyjny - to jedna z opcji wdrożenia mobilnej wersji serwisu. Główna cecha elastyczny projekt to brak osobnej wersji serwisu, czyli sam projekt dostosowuje się do użytkownika, biorąc pod uwagę jego rozdzielczość ekranu. Projektowanie responsywnych projektów odbywa się za pomocą CSS3, z wykorzystaniem zapytań o media - Media Queries. Najważniejsze jest to, że responsywny projekt jest taki sam dla wszystkich urządzeń, zarówno dla komputerów, jak i telefonów i tabletów, to znaczy nie jest to osobna witryna.

Dzięki zapytaniom o media możesz rozwiązywać różne zadania, począwszy od ustawiania szerokości strony lub elementu, po wyłączanie mniej ważnych elementów, aby nie przeszkadzały w czytaniu treści na smartfonach i tabletach. A w przypadku telefonów i tabletów możesz to zrobić różne wersjeczyli w przypadku tabletów usuń niektóre niepotrzebne blokady, zostawiając najważniejsze z nich i zredukuj je do minimum na telefonie, aby nie przeszkadzały w odbiorze treści.

Aby jaśniej pokazać, jak powstaje responsywny układ, podam mały fragment kodu i wyjaśnię jego działanie.

@ media screen and (min-width: 360px) (div (display: none;)) @media screen and (min-width: 720px) (div (display: block;))

Ten kod mówi, że jeśli rozdzielczość urządzenia wynosi 360 pikseli lub więcej, blok div nie zostanie wyświetlony, jeśli rozdzielczość wynosi 720 pikseli lub więcej, wtedy div pokaże, jak element blokowy... W ten sposób możesz przypisać absolutnie dowolne właściwości wszystkim elementom w różnych rozdzielczościach. Oznacza to, że może to być zarówno szerokość, jak i wysokość, i widoczność, a także opcja pozycjonowania lub cokolwiek ogólnie, nawet inna czcionka. Ale co najważniejsze, w przypadku korzystania z zapytań o media Twój projekt responsywny powinien mieć gumowy układ... Przyjrzyjmy się teraz zaletom i wadom responsywnego układu witryny.

Zalety responsywnego layoutu przy implementacji mobilnej wersji serwisu:

- Wygoda i łatwość tworzenia... Projekt responsywny jest dość łatwy w opracowaniu, ponieważ za jednym zamachem powstaje kilka wersji witryny (komputer stacjonarny (komputer), tablet (opcjonalnie) i telefon komórkowy). Posiadanie gotowego układu strona główna w HTML musisz zacząć pisać Media Queries dla niższych rozdzielczości, to znaczy dla tabletów i dla telefony komórkowe.

- Adres jednej witryny... Dzięki responsywnemu układowi mobilna wersja Twojej witryny będzie miała ten sam adres, co pełna witryna, co jest w zasadzie bardzo dobre. Nie musisz konfigurować przekierowań między różnymi wersjami, a użytkownik zapamięta inny adres witryny, nawet jeśli zostanie do niego dodany tylko m.

Wady responsywnego układu przy implementacji mobilnej wersji strony:

... Długi czas ładowania wynika z faktu, że chociaż strona jest stworzona na urządzenia mobilne, to projekt dostosowuje się do urządzenia, to znaczy smartfon musi załadować wszystkie pliki HTML i CSS. Oznacza to, że pomimo najbardziej uproszczonego projektu wersji mobilnej, która waży kilka kilobajtów, musisz pobrać wszystko, czyli całkowita waga strony wyniesie pełna wersja + mobile... A jeśli sygnał sieci komórkowej jest zły, to taka strona może się bardzo długo ładować, trzeba przyznać, że nie jest dobrze zmuszać użytkownika do bardzo długiego oczekiwania.

- Złożoność edycji... Trudność polega na tym, że wszystkie wersje Twojej witryny znajdują się w jednym dokumencie, czyli na komputerze, tablecie i telefonie komórkowym. Oczywiście, jeśli dobrze znasz układ, nie będziesz mieć żadnych specjalnych problemów, ale nadal jest to zwiększona złożoność w stosunku do oddzielnej wersji mobilnej.

- Brak wyboru wersji serwisu... Największym problemem z responsywnym układem jest brak opcji przełączenia się na wersję desktopową. I okazuje się, że jeśli się tniesz wymagana funkcjonalność witryna, użytkownik mobilny nie będzie mógł z niej w żaden sposób korzystać, tylko jeśli nie zacznie się wspinać źródło stron. Ale nikt tego nie zrobi, po prostu pójdzie do konkurenta.

W rezultacie, pomimo wszystkich wad, jakie ma responsywny design, jest to bardzo popularna koncepcja implementacji mobilnej wersji strony, ponieważ jej potencjał również nie jest wystarczająco zły, a przy kompetentnym podejściu można uniknąć części problemów.

Oddzielna mobilna wersja serwisu

Oddzielna mobilna wersja serwisu to chyba najstarsza implementacja wygodnego dostępu do serwisu dla posiadaczy smartfonów. Teraz opowiem więcej o mobilnej wersji strony.

Oddzielną mobilną wersją serwisu jest wersja serwisu, do której przechodzą użytkownicy smartfonów i tabletów przechodząc na wersję główną. Ma osobny adres, zwykle prefiks do domeny głównej m. lub mobilny. Oddzielna wersja mobilna to oddzielna witryna, która wykorzystuje główną bazę danych do wyświetlania tej samej treści, ale w zupełnie innym układzie, zoptymalizowanym pod kątem urządzenia mobilne... Z reguły najważniejsze funkcje serwisu są zawarte w wersji mobilnej, usuwane są te, które nie są potrzebne użytkownikom mobilnym.

Jeśli weźmiemy projekt responsywny, to przyszedł do nas z nowymi możliwościami CSS3, a oddzielna wersja strony istniała na długo przed pojawieniem się responsywnego układu. Pomimo tego, że jest to najstarsze rozwiązanie, nie traci na popularności. Nawet wiele popularnych zasobów korzysta z osobnej wersji mobilnej witryny, ponieważ ma ona szereg zalet, których nie ma responsywny układ. Wersje mobilne można zobaczyć na takich stronach jak: m.yandex.ru; m.vk.com; m.ok.ru i wiele innych. Oznacza to, że widać, że Yandex i duża społeczność. Sieci Runet używają wersji mobilnych i nie przechodzą na projektowanie responsywne.

Zalety osobnej wersji mobilnej serwisu:

- Duża prędkość robocza... Szybkość tłumaczy się tym, że szablon jest zoptymalizowany pod kątem urządzeń mobilnych iw osobnej wersji nie ma potrzeby ładowania różnych „śmieci”. Korzystając z osobnej wersji serwisu, możesz to osiągnąć szybkie ładowanie, nawet przy słabym połączeniu lub sieci 2G. To po prostu ogromny plus dla użytkowników, którzy odwiedzają Cię z urządzeń mobilnych.

- Przyjazność dla użytkownika... Oddzielna wersja serwisu jest bardzo dobrze przemyślana, aby osiągnąć wysoki poziom użyteczności. Nie ma „śmieciowych funkcji”, których użytkownik smartfona po prostu nie potrzebuje, a wszystkie niezbędne informacje znajdują się w zasięgu spaceru, co jest bardzo dobre.

- Łatwy do edycji... Podczas edycji kodu nie musisz szukać czegoś w kodzie, będziesz miał przed oczami kod konkretnej wersji mobilnej i będziesz pracować z nim specjalnie bez zakłócania pracy wersji desktopowej.

- Możliwość zmiany na wersję desktopową... Bardzo ważna rzecz, jeśli mówimy, że użytkownik potrzebuje pełna funkcjonalność Twoja witryna, może bez problemu przełączyć się na wersję desktopową i wykorzystać tam wszystko, czego potrzebuje.

Wady osobnej wersji mobilnej serwisu:

- Dodatkowa praca w SEO... Faktem jest, że witryna znajduje się na subdomenie, a wyszukiwarki uważają ją za kopię głównej. Aby rozwiązać ten problem, musisz użyć metatagów rel \u003d "alternatywa" i rel \u003d "canonical". Wtedy robot wyszukujący zobaczy, że jest to alternatywny adres dostępu do Twojej witryny i nie nałoży żadnych sankcji za powielanie treści.

— Możliwe rozbieżności... Jeśli używasz dwóch różnych baz danych, Twoje witryny mogą nie powielać się całkowicie, co negatywnie wpłynie na SEO. Również jeśli zapomnisz dodać nowa strona do wersji mobilnej będzie wyświetlany na stronie głównej, ale nie w wersji mobilnej. Ale ten problem można łatwo rozwiązać za pomocą wspólnej bazy danych.

Jak widać, ta metoda implementacji wersji mobilnej ma zupełnie inne zalety i wady, dlatego stosuje się obie metody.

RESS (Projekt responsywny + po stronie serwera)

To chyba mój ulubiony sposób implementacji witryny mobilnej. W pewnym stopniu łączy w sobie zarówno responsywny design, jak i mobilną wersję strony. Ale ta metoda jest trudniejszy do wdrożenia, ponieważ wymaga większej wiedzy programistycznej i nie każdy może go wdrożyć. Teraz powiem ci, co to jest.

RESS (Responsive Design + Server Side) to implementacja w serwisie wersji mobilnej poprzez identyfikację urządzenia, z którego zalogował się użytkownik i, zgodnie z rodzajem urządzenia, uruchomienie odpowiedniego szablonu odpowiadającego urządzeniu. Z reguły jest to realizowane poprzez sprawdzenie User-Agent użytkownika.

Jak już zrozumiałeś w tej metodzie, urządzenie jest określane, a następnie ładowany jest wymagany szablon. Teraz spróbuję pokazać, jak wygląda implementacja RESS na przykładowym kodzie.

$ user \u003d BBrowser :: detectionDevice () if ($ device \u003d\u003d DEVICE_TYPE_MPHONE) ($ shablon \u003d \\ "mobile.php \\";) else if ($ device \u003d\u003d DEVICE_TYPE_TABLET) ($ shablon \u003d \\ "tablet.php \\" ;) else ($ shablon \u003d \\ "desktop.php \\";) include ($ shablon);

W najprostszej formie implementacja Responsive Design + Server Side wygląda następująco. Oznacza to, że najpierw wykrywamy urządzenie, z którego przyszli na naszą stronę, a następnie, poprzez warunki if i else, sortujemy możliwe opcje, jeśli z telefonu, to wyświetlamy mobile.php, jeśli z tabletu, to tablet.php, jeśli nawet nie w przeciwnym razie wydrukuj desktop.php. Jak widać, wszystko jest proste, witryna po prostu tworzy kilka opcji szablonów dla różnych urządzeń, a następnie wyświetla żądany.

Zalety Responsive Design + Server Side (RESS):

— Znaczne oszczędności ruchu... Podobnie jak w wersji mobilnej, projekt został stworzony specjalnie dla konkretnego typu urządzenia i nie ma dodatkowego kodu, który marnuje ruch i spowalnia ładowanie. Można uzyskać bardzo małą wagę strony.

— Jeden adres... Wygodne jest to, że użytkownik nie musi przechodzić do subdomen, a korzysta z witryny w domenie głównej, jak w przypadku projektowania responsywnego. Ale jednocześnie wykluczone są tutaj wady projektowania responsywnego.

— Możliwość przełączania się między wersjami... Korzystając z Responsive Design + Server Side, możesz bez problemu przełączać się między wersjami, dodając przycisk przełącznika w widocznym miejscu, zawsze możesz włączyć układ komputerowy lub mobilny.

Wady projektowania responsywnego + po stronie serwera (RESS):

— Bardzo duża złożoność wykonania... Gdy dla projektu adaptacyjnego wystarczy pisać tylko zapytania o media, to wszystko nie jest takie proste, tutaj potrzebny jest cały algorytm do wykrywania urządzeń, wydawania niezbędnych wersji układu i przełączania się między układami.

— Urządzenie nie zostało wykryte... Są chwile, kiedy telefon może po prostu nie zostać zidentyfikowany i otrzyma wersję komputerową, niestety na razie ten algorytm nie zostały jeszcze doprowadzone do ideału.

Na koniec chcę powiedzieć, że to moja ulubiona metoda implementacji mobilnej wersji serwisu, ale jest bardzo złożona i czasochłonna, ale jeśli to zrobisz, będzie warto. Nie należy jednak rezygnować z innych opcji implementacji, bo jeśli dojdziemy do kwestii ceny wykonania (jeśli sam nie znacie programowania), to układ adaptacyjny będzie najtańszy, doskonale spełnia swoje funkcje i większość ludzi jest do niego skłonna. Wybór metody implementacji mobilnej wersji serwisu zależy od Ciebie. To wyłącznie kwestia gustu. A teraz w końcu powiem ci, dlaczego potrzebujesz mobilnej wersji strony.

Po co Ci mobilna wersja strony?

To pytanie zadaje sobie wielu webmasterów, po co tworzyć mobilną wersję strony? W rzeczywistości wszystko jest bardzo proste, ma to na celu zmaksymalizowanie pokrycia odbiorców w Twoim segmencie. Ogólnie uważam, że w przypadku sklepów internetowych i różnych firm wymagana jest wersja mobilna! Dla różnych blogów i forów - pożądane.

Ale jeśli weźmiesz pod uwagę najnowsze wiadomości: Yandex będzie teraz wyświetlać witryny, które są dostosowane do urządzeń mobilnych, wyżej w wynikach wyszukiwania na urządzeniach mobilnych. Aby strona mogła zostać uznana za nadającą się do użytku mobilnego, musi: nie mieć przewijania w poziomie i nie może zawierać elementów Java ani Flash, ponieważ urządzenia mobilne nie mogą ich odtwarzać. Oto przykład z Yandex, jak powinna wyglądać strona dostosowana do urządzeń mobilnych.

Jak widać, treść powinna znajdować się w jednej kolumnie, powinna być łatwa do odczytania, a wszystkie elementy powinny być na tyle duże, aby można je było wcisnąć palcem. W związku z tym teraz, nie mając wersji mobilnej, możesz zapomnieć o znacznej części ruchu na swojej stronie, ponieważ Yandex Cię nie doceni (ale dla urządzeń mobilnych), dla urządzeń stacjonarnych ranking pozostanie taki sam.

Ale generalnie, jeśli masz mobilną wersję strony, nie ma znaczenia, czy jest to układ adaptacyjny, czy osobna wersja mobilna, czy nawet Responsive Design + Server Side, to będzie ogromny plus, bo nie ma znaczenia jaką masz implementację, najważniejsze: jest mobilna wersja serwisu. Ma solidne zalety: dobre dla użytkowników, większy ruch, plus z wyszukiwarki, większe przychody z reklam. na podstawie najnowszych wiadomości moja opinia: wymagane jest stworzenie wersji mobilnej!

To wszystko dla mnie, mam nadzieję, że nie zmęczyłem Cię moim długim postem, życzę sukcesów w promocji.

Obecnie większość ludzi korzysta z internetu za pomocą gadżetów mobilnych - tabletów, telefonów, pod tym względem optymalizacja witryny również idzie nowy poziom... Jeśli użytkownik wejdzie i zobaczy, że strona nie jest zoptymalizowana pod kątem urządzeń mobilnych: obraz nie może zostać wyświetlony, przyciski się wysunęły, czcionki są małe i nieczytelne, projekt jest przekrzywiony - 99 na 100%, że wyjdzie i zacznie szukać innego wygodniejszego. I zaznaczy pole, że zasób jest nieistotny, to znaczy, że nie pasuje do zapytania wyszukiwania. Dlatego projekt strony musi być koniecznie dostosowany do różnych urządzeń mobilnych. Co to jest mobilna wersja strony internetowej, jak ją wykonać i jak najlepiej z niej korzystać? Przeczytaj więcej w tym artykule.

Więc są cztery kluczowe sposoby dostosować witrynę do wersji mobilnej.

Metoda pierwsza - projektowanie responsywne

Responsywne szablony wymagają zmiany obrazu witryny w zależności od rozmiaru ekranu. Zazwyczaj są one ustawione na standardowe 1600, 1500, 1280, 1100, 1024 i 980 pikseli. Zapytania są używane do implementacji. To się nie zmienia.

Zalety tej metody to:

wygodna rozbudowa, gdyż sama konstrukcja dostosowuje się do parametrów ekranu, a każda aktualizacja nie wymaga tworzenia projektu od podstaw, wystarczy skorygować CSS i HTML;
jeden adres URL - użytkownik nie musi pamiętać kilku nazw, nie ma potrzeby przekierowywania (przekierowywania z jednego adresu na drugi), co może skomplikować pracę webmastera, a wyszukiwarce łatwiej jest posortować i uszeregować zasób z jednym adresem.

Oczywiście responsywne szablony mają swoje wady, które zresztą są czymś więcej niż zaletami. Niemniej jednak wielu programistów wyznaje tę samą koncepcję, na przykład Google Corporation, której mobilna wersja strony ma responsywny design. Więc wady:

Projekt responsywny nie obsługuje tych samych zadań na urządzeniu mobilnym, co na komputerze PC. Jeśli jest to np. Mobilna wersja serwisu banku, na której użytkownika chętniej interesują informacje o kursie lub najbliższych bankomatach, to taki projekt jest w zupełności wystarczający. Ale jeśli jest to złożony zasób ustrukturyzowany z wieloma sekcjami i podsekcjami, jest mało prawdopodobne, aby odwiedzający go polubili.
Powolne ładowanie zmienia Twoją ulubioną witrynę w znienawidzoną witrynę. Jest to szczególnie ważne w przypadku zasobów, w których jest dużo animacji, filmów, wyskakujących okienek i innych aktywnych elementów. Ze względu na dużą wagę strona po prostu „zwolni”, użytkownik złości się i wyjdzie, a pozycja wyszukiwania spadnie.
Brak możliwości wyłączenia wersji mobilnej to kolejna istotna wada. Jeśli element jest ukryty przez taki układ, nie będziesz w stanie nic zrobić, aby go otworzyć, w przeciwieństwie do witryn, w których możesz go wyłączyć i przejść do zwykłej domeny.

Niemniej jednak taka mobilna wersja serwisu szybko, bez specjalnych umiejętności i kosztów, pozwala dostosować zasób do dowolnych gadżetów. Jednak ze względu na wymienione wady nadaje się do małych, prostych zasobów z minimalną ilością informacji i multimediów, bez skomplikowanej nawigacji i animacji. W przypadku złożonej witryny odpowiednie są 2 inne metody.

Metoda druga - oddzielna wersja strony

Ta metoda jest bardzo popularna i często z powodzeniem sprawia, że \u200b\u200bstrona internetowa na urządzeniu mobilnym jest bardziej czytelna. Jej istotą jest stworzenie osobnej wersji strony, narysowanej dla aplikacji i umieszczonej pod oddzielnym adresem URL lub subdomeny, np. M.vk.com. Jednocześnie zachowana jest główna funkcjonalność, projekt strony po prostu wygląda inaczej. Zalety tej metody są oczywiste:

przyjazny dla użytkownika interfejs;
łatwe do zmiany i edycji, ponieważ wersja istnieje niezależnie od głównego zasobu;
ze względu na niewielką wagę osobna wersja serwisu działa znacznie szybciej niż responsywny szablon;
najczęściej można przełączyć się na główną wersję strony z telefonu komórkowego.

Ale tutaj też były pewne wady:

Kilka adresów - wersja strony na komputery i urządzenia mobilne. Jak sprawić, by użytkownik zapamiętał te dwie opcje? Webmasterzy często przepisują z wersji komputerowej na mobilną, ale jednocześnie, jeśli ta strona nie istnieje w wersji mobilnej, użytkownik otrzyma błąd. W tym przypadku 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 strony z komputera, jeśli użytkownik przypadkowo do niej wejdzie, będzie wyglądać śmiesznie, co również może wpływać na ruch.
Ta wersja jest często mocno okrojona, desktopowa, więc użytkownik otrzyma bardzo ograniczoną funkcjonalność. Ale jednocześnie, jeśli czegoś brakuje, odwiedzający może się udać pełna wersja stron.

Ogólnie rzecz biorąc, oddzielna witryna mobilna usprawiedliwia się i jest najczęstszym sposobem dostosowania zasobów do urządzeń mobilnych. Jest popularny wśród głównych sprzedawców internetowych, takich jak Amazon.

Trzeci sposób to projekt RESS

Wyszukiwarka Google aktywnie wspiera ten kierunek projektowania mobilnego. To najtrudniejsza, kosztowna, ale skuteczna metoda dostosowania strony internetowej do telefonu czy tabletu. Nazywa się RESS. Dotyczy to zasobu w aplikacji mobilnej, który można pobrać osobno dla każdego urządzenia. Dla Androida - z Google Play, a dla Apple - z iTunes.

Takie aplikacje są szybkie, darmowe, wygodne, mają możliwość umieszczania różnego rodzaju informacji, a pamięć telefonu i ruch internetowy nie są zjadane jak podczas odwiedzania serwisu przez przeglądarkę. Są łatwo dostępne, ponieważ link zawsze będzie pod ręką na ekranie i nie ma potrzeby wpisywania złożonej nazwy w pasku adresu przeglądarki.

Oczywiście są tu również wady, takie jak złożoność rozwoju, wysoki koszt pracy dla dużej liczby programistów i konieczność zrobienia kilku opcji układu. Czasami urządzenie mobilne nie jest rozpoznawane przez aplikację. Regularny pomoc techniczna, korekta braków. Niemniej jednak ta opcja jest uważana za najlepszą z trzech proponowanych ze względu na jej wydajną, bezproblemową pracę.

Najtańszy sposób na stworzenie mobilnej strony internetowej

Wszystkie powyższe metody wymagają, choć nie zawsze długiej i trudnej, ale płatnej pracy webmastera. Jeśli nie widzisz pilnej potrzeby takiego rozwoju, odpowiednia i bezpłatna wersja mobilna strony będzie dla Ciebie odpowiednia. Jak najłatwiej to zrobić?

Pobierz specjalne szablony (wtyczki) do projektowania responsywnego. Na przykład WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i inne. Pomogą one w poprawnym wyświetlaniu strony w telefonie, a jednocześnie otrzymasz kilka wskazówek, które należy poprawić, aby lepiej dostosować stronę do wersji mobilnej.

Oczywiście ta metoda prawdopodobnie nie będzie odpowiednia dla poważnych zasobów. Raczej tak bezpłatna okazja przeznaczone dla najmniejszych i najbardziej podstawowych witryn, blogów, kanałów informacyjnych. Nie zapominaj też o tym wyszukiwarka google, podobnie jak Yandex, stawia dziś poważne wymagania wersjom mobilnym, więc istnieje duża szansa na obniżenie jej pozycji za pomocą tej metody.

Dzięki tej metodzie najprawdopodobniej reklamy i wyskakujące banery zostaną obcięte, ale strona załaduje się szybko i bez opóźnień.

Zasady tworzenia wersji mobilnych

Nie ma znaczenia, czy mobilna wersja serwisu została stworzona za darmo, czy przy pomocy sztabu webmasterów, została wykonana w systemie RESS lub z wykorzystaniem szablonu adaptacyjnego. Co najważniejsze, aby była skuteczna, wymaga przestrzegania kilku krytycznych zasad. Jaka więc powinna być mobilna wersja strony? Jak sprawić, by był produktywny, wydajny i produktywny?

Usuwamy wszystkie niepotrzebne

Minimalizm jest tym, do czego powinien dążyć deweloper mobilnej wersji serwisu. Wyobraź sobie, jak trudno jest dostrzec informacje pełne kwiatów, guzików, banerów, które musisz bez końca przewijać w poszukiwaniu potrzebnego materiału. Mobilny projekt powinien być prosty i czysty. Wybierz 2-3 kolory, aby oddzielić przestrzeń (np. Marka). Lepiej, jeśli jeden z nich jest biały. Podziel małą przestrzeń ekranu na wyraźne i czytelne obszary. Wirtualne klucze musi być widoczny, aby użytkownik wiedział, gdzie kliknąć i zobaczyć - tutaj produkt, tutaj formularz do wypełnienia danych, tutaj informacje o dostawie i płatności.

Wszystkie dodatkowe opcje, które przydałyby się w wersji desktopowej i ułatwiłyby życie użytkownikowi, przyniosą tu tylko trudności. Zostaw tylko najważniejsze elementy. Animacja, banery reklamowe, multimedia najprawdopodobniej tylko spowolnią pracę witryny lub aplikacji i odwrócą uwagę od tego, co najważniejsze.

Wyrównanie

Kwestia wyrównania jest nie mniej dotkliwa, ponieważ jeśli zostanie wykonane niepoprawnie, użytkownik otrzyma tylko końcówki ważnych słów. Wyrównanie w lewo iw pionie jest ogólnie akceptowane. Wyobraź sobie, że przeglądasz wiadomości w telefonie. Robisz to od góry do dołu, ale nie w lewo ani w prawo.

Unia

Gdy nie ma możliwości długiego łańcucha przejść, spróbuj połączyć kilka kroków w jeden. Na przykład strona wymaga wprowadzenia danych w kilku etapach - nazwa, następnie adres, gdzie każda oddzielna komórka zawiera oddzielny dom, ulicę, mieszkanie itp. Aby nie zmuszać użytkownika do próby przejścia przez wiele małych komórek, zaproponuj mu wypełnienie tylko 2 - imię i adres.

I odłączenie

I odwrotnie, czasami trzeba oddzielić zbyt wiele informacji. Na przykład w menu rozwijanym 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, inna lista miast zniknie.

Listy

A propos, o listach. Są dwa z nich - ustalone w kolejności alfabetycznej lub innej iz podstawieniem. Ich wybór zależy od tego, co zostanie wymienione.

Naprawiono jest przydatne, jeśli użytkownik dokładnie wie, czego szuka. Na przykład miasto, numer lub data. Druga opcja jest odpowiednia w przypadku długich, złożonych nazw lub przypadków, w których istnieje wiele odmian tej samej nazwy, a każda z nich 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 zakup igieł do robienia na drutach. Użytkownik wchodzi wyszukiwana fraza „Metalowe igły dziewiarskie”, aw podpowiedzi „5 mm igły”, „4,5 mm igły dziewiarskie” itp.

autouzupełnienie

Dotyczy to zwłaszcza witryn, w których sprzedają coś online, a trzeba wypełnić standardowe formy płatności, dostawy itp. Jeśli osoba dokonuje zakupu przez telefon, to najprawdopodobniej nie ma czasu na dotarcie do komputera, co oznacza, że \u200b\u200bproces zakupy powinny być dokonywane tak szybko i wygodnie, jak to tylko możliwe.

Aby to zrobić, formularze mogą zawierać już wypełnione dane, możesz skorzystać z najpopularniejszych odpowiedzi. Na przykład wprowadź 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 czytelne, wszystko jest widoczne

Projektując mobilną wersję serwisu, pamiętaj, że każdy ma inny telefon, podobnie jak jego wizja. Być może Twoja witryna będzie wyświetlana na małym ekranie, więc czcionki powinny być proste i czytelne, przyciski wystarczająco duże, aby można je było kliknąć bez przechodzenia na inną stronę, a obrazy powinny otwierać się osobno, duże, zwłaszcza jeśli nadchodzi o sklepie internetowym.

Trochę statystyk

Mówiąc o dostosowaniu serwisu do urządzeń mobilnych, nie można nie skorzystać ze statystyk, aby zrozumieć, jak ważny jest to proces dla promocji w Internecie.

Liczby są następujące. Obecnie z gadżetów korzysta najwyraźniej 87% populacji, z wyjątkiem najmniejszych dzieci i niektórych osób starszych. Ekonomiści przewidują 100-krotny wzrost handlu mobilnego w ciągu najbliższych 5 lat. Jednak tylko 21% witryn jest przystosowanych do pracy z urządzeniami mobilnymi. Oznacza to, że ruch internetowy i rynek e-commerce zajmuje tylko niewielka piąta część.

Pomyśl o tych liczbach. Czy ma sens dostosowywanie zasobów? Oczywiście, że tak. Co więcej, dopóki na tym rynku jest tak dużo wolnego miejsca, możesz wziąć na nim swój własny segment.

Gdzie potrzebujesz wersji mobilnej

Korzystanie z wersji mobilnej jest zalecane dla każdej platformy, która stara się uzyskać wysoką ocenę. W końcu to bezpośredni wpływ na użytkownika, stwarzając mu komfortowe warunki do pozostania na Twojej stronie.

Bez wersji mobilnej nie mogą istnieć:

portale informacyjne, ponieważ większość z nich ogląda je na telefonie w drodze do pracy lub szkoły;
portale społecznościowe - z tego samego powodu, dodatkowo istnieje czynnik komunikacji online, co oznacza, że \u200b\u200bnależy w tym celu stworzyć wygodny, zrozumiały czat;
strony pomocy, strony z nawigacją itp., do których ludzie zwracają się, szukając czegoś;
sklepy internetowe są okazją do przyciągnięcia kupujących, którzy nie tracą czasu na zakupy, tylko kupują wszystko przez mobilny Internet.

Zamiast zakończenia

Dzisiaj technologie mobilne znajdują się na etapie aktywnego wzrostu i rozwoju, dlatego dążąc do pozycji lidera na rynku, każda firma musi zapewnić, że jej zasoby internetowe spełniają wymagania. Ze względu na rosnące wymagania użytkowników witryny muszą być stale modernizowane 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ć informacji o produkcie lub cenie, złożyć zamówienia, dowiedzieć się o dostawie, a następnie znajdzie witrynę, w której to wszystko stanie się możliwe. Dlatego, aby wygrać konkurencję, ważne jest posiadanie elastycznego, wygodnego, funkcjonalnego i interesującego zasobu.

Pomoże w tym mobilna wersja serwisu Android lub Ios. Aby to zrobić, musisz wybrać jedną z powyższych metod przeprojektowania - szablon adaptacyjny, utworzenie nowej witryny na subdomenie i przejście do niej przez przekierowanie, używając darmowe szablony lub kreacja mobilna aplikacja, dzięki której użytkownik będzie mógł wygodniej wejść i być na stronie.

Wydaliśmy nową książkę „Marketing treści w mediach społecznościowych: jak dotrzeć do głów subskrybentów i zakochać się w swojej marce”.

Wersja mobilna witryny jest zduplikowaną wersją witryny głównej, dla której zastosowano specjalny układ, który umożliwia wygodne przeglądanie i poruszanie się po stronach zasobu z telefonów komórkowych i tabletów.

Więcej filmów na naszym kanale - poznaj marketing internetowy z SEMANTICA

Telefon komórkowy od dawna jest najlepszym przyjacielem większości mieszkańców świata. Nowoczesne gadżety mobilne niemal całkowicie przejęły rolę stacjonarnych komputerów i radykalnie zmieniły zachowania użytkowników w Internecie. Są zarówno źródłem informacji, jak i sposobem realizacji wielu zadań. Dynamika życia wymaga jak najbardziej racjonalnego wykorzystania czasu, dlatego od dawna uczymy się, kupujemy i rezerwujemy w biegu.

Każdy projekt w Internecie ma własną witrynę główną, ale rozdzielczość ekranu urządzeń mobilnych jest inna niż w przypadku komputerów i laptopów. W rezultacie korzystanie z witryny z telefonu jest prawie niemożliwe, ponieważ jej wyświetlanie jest bardzo niewygodne. Dlatego istnieje potrzeba zoptymalizowanej wersji serwisu, która będzie czytelna dla kieszonkowych gadżetów.

Dlaczego potrzebujesz mobilnej wersji strony

Obfitość identycznych zasobów sieciowych, zarówno informacyjnych, jak i sprzedażowych, generuje deficyt lojalności ze strony odwiedzających. Internauci mają więc wybór, gdy odwiedzający natknie się np. Na niewygodną nawigację po zasobie, woli nie tracić czasu, tylko opuścić witrynę i udać się do konkurencji. Sytuacja ta zmusza administratorów do stworzenia jak najbardziej komfortowych warunków, aby nie tylko przyciągnąć odwiedzających, ale także zmotywować ich do pozostania.

Maksymalne dotarcie do grupy docelowej i stworzenie dla niej komfortowych warunków - do tego służy mobilna wersja serwisu.

Oddzielną mobilną wersją serwisu jest realizacja wygodnego dostępu do serwisu z urządzeń mobilnych, z którego korzystamy od dawna. W smartfonach witryna jest wyświetlana w jednej kolumnie, dlatego przed stworzeniem mobilnej wersji witryny programista musi dokładnie przemyśleć projekt - tak umieścić wszystko, aby w ogóle nie ograniczać funkcjonalności odwiedzającego, a jednocześnie uczynić interakcję z zasobem tak wygodną, \u200b\u200bjak to tylko możliwe.

Jak to działa

Zasada, według której podejmowana jest decyzja, którą wersję pokazać odwiedzającemu, polega na tym, że gdy użytkownik odwiedza witrynę, ekran urządzenia jest automatycznie wykrywany. Jeśli szerokość ekranu zostanie zidentyfikowana jako gadżet mobilny, zostanie uruchomione przekierowanie do mobilnej wersji zasobu, która znajduje się w oddzielnej subdomenie. Aby w przyszłości wyszukiwarki nie postrzegały tej wersji jako osobnego zasobu, lepiej jest umieścić subdomenę w tej samej domenie co strona główna, w przeciwnym razie promocja mobilnej wersji strony przyniesie odwrotny skutek.

Jak przenieść stronę internetową do wersji mobilnej

Istnieją pewne zasady, a ich wdrożenie będzie wymagało umiejętności programowania i układania.

W tłumie. wersja musi zachować ogólną koncepcję z wersją desktopową, ale jednocześnie opracować oddzielne rozwiązania projektowe, a także najwygodniejszy interfejs dla użyteczności. Elementy zasobu na ekranie zwiedzających powinny być odpowiednio rozmieszczone i wyświetlane na tyle duże, aby wygodnie dotykać palcem. Potem następuje testowanie i ostateczne uruchomienie.

Układ mobilny a responsywny

Równolegle z osobną wersją mobilną serwisu istnieje inna interpretowana odmiana - responsywny design.

Spróbujmy dowiedzieć się, czym różni się mobilna wersja serwisu od adaptacyjnej.
Witryna responsywna nie jest oddzielną wersją zasobu, jest witryną główną i automatycznie dostosowuje się do rozdzielczości urządzenia, z którego się logujesz.

Do zalet układu responsywnego należy fakt, że ma ten sam adres URL, co strona główna, więc nie jest wymagane przekierowywanie. A to znacznie wzmacnia pozycję strony w rankingu przez wyszukiwarki. Podczas otwarcia wyświetlana jest absolutnie ta sama zawartość strony i jej funkcjonalność, ale jej wygląd dopasowuje się do wielkości okna. Ponadto istnieje możliwość optymalizacji zasobów.

Jednak opracowanie wersji adaptacyjnej jest procesem bardziej czasochłonnym, w związku z czym kosztowna część wydarzenia będzie również większa.

Responsywny design ma znaczenie dla zasobów, które nie mają dużej rotacji odwiedzających - sklepy internetowe, blogi, wizytówki, a także strony internetowe, ich głównym zadaniem jest dostarczanie treści.

Plusy i minusy wersji mobilnej

Wersja mobilna ma szybsze prędkości ładowania i łatwiejszą nawigację. Ponieważ odwiedzający widzi minimum rozpraszających informacji, prawdopodobieństwo pozytywnego działania z jego strony jest większe. Ponadto osobna wersja mobilna jest całkowicie niezależna od wersji stacjonarnej. Dzięki temu można pracować z nimi osobno.

Wadą tej koncepcji są pewne trudności w tej dziedzinie Promocja SEO... Ponieważ umieszczanie tej samej treści jest postrzegane jako duplikat, wymaga to oddzielnych środków, aby wyeliminować negatywny wpływ na proces promocji witryny. Biorąc pod uwagę fakt, że wersja mobilna nie jest uniwersalna, wymaga oddzielnej pozycji wydatków oprócz utrzymania strony głównej.

Ta opcja witryny jest odpowiednia dla dużych projektów, które już mają duży ruch w witrynie głównej, ale chcą zwiększyć lojalność wobec urządzeń mobilnych bez przeprojektowywania. W większości przypadków osobna wersja mobilna jest odpowiednia dla zasobów, w których ważna jest szybkość ładowania - sieci społecznościowe, usługi pocztowe, portale informacyjne.

Podsumowując, możemy tylko powiedzieć, że dziś uzasadnioną potrzebą dowolnego projektu internetowego jest możliwość poprawnego wyświetlenia strony na urządzeniach mobilnych. Sposób realizacji tego zależy od celów i zadań witryny, budżetu i możliwości.

Aby określić, który jest lepszy - responsywny projekt czy mobilna wersja strony, musisz najpierw zrozumieć, dlaczego to wszystko jest potrzebne.

Według comscore.com odsetek użytkowników przeglądających witryny z urządzeń mobilnych rośnie z każdym rokiem:

Baza aktywnych abonentów transmisja mobilna dane, świat, miliony ludzi, 2007–2015

W związku z tym opracowano nowe algorytmy dla wyszukiwarki, a także wprowadziliśmy dodatkowe czynniki rankingowe: teraz wyniki wyszukiwania uwzględniają stopień dostosowania witryny do urządzeń mobilnych (wygodny do przeglądania na urządzeniach mobilnych). W Google algorytm przyjazny dla urządzeń mobilnych został uruchomiony 21 kwietnia 2015 r. W Yandex - „Władywostok” 2 lutego 2016 r.

Wersja desktopowa strony oraz wersja dostosowana do urządzeń mobilnych

W jaki sposób wyszukiwarki określają, czy strona internetowa jest dostosowana do urządzeń mobilnych:

strony muszą zawierać treść, która nie wymaga przewijania w poziomie ani skalowania w celu wyświetlenia;
strona nie powinna zawierać elementów, które nie działają na wielu urządzeniach mobilnych - Flash, aplety Java i wtyczki Silverlight;
teksty na stronach powinny być czytelne bez skalowania;
linki powinny być wystarczająco rozmieszczone, aby można je było łatwo kliknąć.

Co najważniejsze, wyszukiwarki jednoznacznie pozycjonują strony internetowe - przyjazne dla urządzeń mobilnych lub nie.

Przez narzędzie google PageSpeed \u200b\u200bInsights (https://developers.google.com/speed/pagespeed/) możesz określić, jak szybko wczytują się Twoje strony internetowe, a także ich użyteczność. Wyniki PageSpeed \u200b\u200bmogą wynosić od 0 do 100 dla szybkości strony i wygody użytkownika, na przykład:

Wyniki 85 punktów i więcej są uważane za dobre.

Jeśli strona serwisu nie spełnia wymagań usługi, wydawany jest raport w postaci zaleceń dotyczących eliminacji problemów, na przykład:

Usługa ta służy do wstępnej diagnostyki i identyfikacji problemów na stronie internetowej.

Kiedy konieczne jest stworzenie wersji mobilnej lub responsywnej na strony internetowe?

Aby zrozumieć, czy warto dostosować witrynę do odbiorców „mobilnych”, należy przeanalizować ją w systemach analityki internetowej (Yandex.Metrica lub Google Analytics) przez obecność w kontekście urządzeń, z których użytkownicy odwiedzają witrynę. Jeśli ponad 15% odbiorców korzysta ze smartfonów lub tabletów, zaleca się opracowanie responsywnego układu lub wersji mobilnej. Ważne jest, aby wziąć pod uwagę również ruch w witrynie. Na przykład w przypadku witryn o dużej liczbie odwiedzających (od 1 000 000 i więcej) ten pasek jest zmniejszony, ponieważ nie można pominąć tak dużego segmentu ruchu w witrynie.

Mobilna wersja serwisu

wersja mobilna - osobna wersja lub osobny szablon przystosowany do wyświetlania na urządzeniach mobilnych. Może nie wyświetlać wszystkich bloków znajdujących się w głównej wersji witryny.

„Cecha specjalna” wersji mobilnej: po przejściu na nią zmienia się adres URL w pasku adresu przeglądarki - dodawany jest do niej prefiks „m”, na przykład: m.example.ru.

Oglądaj na monitorze komputera i na urządzeniu mobilnym: wersja mobilna różni się od głównej

Przykład strony internetowej z dostosowaną wersją mobilną: http://www.lamoda.ru/ (m.lamoda.ru).

Główne zalety mobilnej wersji serwisu

Mała waga, a co za tym idzie, duża prędkość pobierania. Jest to niezbędne dla użytkowników, którzy mają niską prędkość dostępu do Internetu (GPRS lub słabe 3G).
Wybór przez użytkownika wersji do wyświetlenia (mobilna czy główna).
Zgodność z wymaganiami wyszukiwarek dla wygody przeglądania serwisu na urządzeniach mobilnych.

Wady wersji mobilnej

Jeśli zajdzie potrzeba wprowadzenia zmian w serwisie, będą musiały zostać wprowadzone zarówno na zwykłej wersji serwisu, jak i na wersji mobilnej, czyli podwoi się ilość pracy.
Tworząc ją, często trzeba odrzucić część zawartości.
Ponieważ wersja mobilna i główna wersja serwisu znajdują się w różnych domenach, nie poprawia to czynników behawioralnych domeny głównej, czyli będzie niekorzystne dla optymalizacji SEO.

Jest to specjalny projekt stron internetowych, w którym elementy serwisu zmieniają swój rozmiar i położenie przy różnych rozdzielczościach wyświetlania. Witryna automatycznie dostosowuje się do wielkości urządzenia, na którym jest otwarta, czy to monitora PC, smartfona czy tabletu. Dzięki takiemu układowi strona będzie wygodnie i przejrzyście wyeksponowana różne urządzenia... Dzięki zastosowaniu adaptacyjnych technologii projektowania funkcjonalność witryny w ogóle nie ulega pogorszeniu.

Zobacz na monitorze komputera i na urządzeniu mobilnym - wersja adaptacyjna różni się od głównej

Przykład witryny z wersją adaptacyjną: http://www.mvideo.ru/.

Zalety responsywnego projektowania na urządzenia mobilne

Jeden adres URL dla wszystkich treści.
Elastyczny interfejs - możesz dostosować wygodny sposób wyświetlania witryny do dowolnej szerokości ekranu.
Responsywny design spełnia wymagania wyszukiwarek dla wygody przeglądania serwisu na urządzeniach mobilnych.
Jeśli witryna ma wersję responsywną, czynniki behawioralne stają się lepsze na urządzeniach mobilnych, a tym samym poprawia się ogólna wydajność witryny. Będzie to duży plus za ranking w wynikach wyszukiwania.

Wady responsywnego projektowania na urządzenia mobilne

Konieczność tworzenia oddzielnych układów stron serwisu dla każdej rozdzielczości wyświetlania.
Wersja responsywna, w przeciwieństwie do wersji mobilnej, nie może zostać przełączona tryb normalny... Oznacza to, że użytkownik nie ma możliwości wyświetlania witryny. Wada jest istotna, jeśli w wersji adaptacyjnej występują błędy - na przykład elementy są wyświetlane nieprawidłowo.
Złożoność dodawania nowego szablonu strony, ponieważ będą musiały zostać skonfigurowane, aby poprawnie wyświetlać się w wersji responsywnej. Jeśli dodasz informacje do istniejących szablonów stron, nie będzie problemów z wyświetlaniem.

Co jest lepsze: responsywny układ dla urządzeń mobilnych czy mobilna wersja strony?

Najlepszym rozwiązaniem dla strony internetowej jest użycie responsywnego układu dla urządzeń mobilnych. Pomimo wielu niedociągnięć, witryna z responsywnym układem jest bardziej funkcjonalna. Obecność szablonów stron oznacza również łatwość dodawania treści do witryny, w przeciwieństwie do wersji mobilnej, w której praca nad dodawaniem treści jest powielana, ponieważ w rzeczywistości istnieją dwie różne witryny. Dużym plusem jest fakt, że wersja responsywna poprawia czynniki behawioralne strony głównej. Jest to przydatne z punktu widzenia promocji i użyteczności. Na tej podstawie zalecamy dokonanie wyboru na korzyść układu responsywnego.