Робимо мобільну версію сайту

Створити мобільну версію сайту можна трьома способами:

  • Зробити окремий сайт для мобільних пристроїв на піддоміні;
  • Створити мобільні програми під популярні мобільні ОС (iOS, Android, Windows Phone);
  • Використовувати адаптивну верстку на сайті.

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

Мобільна верстка

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

  • Мобільна версія робиться на окремому піддоміні (наприклад, m.vk.com);
  • Створюється версія сайту, повністю адаптована під мобільні екрани (як правило, для ширини екрана менше 620px);
  • На основному сайті при завантаженні сторінки детектується браузер користувача, ширина екрану, і тому застосовується рішення про перенаправлення користувача на мобільну версію.

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

Визначити браузер та ширину екрана користувача на основному сайті можна, наприклад, за допомогою PHP-скрипту. Приклад такого скрипту ви можете знайти на detectmobilebrowsers.com.

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

Основні варіанти використання адаптивної верстки:

  1. Використання CSS3 Media Queries (в стилях відразу вказуються всі необхідні дані для кількох варіантів)роздільної здатності екрана). Приклад:
  2. На сайті відбувається детектування роздільної здатності екрана користувача і залежно від нього підвантажується певний CSS-файл із відповідними стилями:

Тут параметрscreen відноситься до звичайних комп'ютерів, аhandheld - до мобільних пристроїв.

Ще один варіант:

Тут файл nubexMobile.css підвантажується для пристроїв із шириною екрана менше 480 px.

Таким чином, залежно від типу вашого сайту, можна вибрати відповідний тип підтримки мобільних пристроїв. При верстці мобільної версії може бути корисним сервіс від Google: PageSpeed ​​Insights, який вкаже на помилки та недоліки при розробці.