Od lata 2015 roku Google zmieni swoje działanie w taki sposób, aby przewagę w wynikach wyszukiwania miały te strony, które posiadają wersję mobilną. To i świadomość, że coraz więcej osób korzysta ze smartfonów do przeglądania sieci, zmotywowało mnie do rozwoju wersja mobilna Twoja strona.
Następnie opowiem Ci o swoim doświadczeniu i jak możesz to zrobić sam.

Oczywiście główną cechą przy tworzeniu strony dla urządzenia mobilne jest znacząco mniejszy rozmiar ekran w porównaniu do pełnoprawnego monitora komputera, laptopa czy tabletu. W zasadzie tablet jest również urządzeniem mobilnym, ale wymiary jego ekranu są takie, że w większości przypadków pełna wersja zasobu wygląda na nim świetnie. Dlatego pod wersją mobilną dalej będę miał na myśli wersję na telefon, a właściwie smartfon.

Trochę teorii

Większość nowoczesnych witryn działa w oparciu o taki lub inny system zarządzania treścią (CMS) lub prosty silnik WWW. Za wygląd strony w silniku WWW, tj. następnie, w jaki sposób odwiedzający zasób widzą go, odpowiadają na tak zwane szablony.
Szablon to z reguły zestaw plików, które określają wygląd witryny. Każdy silnik korzysta z własnych szablonów, ale wszystkie mają coś wspólnego – jest to plik(i) z tabelami style css i plik(i) odpowiedzialny za układ strony, może to być PHP, ASP, itp. Możliwe są bardziej egzotyczne opcje, ale w każdym przypadku wyjściem silnika internetowego będzie CSS i HTML, i być może coś innego. Cóż, dygresję.

Jednym ze sposobów, aby Twoja witryna wyglądała równie dobrze na wszystkich urządzeniach, jest użycie wielu szablonów dla różnych typów urządzeń.
Na przykład mogą być dwa:

  • Pierwszy jest dla pełnoprawny komputer, laptop, tablet, czyli urządzenie z dużym ekranem.
  • Drugi dotyczy smartfona lub innego urządzenia, którego ekran jest znacznie mniejszy.

W zależności od urządzenia, z którego przybył odwiedzający, silnik internetowy użyje do wygenerowania jednego lub drugiego szablonu wygląd zewnętrzny strona, jej projekt, rozmieszczenie elementów i treści.
Niezwykle ważne jest tutaj zrozumienie, że nie da się stworzyć jednego szablonu, który wyglądałby równie dobrze zarówno na telefonie, jak i laptopie. W pewnym stopniu będzie to kompromis, a bynajmniej nie najlepszy.

Możliwe jest też skorzystanie z trzech lub nawet więcej szablonów np. z osobnej wersji strony na tablet, ale to już nieco inna historia, której nie będę tutaj rozważał.
Wróćmy do szablonu dla wersji mobilnej.

W zasadzie taki szablon jest lekką wersją pełnego, różniącą się konstrukcją, wielkością i rozmieszczeniem elementów.
To uproszczenie wynika przede wszystkim z faktu, że rozdzielczość ekranu nowoczesne smartfony zaczyna się z reguły od 800x480 pikseli z ekranem o przekątnej około 4 cali.
Oznacza to, że podczas opracowywania należy obliczyć w przybliżeniu ten rozmiar.

Niska rozdzielczość ekranu sprawia, że ​​duże elementy, a także elementy ułożone w rzędzie, po prostu nie zmieszczą się w poziomie.

Jest to szczególnie ważne, jeśli samo urządzenie znajduje się poziomo.

Jednocześnie w smartfonie gęstość pikseli na ekranie jest 2-3 razy większa niż na monitorze komputera lub laptopa, co prowadzi do tego, że zwykły rozmiar czcionki będzie wyglądał na bardzo mały. Aby coś zobaczyć, będziesz musiał użyć powiększenia, stale pomniejszając lub powiększając ten lub inny obszar strony, co jest wyjątkowo niewygodne.
Na tej teorii, więcej niż wystarczająco, teraz o wszystkim bardziej szczegółowo.

Konfigurowanie silnika internetowego

Jak już wcześniej napisano, system zarządzania treścią odpowiada za wybór takiego lub innego szablonu.
Niektóre silniki internetowe są początkowo w stanie określić, z którego urządzenia wszedł odwiedzający, i zawierają taki lub inny szablon, inne będą musiały zainstalować odpowiednie rozszerzenia.

Na przykład pokażę Ci konfigurację Mobile Detector firmy BlackRed Designs, która ma minimum ustawień, a wszystko, co musisz zrobić po zainstalowaniu, to opublikować ją i wybrać szablon, który będzie używany do wyświetlania stron na urządzeniach mobilnych.

Oczywiście szablon dla wersji mobilnej powinien różnić się od głównego.
W moim przypadku zrobiłem kopię głównego szablonu, zmieniłem jego nazwę, a następnie zacząłem wprowadzać zmiany. Takie podejście pozwoliło uczynić wersję mobilną jak najbardziej zbliżoną stylistycznie do głównej, a jednocześnie zaoszczędzić dużo czasu.
Następnie omówię szczegółowo kluczowe zmiany, które zostały wprowadzone.

Utwórz szablon

Stworzenie szablonu całkowicie zależy od używanego silnika internetowego i nie można opowiedzieć o wszystkim w ramach tego materiału. Jest jednak kilka wspólnych rzeczy, które są wspólne dla wszystkich.

Metatagi i skalowanie

Jedną z typowych rzeczy, które muszą być obecne niezależnie od używanego silnika, jest specjalny metatag - rzutnia.

Ten znacznik matematyczny musi znajdować się w sekcji głowa obok reszty metatagów i wygląda mniej więcej tak:

Metatag informuje wyszukiwarki i urządzenia mobilne, że mają przed sobą mobilną wersję witryny, a także określa początkową skalę strony.

Pamiętaj, na samym początku pisałem o tym, jak wziąć pod uwagę ten lub inny element na stronie na niezoptymalizowanych witrynach, często musisz używać zoomu, powiększania i pomniejszania oddzielne sekcje strony? Tak więc parametr skala początkowa=1,0 po prostu ustawia początkowe skalowanie strony na 100%.
Jeśli nie określisz początkowej skali dla urządzenia mobilnego, to może ona ustawić ją niezależnie w zależności od systemu urządzenia, np. Android, iOS, Telefon Windows, a także używana przeglądarka, np. Firefox, Chrome, Safari, Opera itp.
W pierwszej kolejności lepiej tego unikać. Dla tych, którzy nie uznają skali za wygodną, ​​będą mogli ją dowolnie przeskalować, odpowiednim gestem.

Granice witryny

Jeśli dla pełna wersja Witryna w szablonie wykorzystuje dopełnienie z granic przeglądarki, na przykład w celu wyróżnienia treści:

ciało (
margines górny: 20px;
margines lewy:100px;
margines prawy:100px;
obramowanie: stałe 1px #dfdfdf;
}

W przypadku wersji mobilnej jest to już utrata i tak już niewielkiej powierzchni użytkowej, którą lepiej wykorzystać w 100%;

ciało (
szerokość:100%;
}

Kapelusz

Z reguły nie ma zasadniczych różnic między wersją mobilną a pełną w nagłówku, a tutaj trzeba tylko pamiętać, że wszystkie elementy mieszczą się na smartfonie i odpowiednio wyglądają.
Może zajść potrzeba lekkiej zmiany rozmieszczenia elementów, tak jak w moim przypadku przesunięcie paska wyszukiwania od prawej krawędzi:

Wyszukiwanie nagłówków
{
wyrównanie tekstu:do prawej;
pływak:w prawo;
}

Jeden poziom niżej i pozycja w lewo:

Wyszukiwanie nagłówków
{
margines górny:5px;
wyrównanie tekstu:lewo;
}

Menu

Na mojej stronie w wersji standardowej pozycje menu ułożone są poziomo, jedna po drugiej.

Topmenu ul li
{
wyświetlacz: wbudowany;
}

Topmenu li a
{
Blok wyświetlacza;
pływak: lewy;
}

Oczywiście wszystkie pozycje menu następujące po sobie nie zmieszczą się na wszystkich smartfonach, zwłaszcza gdy jest zorientowane pionowo. Dlatego też bardziej poprawne jest ustawienie menu w pionie.

Topmenu ul li (
Blok wyświetlacza;
}

Menu główne li a (
Blok wyświetlacza;
}

Czcionka

Z reguły do ​​pełnej wersji strony używana jest czcionka 12-13px:

p, li, dt, dd, legenda
{
rozmiar czcionki: 13px;
}

Ale jak już wcześniej napisano, telefon ma znacznie większą gęstość pikseli, oczywiste jest, że rozmiar czcionki również powinien być większy, w przeciwnym razie tekst będzie zbyt mały i trudny do odczytania. Dlatego zaleca się, aby główna czcionka miała 16 pikseli:

p, li, dt, dd, legenda
{
rozmiar czcionki: 16px;
}

Z tych samych względów do reszty wybierany jest rozmiar czcionki elementy tekstowe, na przykład tak:

h1(
rozmiar czcionki: 24px;
}

h2 (
rozmiar czcionki: 22px;
grubość czcionki: normalna
}

h3(
rozmiar czcionki: 17px;
margines górny: 5px;
margines-dolny:0px;
}

h4 (
rozmiar czcionki: 16px;
}

Obrazy

W treści stron, wraz z informacje tekstowe obrazy stale się pojawiają. Nie mam tu na myśli elementów projektu, ale obrazy, które znajdują się w treści, w treści postów, artykułów itp.
Jak pisałem wcześniej, rozdzielczość ekranu nowoczesnych smartfonów zaczyna się od 800x480 pikseli. Oznacza to, że rozmiar obrazu nie powinien przekraczać 480 pikseli, ponieważ w przeciwnym razie nie zmieści się na ekranie i będzie wymagane skalowanie.

Z drugiej strony, jak na obraz wysokiej jakości, 480 pikseli w pełnej wersji strony jest dość małe.
Jako mały trik konstrukcja formularza może służyć:

obrazek
{
maksymalna szerokość:100%;
wysokość:auto;
}

Ten wpis mówi, że szerokość obrazu nie może być większa niż 100%, czyli większa niż szerokość ekranu, na przykład 480px. Drugi wpis pozwala zachować proporcje obrazu.
Idealnie, w przypadku wersji pełnej i mobilnej, pożądane jest użycie różnych rozmiarów obrazów, ale nie jest to już rozwiązywane za pomocą jednego szablonu i wymaga poważniejszych środków.

stoły

Wraz z tekstem i informacje graficzne tabele często znajdują się na stronach internetowych. A jeśli zawierają dość dużo informacji lub komórki zawierają duże bloki lub obrazy, to nie wszystkie zmieszczą się na ekranie.
W niektórych przypadkach przydatne może być napisanie czegoś takiego:

tabela tr td
{
Blok wyświetlacza;
}

Ten projekt sprawia, że ​​każda komórka jest elementem blokowym, tym samym niejako rozszerzając rzędy tabeli w pionie. To nie jest najlepsze najlepszym rozwiązaniem ale w niektórych przypadkach daje dobry wynik.
Jeśli chodzi o tabele, wszystko zależy od konkretnego przypadku i być może nie ma uniwersalnego rozwiązania.

Teraz pora porozmawiać o tym, jak sprawdzić wyniki swojej pracy, bo po prostu nie da się opracować szablonu bez zobaczenia, jak będzie się wyświetlał na smartfonie.

Sprawdzanie wyniku, testowanie

Oczywiście w procesie tworzenia szablonu najlepiej sprawdzić, jak wygląda bezpośrednio na telefonie. Najlepiej na kilku różnych, pod kontrolą różne systemy: Android, iOS, Windows Phone, a także w kilku przeglądarkach Firefox, Chrome, Safari, Opera itp. To jedyny sposób, aby mieć całkowitą pewność, że wszystko wygląda zgodnie z przeznaczeniem.

Oczywiste jest, że trzymanie kilku telefonów pod ręką nie zawsze jest wykonalne i niezbyt wygodne. W tym celu możesz użyć emulatorów dla urządzeń mobilnych, przeglądarek itp.

Aby sprawdzić w środowisku iOS, dla iPhone'a i iPoda, istnieje specjalne środowisko programistyczne firmy Apple - Xcode. Z jego pomocą możesz emulować prawie każde urządzenie Apple.

Niestety, Xcode działa tylko pod Mac OS i prawie jedynym sposobem na uruchomienie go na PC jest stworzenie maszyny wirtualnej.

Dość ciekawym narzędziem weryfikacyjnym jest Firefox OS Simulator, będący dodatkiem do Przeglądarka Firefox. Możesz go pobrać pod adresem:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

W rzeczywistości emulowane jest tutaj pełnoprawne urządzenie pod Firefox OS.

Ponadto w procesie opracowywania szablonu przydatne jest przedstawienie zwykłej przeglądarki jako przeglądarki mobilnej. W przypadku FireFox odbywa się to za pomocą dodatku Agent użytkownika Switcher, który można zainstalować stąd:
https://addons.mozilla.org/en/firefox/addon/user-agent-switcher/

W takim przypadku masz możliwość skorzystania z dość potężnych narzędzi do tworzenia stron internetowych wbudowanych w sam FireFox.

Oczywiście w innych przeglądarkach są podobne narzędzia, ale są to czysto indywidualne preferencje.

Poza wszystkim innym Wyszukiwarka Google Warto również sprawdzić zasób pod kątem jego „mobilności”, bo tylko w tym przypadku strona zyska przewagę nad innymi. Możesz sprawdzić, czy wszystko się podoba wyszukiwarce pod adresem:
https://www.google.com/webmasters/tools/mobile-friendly/

Aby mieć całkowitą pewność, że Google jest zadowolony ze wszystkiego, wskazane jest sprawdzenie wszystkich stron witryny. Możesz też wyświetlić element „Widoczność mobilna” w narzędziu dla webmasterów pod adresem:
http://www.google.com/webmasterzy/

Wniosek

W moim artykule starałem się nie skupiać na konkretnym silniku internetowym i mówiłem o wspólne podejścia przy tworzeniu i testowaniu mobilnej wersji serwisu. Oczywiste jest, że oprócz głównych punktów, które opisałem wcześniej, jest wiele innych, ale po prostu niemożliwe jest ich pełne omówienie, zwłaszcza w ramach jednego artykułu. Dlatego jeśli masz jakieś pytania, lub potrzebujesz zrobić mobilną wersję strony, zostaw komentarze, pisz przez sekcję kontaktów, a ja zawsze postaram się pomóc!

Ruch mobilny rośnie i zajmuje średnio już około 25% wszystkich odwiedzin. Jeśli wcześniej utrata tych odwiedzających była nieznaczna, teraz jest to co 4 lub 5 użytkowników. Myślę, że statystyki nie są potrzebne. Jesteśmy ściśle i poważnie zaangażowani w rozwój nowej mobilnej wersji widżetu. Zebraliśmy wszystkie doświadczenia poprzednich błędów i tygodniami testowaliśmy wyniki. Ponownie rozwijaliśmy widżet mobilny, nie ulepszając naszej własnej witryny. W rezultacie opracowaliśmy listę najbardziej śmiertelnych błędów w mobilnej wersji strony. Przeszedłem przez błędy projekt mobilny oraz układ mobilny. Wszystkie te błędy zabijają konwersję ruchu mobilnego. I czas zwrócić na to uwagę:

1. Zbyt długie formy łapania.

To prawdziwy zabójca konwersji na każdej stronie! Wersje mobilne są na to szczególnie wrażliwe, ponieważ wypełnianie ankiet przez telefon jest wyjątkowo niewygodne. Pozbądź się ich.
Przykład pokazuje, jak kompetentnie postąpili faceci z Tinkoff Bank, którzy rozbili długi wniosek „o pożyczkę” na kroki. Wypełniając tylko 4 pola, odwiedzający stanie się leadem, a jeśli odpadnie na drugim etapie, to jego kontakty pozostaną.

2. Numer telefonu firmy jest wskazany bez +7 lub jako obrazek.

To po prostu piekło! Dla takich stron jest specjalne miejsce w piekle, gdzie zamiast 1 kliknięcia trzeba zapamiętać numer, a następnie wpisać go samodzielnie. Bzdury! A jeśli ja prowadzę?

3. Korzystanie z Flasha w witrynie lub treści, których nie można odtwarzać na urządzeniach mobilnych.

Pożądane jest, aby wersja mobilna całkowicie wykluczyła takie treści. Nie będzie działać poprawnie i sprawi wiele trudności odwiedzającym. Wideo nie będzie działać, gra nie będzie działać, a specjalna animacja w menu spowoduje korozję mózgu. Jabłko urządzenia z systemem iOS w ogóle nie obsługują Animacja Flash. Usuń niepotrzebne, po co komplikować przeglądanie.

4. Widgety i wyskakujące okienka w witrynie, które nie są przyjazne dla urządzeń mobilnych.

Konsultanci online, widgety oddzwaniania, social. udostępnienia, kolektory e-maili – te narzędzia pomogą zwiększyć konwersję serwisu, ale jeśli nie są do tego przystosowane ruch mobilny, załaduj witrynę, zablokuj zawartość, wtedy najprawdopodobniej wyrządzą więcej szkody niż pożytku. Dlatego po zainstalowaniu usługi innej firmy sprawdź swoją witrynę na urządzeniach mobilnych.

Jak poprawnie sprawdzić widżet i na co zwrócić uwagę, zobacz krótką recenzję wideo:

5. Brak dostosowanej wersji mobilnej. Wiele przeglądarek i wiele platform.

Jakie są korzyści z posiadania wersji mobilnej?
Po pierwsze, wyszukiwarki dają pierwszeństwo przy wydawaniu. W ten sposób Google oznacza witryny jako „przyjazne dla urządzeń mobilnych”:

Po drugie, użytkownicy mogą wygodnie przeglądać Twoją witrynę z różnych urządzeń.
W tym celu wersja mobilna musi działać poprawnie na wszystkich typach urządzeń mobilnych, w tym na telefonach komórkowych i tabletach o różnych rozmiarach ekranu. Niezależnie od platformy, producenta czy przeglądarki. Tak, to oczywiste, ale to wciąż najważniejsze kryterium.

Istnieją 3 kluczowe problemy z szybkością witryny - rozmiar, odstępy i widżety. Zwykle dla użytkownika mobilnego nie są wymagane żadne efekty specjalne na stronie, wystarczy zwykły układ strony bez „dzwonków i gwizdków”. Opcjonalny ekran telefon komórkowy, najczęściej w niskiej rozdzielczości, dzięki czemu użytkownicy mobilni mogą „wysyłać” mniejsze obrazy (i używać bardziej progresywnego formatu, takiego jak WebP).

Aby rozwiązać problem odległości, musisz upewnić się, że hosting witryny jest zwykle dostępny z głównych sieci. operatorzy komórkowi. Optymalne byłoby umieszczenie go w dobrym moskiewskim (lub regionalnym - w przypadku projektów regionalnych) centrum danych, które zapewnia dobrą łączność z sieciami operatorów komórkowych. Hosting zagraniczny nie jest zbyt odpowiedni (i ma szereg problemów z szybkością przesyłania danych z zagranicy).

Do kompletne rozwiązanie problemy z szybkością i dostępnością zarówno strony mobilnej, jak i zwykłej, można również skorzystać ze specjalistycznych usług. Na przykład Airi.rf

9. Nieprawidłowe przekierowanie. Brak przejścia na pełną wersję serwisu.

Oczywiście wszyscy użytkownicy mobilni powinni mieć dostęp do mobilnej wersji witryny, ale czasami typowe błędy w przekierowaniu.
Na przykład, jak to się dzieje?

Użytkownik wyszukuje określony produkt w Yandex i trafia do Ciebie. System wykrywa wpis z telefonu komórkowego i przekierowuje do: strona główna wersja mobilna, a nie ta, której potrzebuje klient. Musisz ponownie wyszukać ten produkt na stronie lub spróbować przejść do konkurencji.

Dodatek: Wersja mobilna nie zawsze wystarcza, być może ukryłeś funkcje, linki, których potrzebuje klient, lub ogólnie klient jest przyzwyczajony do wersji na komputery stacjonarne. Zawsze zostawiaj opcję powrotu do pełnej wersji serwisu.

10. Autouzupełnianie. Włącz wybieranie.

Konwersja rośnie, jeśli zmniejszymy opór klienta. Każde pole może być wygodniejsze do wypełnienia. Aby to zrobić, piszemy odpowiednio:

Dodatek dla wygody
Niewiele osób wie, że witrynę na pulpicie można dodać do zakładek dla szybki dostęp. Ikona wygląda jak aplikacja i zostanie przypięta do ekranu głównego użytkownika.

Jak to zrobić:
Zrób ikonę 180px na 180px (bez zaokrągleń) i dodaj tag na stronie

Mam nadzieję, że te 10 punktów pomoże Ci ulepszyć mobilną wersję Twojej witryny i sprawić, że Twoi klienci będą zadowoleni. Niektóre z nich mogą być już dla Ciebie znane i oczywiste, ale błędem byłoby nie umieszczać ich na liście najbardziej śmiertelnych błędów.

Wysoka konwersja Twojej mobilnej wersji strony!

Witam moi drodzy czytelnicy bloga. Galiulin Rusłan jest w kontakcie. Dzisiaj porozmawiamy o mobilnych wersjach witryn, które każda witryna lub blog musi mieć, aby awansować na TOP wyszukiwarek. W artykule podam kody stylów oraz gotowe przykłady układu strony, które możesz pobrać na swój komputer.

Jeśli Twoja witryna nadal nie jest dostosowana do urządzeń mobilnych, polecam skorzystać z moich porad lub skontaktować się z profesjonalistami — http://www.mobile-version.ru kto zrobi wszystko zgodnie ze standardami wyszukiwarek. Możesz również sprawdzić swoją witrynę pod kątem mobilności, korzystając z tego samego linku.

W 2013 roku Google zaczął wywierać presję na webmasterów ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), przekonując o konieczności tworzenia lekkich modyfikacji serwisu, a od 2015 roku jednym z aspektów rankingu stała się mobilność ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex nie pozostaje w tyle, tworząc specjalny algorytm Władywostoku, który uwzględnia przydatność witryny do przeglądania z telefonów.

Mobile Friendly dzisiaj to nie tylko dbanie o odwiedzających, ale niezbędny warunek promocji.

Gdy witryna jest tworzona od podstaw, stosowane jest podejście Mobile First. Ale większość ma stare działające projekty. Głównym pytaniem, jakie stawia mobilna wersja strony w takich sytuacjach, jest to, jak zrobić to bez rujnowania istniejącego szablonu?

Istnieją trzy podejścia:

  • Oddzielny adres i układ - umieszczone na poddomenie formularza m.site.ru. Przekierowanie następuje poprzez przekierowanie serwera przez agenta użytkownika.
  • Responsywny design - url i html pozostają takie same jak w formacie desktopowym, ale w CSS, media kwerendy zwracają reguły dla różnych ekranów.
  • RESS to projekt responsywny, adres pozostaje ten sam, ale serwer wysyła zestawy stylów w zależności od typu sprzętu żądającego strony.

Dla właścicieli starych projektów najlepszym wyborem jest zastosowanie układu adaptacyjnego. Jak to zrobić samodzielnie i bez korzystania z niebezpiecznych wtyczek, rozważymy krok po kroku.

Mobilna wersja strony: jak zrobić to dobrze

Dalsze kroki będą wymagały solidnej podstawowej znajomości html i css lub umiejętności szybkiego google niezrozumiałych rzeczy.

Informacja dla początkujących: w CSS słowa przed nawiasami klamrowymi oznaczają określone fragmenty pliku html, za których wyświetlenie są odpowiedzialne. Zapisane częściej z kropką lub znakiem krzyżyka - #miejsce (właściwość: wartość;).

Krok 1. Usuń ograniczenia.

Właściciele płynnego układu mogą pominąć ten krok. Reszta będzie musiała ciężko pracować.

Szerokość- szukamy dużych sekcji w kodzie ze sztywno zdefiniowanym wyświetlaczem. Jeśli parametr jest określony w pikselach lub punktach, należy zmienić jego wartość na procenty, emy i inne jednostki, które są wrażliwe na środowisko. Często główny kontener lub obszar zawartości ma stałą szerokość - w większości przypadków ograniczenia są usuwane poprzez zastąpienie go maksymalną szerokością.

Kino- zamiast wyraźnych rozmiarów przepisujemy właściwości dla tagu img, które dadzą możliwość dostosowania do zdjęć. Zdjęcia zmienią proporcje w swoich kontenerach nadrzędnych.

obraz (

Maksymalna szerokość: 100%

wysokość: auto;

stoły- Nie można ustawić pełnej adaptacyjności, ale możesz dostosować strony z nimi do urządzeń mobilnych, dodając ten kod:

stół(

Blok wyświetlacza;

Szerokość: 100%;

przepełnienie-x: przewijanie;

przelew-y: ukryty;

styl przepełnienia ms: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: dotyk;

Zawinięcia — ustawiane są przez właściwość float. Ustawienie tej opcji umożliwi przesuwanie skrzynek w oparciu o ustawienia okna, dopasowując się do elementów o stabilnej pozycji lub wewnątrz kontenerów nadrzędnych. Standardowe elementy div domyślnie tłumaczą każdy z nich na nową linię. Na przykład, umieszczając bloki div 200 px w kontenerze 1000 px, możesz zobaczyć to zdjęcie.

Bloki są ułożone jeden na drugim. Dodanie zawijania usuwa łamanie linii, umieszcza elementy w linii na całej dostępnej przestrzeni.

Krok 2: Zaplanuj reorganizację treści.

Dowiedz się, jakie szczegóły witryny na komputery powinny być wyświetlane na urządzeniach mobilnych. Aby to zrobić, odpowiedz sobie na następujące pytania:

  • Które klocki pełnią tylko funkcje dekoracyjne? - Częściej są to slidery, dekoracje sidebarów, ankiety, losowe zdjęcia.
  • Co ignorują odwiedzający? - Mapy cieplne kliknięć i ścieżek pomogą odpowiedzieć na to pytanie. Bezwzględnie ukrywamy najmniej aktywne elementy.
  • Co musi pozostać w wersji mobilnej? - Zazwyczaj jest to reklama, formularz zwrotny, subskrypcje lub przyciski mediów społecznościowych.
  • Zastanów się, jak strona powinna wyglądać na tabletach, smartfonach i małych starych telefonach - możesz ustawić własny wygląd dla każdego urządzenia.

Krok 3. Wygoda.

Nawigacja: ekrany telefonów są za małe, zwykłe menu serwisu rzadko mieści się w takich ramkach. Zwyczajowo ustawia się menu, rozwijane na przycisku.

Obszar zawartości: telefony zazwyczaj ustawiają szerokość głównego bloku w CSS na 100% w zależności od dostępnego miejsca. Oznacza to, że tekst, moduły, reklamy, zawartość paska bocznego będą wyświetlane na małych urządzeniach w jednej kolumnie.

Czujniki: Palce nie są tak dokładne jak mysz, zostaw dla nich dużo miejsca. Przestrzeń wokół linków i innych aktywnych elementów musi mieć co najmniej 28 x 28 pikseli.

Pomóż odwiedzającym zdefiniować aktywną przestrzeń - dopełnienie, podświetlenie, zmianę koloru i inne rzeczy, które można ustawić na dotyk, przepisz pseudoklasę hover dla linków i przycisków.

Wdrażanie zapytań o media z przykładami

Jeśli kiedykolwiek tworzyłeś tabele CSS do druku, masz już wyobrażenie o możliwościach przypisywania poszczególnych stylów w zależności od warunków.

Zapytania o media to wyrażenia logiczne, dostęp do nich implikuje odpowiedź z parametrem prawda lub fałsz. Jeśli wynik zapytania jest prawdziwy, tj. wymiary klienta użytkownika lub urządzenia są zgodne z określonym typem nośnika, reguły stylu określone w bloku multimediów są stosowane automatycznie.

Zapytania o media można przypisać według parametrów:

  • szerokość i wysokość okna przeglądarki;
  • szerokość i wysokość urządzenia;
  • orientacja - tryb poziomy lub pionowy;
  • rozdzielczość ekranu.

Aktualna lista argumentów dostępna jest na oficjalna specyfikacja.

Przejdźmy do przykładów. Jest gotowy szablon, wielkość jego części zawartości to 1000 pikseli, wszystkie wewnętrzne elementy i szczegóły są konfigurowane w odniesieniu do tego parametru.

Jeśli ekran użytkownika jest węższy niż określona część treści, pojawi się pasek przewijania. Pływające elementy projektu mogą zachowywać się w nieprzewidywalny sposób - wpadać na siebie, rozciągać się, za bardzo zwężać.

Przede wszystkim usuwamy stały rozmiar, który tworzy pasek, aby nie przeszkadzał w regulacji. W naszym szablonie jest to opakowanie nawigacji. W układzie czytnika może to być jeden lub więcej elementów. Jeśli nie rozumiesz definicji, otwórz narzędzia programistyczne przeglądarki - korzystając z widoku modelu pudełkowego znajdź element, który nie mieści się w wymiarach ekranu.

Aby to naprawić, usuwamy stałe ramki, dodając do szablonów style:

@media only screen i (maksymalna szerokość: 1000px) (

Nawigacja (szerokość: 100%; )

Teraz, jeśli szerokość ekranu użytkownika jest mniejsza niż 1000px, to szerokość menu będzie równa 100% jego rozmiaru. Główna wersja szablonu wygląda tak samo jak poprzednio. Zastąpienie właściwości usunęło dolny pasek przewijania podczas zmniejszania ekranu.

Ale bloki nadal wyglądają podejrzanie - zmieńmy ich wyświetlanie, zwiększając szerokość w procentach, aby pasowały do ​​pożądanych wymiarów.

Do tego samego mediaquery dodajemy:

Blok (szerokość: 35%;)

Jak znaleźć optymalne rozmiary bloków swojej witryny? Oblicz ręcznie lub weź za podstawę dowolną gotową siatkę - płynną siatkę. Możesz skupić się na istniejących standardach: w układach dwukolumnowych o szerokości okna 980-1050px opakowanie jest przyjmowane jako 95%, zawartość to 60%, a 30% pozostaje na pasku bocznym. Pozostała przestrzeń idzie na tworzenie granic i marginesu dokładności.

Możesz jednak zastosować rozmiar pudełka do zawartości, aby nie obliczać za każdym razem pikseli, ale działać zgodnie z ogólnymi wymiarami.

Przejdźmy do ustawienia wyświetlania na ekranach o niższej rozdzielczości:

@media only screen i (maksymalna szerokość: 600px) (

Blok (

pływak:brak;

Szerokość:85%;

Margines: 1em auto;

Jeśli ekran ma mniej niż 600 px, to nasze klocki powinny zmieścić się w jednej kolumnie - usuwamy zawijanie, ustawiamy nowe wcięcia, środek i zmieniamy szerokość. Częściej ustawiamy 100%, ale jeśli z jakiegoś powodu jest to niewygodne, ustalamy własny rozmiar.

Możesz więc ustawić nie tylko wymiary bloków treści, ale także ich wyświetlanie. Na przykład, aby zabronić wyświetlania dużych elementów, zastępując je dowolnymi wygodnymi.

Zademonstrujmy możliwości na przykładzie zmiany kolorów i wyświetlaczy.

W wersji na smartfona główne menu jest ukryte, a kolor bloku zostaje zmieniony na niebieski, natomiast na większym ekranie wyświetlany jest projekt bez tych zmian.

W większości przypadków wymagane jest ukrycie nawigacji - zastępuje ją przycisk. Bardziej odpowiednie jest zrobienie tego za pomocą javascript, możesz skorzystać z gotowych rozwiązań.

Edycje dokonywane są punktowo, zakres można ograniczać zarówno od góry, jak i od dołu. Jest szybki i wygodny - jedna linia ustawia osobny CSS dla różnych urządzeń, bez wpływu na główny widok strony.

Możesz zadeklarować reguły @media w dowolnym miejscu w istniejącym arkuszu stylów lub możesz utworzyć osobny dla tych deklaracji, a następnie zaimportować go do głównego CSS za pomocą reguły @import.

Mobilna wersja strony: jak zrobić i na co zwrócić uwagę

Mediacware jest zrozumiałe dla wszystkich nowoczesnych przeglądarek, ale nie będzie działać w IE 8 i starszych. Problem rozwiązuje odwołanie się do starego IE poprzez komentarze warunkowe. Muszą być napisane w kodzie szablonu, a nie w CSS.

Sam skrypt jest dostępny na github ( https://github.com/scottjehl/respond) dodaje obsługę minimalnych i maksymalnych wymiarów oraz zapytań medialnych do starszych IE.

Jeszcze jeden problem - projekt adaptacyjny implikuje użycie HTML5, co znowu jest niezrozumiałe dla starszych przeglądarek. Traktowane hackiem:

Kod napisany jest w html, dodatkowo blokowe wyświetlanie tworzonych elementów jest ustawione w CSS:

nagłówek, nav, sekcja, artykuł, na bok, stopka (display:block;)

Zajmijmy się od razu pytaniem - jak sprawić, by niektóre skrypty wyświetlały się tylko wtedy, gdy podane parametry ekran. Jeśli jquery jest zainstalowane, będziesz musiał dodać prosty skrypt do kodu szablonu. Numery są zmieniane na niezbędne. Brzmi to tak: jeśli szerokość okna przekracza 980 pikseli, skrypt określony w ścieżce jest stosowany do strony. Możesz określić kilka, składnia jest zapisywana przez analogię za pomocą średnika w nawiasach klamrowych.

Jeśli ($(dokument).width() > 980) (

$.getScript("ścieżka do skryptu");

Kolejną kwestią jest to, jak przeglądarka mobilna iPhone musi przetworzyć daną treść, czy dozwolone jest jej powiększanie. Aby to zrobić, początkowa skala jest zapisana w głowie:

Pozostaje tylko sprawdzić poprawność - w tym celu możesz skorzystać z własnej przeglądarki i telefonu lub skontaktować się z serwisami.

Jeśli witryna zostanie przekonwertowana na serwer lokalny poprawność można określić w ami.responsywnyprojekt.is. W celu prawidłowego wyświetlania właściciele Denver będą musieli zmienić kodowanie na utf-8 poprzez edycję plik serwera httpd.conf.

Usługa pokaże, jak projekt wygląda na różnych urządzeniach.

Dodatkowo szablon jest testowany https://developers.google.com/speed/pagespeed/insights/ lub w specjalnej formie https://www.google.com/webmasters/tools/mobile-friendly, a także u webmasterów.

W Yandex wygląda to szczegółowo, a Google po prostu zgłosi, że nie ma problemów.

Jeśli wszystko zostanie zrobione poprawnie, nie będzie przewijania, nie dodatkowe elementy. Wersja mobilna jest gotowa, a teraz nauczyłeś się, jak to zrobić samodzielnie. Jeśli materiał był dla Ciebie przydatny, polub i zapisz się do biuletynu na blogu. Wszystkiego najlepszego.

Poniżej, klikając jeden z przycisków, możesz pobrać 2 przykładowe strony złożone w tej lekcji i łatwo jest pracować z gotowymi stronami i kopiować kod.

Z poważaniem Galiulin Rusłan.

Tak jak obiecałem, pora opowiedzieć, czym jest „Układ adaptacyjny” i jak zrobić mobilną wersję strony na smartfony i tablety, a także zadowolić wyszukiwarki!

Dlaczego to wszystko jest w ogóle potrzebne? W końcu żyli tak samo jak wcześniej i nic. Cóż mogę powiedzieć, Internet się zmienia, staje się lepszy. Wyszukiwarki robią wszystko, co możliwe dla wygody i komfortu użytkowników... Świetnie, naprawdę

Tak, a ruch z gadżetów rośnie z dnia na dzień! Webmaster musi to wziąć pod uwagę...

Najprawdopodobniej, System wyszukiwania Firma Google powiadomiła wszystkich webmasterów, że w rankingu będzie traktować priorytetowo witryny zoptymalizowane pod kątem urządzeń mobilnych. Ale tylko pod warunkiem, że prośba nie została złożona za pośrednictwem komputera osobistego.

Oznacza to, że jeśli użytkownik zalogował się przez smartfon lub tablet, to witryny i blogi przeznaczone dla niego zawsze będą wyższe niż te, które tego nie mają! W innych przypadkach, jak rozumiem, ta zasada nie obowiązuje.

Wydaje się to jasno wyjaśnione? Kto nie zrozumiał? Napisz w komentarzach, porozmawiajmy razem.

Tak więc całkiem niedawno miałem wakacje, postanowiłem więcej artykułów napisz przydatne, zaimplementuj trochę ciekawe pomysły, generalnie spędzać urlop z korzyścią, a nie leżeć na kanapie, chociaż jak by się chciało mmm....

W jeden z najwspanialszych dni e-mail(jednak wszyscy go otrzymali) otrzymali następującą wiadomość:

I wszystkie moje plany upadły... Myślę, że musimy nadążać za duchem czasu... i jedziemy! Przede wszystkim oczywiście postanowiłem znaleźć w sieci jakąś wtyczkę, która zrobiłaby wszystko jasno i beze mnie

Mobilna witryna WordPress z wtyczkami!

Jak się okazało, takie wtyczki istnieją i w zasadzie spełniają swoją funkcję! Ale, Weryfikacja Google- na łatwość przeglądania strony z urządzenia mobilnego nie przechodzą! Nie wiem dlaczego, ale Google uparcie nie chce zobaczyć zmian, wypróbował wiele opcji ... Dlatego nie ma sensu ich używać ...

Jeśli nadal chcesz używać w tym celu wtyczek, to najlepsze z nich to:

WPtouch Mobile Plugin - najbardziej podobała mi się ta wtyczka, wszystko jest dość proste i przejrzyste, mój blog wyświetlał się poprawnie bez żadnych ościeży!

Nie będę opisywał każdej wtyczki, spróbuj sam i zdecyduj:

  • Mobilna prasa;
  • Pakiet mobilny WordPress
  • Duda Mobile Website Builder
  • Pakiet mobilny WordPress
  • WordPress PDA i iPhone;
  • WPmob Lite;
  • WPtap Aktualności Prasa;
  • Detektor mobilny WP;
  • Aplikacja Wizi.

Kolejną wadą wtyczek jest to, że czasami glitch, na przykład przeglądam smartfona - wszystko jest w porządku, powtórzyłem to ponownie lub zaktualizowałem - pokazuje zwykłą stronę! Co za tajemnica

Krótko mówiąc, nie odpowiadało mi to i nadal szukałem lepszego rozwiązania!

Potem postanowiłem powierzyć tę pracę specjaliście na giełdzie freelancerów, ale po namyśle postanowiłem nauczyć się adaptacyjnego layoutu i zrobić wszystko sam! W końcu jestem programistą stron internetowych i czas poprawić swoje umiejętności...

Jeśli ktoś jest zainteresowany, to przeprojektowanie strony na adaptacyjną kosztuje około 5000 rubli i więcej ... Nie radzę zatrudniać nieszczęsnych specjalistów, którzy pobierają taniej - skąpiec płaci dwa razy! I sprawdź recenzje...

Ogólnie zacząłem studiować ten temat, najpierw teorię, a potem praktykę na moim blogu! No w zasadzie się tego nauczyłem, okazało się, że nie ma w tym nic skomplikowanego, teraz mój blog jest adaptacyjny i dopasowuje się do każdego ekranu i cieszę się jak słoń... Wejdź na mojego bloga z dowolnego smartfona i ty sam wszystko zobaczysz.Jeśli znajdziesz ościeżnicę - daj znać...

Teraz podzielę się z Wami swoją wiedzą i opowiem o najważniejszych punktach...

Opcje tworzenia witryny mobilnej?

O ile wiem, istnieją trzy kierunki. Przeanalizujmy każdą technologię osobno, z jakimi zaletami i wadami możemy się zmierzyć?!

Oddzielna wersja witryny- Jest to rodzaj oddzielnej, lekkiej witryny, stworzonej specjalnie do przeglądania na urządzeniach mobilnych lub z niską prędkością Internetu..site lub http://mobile.site. W takim przypadku używane jest przekierowanie.

  • Dwie niezależne witryny - możliwość zmiany treści bez wpływu na inną witrynę;
  • Szybkość pobierania - ponieważ wersja mobilna jest niezależna od głównej, nie będzie trudno uczynić ją łatwą i szybką;
  • Wygoda – nawigacja i treść są łatwiejsze do wyostrzenia w najdrobniejszych szczegółach, ponieważ witryna jest w pełni zaprojektowana dla odbiorców mobilnych.
  • Zduplikowana treść - ponieważ ta sama treść będzie w wersji głównej i mobilnej. Być może metatag rel=canonical uratuje, ale jest wiele innych problemów.
  • Kawałek funkcjonalności - cokolwiek by powiedzieć, ale taka strona będzie okrojoną kopią strony głównej, stąd zupełnie inne statystyki. A większość odwiedzających nie lubi różnego rodzaju ograniczeń i zawsze przechodzi na stronę główną...
  • Przekierowania - Jak wiesz, różnego rodzaju przekierowania mają negatywny wpływ na SEO.

Technologia OZE- Tutaj po stronie serwera stosuje się kalkulację, w zależności od tego, jakie urządzenie zostało wprowadzone - tworzony jest ten lub inny układ (html i css). Ten cud nazywa się - adaptacyjne projektowanie stron internetowych + specjalne oprogramowanie po stronie serwera (RESS - Responsive Web Design i Server Side Components).

  • Szybkość pobierania - możliwość usuwania różnych niepotrzebnych skryptów, stylów;
  • Mniejsza waga strony - zamiast ukrywania elementów jak w układzie adaptacyjnym, możesz je po prostu usunąć;
  • Nawigacja - możliwość dostosowania struktury do niektórych urządzeń.
  • Definicja - do wydania pożądana wersja strona, musisz dokładnie określić urządzenie odwiedzającego, a dzięki temu, jak słyszałem, nie zawsze wszystko idzie gładko.

Responsywny layout (projektowanie stron internetowych)- Ten układ witryny dostosowuje się do dowolnej rozdzielczości ekranu, definiując ją za pomocą zapytań o media CSS3. Z reguły używany jest ten sam zasób, który zawiera różne opcje wyświetlania na smartfonach, tabletach i komputerach...

  • Bezpieczeństwo – niezależnie od urządzenia stosowana jest ta sama treść i zestaw kodów html;
  • Pojedynczy adres URL — te same adresy URL i treść są używane w różnych układach, nie ma duplikatów.
  • Szybkość ładowania - ponieważ wszystkie elementy i skrypty strony głównej są ładowane, nawet jeśli są ukryte.
  • Nawigacja - trudność w stworzeniu przemyślanej nawigacji mobilnej.

Układ adaptacyjny wykonujemy we własnym zakresie

Wybrałem układ responsywny dla mojego bloga z kilku powodów:

  1. nie ma potrzeby naruszania integralności strony głównej, bloga;
  2. używa jednej treści, jednej bazy danych i tak dalej;
  3. Dla mnie osobiście łatwość implementacji (wymagana jest znajomość html i css).

Teraz powiem Ci, co należy zrobić, aby Twój zasób dostosował się do wszelkich uprawnień i polubił Google

Najpierw musisz wpisać metatag w :

W ten sposób informujemy przeglądarkę, że szerokość witryny powinna być równa szerokości gadżetu, urządzenia lub cokolwiek tam masz

Ponadto, jeśli dodamy również maximum-scale=1.0, user-scalable=no, to z tym zabronimy skalowania, ale nie polecam tego robić, niech osoba sama zdecyduje, może ma problemy ze wzrokiem...

Tutaj początek był zrobiony, teraz jak przejdziemy przez smartfona czy coś, zobaczymy jak wygląda nasza strona! Smutne co?!

Ten przypadek będzie musiał zostać naprawiony za pomocą zapytań o media w pliku stylu CSS, parametr wygląda tak:

@media screen and (min-szerokość:240px) i (max-szerokość:720px) (
tagi i atrybuty tutaj
}

Oznacza to, że te style zostaną zastosowane przez przeglądarkę od minimalnej szerokości 240px do maksymalnej szerokości 720px urządzenia! Jeśli więcej lub mniej niż te wartości, zostaną zastosowane główne style witryny. Wszystko jest proste!

I tak piszemy style dla różnych rozdzielczości urządzeń. Na przykład:

  • smartfony w pionie - od 240 do 340, od 341 do 420;
  • smartfony poziomo, a niektóre tablety pionowo - od 421 do 540, od 541 do 670;
  • tabletki pionowo - od 671 do 800;
  • tabletki poziomo - od 801 do 1024

Jeśli chcesz pokazać jakiś element: display:block, jeśli chcesz go ukryć: display:none;

Aby zobaczyć, jak wygląda strona internetowa lub blog różne urządzenia jest kilka świetnych usług:

  • http://quirktools.com
  • http://www.emulateurmobile.com/
  • http://webmark.com.ua

Nawiasem mówiąc, jeśli potrzebujesz dostosować stronę, ale masz pewność, że nie możesz tego zrobić sam i nie ma specjalnego pragnienia, oferuję swoje usługi! Możesz obejrzeć moją pracę i wysłać aplikację na stronie:.

To wszystko dla mnie! Mam nadzieję, że mój artykuł naprawdę ci pomógł, z wdzięcznością, podziel się nim =)

Nagrałem przykład, jak działa układ adaptacyjny na stronie klienta, jeśli nadal nie rozumiesz zasady jego działania, koniecznie zajrzyj. Do zobaczenia wkrótce! Napisz komentarze...


Z poważaniem Władimir Sawielijew

Lekcje premium z klubu webformyself

To nowy, rewolucyjny produkt w dziedzinie edukacji budowania stron internetowych! Wszystkie najlepsze tutoriale wideo są zebrane w jednym miejscu i podzielone na kategorie: WordPress, Joomla, PHP, HTML, CSS i JavaScript... Baza danych jest stale aktualizowana i teraz jest w niej ponad 200 lekcji! Już w rok - możesz zostać doświadczonym webmasterem "od zera"!

Więcej

Powiemy Ci, czym różnią się popularne kreatory witryn mobilnych i jakie problemy biznesowe pomagają rozwiązać.

Znacznie wzrósł udział odwiedzin strony internetowej i sprzedaży z urządzeń mobilnych Ostatni rok i nadal się rozwija. Więc jeśli masz stronę internetową bez układ adaptacyjny, czas pomyśleć o stworzeniu wygodnej wersji mobilnej. Musisz upewnić się, że Twój zasób stanie się dostępny i wygodny dla użytkowników smartfonów i tabletów.

Możesz samodzielnie stworzyć mobilną wersję strony bez dodatkowych kosztów (a często całkowicie za darmo). Aby to zrobić, jest wielu projektantów online. Dziś zobaczymy, co najpopularniejsze z nich oferują swoim użytkownikom.

1.MoAction

Rozmawialiśmy już o tym, jak stworzyć mobilną wersję witryny za pomocą . Proces jest tak prosty, jak to tylko możliwe, nawet nieprzygotowany użytkownik, z dala od układu i programowania, poradzi sobie z nim.

Główną zaletą MoAction jest możliwość pracy z katalogami produktów. W rzeczywistości jest to najtrudniejsza część tworzenia wersji mobilnej. Jeśli masz dziesiątki lub setki produktów na swojej stronie, nie będziesz chciał ręcznie wprowadzać danych. może importować istniejący katalog w formatach Yandex.Market (YML). Wystarczy określić okres aktualizacji, na przykład raz na godzinę lub raz dziennie.

Dodatkowo MoAction – jedyna z prezentowanych usług – pozwala za pomocą kilku kliknięć tworzyć wielopoziomowe struktury i zarządzać listami produktów.

Ta usługa oferuje największą liczbę szablonów - 113. Wszystkie są podzielone na kategorie dla różnych obszarów biznesowych. Im więcej szablonów, tym większe prawdopodobieństwo, że znajdziesz odpowiedni dla siebie.

Jeśli podczas tworzenia strony napotkasz jakiś problem, którego nie możesz rozwiązać samodzielnie, zawsze możesz poprosić o pomoc: zadzwonić do specjalisty, napisać na czacie online lub wysłać e-mail.

2.GoMobi

GoMobi pozwala na stworzenie wersji mobilnej całkowicie automatycznie, podając tylko adres Twojej strony. Możesz również skorzystać z gotowego szablonu. To prawda, że ​​wybierając pierwszą opcję edycji szablonu, nadal nie można jej uniknąć: wiele trzeba będzie przerobić i dodać ręcznie.

Interfejs na pierwszy rzut oka wydaje się nieco przeciążony, ale generalnie można z nim pracować. Ponadto istnieje wersja strony w języku rosyjskim.

Ale są też namacalne wady. Nie możesz zmienić struktury szablonu, a w każdym bloku możesz tylko edytować pola tekstowe. Ponadto GoMobi nie nadaje się dla właścicieli sklepów internetowych. Formalnie konstruktor ma karty produktów, ale każdy element trzeba dodać ręcznie z linkiem do strony głównej: tam trafią ci, którzy chcą dokonać zakupu.

3. DudaMobile

DudaMobile, podobnie jak GoMobi, oferuje swoim użytkownikom automatyczną konwersję strony internetowej lub stworzenie wersji mobilnej w oparciu o gotowy szablon. A automatyczna wersja DudaMobile generuje się znacznie lepiej.

Interfejs jest minimalistyczny, prosty i ogólnie przyjemny. Nie ma zbyt wielu szablonów, ale wszystkie są wysokiej jakości. Każdy blok ma zaawansowane ustawienia.

4. Onbile

Onbile to bardzo prosty konstruktor. Posiada kilka funkcji do edycji struktury i zawartości bloków, dzięki czemu możesz tworzyć tylko małe witryny: wizytówkę lub stronę promocyjną.

Do wyboru jest również kilka szablonów: tylko 15, ale dla każdego są 2-3 warianty więcej z niewielkimi różnicami w projekcie, strukturze i kolorze.

Aby stworzyć sklep internetowy w oparciu o ten konstruktor, trzeba zapłacić za specjalny pakiet e-commerce. Ale nawet w wersji płatnej możesz stworzyć tylko jednopoziomowy katalog: każdy produkt może być przypisany tylko do jednej sekcji. Wszystkie produkty będą musiały zostać wprowadzone ręcznie, ponieważ nie ma funkcji importowania istniejącego katalogu.

Strona została stworzona przez programistów z Hiszpanii, więc nie ma obsługi języka rosyjskiego. Jeśli jednak biegle posługujesz się językiem angielskim, hiszpańskim, niemieckim, francuskim lub portugalskim, możesz zrozumieć interfejs konstruktora za pomocą internetowego systemu podpowiedzi.

5. Prosto.mobi

Prosto.mobi ma najbardziej zwięzły projekt. Służba najwyraźniej jest wciąż młoda, więc ten moment Funkcjonalność edytora jest dość ograniczona: wersja płatna oferuje tylko 13 bloków do wyboru. Na przykład blok z danymi kontaktowymi, blok z linkami do portale społecznościowe, klocek ze zdjęciem. To nie wystarczy, aby stworzyć oryginalną witrynę.

Istnieje również tylko 15 szablonów, ale w przeciwieństwie do Onbile, który ma naprawdę unikalne wersje mobilne pod względem struktury i projektu, związane z 15 różnymi sektorami biznesu, Prosto.mobi ma jeden szablon w 15 kolorach.

Funkcje konstruktora wystarczą tylko do stworzenia możliwie najprostszej strony. Na przykład strony wizytówek.

Nie ma idealnej platformy, która może zrobić wszystko na raz: każdy projektant ma swoje mocne strony i słabe strony. Najpierw musisz zdecydować, jakie zadania powinna wykonywać Twoja witryna mobilna i jak powinna wyglądać. Na podstawie tych informacji możesz obiektywnie podejść do wyboru projektanta i zatrzymać się na najlepszej opcji.