В наше время все больше пользователей сети Интернет просматривают веб-страницы с различных мобильных устройств и телефонов.
Как показывает статистика, в прошлом 2012 году трафик с мобильных телефонов увеличился почти на 40%, а рост трафика пользователей выходящих в сеть со смартфонов и планшетных компьютеров увеличился на 80%.
Где люди используют мобильные устройства?
Все это говорит о том, что в настоящее время, при разработке сайта стоит задуматься о его мобильной версии.
Сейчас существуют два способа реализации сайтов для мобильных устройств – Мобильная версия и Адаптивный дизайн и верстка.
При разработке мобильного сайта нужно учитывать потребности вашей аудитории. Обычно используется вертикальное представление страницы.
Примеры мобильных сайтов:
Вверху и внизу сайта желательно расположить кнопку «На главную», а так же кнопку «Вверх» внизу страницы.
Вся важная информация должна находится в 3 клика. Обычно пользователи мобильных устройств желаю найти место расположения вашей компании или часы работы и телефоны.
Так же пользователь должен иметь возможность переключится на полную версию сайта, в том случае если он не нашел нужной для себя информации в мобильной версии. Это основное отличие и большое достоинство мобильной версии сайта.
Для правильного отображения требуется установить редирект на поддомен на котором будет находится ваш мобильный сайт обычно это m.yourdomain.com или mobile.yourdomain.com.
Главным минусом мобильной версии, является не возможность реализации всего функционала полного сайта, а так же его редактирование и обновление с помощью другой CMS или вручную.
Адаптивный дизайн появился в США в 2010 году и с тех пор активно развивается.
Впервые термин был введен Итаном Маркотом в его статье Responsive Web Design в мае 2010, позже в 2011 году он выпустил одноименную книгу.
В начале 2011 года ввели термин адаптивный веб-дизайн (responsive web design), который сейчас уже хорошо прижился у российских дизайнеров и разработчиков.
Для создания таких сайтов используют CSS-фреймворки, позволяющие адаптировать верстку, изображения и другие элементы как для большого монитора, так и для мобильного устройства.
При разработке такого сайта изначально продумывается прототипы дизайна под различные разрешения экрана.
Примеры адаптивых сайтов:
В отличии от мобильной версии, адаптивный дизайн имеет тот же URL, что и основной сайт. А сам сайт представляет весь функционал полной версии сайта.
Адаптивная версия сайта позволяет использовать полезные функции смартфонов и телефонов такие как: акселерометр, тач-скрин.
Так же одним из удобств адаптивной верстки является то, что для редактирования новостей и страниц вы будете использовать ту же CMS, на которой работает основная версия.
Проблемы встающие перед разработчиками адаптивной версии:
Выбор способа зависит от аудитории Вашего сайта и конкретных целей Вашей компании. Наши специалисты смогут подобрать вариант специально для вашего бизнеса!
Автор: Вячеслав Скрыгин, Студия Флаг, Май 2014.
