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

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

Адаптація сайту під мобільні пристрої
Адаптація сайту під мобільні пристрої

Так як настають великі зміни, я вирішив написати статтю про 3-х способах адаптації сайту під мобільні пристрої. Дані способи добре підтримуються як пошуковою системою Google так і Яндекс.

К содержанию ↑

3 способи адаптації сайту під мобільні пристрої

Давайте перерахуємо ці методи:

  1. Адаптивний дизайн. При даному способі, дизайн сайту і весь його функціонал адаптується під всі види дозволів екранів. Сайт підлаштовується під екрани різних пристроїв (ПК, смартфони, планшети), при цьому url – адреси залишаються незмінними і сервер відправляє однаковий html код всіх пристроїв, не залежно від дозволу.
  2. Динамічний показ або ще називають RESS (Responsive Design + Server Side).Реалізація даного методу не дуже проста, так як url ​​- адреса для всіх пристроїв однаковий, а html код віддається сервером різний. При даному способі якщо зайти на ресурс під різними User Agent’амі, то можна побачити, що код таки різний для різних дозволів і пристроїв.
  3. Різні url або ще називають окрема мобільна версія. При використанні даного способу, для різних пристроїв і дозволів виводитися різний html код і сторінки мають різні url адреси. Як правило сайт має основну версію сайту на домені loleknbolek.com і мобільну версію, розраховану на мобільні пристрої на піддомені m.loleknbolek.com або mobile.loleknbolek.com.

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

К содержанию ↑

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

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

Як вже говорилося – це конфігурація сайту при якій сервер відправляє на всі види пристроїв однаковий html код. Для адаптації сайту зазвичай використовують CSS медіа запити (Media Queries), які прописуються для необхідних розширень екрану.

Адаптивний дизайн - мобільні пристрої
Адаптивний дизайн – мобільні пристрої

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

  • Використовується один url для всіх пристроїв. Один url хороший тим, що нам не потрібно буде робити 301 редіректи з мобільної версії, так само наявність одного url добре позначиться на самому просуванні вест вага буде зберігається на одній сторінці.
  • Зручність і швидкість розробки. Якщо сайт не адаптований під мобільні пристрої – це не проблема. З допомогу. медіа запитів можна швидко і зручно вирішити всі ці проблеми. Так само в рішенні даного завдання добре можуть допомогти Фреймворки, які вже містять в своїх бібліотеках стилі для адаптивного дизайну (наприклад Twitter Bootstrap).
  • Алгоритми Google автоматично розпізнають даний спосіб, якщо всі агенти користувача Googlebot можуть сканувати вміст сторінки (JavaScript, HTML, CSS).

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

  • Швидкість завантаження сторінки. Всі важкі елементи ролики, графіка, ефекти – повинні бути замінені на більш легкі. Так само необхідно стискати html, css, JavaScript код і графічні елементи, в іншому випадку, швидкість завантаження сторінки буде кульгати і користувач не зможе побачити всієї картини. Як перевірити і збільшити швидкість завантаження сайту, можна подивитися в статті “Швидкість завантаження сайту, перевірити і збільшити її”.
  • Однаковий функціонал на всіх пристроях. Як правило гугл рекомендує при адаптивному дизайні залишати всі елементи і не приховувати їх. Але завдання для користувачів на ПК і мобільних пристроях відрізняються, тому користувачі мобільних пристроїв повинні отримувати більш спрощену версію, але це суперечить рекомендаціям Google.
  • Неможливо відключити адаптивний дизайн. Якщо мобільну версію сайту можна відключити або перейти на стандартну версію ПК, то адаптивний дизайн відключити неможливо і користувач телефону буде бачити тільки версію для даного пристрою.

Динамічний показ або RESS (Responsive Design + Server Side)

Як вже було сказано вище, url адреса не змінюється при даному способі, але сервер віддає різний код для пристроїв (ПК, планшети, телефони). Рекомендується, що б сайт відвідав Googlebot для смартфонів і просканував його.

Динамічний показ - RESS
Динамічний показ – RESS

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

  • Можливість використовувати різну верстку для різних пристроїв на різних ОС (Android, iOS) або різних дозволів (ПК, смартфони, планшети).
  • Можливо стиснення або видалення шматків коду html, JavaScript, за рахунок того, що для кожного пристрою може бути своя версія верстки.
  • Google в великій кількості проектів використовує саме цей спосіб.

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

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

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

Як уже говорив, в цій конфігурації зміст для ПК міститься на одному url адресу (loleknbolek.com), а для планшетів і мобільних пристроїв на іншому, як правило піддомені (m.loleknbolek.com).

Мобільна версія сайту - loleknbolek.com
Мобільна версія сайту – loleknbolek.com

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

  • Зручно для користувача. Як правило мобільна версія набагато простіше ніж версія для ПК, тому користувачам легше з нею працювати.
  • Швидкість завантаження. Так як мобільна версія важить на багато менше, то відповідно і швидкість завантаження буде швидкою, що користувачеві не потрібно буде чекати деякий час.
  • Можливість переходу на десктопну версію. У більшості випадків з мобільної версії можна перейти на ПК версію.
  • Легка підтримка. Мобільна версія – це окремий сайт, тому при зміні коду не зачіпається основний сайт.

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

  • Різні url адреси. Мобільна і десктопна версія мають різні url адреси, тому необхідно для ПК версії вказувати альтернативний url, а для мобільної версії канонічний адресу. Таку процедуру необхідно проводити з усіма сторінками, а якщо їх багато, то відповідно і часу на дану роботу буде витрачено багато.
  • Обмеженість в функціоналі. Мобільна версія набагато простіше, ніж десктопна, тому багато фішок не використовується.
  • Незручність для користувачів. Необхідно запам’ятовувати дві адреси як деськтопной так і мобільної версії сайту.
  • Час на створення. Великі проекти витрачають багато часу на створення мобільної версії, особливо якщо текст відрізняється від того, що заданий у версії для ПК.
К содержанию ↑

Який спосіб вибрати?

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

  • Блоги, комерційні сайти, сайти візитки, інформаційні сайти, не великі інтернет – магазини (до 500 товари) – найкраще використовувати адаптивний спосіб.
  • Інтернет – магазини, ігрові портали, кінотеатри, одним словом великі проекти – найкраще використовувати RESS або окрему мобільну версію.
Поділитися