Dzisiaj większość ludzi przechodzi przez Internetgadżety mobilne - tablety, telefony, w związku z tym optymalizacja witryny również osiąga nowy poziom. Jeśli użytkownik przychodzi i widzi, że strona nie jest zoptymalizowana dla urządzeń mobilnych: Nie można wyświetlić obraz, ściągnął przycisk, małe i nieczytelne czcionki, projektowanie przekrzywienie - 99 100%, że będzie on wyjdzie i zacznie szukać innego bardziej wygodne. Robot będzie umieścić czek, że zasób nie jest istotne, t. E. nie pasuje do zapytania. Dlatego też projekt strony musi być koniecznie dostosowany do różnych urządzeń mobilnych. Co to jest mobilna wersja strony, jak to zrobić i jaki jest najlepszy sposób jej zastosowania? Przeczytaj więcej w tym artykule.

Istnieją cztery kluczowe sposoby dostosowania witryny do wersji mobilnej.

mobilna wersja strony jak zrobić

Pierwszy sposób - adaptacyjny projekt

Szablony adaptacyjne sugerują zmianęzdjęcia strony w zależności od wielkości ekranu. Z reguły są one ustawione na standardowe 1600, 1500, 1280, 1100, 1024 i 980 pikseli. Do wdrożenia użyj CSS3 Media Queries. Projekt witryny nie zmienia się w tym samym czasie.

Zaletami tej metody są:

  • wygodna konstrukcja, ponieważ sama konstrukcja dostosowuje się do parametrów ekranu, a każda aktualizacja nie wymaga opracowania projektu od podstaw, tylko poprawne CSS i HTML;
  • jeden adres URL - użytkownik nie musi pamiętaćkilka nazw, nie ma potrzeby przekierowania (przekierowania z jednego adresu do drugiego), co może komplikować pracę webmastera, a wyszukiwarka jest łatwiejsza do sortowania i pozycjonowania zasobu za pomocą jednego adresu.

Oczywiście szablony adaptacyjne mają swoje własnewady, które, nawiasem mówiąc, są więcej niż zasługi. Mimo to wielu programistów stosuje się do tej koncepcji, na przykład korporacja Google, której mobilna wersja witryny ma adaptacyjny wygląd. Tak więc wadami są:

  • Adaptacyjny projekt nie obsługuje tych samych zadań dlaurządzenie mobilne, jak na komputerze. Jeśli jest to na przykład mobilna wersja strony internetowej banku, gdzie użytkownik ma większe szanse na uzyskanie informacji o kursie wymiany lub najbliższych bankomatach, ten projekt wystarczy. Ale jeśli jest to złożony, strukturalny zasób z wieloma sekcjami i podrozdziałami, to adaptacyjny układ raczej nie spodoba się odwiedzającym.
  • Powolne pobieranie zamienia Twoją ulubioną witrynę wznienawidzony. Dotyczy to zwłaszcza zasobów, w których występuje wiele animacji, klipów wideo, okienek pop-up i innych aktywnych elementów. Ze względu na dużą wagę strona po prostu "zwolni", użytkownik wpadnie w złość i odejdzie, a pozycje wyszukiwania witryny spadną.
  • Niemożliwość wyłączenia wersji mobilnej - więcejjedna znacząca wada. Jeśli jakiś element jest ukryty w takim układzie, nie można go otworzyć, w przeciwieństwie do witryn, w których można go wyłączyć i przejść do zwykłej domeny.

Niemniej jednak taka mobilna wersja strony jest szybka,bez specjalnych umiejętności i kosztów pozwala dostosować zasób do dowolnego gadżetu. Z uwagi jednak na wymienione niedociągnięcia, z uwagi na wymienione niedociągnięcia, odpowiednie są małe, proste zasoby z minimalną ilością informacji i multimediów, bez skomplikowanej nawigacji i animacji. W przypadku złożonego ośrodka odpowiednie są dwie inne metody.

projekt strony internetowej

Druga metoda to osobna wersja strony

Ta metoda jest bardzo powszechna i często z powodzeniemsprawia, że ​​strona na urządzeniu mobilnym jest wygodniejsza w percepcji. Jego istotą jest stworzenie oddzielnej wersji strony, opracowanej dla aplikacji i znajdującej się na oddzielnym adresie URL lub poddomenie, na przykład m.vk.com. W tym samym czasie zachowana zostaje główna funkcjonalność, a wygląd strony wygląda inaczej. Zalety tej metody są oczywiste:

  • przyjazny interfejs użytkownika;
  • łatwo zmienić i wprowadzić zmiany, ponieważ wersja istnieje oddzielnie od głównego zasobu;
  • ze względu na niewielką wagę oddzielnej wersji strony jest znacznie szybszy niż szablon adaptacyjny;
  • najczęściej istnieje możliwość przejścia do głównej wersji strony za pomocą telefonu komórkowego.

Ale tutaj także były braki:

  • Wiele adresów - wersja stacjonarna i mobilnawitryna. Jak sprawić, by użytkownik zapamiętał dwie opcje? webmasterów często przepisywany przekierowanie (przekierowanie) do dekstopnoy wersji dla telefonów komórkowych, ale jeśli ta strona w wersji mobilnej nie istnieje, użytkownik otrzyma komunikat o błędzie. Tutaj występują trudności z wyszukiwarek, co jest trudne do rangi 2 z tych samych zasobów, a to ma bezpośredni wpływ na promocję.
  • Mobilna wersja strony z komputera, jeśli użytkownik omyłkowo się z nią połączy, będzie wyglądała śmiesznie, co również może wpłynąć na frekwencję.
  • Ta wersja jest często mocno ograniczona, na pulpicie, więc użytkownik uzyska bardzo ograniczoną funkcjonalność. Ale w tym samym czasie, jeśli czegoś brakuje, odwiedzający może przejść do pełnej wersji strony.

Ogólnie rzecz biorąc, osobna witryna mobilna usprawiedliwia sięi jest najczęstszym sposobem dostosowania zasobu do urządzeń mobilnych. Jest popularny wśród dużych sklepów internetowych, na przykład Amazon.

adaptacyjne szablony

Trzeci sposób to projektowanie RESS

Wyszukiwarka Google aktywnie obsługuje tokierunek projektowania mobilnego. Jest to najbardziej złożona, kosztowna, ale skuteczna metoda dostosowania witryny do telefonu lub tabletu. Nazywa się RESS. Jest to kierowanie na zasoby w aplikacji mobilnej, którą można pobrać oddzielnie dla każdego urządzenia. Dla Androida - z Google Play i Apple - z iTunes.

Takie aplikacje są szybkie, bezpłatne, wygodne,mają możliwość dostosowania się do różnych rodzajów informacji, podczas gdy pamięć telefonu i ruch internetowy nie są spożywane w taki sam sposób, jak podczas wizyty w witrynie za pośrednictwem przeglądarki. Można je łatwo wprowadzić, ponieważ link zawsze będzie widoczny na ekranie i nie ma potrzeby wprowadzania złożonej nazwy w pasku adresu przeglądarki.

Oczywiście są tu i ich wady, takie jakzłożoność rozwoju, wysokie koszty pracy dużej liczby programistów, konieczność wykonania kilku wariantów układu. Czasami urządzenie mobilne nie jest rozpoznawane przez aplikację. Konieczne jest regularne wsparcie techniczne, usuwanie braków. Niemniej jednak opcja ta jest uważana za najlepszą z trzech oferowanych ze względu na jej wydajną i wydajną pracę.

google wersja mobilna witryny

Najtańszy sposób na stworzenie strony mobilnej

Wszystkie powyższe metody zakładająi nie zawsze jest to długa i złożona, ale wciąż płatna praca webmastera. Jeśli nie widzą pilną potrzebę takiego rozwoju, można zbliżyć się prostą i darmową mobilną wersję serwisu. Jak ułatwić?

Pobierz specjalne szablony (wtyczki) dlaprojekt adaptacyjny. Na przykład WP Mobile Detector, pakiet WordPress Mobile Pack, WPSmart Mobile i inne. Pomogą one poprawnie wyświetlać witrynę w telefonie, a jednocześnie otrzymasz kilka wskazówek, które powinny zostać poprawione w celu lepszego dostosowania strony do wersji mobilnej.

Oczywiście ta metoda jest mało odpowiedniapoważne zasoby. Ta bezpłatna możliwość przeznaczona jest raczej dla małych i prostych witryn, blogów i kanałów informacyjnych. Nie zapominaj, że wyszukiwarka Google, taka jak Yandex, dziś stawia poważne wymagania mobilnym wersjom, więc istnieje duża szansa na obniżenie pozycji za pomocą tej metody.

Dzięki tej metodzie najprawdopodobniej bannery reklamowe i pop-up zostaną odcięte, ale strona załaduje się szybko i bez "opóźnień".

mobilna wersja strony internetowej na Androida

Zasady tworzenia wersji mobilnych

Nieważne, mobilna wersja strony jest tworzona za darmolub przy pomocy personelu webmasterów odbywa się on w systemie RESS lub przy użyciu adaptacyjnego szablonu. Najważniejszą rzeczą jest to, że do skutecznej pracy wymagane jest przestrzeganie kilku bardzo ważnych zasad. Jaka powinna być mobilna wersja strony? Jak sprawić, by był produktywny, wydajny i produktywny?

mobilna wersja strony z komputera

Usuwamy wszystkie niepotrzebne

Minimalizm jest czymś, do czego powinno dążyćtwórca mobilnej wersji strony. Wyobraź sobie, jak trudno jest postrzegać informacje pełne kolorów, przycisków, banerów i które musisz przewijać bez końca w poszukiwaniu odpowiedniego materiału. Projekt mobilny powinien być prosty i czysty. Wybierz 2-3 kolory, aby oddzielić miejsce (na przykład pod marką). Lepiej, jeśli jeden z nich jest biały. Podziel przestrzeń małego ekranu na czyste i czytelne strefy. Klucze wirtualne powinny być widoczne, aby użytkownik wyraźnie wiedział, gdzie kliknąć i zobaczył - to jest towar, oto formularz do wypełnienia danych, tutaj znajduje się informacja o dostawie i płatności.

Wszelkie dodatkowe opcje, które mogą być przydatnew wersji komputerowej i ułatwiłoby życie użytkownikowi, przyniosą tylko komplikacje. Pozostaw tylko najważniejsze elementy. Animacja, banery reklamowe, multimedia najprawdopodobniej spowolnią działanie witryny lub aplikacji i odciągną uwagę od głównej rzeczy.

Wyrównanie

Kwestia wyrównania jest nie mniej ostra,ponieważ jeśli zrobisz to niepoprawnie, użytkownik otrzyma tylko zakończenia ważnych słów. Wyrównanie po lewej i w pionie uważa się za powszechne. Wyobraź sobie, jak przeglądasz wiadomości w swoim telefonie. Robisz to od góry do dołu, ale nie po lewej ani prawej stronie.

Ujednolicenie

Kiedy nie ma możliwości długiego łańcucha przejść,Spróbuj połączyć kilka kroków w jeden. Na przykład witryna wymaga wprowadzania danych w kilku etapach - nazwy, a następnie adresu, w którym każdy dom zawiera oddzielny dom, ulicę, mieszkanie itp. Aby nie zmuszać użytkownika do prób uzyskania dostępu do wielu małych komórek, poproś go o wypełnienie tylko 2 - imię i nazwisko oraz adres.

I wycofanie się

Czasami, wręcz przeciwnie, musisz się rozłączyćdużo informacji. Na przykład w rozwijanym menu masz listę ponad 80 miast, w których odbywa się dostawa. Pogrupuj je według regionu, aby użytkownik nie musiał przewijać tej olbrzymiej listy. Gdy wskaże regionalny ośrodek lub obszar, straci kolejną listę miast.

Listy kontrolne

Przy okazji, o listach. Obydwa są ustalone w kolejności alfabetycznej lub innej, z podstawieniem. Wybór ich zależy od tego, co zostanie wymienione.

Naprawiono wygodnie w przypadku, gdyużytkownik dokładnie wie, czego szuka. Na przykład miasto, numer lub data. Druga opcja jest odpowiednia dla długich nazw złożonych lub dla przypadków, w których występuje wiele odmian o tej samej nazwie, a każda lista rozwijana zbliża użytkownika do celu. Wariant z automatyczną substytucją jest częściej używany, gdy użytkownik potrzebuje pomocy. Na przykład witryna do robienia na drutach ofert zakupu igieł do robienia na drutach. Użytkownik wpisuje zapytanie "Metalowe druty", aw podpowiedzi widzi "Szprychy 5 mm", "Szprychy 4,5 mm" itp.

Wypełnij automatycznie

Ten akapit jest szczególnie istotny w przypadku witryn, w których jest cośsprzedawać online, i musisz wypełnić standardowe formy płatności, dostawy itp. Jeśli dana osoba dokonuje zakupu z telefonu, najprawdopodobniej nie ma czasu, aby dostać się do komputera, co oznacza, że ​​proces zakupu powinien być tak szybki i wygodny, jak to możliwe.

W tym celu formularze mogą zawierać już wypełnionedanych, możesz uciec się do najbardziej popularnych odpowiedzi. Na przykład wstaw dzisiejszą datę, metodę płatności gotówką, miasto, jeśli pracujesz w jednym regionie. Można je zmienić, ale jeśli trafisz cel, czas użytkownika zostanie zapisany.

Wszystko jest czytane, wszystko jest widoczne

Tworząc mobilną wersję strony, pamiętajże wszystkie telefony są różne, a także wzrok. Być może Twoja strona będzie wyświetlana z małego ekranu, więc czcionki powinny być proste i czytelne, przyciski - wystarczająco duże, aby można je było kliknąć i nie dostać się na inną stronę, a obrazy powinny być otwierane osobno, duże, zwłaszcza jeśli chodzi o Internet do sklepu.

Niektóre statystyki

Mówiąc o adaptacji strony na urządzenia mobilne, nie można korzystać ze statystyk, aby zrozumieć, jak ważny jest proces promowania sieci.

Liczby są następujące. Obecnie gadżety są używane przez 87% populacji, najwyraźniej z wyjątkiem najmłodszych dzieci i starszych osób. Ekonomiści przewidują wzrost mobilnego handlu 100 razy przez następne 5 lat. Jednocześnie tylko 21% witryn jest przystosowanych do pracy z urządzeniami mobilnymi. W związku z tym ruch internetowy i rynek e-commerce zajmują tylko niewielką, 5-tą część.

Pomyśl o tych liczbach. Czy ma sens dostosowywanie zasobów? Oczywiście, tak. Co więcej, o ile na rynku jest tyle wolnej przestrzeni, możesz zabrać ze sobą swój własny segment.

mobilna wersja strony za darmo

Gdzie jest wersja mobilna?

Wersja mobilna jest odpowiednia dlakażda platforma, która chce uzyskać wysoką ocenę. W końcu jest to bezpośredni wpływ na użytkownika, tworząc dla niego wygodne warunki do pozostania na Twojej stronie.

Bez wersji mobilnej nie może istnieć:

  • portale informacyjne, ponieważ większość z nich przegląda telefon w drodze do pracy lub nauki;
  • sieci społecznościowe - z tego samego powodu plus istnieje czynnik komunikacji on-line, co oznacza, że ​​należy stworzyć wygodny i zrozumiały czat;
  • witryny referencyjne, witryny z nawigacją itp., gdzie ludzie zwracają się, gdy szukają czegoś;
  • sklepy internetowe - możliwość przyciągnięcia kupujących, którzy nie spędzają czasu na zakupach, ale kupują wszystko za pośrednictwem mobilnego Internetu.

Zamiast kończyć

Dziś technologie mobilne są wAktywny wzrost i rozwój, dlatego dążąc do przywództwa na rynku, każda firma powinna zapewnić, że jej zasoby internetowe spełniają wymagania. Ze względu na rosnące wymagania użytkowników witryny muszą być stale aktualizowane i dostosowywane do różnych urządzeń. Oczywiste jest, że jeśli dana osoba czuje się niewygodnie, aby znaleźć się na konkretnym zasobie, nie może uzyskać informacji o produkcie lub cenie, złożyć zamówienia, dowiedzieć się o dostawie, znajdzie stronę, gdzie to wszystko staje się możliwe. Dlatego, aby wygrać konkurencję, ważne jest posiadanie elastycznego, wygodnego, funkcjonalnego i interesującego zasobu.

Stwórz mobilną wersję stronyAndroid i iOS. Aby to zrobić, należy wybrać jeden z powyższych sposobów Redesign - adaptacyjnej matrycy, tworząc nową stronę na subdomenie i przejście do niej przez przekierowanie wykorzystanie darmowych szablonów lub stworzyć aplikację mobilną dzięki któremu użytkownik może wygodnie wejścia i pozostania na stronie.

Takie podejście pomoże nie tylko utrzymać lojalność dotychczasowych klientów, ale także da szansę na przyciągnięcie nowych odwiedzających.

</ p>