Создать мобильную версию сайта можно тремя способами:
- Сделать отдельный сайт для мобильных устройств на поддомене;
- Создать мобильные приложения под популярные мобильные ОС (iOS, Android, Windows Phone);
- Использовать адаптивную верстку на сайте.
Со вторым пунктом всё ясно: если вы умеете программировать под мобильные платформы, то это не составит труда, а если нет - нужно заплатить денег профессионалам.
Теперь что касается первого и третьего пункта. Тут нужно смотреть на формат вашего сайта. Если ваш веб-проект представляет собой некий сервис, например, почтовый сервис, как Mail.ru, или социальная сеть, как Вконтакте или Facebook, то несомненно лучше использовать отдельный поддомен и отдельную версию сайта для мобильных платформ. Если же вы, к примеру, ведете блог, то лучше использовать адаптивную верстку.
Мобильная верстка
Основные принципы создания мобильной версии сайта:
- Мобильная версия делается на отдельном поддомене (например, m.vk.com);
- Создается версия сайта, полностью адаптированная под мобильные экраны (как правило, для ширины экрана меньше 620px);
- На основном сайте при загрузке страницы детектируется браузер пользователя, ширина экрана, и исходя из этого применяется решение о перенаправлении пользователя на мобильную версию.
Если говорить об адаптивности мобильной версии под мобильные устройства, то нужно учитывать, что элементы на экране должны быть достаточно большого размера, разнесены между собой. При верстке необходимо использовать "резиновую" сетку (это означает, что размеры элементов должны меняться в зависимости от размера экрана). Этих принципов стоит придерживаться при проектировании мобильной версии.
Определить браузер и ширину экрана пользователя на основном сайте можно, например, с помощью PHP-скрипта. Пример такого скрипта вы сможете найти на detectmobilebrowsers.com.
Адаптивная верстка
Основные варианты использования адаптивной верстки:
- Использование CSS3 Media Queries (в стилях сразу указываются все необходимые данные для нескольких вариантов разрешения экрана). Пример:
@media screen and (max-width: 1280px) { div.example {width: 1100px;} } @media screen and (max-width: 1024px) { div.example {width: 980px;} } - На сайте происходит детектирование разрешения экрана пользователя и в зависимости от него подгружается определенный CSS-файл с соответствующими стилями:
<link rel="stylesheet" href="nubex.css" media="screen" /> <link rel="stylesheet" href="nubexMobile.css" media="handheld" />Здесь параметр screen относится к обычным компьютерам, а handheld - к мобильным устройствам.
- Еще один вариант:
<link rel= "stylesheet" href= "nubexMobile.css" media= "only screen and (max-device width:480px)"/>Здесь файл nubexMobile.css подгружается для устройств с шириной экрана меньше 480 px.
Таким образом, в зависимости от типа вашего сайта можно выбрать подходящий тип поддержки мобильных устройств. При верстке мобильной версии может оказаться полезным сервис от Google: PageSpeed Insights, который укажет на ошибки и недочеты при разработке.