До 2018 года, когда мобильный интернет-трафик превысил трафик настольных компьютеров и ноутбуков, мобильные веб-сайты были второстепенными в процессе веб-дизайна.
Рост числа мобильных пользователей изменил эту ситуацию, и в последние годы приоритетом стал мобильный веб-дизайн.
Сегодня 61% пользователей мобильных устройств с большей вероятностью обратятся к компаниям, если у них есть веб-сайт, адаптированный для мобильных устройств.
В этой статье мы разберем, что такое дизайн, ориентированный на мобильные устройства, сравнив его с его аналогом, адаптивным веб-дизайном.
Мы также обсудим пять передовых методов разработки веб-сайта, ориентированного на мобильные устройства, и выясним, почему важна ориентация на мобильные устройства.
Наконец, мы вдохновимся, рассмотрев пять особенно удивительных примеров высокофункциональных веб-сайтов, созданных для смартфонов.
Что такое дизайн, ориентированный на мобильные устройства?
Веб-дизайн, ориентированный на мобильные устройства, - это стратегия дизайна веб-сайтов , которая начинается с создания эскиза и прототипа веб-сайта для экранов смартфонов, а затем масштабируется до больших экранов настольных компьютеров и ноутбуков.
Этот подход проистекает из того факта, что сегодня большинство пользователей просматривают веб-сайты со своих мобильных устройств, что подчеркивает важность обеспечения приятного пользовательского опыта для тех, кто просматривает веб-сайты на своих смартфонах.
В веб-дизайне, ориентированном на мобильные устройства, приоритет отдается наиболее важным аспектам веб-сайта и его содержания, а затем макет адаптируется к экранам большего размера, создавая более унифицированный пользовательский интерфейс для всех каналов и устройств.
Подход, ориентированный на мобильные устройства, и адаптивный веб-дизайн: в чем разница?
Термины «прежде всего для мобильных устройств» и «адаптивный дизайн» все еще иногда используются как синонимы, хотя эти понятия совсем не одно и то же.
На самом деле, до некоторой степени они прямо противоположны.
Адаптивный веб-дизайн (RWD) создает веб-сайты, которые автоматически адаптируются к экранам любого устройства.
Адаптивный дизайн отлично подходит для сайтов с большим количеством контента, а также является очень хорошим фактором SEO.
Ключевым моментом в RWD является то, что он идет по пути, противоположному принципу «сначала мобильные»: он отдает предпочтение большим экранам настольных компьютеров, а затем масштабируется до экранов мобильных телефонов и планшетов.
Это связано с тем, что в то время, когда доминировал RWD, большая часть интернет-трафика приходила с настольных устройств, поэтому дизайнеры UX ставили потребности настольных компьютеров во главу угла при создании этого типа дизайна.
Как указано выше, веб-дизайн, ориентированный на мобильные устройства, представляет собой стратегию дизайна, заключающуюся в обновлении веб-сайта со смартфона до более крупных версий.
Подход, ориентированный на мобильные устройства, аналогичен разработке мобильного приложения и настройке его макета для соответствия экрану рабочего стола, при этом сохраняются отличные черты взаимодействия с пользователем, которые есть во многих приложениях, такие как упрощенный контент и высокая скорость загрузки.
5 принципов дизайна, ориентированных на мобильные устройства
Определение того, что пользователь должен видеть и понимать, как только он попадает на ваш веб-сайт, - это первый шаг при рассмотрении контента для дизайна, ориентированного на мобильные устройства.
Давайте рассмотрим пять основных принципов веб-дизайна, ориентированного на мобильные устройства.
Принцип 1: сохраняйте простой дизайн
При разработке веб-сайта, ориентированного на мобильные устройства, сокращение использования дополнительных функций и элементов, чтобы сосредоточиться на самом важном, сделает взаимодействие с пользователем гораздо более приятным.
Веб-дизайн, ориентированный на мобильные устройства, - это простота, потому что держатели смартфонов используют для навигации пальцы, которые не так точны, как мышь или тачпад на ноутбуке или настольном устройстве.
Другими словами, очень важно, чтобы все было легко доступно для полностью оптимизированного UX на небольших экранах. Вот почему вы должны спросить себя, какие элементы веб-сайта действительно необходимы и какие функции и функции могут быть исключены на веб-сайте, ориентированном на мобильные устройства, чтобы обеспечить оптимальное удобство использования.
Например, вы можете решить:
- Уменьшите количество ссылок в главном меню навигации
- Задавайте меньше вопросов и используйте меньше полей в разделах "Связаться с нами", "Подписка", "Покупка" и другие электронные формы.
- Сведите количество страниц на сайте к минимуму
- Увеличьте свободное пространство для лучшей видимости и уменьшения беспорядка
- Используйте широкие границы и чистые линии
- Используйте простой шрифт и сделайте его достаточно большим для удобочитаемости
- Создайте свой мобильный веб-сайт с максимум двумя столбцами, которые разделяют контент на одной странице.
Принцип №2: используйте жирные и функциональные кнопки с призывом к действию
Плохо спроектированные кнопки призыва к действию на мобильных сайтах могут привести к тому, что вы упустите потенциальных клиентов и продажи из-за проблем с удобством использования или форм лидогенерации, которые невозможно заполнить.
Ваши призывы к действию должны привлекать внимание посетителей и превращать потенциальных клиентов в клиентов. Каждая часть контента на вашем веб-сайте должна работать в направлении этой точки конверсии.
Рекомендации по созданию кнопок CTA, удобных для мобильных устройств, включают:
- Иметь более одного на странице, что должно привести к одной конкретной точке конверсии.
- Используйте заманчивые, но лаконичные тексты на кнопках CTA, которые побуждают пользователей нажимать
- Сделайте достаточно большие призывы к действию с яркими цветами, чтобы они выделялись на небольших экранах.
- Поместите первый призыв к действию в верхней части страницы, чтобы пользователям не приходилось прокручивать его, чтобы увидеть его.
Принцип № 3: Используйте удобный для мобильных устройств графический дизайн
Компании, которые делают упор на графический дизайн, на 200% превосходят компании, не ориентированные на дизайн .
Веб-сайты с хорошим дизайном также считаются более заслуживающими доверия и более простыми в использовании их посетителями.
Графический дизайн - важное соображение для подхода, ориентированного на мобильные устройства, потому что мобильные пользователи с большей вероятностью покинут веб-сайт, если обнаружат, что их отвлекает или плохой дизайн.
Лучшие практики графического дизайна для мобильных сайтов включают:
- Светлые и темные контрастные цветовые решения
- Минимализм
- Яркие и качественные фотографии (оптимизированные для мобильных устройств)
- Смелые формы и чистые линии
Принцип # 4: сделайте контактную информацию приоритетной
Мобильные пользователи ищут быструю информацию и не склонны просматривать веб-сайт в течение длительного времени, как пользователи настольных компьютеров и ноутбуков.
Приоритет бизнес-контактной информации путем ее визуального отображения на мобильном сайте увеличивает вероятность повышения коэффициента конверсии, поскольку ваши клиенты могут легко связаться с вами.
Чтобы вывести это на другой уровень, включив чат в реальном времени на вашем мобильном веб-сайте, является хорошей идеей, поскольку он обеспечивает еще одну точку немедленного контакта для ваших посетителей.
Обязательно отображайте всю контактную информацию - такую как номер телефона вашей компании, адрес электронной почты, местонахождение и время работы - на видном месте на своем веб-сайте. Не заставляйте посетителей прокручивать или сканировать весь ваш сайт в поисках этого.
Принцип № 5: Ускорьте свой мобильный сайт
Пользователи с большей вероятностью будут отвлекаться и отказываться от использования мобильных устройств. Фактически, 40% пользователей уходят, если веб-сайт загружается дольше трех секунд.
Производительность мобильного веб-сайта является ключом к привлечению посетителей, а скорость загрузки должна быть быстрой - чтобы помочь удержать посетителей, а также потому, что они являются фактором ранжирования Google.
Чтобы улучшить скорость загрузки мобильного сайта, вам необходимо:
- Включить кеширование браузера
- Оптимизируйте изображения, обрезая их до нужного размера и сохраняя для Интернета
- Включите сжатие изображений, чтобы уменьшить размер изображений
- Сократите HTTP, что означает:
- Оптимизация количества элементов на странице
- Объединение нескольких файлов CSS в один
- Размещение скриптов внизу страницы
- Минимизируйте CSS и JavaScript, удалив ненужный код, файлы и скрипты, убрав лишние пробелы и разрывы строк.
- Минимизируйте перенаправления
- Используйте сжатие gZip, чтобы уменьшить размер файла
- Используйте мобильный CDN для уменьшения задержки
- Сначала загрузите контент в верхней части страницы
- Обновите версию PHP
- Отключите неиспользуемые надстройки и плагины
- По возможности используйте услуги премиум-хостинга
Почему так важна разработка с ориентацией на мобильные устройства?
Веб-дизайн, ориентированный на мобильные устройства, гарантирует, что ваш сайт будет реагировать на запросы клиентов на любой платформе.
Если начать с малого и сжать контент и информацию вашего веб-сайта для мобильных экранов, вам будет проще добавлять дополнительные функции по мере увеличения масштабирования до больших экранов.
Проектирование для мобильных устройств в первую очередь означает понимание того, что потребности тех, кто выполняет поиск с мобильных устройств, отличаются от потребностей тех, кто пользуется портативными или настольными компьютерами. Помните, что мобильные пользователи, скорее всего, ищут быструю информацию, а пользователи настольных компьютеров хотят более подробный контент.
Веб-дизайн, ориентированный на мобильные устройства, важен еще и потому, что он:
- Ориентация на основной контент : веб-сайты, ориентированные на мобильные устройства, отображают контент в ясной, простой для понимания и краткой форме. Это положительно влияет на более крупные версии веб-сайта, которые приобретают более изысканный вид. Дизайн, ориентированный на мобильные устройства, ориентирован на то, чтобы предоставить пользователям именно то, что они ищут, без отвлекающих факторов.
- Обеспечивает более простую навигацию : упрощенная основная навигация веб-сайтов, ориентированных прежде всего на мобильные устройства, направляет пользователя на несколько ключевых страниц. Гамбургер-меню, которое обычно скрыто слева или справа, создает больше места для удобной навигации.
- Повышает охват и видимость: оптимизируя свои веб-сайты для мобильных устройств и делая смартфоны своим приоритетом, владельцы сайтов повышают релевантность и общий охват своих веб-сайтов, поскольку результаты поиска Google отдают предпочтение сайтам, которые хорошо отображаются на мобильных устройствах.
- Рентабельность : веб-сайт, ориентированный на мобильные устройства, является современным требованием, поскольку он увеличивает возможности взаимодействия с квалифицированными потенциальными клиентами и продажи продукта или услуги на ходу. Это способствует более высокому доходу, что делает этот подход очень рентабельным в долгосрочной перспективе, даже когда изначально требуются большие бюджетные ресурсы.
5 примеров веб-дизайна, ориентированного на мобильные устройства
Давайте взглянем на пять веб-сайтов, ориентированных прежде всего на мобильные устройства, с отличным дизайном, которые не только задают стандарты удобства использования для мобильных устройств и отличного пользовательского интерфейса.
Пример №1: Adobe
Мобильный веб-сайт Adobe предоставляет пользователям широкий спектр программных решений, чтобы они могли найти нужный продукт в считанные секунды после перехода на главную страницу.
Призывы к действию «Начать бесплатную пробную версию» разбросаны по веб-странице с одним столбцом, в то время как гамбургер-меню из пяти пунктов скрыто вверху слева и появляется только тогда, когда пользователь выполняет прокрутку вверх.
В этом меню навигации перечислены несколько ключевых страниц, которые пользователи могут изучить, чтобы узнать больше о конкретных функциях продуктов Adobe.
Яркая, но простая типографика, яркие цвета и пустое пространство разделяют контент на тематические блоки, что упрощает навигацию и понимание веб-сайта.
Пример # 2: Apple
Элегантный мобильный веб-сайт технологического гиганта Apple позволяет посетителям узнать больше об их конкретных продуктах. Это делается в соответствии с фирменным стилем Apple, как визуально, так и с точки зрения обмена сообщениями.
Простой одностолбцовый макет соответствует лучшим практикам контрастирования цветов, белого пространства, разборчивых шрифтов и высококачественных изображений без ущерба для скорости загрузки страницы.
Копия сведена к минимуму и позволяет изображениям и заметным призывам к действию говорить о ценности предложения.
Каждому продукту или услуге отводится точно такое же место в коробке, посвященной их содержанию. Навигационное меню человека скрыто в верхнем левом углу и при открытии представляет несколько ключевых целевых страниц на стильном черном фоне.
Пример # 3: Etsy
Как веб-сайт электронной коммерции, Etsy обслуживает покупателей винтажных товаров и товаров ручной работы и ориентируется на их поведение, которое заключается в поиске определенного товара или просмотре товаров в определенной категории.
Прямо над сгибом находится гамбургер-меню с категориями, которые пользователи могут просматривать, и панель поиска с очень понятной инструкцией «Искать что угодно».
Без необходимости прокрутки вниз пользователям также предоставляется выбор из нескольких самых популярных и популярных категорий товаров. На большие изображения достаточно легко нажать, и они переходят на соответствующие целевые страницы.
Множество пустого пространства и отличная видимость упрощают навигацию, что особенно важно для предприятий электронной коммерции.
Пример # 4: Evernote
Веб-сайт Evernote, ориентированный на мобильные устройства, - это пример минимализма и чистого мобильного пользовательского интерфейса.
Минимальное количество текста, яркие настраиваемые иллюстрации и очень обширная навигация - вот некоторые из основных элементов веб-сайта Evernote. Но ничто из этого не является таким заметным, как море белого пространства, которое делает все на удивление ясным и легким для навигации.
Даже те части веб-сайта, которые используют больше текста, легко обойти благодаря последовательному использованию удобочитаемой типографики.
Пример # 5: Скалы
Портал, посвященный еде и напиткам, The Rocks, очень информативен и переводит качественные изображения и статьи в блогах на мобильные устройства.
Помимо ярких цветов, разборчивого текста и высококачественных изображений, веб-сайт использует крупные призывы к действию для удобства использования. Умное использование кнопки поиска хорошо интегрировано в макет, следуя за пользователем в правом нижнем углу.
Логотип бренда ссылается на домашнюю страницу, а в меню навигации перечислено только несколько элементов, что упрощает просмотр и понимание сайта.
Основные выводы веб-дизайна, ориентированного на мобильные устройства
85% интернет-пользователей считают, что мобильный веб-сайт компании должен быть не хуже, чем настольная версия. Веб-дизайн, ориентированный на мобильные устройства, обеспечивает оптимальное взаимодействие с мобильными пользователями для этой аудитории благодаря:
- Краткая копия
- Полужирный CTA
- Более высокая скорость загрузки
- Оптимизированные изображения и другие медиа
- Разборчивые шрифты
- Пользовательский интерфейс, похожий на приложение