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

Опубліковано: 30.04.2015 |
Автор: Ганна Сєбова |

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

 

Воно мені треба?

Відповідь на це питання можна знайти, перевіривши, як ваш сайт відображається в наступних сервісах тестування Google:

 

 

Якщо ви бачите подібне повідомлення – стаття для вас:

1

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

У яких випадках підійде? Якщо у вас сайт-візитка, інформаційний сайт, блог, односторінник, інтернет-магазин (з простою структурою, дизайном та/або невеликим асортиментом), сайт послуг або форум.

 

Як реалізувати?

 

Можна сміливо брати один з CSS-фреймворків (bootstrap, responsivegridsystem, Sceleton та ін.) і адаптувати існуючий дизайн. Або використовуйте CSS3 Media Queries.

 

Наприклад, якщо використовувати фреймворк bootstrap, то вам знадобиться, коротко:

 

1. Прописати view-port;
2. Підключити файли фреймворку;
3. Додати в розмітку класи сітки bootstrap.

 

Або ж в таблиці стилів виділити через медіа-запити (CSS3 Media Queries) кілька дозволів і задати оптимальні розміри елементів сторінки, наприклад:

 

@ Media screen and (max-width: 1280 px) {div .contentblock {width: 1200 px;}} 
@ Media screen and (max-width: 1140 px) {div .contentblock {width: 1024 px;}} 
@ Media screen and (max-width: 992 px) {div. contentblock {width: 970 px;}}

 

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

 

Плюси даного методу: швидка реалізація для перерахованих типів сайтів.

 

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

 

Що ми отримаємо?

 

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

 

І розглянемо приклад. Меню для пристроїв з екраном більше 768px виглядає так:

2 
А для екранів менш 768px виглядає так (в згорнутому вигляді):

3 
І так, при кліці на іконку в правому кутку (у розгорнутому вигляді):

4

Окремий шаблон для мобільних пристроїв на основному домені

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

 

Як реалізувати?

 

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

 

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

 

Серед них: WPTouch, WordPress Mobile Pack, WP Mobile Detector і т. д. Всі ці плагіни мають кілька тем оформлення й додаткові корисні фішки на зразок збору статистики по мобільним користувачам.

 

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

 

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

 

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

 

Що ми отримаємо?

 

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

 

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

 

Наприклад, ось так сайт виглядає на ПК:

5
А ось так виглядає цей сайт на мобільному:

6-3

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

У яких випадках підійде? Для інтернет-магазинів, каталогів, інтернет-порталів, соціальних мереж.

 

Як реалізувати?

 

Цей варіант схожий на попередній, також досить трудомісткий в плані реалізації. Але для великих інтернет-магазинів з величезним асортиментом – єдиний вихід.
Трохи докладніше про реалізацію: створюється піддомен, на ньому такий же «двигун», як і на основному домені, але база даних використовується одна на обидва сайти (щоб у разі внесення будь-яких змін, не довелося їх додавати двічі). При заході з мобільного пристрою відбувається перенаправлення користувача на піддомен. Як ім'я піддомену зазвичай використовують варіанти: m.sitemane.com, mobile.sitename.com, pda.sitename.com та ін.

 

  • Примітка: Щоб вберегти себе від проблем з дублюванням контенту, ознайомтеся з рекомендаціями Google і Яндекс.

 

І знову гарна новина для власників сайтів на WordPress – є плагіни, які створюють мобільну версію вашого сайту на піддомені, наприклад, WP Mobile Edition.

 

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

 

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

 

Що ми отримаємо?

 

Додаткову адресу сайту на піддомені "m." З відмінним від основного домену дизайном, спрощеним. У мережі прикладів такої реалізації багато, ось, наприклад, відомий усім сайт:

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

 

Оригінал статті – http://siteclinic.ru/blog/technical-aspects/3-sposoba-bystro-adaptirovat-sayt/