Разработка мобильной версии сайта

Сегодня, когда ни один человек не может представить и дня без использования телефона, каждый разработчик понимает, что без мобильной версии сайта уже не обойтись. Именно поэтому перед ними стоит сложный выбор: сделать имеющийся сайт адаптивным к просмотру с гаджетов или создать ресурс для мобильных устройств с нуля.

Существует 3 основных способа разработки сайтов для мобильных устройств:

• Применение адаптивного дизайна. В этом случае сама страница сайта не изменяется, однако CSS-файл применяет правила, которые зависят от ширины окна браузера и адаптируется под него.

• Создание нового мобильного сайта, который будет размещаться на поддомене или в подкаталоге. Может случаться и так, что основной и мобильный сайт имеют одинаковые URL. Загрузка HTML кода будет зависеть от динамической выдачи. Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает это изменить.

• Создание мобильной версии сайта или RESS (Request, Event, Screen, Storage  — новая архитектура для мобильных приложений). Данный метод является самым сложным в разработке, но он сочетает в себе все преимущества адаптивного дизайна и отдельного мобильного сайта.

Что должна включать в себя мобильная версия сайта

Мобильная версия должна по цвету, содержанию и стилистике всегда оставаться такой же, как и основной сайт. Разница заключается лишь в том, что пространство мобильной версии максимально заполняется текстовым контентом и содержит минимум графики. Основная задача дизайнера — хорошо продумать, какие элементы в приоритете, а какие можно просто убрать, чтобы вместить все необходимое в небольшой экран гаджетов.

Сама страница ограничивается по ширине, именно поэтому лучше разместить все необходимое в одну колонку, чтобы не снизить скорость загрузки сайта. По длине никаких ограничений нет, поэтому информация должна располагаться потезисно для максимального удержания внимания посетителя. 

Основные тенденции Web-дизайна при создании сайтов для мобильных устройств

• Mobile First - сначала разрабатывается мобильная версия сайта, а уже потом основная, которая наполняется различными элементами и адаптируется под компьютер.  Данная методика применяется в том случае, когда наполнение сайтов полностью совпадает.

• Навигация. В мобильной версии нет возможности сделать “стандартную” навигацию с выпадающим меню. Поэтому программисты создают несколько ссылок для навигации или предлагают пользователю воспользоваться поисковой строкой.

• Размер экрана. Большинство современных мобильных устройств имеют разрешение в 320 пикселей, многие разработчики ориентируются на 240. Для того, чтобы все элементы хорошо уместились в рамках экрана, в таблице стилей CSS необходимо установить параметр 100%. Именно тогда они будут подстраиваться под нужный размер автоматически. Инструмент для аналитики Google Analytics поможет вам отследить самые популярные устройства, которые посещают страницу вашего сайта. Благодаря этому вы сможете сделать определенные выводы при разработке мобильной версии.

• Тачскрин. Необходимо также учитывать, что площадь поверхности пальца намного больше, чем курсор компьютерной мыши, поэтому точность попадания по ссылкам довольно низкая. Поэтому разработчику необходимо продумать структуру таким образом, чтобы вокруг ссылок было оставлено не менее 28 пикселей свободного пространства. А еще пользователь должен наглядно увидеть, что ссылка нажата и сайт загружает нужную страницу. Для этого идеально подойдут вдавленные кнопки или ссылки, меняющие цвет при нажатии.

• Выпадающее меню. Когда пользователь касается экрана, выпадающее меню должно раскрываться. Пункты, находящиеся в нем должны быть крупными и четкими.

• Не стоит пренебрегать такими возможностями платформы, как загрузка карты с маршрутом или “click to call”.