Яка мобільна версія. Що вибрати: мобільну версію або адаптивний дизайн? Пошуковий мобільний трафік

Вітаю вас, шановні читачі, в цій статті, я хочу поговорити з вами про мобільної версії сайту. А точніше, чи потрібна мобільна версія і які можуть бути від неї плюси.

Чому я вирішив взагалі завести тему про мобільних версіях сайтів? Все дуже просто! Якщо порівнювати відвідуваність сайтів зараз і скажемо навіть років 2-3 назад, стало дуже багато користувачів, що використовують смартфони і планшети. І таких користувачів не мало! Отже слід зробити їм життя більш зручною, погодьтеся, повна версія сайту, для читання на смартфоні, не дуже-то і дружелюбна. Ось про це ми і поговоримо, але для початку я хочу пояснити, що таке мобільна версія сайту.

Мобільна версія сайту - це окрема версія сайту, яка дублює основну, але є урізаною, щодо деськтопной і як правило мобільна версія виконана в одну колонку, для комфортного використання на смартфонах не змінюючи масштаб. У мобільній версії залишають тільки самий основний функціонал сайту, а весь другорядний прибирають. Таким чином, користувач може комфортно переміщатися по сайту, читати на ньому інформацію і отримувати відповідь на своє питання в повній мірі.

Як бачите, все досить просто, мобільна версія сайту, це спеціальна верстка, яку буде комфортно переглядати на смартфонах і планшетах. Але це всього лише загальні речі, оскільки мобільні версії сайту можна ще розділити на різні варіанти по їх реалізації, в основному виділяють 3 різних види мобільного верстки сайту: адаптивний дизайн, окрема мобільна версія, RESS (Responsive Design + Server Side). Давайте розглянемо кожен варіант реалізації окремо.

адаптивний дизайн

Адаптивний дизайн, на даний момент, є найпопулярнішим. У цього є багато причин, про які ми поговоримо трохи далі, а зараз я розповім, що таке адаптивний дизайн і які його відмінні риси.

адаптивний дизайн - це один з варіантів реалізації мобільної версії сайту. Головною рисою адаптивного дизайну є відсутність окремої версії сайту, тобто сам дизайн пристосовується під користувача, з огляду на його здатність екрану. Верстка адаптивного дизайну проводиться завдяки CSS3, за допомогою медіа-запитів - Media Queries. Найважливіше, що адаптивний дизайн виконується один для всіх пристроїв, як для комп'ютерів, так і для телефонів і планшетів, тобто він не є окремим сайтом.

Завдяки медіа-запитами, можна вирішувати різні завдання, починаючи від завдання ширини сторінки або елементу, закінчуючи відключенням менш важливих елементів, щоб вони не заважали читання контенту на смартфонах і планшетах. Причому для телефонів і планшетів можна зробити різні версії, тобто для планшетів, видалити частину непотрібних блоків, залишивши найбільш важливі, а на телефоні скоротити їх до мінімуму, щоб вони не заважали сприйняттю контенту.

Щоб було більш наочно показати як робиться адаптивна верстка, я вам приведу невеликий шматок коду і поясню його дію.

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

Даний код каже, що якщо дозвіл пристрою 360px або більше, то блок div виводиться не буде, якщо дозвіл 720px або більше, то div буде показувати, як блоковий елемент. І таким чином можна прописувати абсолютно будь-які властивості всіх елементів при різних дозволах. Тобто це може бути і ширина, і висота, і видимість, і варіант позиціонування, так взагалі що завгодно, хоч інший шрифт. Але найважливіше, що при використанні Media Queries, ваш адаптивний дизайн повинен мати гумову верстку. А тепер давайте розберемо які є плюси і недоліки у адаптивної верстки сайту.

Переваги адаптивної верстки, при реалізації мобільної версії сайту:

- Зручність і простота створення. Адаптивний дизайн досить простий в розробці, оскільки одним махом верстається відразу кілька версій сайту (десктопна (комп'ютерна), планшетні (за бажанням) і мобільна). Маючи вже готову верстку головної сторінки в HTML, вам необхідно зайнятися написання Media Queries під менші дозволу, тобто для планшетів і для мобільних телефонів.

- Один адреса сайту. При адаптивної верстці, мобільна версія вашого сайту, буде мати ту саму адресу, що і повна версія сайту, що в принципі дуже добре. Вам не потрібно налаштовувати редіректи, між різними версіями, а користувачеві запам'ятовувати іншу адресу сайту, нехай навіть до нього додасться просто m.

Недоліки адаптивної верстки, при реалізації мобільної версії сайту:

. Довге завантаження пов'язана з тим, що сайт хоч і зроблений у нас для мобільних пристроїв, але дизайн адаптується під пристрій, тобто вашому смартфону необхідно завантажувати весь HTML і весь CSS файли. Тобто не дивлячись на, максимально спрощений дизайн мобільної версії, який важить лічені кілобайти, вам необхідно прогрузити все, тобто загальна вага сторінки буде повна версія + мобільна. А якщо поганий сигнал мобільного мережі, то такий сайт може вантажиться дуже довго, погодьтеся, не добре примушувати користувача дуже довго чекати.

- Складність редагування. Складність полягає в тому, що всі версії вашого сайту знаходяться в одному документі, тобто і десктопна, і планшетні, і мобільна. Звичайно, якщо ви добре розбираєтеся в верстці, то особливих проблем у вас не виникне, але все одно це підвищена складність, щодо окремої мобільної версії.

- Відсутність вибору версії сайту. Найголовніша біда адаптивної комп'ютерного набору тим, що в ній немає можливості вибрати перехід до деськтопной версії. І виходить така ситуація, що, якщо ви відріже потрібний функціонал сайту, то мобільний користувач ніяк не зможе ним скористатися, тільки якщо він не почне лізти в вихідний код сторінки. Але ніхто цього робити не буде, а просто піде до конкурента.

У підсумку, незважаючи на всі мінуси, які є у адаптивного дизайну, він є дуже популярною концепцією реалізації мобільної версії сайту, оскільки потенціал у неї теж досить не поганий і при грамотному підході, частина проблем можна уникнути.

Окрема мобільна версія сайту

Окрема мобільна версія сайту, мабуть це найстаріша реалізація зручного доступу до сайту, власникам смартфонів. Зараз я розповім докладніше про мобільної версії сайту.

Окрема мобільна версія сайту - це версія сайту, на яку потрапляють користувачі смартфонів і планшетів переходячи на основну. Вона має окрему адресу, як правило це приставка до основного домену m. або mobile. Окрема мобільна версія вдає із себе окремий сайт, який використовує базу даних основного, для показу того ж контенту, але зовсім іншу верстку, оптимізовану під мобільні пристрої. Як правило, в мобільну версію включені самі важливий функції сайту, ті, що не потрібні користувачам мобільних пристроїв, видалені.

Якщо брати адаптивний дизайн, то він прийшов до нас з новими можливостями CSS3, а окрема версія сайту існувала задовго до появи адаптивної верстки. Не дивлячись на те, що це рішення найбільш старе, воно не втрачає своєї популярності. Навіть багато популярні ресурси використовують окрему мобільну версію сайту, оскільки вона має низку переваг, якого немає у адаптивної верстки. Мобільні версії можна бачити на таких сайтах як: m.yandex.ru; m.vk.com; m.ok.ru і багато інших. Тобто, ви можете бачити, що Яндекс і великі соц. мережі в рунеті користуються мобільними версіями і не переходять на адаптивний дизайн.

Переваги окремої мобільної версії сайту:

- Швидка швидкість роботи. Швидкість пояснюється тим, що шаблон оптимізований під мобільні пристрої і в окремій версії не потрібно довантажувати різний «сміття». При використанні окремої версії сайту, можна домогтися швидкого завантаження, навіть в умовах поганої зв'язку або мережі 2g. Це є просто величезним плюсом для користувачів, які заходять до вас з мобільних пристроїв.

- Зручність для користувача. Автономна версія сайту, дуже добре продумують, щоб домогтися високого рівня юзабіліті. У ній немає «сміттєвих функцій», які просто не потрібні користувачеві смартфона і вся потрібна інформація в крокової доступності, що дуже добре.

- Простота редагування. При редагуванні коду, вам не потрібно щось вишукувати в коді, у вас перед очима буде код конкретно мобільної версії і ви ведете роботу конкретно з нею, не порушуючи роботу деськтопной версії.

- Можливість зміни на десктопну версію. Дуже важлива річ, якщо скажемо користувачеві потрібен повний функціонал вашого сайту, він без будь-яких проблем може перейти на десктопну версію і скористатися всім тим, що йому там потрібно.

Недоліки окремої мобільної версії сайту:

- Зайва робота в SEO. Справа в тому, що сайт знаходиться на піддомені і пошукові системи знаходять його як копію основного. Для вирішення цієї проблеми, вам необхідно використовувати мета-теги rel \u003d «alternative» і rel \u003d «canonical». Тоді пошуковий робот побачить, що це альтернативний адресу для доступу до вашого сайту і ніяких санкцій за дублювання контенту не застосує.

— можливі розбіжності. Якщо ви використовуєте дві різні бази даних, то сайти у вас можуть не повністю дублювати один одного, що негативно позначиться на SEO. Також якщо ви забудете додати нову сторінку в мобільну версію, то на основному сайті вона буде відображатися, а на мобільній версії немає. Але ця проблема легко вирішується загальною базою даних.

Як бачите у цього методу реалізації мобільної версії зовсім інші плюси і мінуси, з цього обидва методи знаходять застосування.

RESS (Responsive Design + Server Side)

Це мабуть мій найулюбленіший вид реалізації мобільної версії сайту. В якійсь мірі він в собі поєднує і адаптивний дизайн і мобільну версію сайту. Але даний метод є більш складним в реалізації, оскільки тут потрібно більш високі знання програмування і не всі можуть його реалізувати. Зараз я розповім що це таке.

RESS (Responsive Design + Server Side) - це реалізація мобільної версії на сайті, шляхом визначення пристрою, з якого зайшов користувач і відповідно до типу пристрою, запуску необхідного шаблону, відповідного пристрою. Як правило це реалізується через перевірку User-Agent користувача.

Як ви вже зрозуміли в цьому методі визначається пристрій і після відбувається завантаження необхідного шаблону. Зараз я спробую на прикладі коду показати, як проводиться реалізація RESS.

$ User \u003d BBrowser :: detectDevice () 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);

Ось в самому простому варіанті реалізація Responsive Design + Server Side виглядає ось так. Тобто спочатку ми детектуючи пристрій, з якого зайшли до нас на сайті, а далі через умови if і else перебираємо можливі варіанти, якщо з телефону, то виводимо mobile.php, якщо з планшета, то tablet.php, якщо не те і не інше, то виводь desktop.php. Як бачите все просто, на сайті просто верстається кілька варіантів шаблону, під різні пристрої і потім виводиться потрібний.

Переваги Responsive Design + Server Side (RESS):

— Істотна економія трафіку. Як і в мобільній версії дизайн створений спеціально для конкретного типу пристроїв і в ньому немає зайвого коду, який витрачає трафік і уповільнює завантаження. Можна отримати дуже маленьку вагу сторінок.

— один адреса. Зручно, що користувачеві не треба переходити на піддомени, і він користується сайтом на основному домені, як в адаптивному дизайні. Але при цьому тут виключені мінуси адаптивного дизайну.

— Можливість перемикання між версіями. При використанні Responsive Design + Server Side можна без будь-яких проблем перемикатися між версіями, додавши кнопку перемикання на чільне місце, завжди можна включити десктопну або мобільний верстку.

Недоліки Responsive Design + Server Side (RESS):

— Дуже висока складність в реалізації. Коли для адаптивного дизайну досить прописати просто media-запити, то тут не все так просто, тут потрібен цілий алгоритм із визначення пристрою, видачі необхідних версій верстки і перемиканням між верстки.

— Чи не визначається пристрій. Бувають випадки, коли телефон може просто не визначитися і йому видасть десктопну версію, на жаль поки що даний алгоритм ще не довели до ідеалу.

У підсумку хочу сказати, що це мій найулюбленіший метод реалізації мобільної версії сайту, але він дуже складний і трудомісткий, але якщо ви його зробите, то він буде того коштувати. Але не варто ставити хрест і на інших варіантах реалізації, оскільки, якщо підійти до цінового питання реалізації (якщо ви самі не знаєте програмування), то адаптивна верстка буде найдешевшою, а свої функції вона прекрасно виконує і більшість людей схиляється до неї. Який метод реалізації мобільної версії сайту вибрати - вирішувати вам. Це суто справа вашого смаку. А зараз я вам нарешті розповім, навіщо потрібна мобільна версія сайту.

Навіщо потрібна мобільна версія сайту?

Таке питання виникає у багатьох веб-майстрів, навіщо робити мобільну версію сайту? А все насправді дуже просто, робиться це для того, щоб максимально охопити аудиторію в своєму сегменті. Для інтернет магазинів і різного бізнесу я взагалі вважаю, що мобільна версія обов'язкове! Для різних блогів і форумів - бажана.

Але якщо врахувати останні новини: Яндекс тепер буде виводити в мобільній видачі вище ті сайти, які адаптовані під мобільні пристрої. Щоб сторінка вважалася мобілопрігодной, вона повинна: \u200b\u200bне мати горизонтальної прокрутки і не повинно бути java і flash складових на сторінці, оскільки мобільні пристрої не можуть їх відтворювати. Ось приклад від Яндекса, як повинна виглядати мобілопрігодная сторінка.

Як бачите контент повинен йти в одну колонку, повинен бути зручний в читанні і всі елементи повинні мати достатній розмір, щоб на них можна було натиснути пальцем. Відповідно тепер, не маючи мобільної версії, можна забути про значну частину трафіку на свій сайт, тому, що Яндекс вас занизить (але саме для мобільних пристроїв), для десктопних пристроїв ранжування залишиться колишнім.

Але взагалі якщо у вас буде мобільна версія сайту, не важливо адаптивна це верстка, або ж окрема мобільна версія, або ж взагалі Responsive Design + Server Side, це буде вже величезним плюсом, тому, що не має яка у вас реалізація, головне: є мобілопрігодная версія сайту. Від неї суцільні плюси: добре користувачам, більше відвідуваність, плюсик від пошукової системи, більше дохід від реклами. на підставі останніх новин, моя думка: створення мобільної версії обов'язково!

На цьому у мене все, сподіваюся не сильно вас втомив своїм довгим постом, бажаю вам успіхів в просуванні.

Навіщо потрібна мобільна версія або адаптивний дизайну сайту?
Якщо у молодого покоління бізнесменів дане питання не викликає сумнівів, то інша частина задумається, навіщо витрачати на це гроші.

Чим же зумовлена \u200b\u200bнеобхідність в наявності тієї чи іншої версії для мобільних пристроїв.

За останніми даними число користувачів інтернету, які використовують мобільні пристрої за рік зросла на 90%! З усіх 80 млн. Користувачів інтернету по всьому світу 50 млн. Використовують мобільні пристрої. У російській сегменті мобільний трафік налічує 25% і доходить до 40% в деяких тематиках.

Основна проблема в тому, що раніше сайти спочатку робилися з орієнтацією на дозвіл моніторів комп'ютерів, а як виявилося традиційна верстка для мобільних пристроїв не зовсім підходить, оскільки розміри екрану смартфона відрізняються від діагоналі монітора, через що відбувається невідповідність графіки та дизайну. Користуватися такими сайтами з телефонів абсолютно не зручно: довго вантажаться, дрібний і нечитабельним текст, незручна навігація, горизонтальна прокручуванні, не працюють flash і java скрипти. Більшість відвідувачів такі сайти дратують, і вони їх відразу покидають, не зробивши цільових дій.

Ще одна причина, по якій слід задуматися про розробку мобільної версії - це наявність мобільного пошуку, і якщо ваш сайт не має мобільної версії, то він і не потрапляє туди. Про це нам повідомляють Google і Яндекс в своїх зверненнях і рекомендаціях, і це зрозуміло, т. К. В десктопном пошуку спостерігається свого роду стабільна ситуація, пошуковики спрямували свій погляд на зростаючий ринок мобільного пошуку. Все це і підштовхнуло нас на розробку безкоштовної мобільної версії для вашого сайту.

Мета пошукових систем - надання людям релевантної та корисної інформації. Пошуковики і розробники сайтів намагаються прагнути до того, щоб відвідувачам з будь-якого пристрою було просто і зручно переглядати сайт, після переходу з пошукової видачі.

Останні дослідження показують, що ті, хто користується смартфонами та іншими мобільними пристроями для доступу в інтернет, частіше повертаються на сайти, які мають мобільну версію, так само такі користувачі частіше роблять покупки в інтернеті, що погодьтеся дуже важливо. А так як пошукові системи за всім цим стежать і намагаються підвищувати якість пошукової видачі, то зручний перегляд сайту з таких пристроїв став фактором, що впливає на просування сайту.

Рішення для отримання мобільного трафіку

Існує 3 технології створення мобільної версії:

1. Мобільна версія, як окремий сайт для мобільних пристроїв на піддомені;
2. Адаптивний дизайн;
3. Мобільні додатки для IOS, Android, Windows Phone.

З мобільними додатками все зрозуміло: їх розробляють для мобільних операційних систем, а відвідувачі сайту при заході з мобільного пристрою отримують пропозицію їх скачати, наприклад, як у kinopoisk.ru.

Розробка подібного програми варто пропорційно мобільної версії, а часом і дорожче.
Плюсів у подібного рішення багато, це і продуманий інтерфейс, і будь-які «фішки», особистий кабінет, і т. П.

Мінус же тут в тому що користувача потрібно спонукати завантажити і встановити додаток, що є окремою статтею витрат, або пунктом в маркетингової стратегії.
Подібні додатки необхідно обслуговувати і оновлювати, захищати від злому і т. П. Що так само коштує грошей.

Тепер розберемо відмінності мобільної версії від адаптивного дизайну.

адаптивний дизайн

Адаптивний дизайн означає, що за рахунок певних стилів коду, ваш сайт автоматично по ширині адаптується під розміри пристрою, на якому він відкритий, будь то монітор ПК, смартфон, планшет. Раніше ми писали про це в декількох статтях «Як зробити мобільну версію сайту» і «Використання мета-тега Viewport». При розробці сайту, верстальники верстають сайт не під певний розмір, наприклад 800х480 px, а створюють сторінки сайту з елементів автоматично підлаштовуються під ширину екрану. Блоки просто змінюють своє розташування, а деякі і зовсім не показуються на смартфонах. Подібний варіант більше підходить для простих сайтів-візиток або блогів.

Переваги адаптивного дизайну:

• Грамотне відображення сторінок сайту і всіх його елементів на будь-яких пристроях за рахунок адаптації стилів до мобільних браузерів;
• Відповідає вимогам Google до зручності перегляду на мобільних пристроях;
• Зручність у розробці, вартість нижче ніж створення мобільної версії;
• Один url у звичайній версії сайту і з адаптивною версткою, завдяки чому не знадобиться перенаправлення користувачів, а так же, відвідувачам не потрібно буде запам'ятовувати окрему адресу поддомена.
• Краса початкового сайту, що-що, а все таки гарний дизайн можна зберегти і це важливо.

Недоліки адаптивного дизайну:

• Велика вага сторінок сайту, тому що адаптивний дизайн не дає можливості замінити важкі декстопние елементи полегшеними, через це сайт довго завантажується з мобільних пристроїв. Що дуже критично, тому швидкість завантаження потрібно оптимізувати;
• У разі проблем на адаптивної верстці, відвідувач сайту не має можливості перейти на звичайну версію сайту;
• Адаптивний дизайн передбачає переробку всіх сторінок сайту, що може виявитися незручним, якщо ваш бізнес повністю залежить від сайту і від його роботи.

Мобільна версія сайту

Мобільна версія передбачає розробку версії сайту на піддомені, наприклад, m.vk.com, на який перенаправляється відвідувач в мобільному пристрої. Як правило, така версія створюється під мобільні екрани з шириною менше 620px. Така технологія дозволяє створити міні версію сайту з найбільш важливою інформацією, не переобтяжений контентом і різними елементами дизайну, а головне великими елементами навігації. Підійде як для простих сайтів, так і для інтернет-магазинів, різних сервісів: пошта, новини, соціальна мережа.

Переваги мобільної версії:

• Зручна для користувача, тому що сильно спрощена в порівнянні зі звичайною версією. Мобільна версія дає найбільш пріоритетну інформацію, а так само дозволяє здійснювати замовлення / покупку з мінімумом дій.
• Легко вносити істотні зміни, т. К. Це окрема версія і не потрібно вносити зміни в основний сайт;
• Швидке завантаження сторінок, так як всі необхідні елементи мають меншу вагу.
• Є можливість перейти на повну версію сайту, у випадку з проблемами на мобільній;

• Відповідає вимогам Google до зручності перегляду на мобільних пристроях.

Недоліки мобільної версії:

• Вартість розробки, розробка мобільного версію можна порівняти зі створенням програми;
• Вартість обслуговування, необхідно підтримувати роботу версії для різних пристроїв;
• Від частини інформації, файлів і можливостей сайту доведеться відмовитися.

Як ви побачили, обидва варіанти мають свої переваги і недоліки, ми ж вирішили поєднати найкраще з обох версій. В результаті вийшла мобільна версія з елементами адаптивного дизайну, ви можете як транслювати матеріали з основного сайту, і він буде адаптований під мобільні пристрої, так і створювати окремі розділи доступні тільки для мобільних пристроїв. Все це дозволяє налаштовувати мобільну версію максимально гнучко.

Мобільна версія в подарунок!

Розробники Nubex піклуються про своїх клієнтів і про якість виконуваних сайтів, тому ми підготували абсолютно безкоштовне оновлення, завдяки якому мобільна версія з'явилася у всіх, хто користується нашим конструктором сайтів. Якщо з якихось причин вона вам не потрібна, її можна вимкнути одним клацанням мишки. Так само її налаштування абсолютно прості і інтуїтивно зрозумілі, налаштувати мобільну версію можна за 5-10 хвилин.

Ми врахували вимоги пошукових систем при створенні мобільної версії:

• Динамічна верстка сайту, область перегляду повинна автоматично підлаштовуватися по розміри екранів, щоб користувач міг уникнути горизонтальної прокрутки сторінки та зміни масштабу.
• Автоматична зміна розміру шрифтів, для читання текст.
• Зручний дизайн інтерактивних елементів (кнопки та ін.), Розташовані на певній відстані один від одного, так, що б при натисканні вибиралася необхідна область
• Адаптивний дизайн - все повинно працювати і відображатися на основі технологій сучасних мобільних пристроїв.

Так само ми врахували:

• згорнуте головне меню (зручно розгортається і економить місце);
• корзина, пошук по сайту;
• зручне відображення фотографій, альбомів, слайдерів і товарів;
• для інтернет магазинів - зручна форма on-line замовлення з телефону;
• самостійно можна включати або вимикати відображення різних блоків і розділів.

Виконайте налаштування мобільної версії сайту самостійно, або зверніться в нашу службу технічної підтримки клієнтів, для підвищення якості роботи вашого веб-ресурсу.

З початком ери буму мобільних пристроїв розробники виявилися перед вибором: чи залишати мобільні версії своїх сайтів поряд з «повноцінними», або сайти повинні стати адаптивними і самостійно підлаштовуватися під різні розміри екранів?

На поточний момент при побудові мобільних версій сайтів існують 3 основних способи їх побудови:

• Адаптивний дизайн;
• Окрема мобільна версія сайту;
• RESS (Responsive Design + Server Side).

Кожен із способів має свої плюси і мінусами, які я постараюся докладно описати.

адаптивний дизайн

Для реалізації адаптивного дизайну зазвичай використовуються CSS3 Media Queries. Залежно від розміру екрана, користувач буде бачити різну картинку:

@media screen and (max-width: 1600px) (div.for-example (width: 1500px;)) @media screen and (max-width: 1280px) (div.for-example (width: 1100px;)) @media screen and (max-width: 1024px) (div.for-example (width: 980px;))

Переваги адаптивного дизайну

• Зручність розробки - при адаптивної верстці вся структура сайту автоматично підлаштовується під різну ширину екрану. Для того, що б отримати робочий продукт не потрібно писати все з нуля - досить лише підправити CSS і HTML ... З урахуванням наявності фреймворків, подібних Bootstrap подібна технологія не є дуже складною при стандартній реалізації. До того ж, підтримка такого продукту буде відносно простим завданням.
• Один URL - позбавляє нас від непотрібних редиректів, і потреби користувачеві запам'ятовувати адресу мобільної версії (нехай навіть це просто приставка m.). Так само наявність єдиного адреси позитивно позначиться на просуванні сайту, оскільки пошуковикам буде «зручніше» працювати.

Недоліки адаптивного дизайну

• Різні завдання - типові завдання «мобільних» користувачів великих сайтів зазвичай відрізняються від завдань користувачів ПК. Якщо ви є клієнтом банку, то, швидше за все, в мобільній версії сайту вас буде цікавити дуже обмежений спектр інформації - адреси найближчих відділень, банкоматів і т.д.
  В цілому, при адаптивної верстці найпоширеніший підхід - робити копію звичайного сайту, реалізувати в верстці під телефони потреби всіх груп цільової аудиторії. Але тоді про юзабіліті можна забути. Потрібні п'яти відсоткам відвідувачів другорядні розділи створять незручності для основної маси клієнтів.
«Вага» сайтів залишається серйозною перешкодою для користувачів мобільних телефонів. Це означає, що деякі типові для десктопних сайтів активні елементи, в тому числі embedded-карти, ролики, кредитні калькулятори і меню з анімацією на мобільних сайтах повинні бути замінені на більш легкі альтернативи. Чи може адаптивний дизайн дати нам таку можливість? У популярній реалізації користувач з маленьким екраном повинен завантажити сторінку цілком, щоб побачити лише її частина. Наприклад, якщо десктопна версія верстки головною важить 200 Кб, а мобільна - ще 50 Кб, для перегляду доведеться завантажити 250 Кб. Звичайно, можна використовувати стиснення коду сторінки, але зайві запити до сервера все одно будуть йти.
• безвихідь - Одне з безперечних переваг мобільної версії: якщо не подобається, її можна відключити, перейти на звичайний домен. Сайти з адаптивним дизайном не дають цього простого, але важливого вибору. Якщо адаптована верстка незручна, забагована або якщо вона приховує важливий елемент навігації, пишіть пропало: ви нічого не можете зробити, щоб побачити його знову. Доведеться бігти шукати десктоп або сайт конкурента. Можна придумати «милиці» для обходу цього обмеження (використовувати cookie і підключати різні таблиці стилів). Але такий підхід ускладнює розробку.

В цілому ідея розробки мобільної версії в адаптивному дизайні досить популярна, не дивлячись на вищевказані мінуси. Зокрема, цю концепцію цілком підтримують такі гіганти як, наприклад, Google.

Окрема мобільна версія сайту

Щоб зробити сайт зручним для мобільних користувачів часто створюють так само окремі версії сайтів - спеціально орієнтовані на користувача зі смартфоном / планшетом. Найбільш поширена практика - перенаправлення мобільних користувачів на спеціальний піддомен (m.example.com, mobile.example.com і т.д.). Напевно, в 99% випадків, мобільна версія являє собою урізану версію сайту - лише з тим функціоналом, який, на думку розробників, буде необхідний і корисний користувачам мобільних пристроїв і планшетів.

Переваги мобільної версії

• Легкість в змінах - оскільки сайт існує, де-факто, окремо від основної версії, вносити в нього правки, пов'язані тільки з мобільною версією значно простіше, оскільки мобільна версія частіше за все не надає надмірної, непотрібного функціонала.
• Зручність для користувача -мобільна версія зазвичай сильно спрощена в порівнянні з деськтопной версією, тому користувачеві не потрібно буде далеко ходити за потрібною йому інформацією.
• швидкість -через те ж спрощення сайту, мобільна версія вантажиться швидше. Це істотно для користувачів, які все ще ходять через GPRS або слабкий 3G.
• вибір-найчастіше, в мобільній версії є можливість перейти на основну версію сайту.

Недоліки мобільної версії

• Кілька адрес -
• Незручність для користувача -для деськтопной і мобільної версії різні адреси. Для одних це може виявитися плюсів, для інших же - вкрай дратівливим фактором, коли для того, що б зручно подивитися сайт, потрібно запам'ятовувати ще одну адресу. Так само є проблеми і з пошуковими системами: щоб уникнути дубльованого контенту SEO-фахівцям потрібно використовувати мета-теги rel \u003d «alternative» і rel \u003d «canonical». Крім того, коли користувач мобільного пошуку Google клацне по посиланню в результатах, він потрапить на десктопну версію або перенаправлений на мобільний. Але якщо мобільна версія цієї сторінки не існує, він отримає повідомлення про помилку.
• обмеженість - створення окремого мобільного сайту означає позбавлення від частини змісту і функціональності. Крім того, у вас може бути два різних набору контенту, який може негативно позначитися на загальній інформаційній картині.

В цілому, створення мобільних версій сайтів виправдовує себе досить добре, зокрема, для великих проектів. Як приклад - Amazon використовує у себе спеціальну, мобільну версію сайту.

RESS

Сам Google, хоч і підтримує використання веб-майстрами адаптивного дизайну, проте в своїх продуктах використовує іншу систему. Якщо зайти, наприклад, на головну сторінку під різними User-Agent-ами, то можна побачити різний HTML для різних пристроїв. RESS - Responsive Design + Server Side. Приклад реалізації, накиданий «на коліні»:

$ DS \u003d DIRECTORY_SEPARATOR; require_once (dirname (__ FILE__). $ DS. "libraries". $ DS. "browser.php"); $ Device \u003d BBrowser :: detectDevice (); if ($ device \u003d\u003d DEVICE_TYPE_MPHONE) ($ tmpl \u003d "template.m.php";) else if ($ device \u003d\u003d DEVICE_TYPE_TABLET) ($ tmpl \u003d "template.t.php";) else ($ tmpl \u003d "template .php ";) include (dirname (__ FILE__). $ DS." templates ". $ DS. $ tmpl);

плюси RESS

Фактично, метод може включати в себе переваги як і окремої мобільної, так і адаптивної версії сайтів, в залежності від реалізації. З того, що буде новим:

• Мінімізація трафіку -Непотрібні JavaScript можуть бути видалені з HTML, який звільняє CPU, пам'ять і кеш на мобільному пристрої. Так само може бути спеціально оптимізована html і css.
• Можливо використовувати таргетування -наприклад, для Android-пристроїв пропонувати завантажити додаток з GooglePlay, а для Apple - з iTunes. Для кожного пристрою можна зробити свою верстку.

мінуси RESS

• Складність в розробці -подібний метод не обійтися без відповідної настройки сервера і праці більшої кількості програмістів. Так само необхідно буде робити кілька різних варіантів верстки.
• Механізм визначення пристроїв -на жаль, навіть в наш час ще не доведений до досконалості. Історії з тим, як чийсь рідкісний телефон не визначився як мобільний пристрій, спливають досить часто.

В цілому ж, RESS - найкращий з трьох запропонованих варіантів, однак вимагає набагато більших трудозатрат при розробці.

резюме

На мій особистий погляд - ідеального варіанту, який би варто було використовувати всім, немає. Кращий варіант для мене - це RESS. Однак, це один з рідкісних варіантів, оскільки вимагає великих зусиль для реалізації. В цілому ж всі 3 варіанти мають свої плюси і мінуси, причому в залежності від суті і спрямованості сайту.

Подивитися, як виглядає сайт на мобільному пристрої, найпростіше на вашому телефоні. Більш того, скріншот з такого реального пристрою буде найточнішим відображенням сайту на мобільних пристроях, ніж використання будь-якого емулятора.

Якщо ж необхідно перевірити мобільну версію сайту онлайн на комп'ютері, то на допомогу приходять емулятори мобільних пристроїв. Найточніший з них - це кошти для розробників мобільних операційних систем, найпопулярнішими з яких є Android Studio і Apple Xcode. У цих наборах є найповніші емулятори різних пристроїв і перевірка мобільної версії сайту буде найбільш точно наближена до реального мобільного пристрою. Однак, щоб встановити засоби для розробників на звичайний комп'ютер, буде потрібно дуже багато часу, досвіду і знань щодо володіння програмним забезпеченням.

Прості способи перевірки мобільної версії сайту

На противагу найскладнішого способу перевірки сайту на мобільних пристроях, розглянутому в попередньому абзаці, найпростішим способом є зменшення ширини вікна браузера до розміру вузької колонки. Якщо ваш сайт адаптується до такої ширині, то значить мобільна версія вашого сайту зроблена за допомогою технології адаптивного дизайну.

Однак, такий спосіб не працює в разі, якщо мобільна версія сайту зроблена із застосуванням окремого дизайну. У цьому випадку сервер, на якому розташований сайт, потребує явній вказівці того, що відвідувач прийшов з мобільного пристрою. Ці дані сервер отримує з рядка User Agent, в обов'язковому порядку запитуваної з вашого браузера будь-яким відвіданих сайтом. Тому, щоб подивитися, як сайт виглядає на мобільних пристроях, необхідно "обдурити" сервер і надати йому рядок User Agent від телефону, а не від комп'ютера.

Другим за складністю варіантом, що дозволяє перевірити мобільну версію сайту через комп'ютер, є установка спеціального браузера. Наприклад, Opera Mobile Classic Emulator. Його версії існують для Windows, Mac і Linux. На жаль, ця розробка заснована на старому движку Presto, який я використав до 12 версії браузера Opera, і не покаже реально, як відображається сайт в сучасному мобільному браузері. C 2013 року браузер Opera працює на програмному движку Blink, тому перевірку мобільного сайту краще провести на сучасному браузері. Це може бути як Opera так і Chrome , Що працюють на однаковому движку Blink на основі WebKit, який використовується в Apple Safari.

Необхідно включити в зазначених браузерах спеціальний режим розробника (F12 в Chrome або Ctrl + Shift + i в Opera) і перемкнутися в режим мобільного пристрою:

Після цього можна без проблем подивитися, як виглядає сайт на мобільному пристрої.

Якщо візуальної особистої оцінки для перевірки мобільного сайту вам недостатньо, то існують спеціальні програми, які можуть проаналізувати сайт з точки зору мобільного пристрою і видати не тільки кількісну оцінку мобільності сайту, але і дати рекомендації щодо поліпшення видимості сайту на смартфонах. На нашому сайті якраз знаходиться такий сервіс, заснований на технології Google Mobile Friendly . Вам достатньо лише вбити адресу свого сайту в спеціальну рядок і натиснути кнопку "Перевірити". Робот перейде за вказаною адресою, зробить знімок сторінки в форматі мобільного пристрою і дасть висновок про якість вашого мобільного сайту.
Наприклад, таке.

Про мобільності говорять всі, кому не лінь: від невеликих маркетингових агентств до гігантів типу Яндекса і Гугла.

У цій статті ми розповімо, чому мобільна версія сайту викликає такий ажіотаж, які вимоги до неї пред'являти і чи потрібно це особисто Вам.

І відразу відкрию великий секрет, після її впровадження, ми почали отримувати більше замовлень. Усе. Решта далі.

Навіщо? Навіщо? Навіщо?

Можна по-різному мусолити тему необхідності адаптації сайту під мобільні пристрої.

Але глобально є дві вагомі причини на користь створення мобільної версії сайту - призначена для користувача і технічна.

Давайте зупинимося докладніше на кожній. При цьому, як правило, коротко і по справі. Воду залишаємо за воротами.

Зручність для користувачів

У 2016 році аналітики з StatCounter першими помітили, що частка мобільного трафіку перевищила частку робочого столу: 51,3% проти 48,7.

Це означає, що в середньому будь-який сайт в інтернеті з телефону відвідують частіше, ніж з комп'ютера.

У Росії картина приблизно така ж: частка смартфонів вище, ніж частка комп'ютерів і інших пристроїв. Про це говорить дослідження компанії GfK Rus:

Статистика

З кожним роком відрив росте все сильніше - наприклад, в 2018 році зростання склало 20%. Причому, аналітики говорять, що це ще не межа.

Такий розклад точно повинен змусити Вас замислитися: як же Ваш сайт виглядає на екрані смартфонів.

І швидше за все відповідь - погано. Коли відкриваєш звичайний неадаптованих сайт з мобільника, перегляд перетворюється в квест - доводиться масштабувати сторінки, цілитися в дрібні посилання, чекати довгої завантаження.

Додайте до цього всього поспіх і купу відволікаючих чинників - за телефоном адже не так же, як за комп'ютером, коли відвідувач повністю зосереджений на моніторі.

Його користувачі не будуть довго шукати потрібний розділ і розбиратися в інтерфейсі - в сусідній вкладці завжди відкритий зручний сайт конкурента.

Уподобання пошукових систем

Гугл і Яндекс топлять за мобільні версії вже давно. Перший для цього випустив спеціальний алгоритм Mobile-first Index, за яким він оцінює зручність мобільного сайту і в залежності від цього визначає його позицію в пошуку.

У другого алгоритм вийшов пізніше, але за важливістю він приблизно на тому ж рівні. Називається - "Владивосток".

Є й непрямі причини, які впливають на ситуацію мобільної версії в пошуку. Крім інших факторів, пошукові системи враховують і поведінкові характеристики.

Це про те, як довго Ваші відвідувачі проводять час на сайті, скільки сторінок вони відкривають, наскільки активно клацають по кнопках і перемикачів.

Якщо користувач зайде з мобільника на звичайний десктопний сайт, то довго він там не пробуде.

А значить і поведінкові характеристики погіршаться. Як наслідок - Ви на останніх незаселених сторінках Яндекса і Гугла по.

Ми Вас ще не переконали? Тоді перевірте самі потрібна мобільна версія Вам, а точніше з яких пристроїв відвідувачі заходять на Ваш сайт.

Зробити це можна в Google Analytics в звіті "Аудиторія -\u003e Мобільні пристрої -\u003e Огляд". Якщо у Вас, тоді перейдіть в "Звіти -\u003e Технології -\u003e Пристрої".

Аналітика

Якщо бачите, що смартфонів більше 15%, то для Вас це тривожний дзвіночок - оптимізувати сайт під мобільні Вам просто необхідно. Тому, давайте розбиратися, які взагалі є способи це зробити.

Важливо. Така ситуація спостерігається не у всіх. І в деяких сферах використання мобільної версії забороняється, як би це дивно не звучало.

види мобільних версій

Велика частина сайтів та інтернет-магазинів, які Ви зустрічали, використовують один з трьох підходів: адаптивна верстка, окремий мобільний сайт, і динамічний показ.

Як завжди, щоб зробити правильний вибір, потрібно відштовхуватися від своїх завдань і можливостей.

1. Адаптивна верстка

Технічно, це один сайт, але ось структура сторінок підлаштовується під розмір пристрою.

У спрощеному варіанті виглядає так: для комп'ютерів відкриваємо всі пункти меню і будуємо товари в три стовпці.

Для планшетів показуємо тільки кошик, а товари розміщуємо в два стовпчики; у смартфонів - ховаємо все в кнопку меню, товари маємо по одному на кожен рядок.

адаптивна верстка

Головний плюс такої адаптивності сайту в тому, що і мобільна, і десктопна версії - це один і той же сайт.

А значить і будь-які зміни досить внести один раз, після чого адаптація сайту для всіх екранів відбудеться автоматично.

Це може бути додавання статті, зміна сортування, новий колір кнопок. Інші плюси адаптивен:

• Дешево і просто - розробляється відносно швидко і недорого, можна навіть впровадити адаптуюся в уже існуючий сайт;
• Один адреса сторінок - зручно для користувачів і коректно з технічної точки зору (менше мороки з пошуковою оптимізацією);
• Так рекомендує Гугл. На сторінці для розробників є офіційна рекомендація використовувати саме адаптивну верстку. Конкретних аргументів там немає, але це ж сам Гугл.

Мінуси адаптивної верстки також є. Хоча щодо інших варіантів вони досить непомітні. Але все ж, як уже сказав, вони є:

• Сайт з великою функціональністю важко адаптувати під мобільники. Це буде або незручно, або доведеться пожертвувати деякими можливостями;
• Повільне завантаження. Пам'ятайте ми говорили, що і для телефонів і для комп'ютерів завантажується один і той же сайт?

  Це і важкі картинки, і довгі менюшки, і весь інший обсяг інформації. Щоб вирішити проблему, деякі розробники використовують стиснення сторінок, але і вони вимагають додаткових запитів на сервер, а значить і часу;

• Неможливо переключитися на повну версію. Користувач не зможе в разі чого перейти на десктопний варіант, щоб використовувати всі можливості, тому що сайт сам вирішує, скільки разів йому показати.

Проте, адаптивний дизайн - найпопулярніший варіант мобільної версії в інтернеті.

Його використовують багато движки, конструктори і втім ми у себе на деяких.

2. Окрема мобільна версія

В цьому випадку у Вас будуть два різних сайту - у кожного свою адресу, дизайн і можливості. Це і є відповідь на питання: "Чим відрізняється мобільна версія сайту від адаптивної?".

Сайт сам визначає розмір екрану користувача і вирішує, що буде відображатися - мобільна версія сайту або десктопна.

Найчастіше саме мобільна версія починається на засланні з букви m (в перекладі як "мобільна").

Окрема мобільна версія

Такий підхід зручний тим, що Ви взагалі не залежите від деськтопной версії. Можна повністю зосередитися на зручність мобільних користувачів, залишити тільки самі базові функції і врахувати всі дрібниці в юзабіліті.

Макет мобільної версії буде сильно відрізнятися від робочого столу. У Вас точно вийде утримати розсіяного відвідувача, який швидше за все штовхається в автобусі або заглядає в смартфон, поки його не бачить начальник.

Всі кнопки і перемикачі можна зробити величезними, щоб на них напевно потрапити пальцем.

Також є й інші аргументи, щоб створити мобільну версію сайту окремо: швидка швидкість завантаження - в окремій версії завантажуються легкі картинки середньої якості і в цілому сторінка обрізана до базових елементів.

І також є можливість перейти на повну версію сайту, якщо відвідувач вирішить, що мобільних функцій йому недостатньо.

Справедливості заради - у окремої версії сайту для мобільних пристроїв є і недоліки:

• Різні адреси сайту у мобільників і робочого столу. Це може створити неприємності при SEO - пошуковики бачать два різних сайту з однаковим вмістом.

  І знижують позиції за дублювання. Щоб обійти проблему, доведеться підключати додаткові ресурси;

• Незручно сидіти з планшета - на ньому елементи розпливаються по всьому екрану.

  А для деськтопной версії екран планшета виявиться недостатньо великим. Виходить, що відвідувач потрапляє в глухий кут;

• Обходиться дорожче. Хоч у мобільній версії і обмежений функціонал, але все одно, вважайте, що це новий сайт, який потрібно створювати з нуля.

  Тому на розробку мобільної версії сайту закладайте бюджет заздалегідь;

• Додатковий час на управління. Сайтів-то два, підтримувати роботу і стежити за актуальністю потрібно і там, і тут.

Як бачите, турбот чимало. Але багато великих інтернет-магазини вибирають саме цей спосіб, так як кожне неправильне дію може злякати клієнта від здійснення покупки.

Якщо у Вас такі ж "небезпечні" продажу, то значить і Вам потрібно звернути увагу на розвиток сайтів електронної торгівлі.

Сайт інтернет-магазину

3. Динамічний показ (RESS)

І третій спосіб - симбіоз двох попередніх варіантів. Спочатку сайт визначає пристрій відвідувачів і, в залежності від розміру екрана, відкриває десктопну, мобільний або планшетні версію.

Тобто вантажиться тільки той варіант, який підходить для конкретного пристрою. Комп'ютерів - великий і громіздкий, а смартфонам - обмежений, але легкий. Підхід сильно скорочує час відкриття.

Головний недолік RESS - це довго і дорого. Розробити динамічний показ - все одно, що з нуля створити кілька різних сайтів.

Та й технологія не досконала. RESS відносно молодий інструмент, тому може статися таке, що пристрій визначиться неправильно або не визначиться зовсім.

До видатним діячам, які використовують RESS, можна віднести Гугл. В цілому ж, як звернув увагу, технологія не обжита, і якщо у Вас обмежений бюджет або піджимає час, краще не ризикувати. А звернути увагу на два попередні варіанти.

Ще є таке поняття, як гумова верстка. Деякі вважають, що це варіант мобільного сайту, але це не так.

Важливо. Гумова верстка - це лише коли сайт також акуратно відображається на телефоні, як і на пк. Причому, повністю без змін.

КРИТЕРІЇ ідеально

Ми вже говорили, що за комп'ютером користувач максимально зосереджений на тому, що бачить на екрані.

За його увагу практично нічого не конкурує. Чи то справа посиденьки за смартфоном - паралельні завдання, дорога, оповіщення, дзвінки, що оточують. Це і потрібно враховувати в першу чергу при розробці.

Тому в незалежності від того, який підхід Ви вибрали, потрібно дотримуватися певних правил сайту для мобільних пристроїв. Ось найважливіші з них:

1. Великий темний текст на світлому тлі. Всі тексти краще оформляти за класикою - чорний шрифт на білій підкладці.
2. Короткі форми. Залишити заявку, записатися на прийом, оформити покупку - щоб споживач не збирався вводити, потрібно запитувати мінімум даних, яких достатньо для першого контакту.

   Довгі форми відлякують в принципі, що вже говорити про мобільних відвідувачів.

3. Великі клікабельні елементи. Відвідувач не повинен цілитися і ловити кнопки і перемикачі. Всі інтерактивні елементи краще робити великими - спробуйте самі на них потикати.

   Apple і Microsoft радять прагнути до розмірів 44 на 44 пікселів. Мінімальний поріг - 24х24, але це в крайньому випадку.

4. Швидкість завантаження сайтів. Тут конкретних стандартів немає, але завжди потрібно прагнути до ідеалу.

   Є така загальна закономірність - кожна секунда, яка йде на завантаження сторінки, пропорційно знижує конверсію в продажу.

   Перевірити мобільну версію сайту на швидкість завантаження можна в спеціальних сервісах, про них трохи нижче.

5. Заданий тип форми. При складанні технічного завдання обов'язково вкажіть, що при заповненні телефону повинна виводитися тільки цифрова клавіатура.

   Те ж саме для паролів, електронної пошти та інших полів. Якщо розробляєте сайт самі, то не полінуйтеся поставити кожній формі відповідний тип.

6. Клікабельні контакти. Як і у випадку з формами, у контактних даних теж є спеціальний тип посилання.

   Натискаємо на телефон - відкривається набір номера, на пошту - поштова програма. Користувачі обов'язково будуть по звичці тикати по контактам.

7. Інформація в один стовпець. Ніяких горизонтальних скролів і фотографій в декілька стовпців на одному екрані.

   Навіть у крутих флагманів для цього недостатньо великий екран. Текст в одну колонку зручніше читати, а на великих фотографіях можна буде розгледіти всі деталі.

Лайфхак. Якщо Вам просто необхідна повна інформація про клієнта (для доставки, наприклад), то розбийте процес заповнення заявки на кілька кроків.

У першому кроці запросите ім'я і номер, а адреса і реквізити - в наступних. Навіть якщо користувач полінується і не заповнить форму до кінця, у Вас залишаться контакти, щоб дотиснути.

форма захоплення

Перевірка мобільних

Кращий експерт, який скаже Вам, зручний у Вас сайт - це відвідувач. Проведіть невелике тестування своєї мобільної версії за методом "Думки в слух".

Виберіть з оточення того, хто краще за інших підходить під опис Вашого потенційного покупця: за віком, професією, інтересам.

Попросіть добровольця зробити замовлення - нехай він пройде повний шлях покупця. Тільки не заважайте і не виправляйте його.

Нехай все буде максимально реалістично - Ви ж не будете сидіти поруч з кожним відвідувачі і пояснювати, куди натискати.

Будь-які труднощі і замішання Ваш піддослідний повинен коментувати вголос.

А Ви продовжуйте грати в шпигуна: аналізуйте дії і мовчки робіть позначки в блокноті. Допомогти можна лише в крайньому випадку, якщо доброволець потрапив зовсім в тупикову ситуацію.

Технічна перевірка

Коли ви переконаєтеся, що всі елементи на своїх місцях, а інтерфейс зрозумілий і передбачуваний, переходите до технічної сторони.

Пропустіть сайт через різні сервіси, щоб зібрати помилки і зауваження. Чи зможете - виправите самі, немає - будете знати, що написати в ТЗ програмісту.

Google Search Console - офіційний сервіс від Гугла. Він покаже, як виглядає сайт на середньостатистичному екрані смартфона і дасть рекомендації щодо поліпшення.

Пам'ятайте, ми говорили про алгоритм Mobile-first Index? Сервіс якраз заснований на його роботі, тому не нехтуйте цим пунктом.

Google Search Console

Яндекс Вебмайстер- аналогічний сервіс від Яндекса. Перш ніж перевіритися тут, потрібно додати сайт в панель Вебмастера і підтвердить на нього права (завантажити невеликий виданий файлик).

Тільки потім можна використовувати сервіс, перейшовши в "Інструменти -\u003e Перевірка мобільних сторінок". Штука теж корисна - з рекомендаціями та коментарями.

Яндекс Вебмайстер

Перевірка від пошуку Bing. Так-так, такий пошукач теж є. Нехай їм користується дуже мало людей, але зараз Вам потрібні не вони.

Сервіс може побачити помилки, на які попередні зо два не звернуть увагу. Ну і, як то кажуть, гірше не буде.

Перевірка від пошуку Bing

візуальна перевірка

Після технічних перевірок переходите до візуальних. Звичайно, можна перевірити сайт і зі свого телефону, але у Ваших відвідувачів адже різні пристрої - від широкоекранних флагманів до бюджетних смартфонів.

Щоб встежити за всіма, використовуйте сервіси для відображення сайту на різних екранах. Ось деякі з них:

responsinator.com - показує відразу всі популярні пристрої на одній сторінці. Всього в сервісі їх десять: Pixel 2 (і в цілому Андроїд), Айфони і Айпад.

responsinator.com

iloveadaptive.com - можна вибрати, які платформи відобразити відразу, не перемішуючи різні пристрої.

З додаткових булочок: в правому верхньому куті є базові показники швидкості завантаження сторінки.

iloveadaptive.com

quirktools.com - одночасно відображає тільки один пристрій, але зате який вибір. Всі екрани розбиті по групах: сучасні смартфони, кнопкові телефони, комп'ютери і телевізори.

Зверху - зручна лінійка з розміром екрану в пікселях і додаткові функції для повороту і скролінгу.

quirktools.com

В сервісах є заковика - скільки б Ви їх не перепробували, повноцінного відображення вони Вам не передадуть.

Через різних платформ, технологій і підходів до розробки, картина на сервісі і в реальному телефоні може відрізнятися - пикселем більше, пикселем менше.

В цілому це не сильно позначається на якості мобільності, але краще це мати на увазі.

До речі. Дізнатися точно, з яким розміром екрану до Вас заходять відвідувачі можна в тій же метриці. Статистика знаходиться в "Стандартні звіти -\u003e Технології -\u003e Дозволи дисплея".

Коротко про головне

Отже, якщо беретеся за мобільну версію, то спочатку виберіть відповідний спосіб, а потім простежте, щоб розробник не схалтурив.

Але перед усім цим зробіть хороший. Адже одна справа щоб все добре відображалася, а інша справа щоб все продавалося. А для цього тільки технічної частини мало.

І так само, дуже шкода, що Ви задумалися про мобільної версії тільки зараз. Часи, коли говорили, що це дуже актуально вже пройшли, а мобільна революція - настала.

Зараз адаптація сайту під смартфони - функція за замовчуванням. Наш Вам експертна рада - відкиньте сумніви, і вперед за справу.