Веб дизайн: мобильная версия - какие особенности учесть при разработке.

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

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

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

Особенности мобильного дизайна

Простота, лаконичность и структурирование

Ключевая особенность и ограничение при создании мобильного дизайна — это сравнительно небольшая площадь экрана смартфона. Здесь просто невозможно сразу отобразить все то, что вы показываете на десктопной версии сайта. А слишком длинную — «бесконечную» страницу, куда последовательно добавлены все блоки десктопной версии — просто мало кто долистает до конца.

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

Удобство использования на сенсорных экранах

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

Также предпочтительно, чтобы взаимодействие было возможно не только через точечное касание какой-то определенной зоны (кнопка/стрелка/точка), но и с помощью жеста смахивания (при этом на экран автоматически выводится следующий элемент в карусели). Особенно это касается блоков, которые можно листать.

Адаптивность и резиновость

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

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

Крупные элементы

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

То же касается и самих текстовых блоков — текст должен быть хорошо видимым и читаемым без дополнительного увеличения.

В результате в рамках одного экрана вряд ли получится уместить больше 1–2 пунктов/товаров/услуг в формате: заголовок + фото/иконка + текст описания + кнопка заказа или перехода.

Одна колонка контента

Если на десктопных версиях возможно параллельное использование 2–3 колонок контента одного или разного формата, то на мобильных устройствах закономерно преобладает выкладка в один ряд с вертикальной прокруткой.

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

Минимизация виджетов и всплывающих окон

Так как на экране смартфона мало место — любое всплывающее окно будет загораживать его почти полностью, а поэтому в разы сильнее раздражать посетителей. Кроме того — если вы пользуетесь какими-то сторонними онлайн-чатами для поддержки либо виджетами (которые в готовом виде встраиваются в сайт), то велика вероятность того, что они будут отражаться некорректно: уползать за край экрана, зависать и в целом тормозить работу страницы. Лучше всего отказаться от этих решений в принципе, в крайнем случае — использовать собственные решения, адаптированные под разные типы экранов.

Связь в один клик

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

Поэтому в мобильном дизайне рекомендуется выводить иконку телефона в верхнее закрепленное меню (рядом с «бургером» и поиском) — так клиентам будет проще связаться с вами, если они захотят это сделать. Это тем более удобно, что звонок сразу пойдет на указанный номер компании как только посетитель нажмет на соответствующий символ.

Навигация на мобильных устройствах

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

Главное меню

В подавляющем большинстве случаев в мобильных версиях используется свернутое меню типа «бургер» (три горизонтальные полосы). При нажатии на бургер выплывает окно с полной картой разделов сайта. Это решение избавляет от необходимости размещать текстовые названия разделов непосредственно на главной странице, что экономит место и выглядит аккуратнее в визуальном плане.

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

Форма поиска

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

Кнопки действий

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

Формы обратной связи

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

Оптимизация изображений

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

Так как экран смартфона достаточно мал, а данные часто идут не через wi-fi, а через мобильный интернет, то использовать те же изображения, что и для десктопа здесь и не нужно, и даже вредно. Все равно пользователь не увидит слишком мелких деталей высококачественной картинки.

Необходимо уменьшить размер фотографии в пикселях — ориентируясь на размер экрана смартфона, а после этого дополнительно сжать картинку. При этом обычно происходит незначительное сглаживание мелких деталей (на экране смартфона этого никто не увидит), но одновременно в разы уменьшается размер файла (до 20–30% от первоначального объема).

Интеграция с соц.сетями

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

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

________________

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

Наша веб-студия по умолчанию создает адаптивный дизайн для всех разрабатываемых сайтов. На все проекты даем 1 год гарантии. А в самой работе руководствуемся правилом «золотой середины» — то есть совмещаем стильный дизайн с крутым seo. Любой разработанный нами сайт мы готовы взять в продвижение и вывести в топ.