Разработка мобильных сайтов - советы для начинающих

Не делайте клоны обычных веб-сайтов под мобильные устройства. Это не работает и раздражает пользователей.
3 минуты6565

Треть сайтов в 2015 году показываются на экранах мобильных устройств по данным Statista.com.  Это значит, что современный веб-ресурс должен иметь адаптированный дизайн, который будет подстраиваться под различные устройства. Но веб-разработчики упрямо не хотят идти навстречу мобильным пользователям и предлагают им альтернативу разработки мобильной версии сайта в качестве веб-сайта слегка переработанный десктопный вариант. Какие же они ошибки совершают?

Жизнь без мышей

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

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

Если кнопка кликабельна, пользователь должен это увидеть или услышать, иначе он может и не понять, элемент это управления или нет? Кроме того, нажав на нее, пользователь должен быть уверен, что действие произошло. Не всегда качество связи позволяет дать быструю обратную связь, поэтому дизайнеру и разработчику нужно проявить креатив и «прокачать» стандартные элементы управления, иначе будут повторные нажатия с непредсказуемыми последствиями.

Хорошее меню мобильных сайтов

В спорах о разработке меню мобильных сайтов поломано немало копий. Более-менее компромиссным вариантом является использование динамических выпадающих списков. Благодаря этому удается экономить драгоценное пространство экрана. Но в этом случае должна быть такая иконка, глядя на которую пользователь сразу догадается, что это меню.

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

Другой быстрый выход из положения — установить каждый отдельный пункт меню в виде блоков, которые расположены вертикально. Но этот способ отнимает место у заголовка. Если в меню много пунктов, то этот вариант вам точно не подойдет. Пользователю не понравится прокручивать длинный список пунктов в поисках нужного.

Распространённый третий вариант: где-то в углу экрана есть кнопка, последовательно переключающая страницы с кнопками меню. Плюс этого варианта — полная свобода для использования CSS. Минус: как дать понять пользователю, что последний экран на самом деле последний и не стоит бесконечно проходить меню по кругу?

Удобный ввод текста на мобильной версии сайта

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

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

Технологии голосового поиска и ввода информации не стоят на месте. Там, где можно заменить текст на голос, это нужно делать обязательно. И не никогда не забывайте про такой важнейший элемент смартфона, как камера. Лучше немного пошаманить и добавить функциональность распознавания текста с фотографии, например, банковского чека или платежки ЖКХ. Дешево, быстро и сердито!

Мобильный дизайн

Содержание мобильного сайта должно быть лаконичным. Об этом забывают большинство веб-мастеров и делают клон с большого экрана. Не надо этого делать! Размещайте что-то действительно важное, что может зацепить пользователя.

Если это не банковское приложение или интернет-магазин, лучше сделать хорошо заметную кнопку для добавления ресурса в закладки. При первой возможности человек посмотрит то, что его заинтересовало, на большом мониторе. Поэтому надо делать интригующий контент, а не всеобъемлющий.

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

 

Тем, кто хочет профессионально разрабатывать под мобильные устройства, рекомендуем профессию «Программист iOS».

программированиеios_developerмобильная разработкасмартфонсоветы
Нашли ошибку в тексте? Напишите нам.
Спасибо,
что читаете наш блог!