Сегодня многие компании уделяют созданию качественных мобильных ресурсов гораздо больше внимания, ведь по последним данным 80% интернет-пользователей применяют портативные устройства для поиска необходимой информации. Более того, маркетологи готовятся к большим изменениям в Google-алгоритме, которые вступили в силу 21 апреля 2015 года. В официальном блоге компании сказано, что теперь качество мобильной оптимизации ресурса будет во многом определять его позицию в поисковой выдаче.
Грядущий апдейт окажет на систему ранжирования гораздо больше влияния, чем те же Panda или Penguin, и именно поэтому совершенствование мобильного опыта должно стать вашим приоритетным направлением на ближайшее будущее. Согласно статье от Search Engine Land, посвященной данному обновлению, все сайты будут подвержены жесткой проверке на адаптивность к мобильным устройствам.
Чтобы вы могли в полной мере подготовить свой ресурс к столь серьезным изменениям, мы подобрали для вас 15 вдохновляющих примеров мобильного веб-дизайна.
1. Shutterfly
Shutterfly представляет собой онлайн-сервис, который позволяет создавать фотоальбомы, поздравительные карточки, пригласительные письма и многое другое. С каждым днем все больше людей открывают доступ к снимкам при помощи смартфонов, и потому Shutterfly постарались снабдить своих клиентов положительным мобильным опытом.
Мобильный сайт компании остается успешным по двум основным причинам: он упрощает пользователям поиск информации о офферах и продает их за счет красивых изображений.
Оказавшись на сайте, вы увидите, что разделы меню здесь представлены в виде больших кнопок в нижней части экрана. Благодаря этому посетители могут очень быстро определиться с выбором интересующей опции и получить дополнительную информацию.
2. Google Maps
Для многих из нас Google Maps уже давно стал любимым навигационным приложением. Вы используете его на прогулке, за рулем автомобиля, во время езды на велосипеде или в общественном транспорте, но при этом даже не замечаете, что мобильный веб-сайт данного сервиса практически ничем не отличается от загружаемой программы.
Размещенные ниже скриншоты были взяты с мобильного веб-сайта, однако в приложении разработчики применяют идентичный интерфейс. Более того, внешними сходствами в данном случае они решили не ограничиваться, ведь скорость и функционал сайта также соответствуют параметрам приложения.
3. Etsy
Etsy — это eCommerce-платформа, на которой вы можете покупать или продавать винтажные вещи и различные изделия ручной работы. Большинство покупателей оказывается здесь в надежде отыскать какой-то эксклюзивный товар, остальные же клиенты просматривают наиболее популярные категории. Мобильный ресурс компании разработан с мыслью об этих приоритетных задачах и удовлетворяет потребности абсолютно всех посетителей.
На главной странице вы сможете воспользоваться функцией поиска конкретных товаров и магазинов. При этом под поисковой строкой размещены миниатюрные изображения трендовых вещей, демонстрирующие наиболее популярные изделия на Etsy.
Пользователи могут просматривать вещи в виде списка или коллажей, а сами изображения достаточно велики для удобного таппинга.
4. Elf on the Shelf
Elf on the Shelf — относительно новая рождественская традиция, базирующаяся на детской книге. Ее основной посыл заключается в следующем: книга повествует историю об эльфах Санты, которые присматривают за детьми по всему миру и докладывают об их поведении. Наряду с книгой, родители могут приобрести статуэтку эльфа и разместить ее где-нибудь в поле зрения своих детишек. Каждую ночь, по мере приближения к Рождеству, заботливые мамы и папы переставляют фигурку эльфа, чтобы убедить малышей в существовании этих праздничных дозорных и тем самым повлиять на поведение.
Впервые оказавшись на этом сайте вы увидите, что на самом деле здесь реализуется самая разнообразная продукция. Местные веб-дизайнеры отказались от использования длинных текстовых списков для ее представления и отдали предпочтение простому свайпингу, который позволяет пользователям с легкостью просматривать любые желаемые товары.
5. BuzzFeed
Новостная компания BuzzFeed стала известной благодаря своему вирусному контенту и популярным викторинам. Ежедневно она развлекает тысячи людей, направляющихся домой или на работу, которые привыкли пользоваться мобильными устройствами на ходу.
BuzzFeed знают, что львиная доля пользователей заходит на сайт со смартфонов, поэтому мобильную версию ресурса маркетологи разрабатывали с мыслью о таких «путешествующих» читателях.
Наиболее популярный контент этого портала отображается в виде простых коллажей с большими, удобными для нажатия изображениями.
Для пользователей, заинтересованных в просмотре каких-либо конкретных категорий, в левом верхнем углу расположено меню со всеми доступными разделами.
6. Evernote
Evernote — это приложение, позволяющее хранить заметки, изображения или статьи, и получать к ним доступ с любого устройства. Люди пользуются данным сервисом практически на всех известных платформах (ПК, смартфоны, планшеты), поэтому качеству мобильного опыта здешние разработчики придали огромное значение.
Взглянув на домашнюю страницу Evernote со своего настольного ПК, вы непременно обратите внимание на чистоту дизайна. Короткие и уместные высказывания дополняются изображениями, которые при этом вовсе не загромождают страницу. Мобильную версию сайта дизайнеры решили оформить точно таким же образом и предоставили пользователям простой, чистый макет, полностью соответствующий ценностям приложения.
7. Lenta.ru
Новостной ресурс Lenta.ru доносит до пользователей информацию о любых интересных событиях, будь то политическая, развлекательная или техническая тематика. Мобильный веб-сайт предоставляет посетителям доступ к наиболее актуальным сведениям в двух удобных для чтения разделах.
Сравнив десктопную версию сайта с мобильной, вы увидите, что во втором случае на домашней странице основные категории спрятаны в выпадающем меню. Согласитесь, любителям беглого чтения на небольших дисплеях здешние дизайнерские решения подходят просто идеально.
8. Express
Express — это магазин одежды с широким ассортиментом текстиля для молодых парней и девушек. Поскольку целевая аудитория посещает сайт, прежде всего, чтобы просмотреть ту или иную модель одежды, ключевым дизайнерским элементом в данном случае являются большие и четкие изображения реализуемой продукции. И во время мобильного шоппинга этот аспект обретает еще большее значение, ведь перейти к информации о том или ином товаре пользователи могут только коснувшись экрана.
Express вывел мобильный опыт на совершенно новый уровень, во многом превзойдя конкурирующие ритейл-сервисы. Достаточно свайпнуть изображение слева направо, и вы увидите ту же модель одежды, воплощенную в другом образе. Иными словами, пользователи могут оценить интересующее текстильное изделие с разных ракурсов, не загружая при этом лишних страниц.
Взгляните на изображение, размещенное в правом верхнем углу, и проследите, как оно изменяется при использовании свайпа:
9. Nationwide Insurance
Nationwide Insurance специализируется на страховании и финансовых услугах. Вероятно, в вашем представлении сайт такой компании действительно отличается сложным функционалом, однако на деле здешние сотрудники отдали предпочтение максимально простому пользовательскому опыту.
Посетив мобильный сайт, вы сможете выполнить всего два действия: ввести почтовый индекс для получения скидки или просмотреть более подробную информацию о предоставляемых услугах. Хотя такой подход и ограничивает возможности пользователей в пределах ресурса, он значительно упрощает жизнь владельцам мобильных устройств. Это прекрасная методика, которая позволяет указывать потенциальным клиентам верное направление.
10. Zappos
Zappos — это онлайн-ритейлер обуви и одежды, известный своим первоклассным клиентским сервисом. При работе с пользователями мобильных устройств их основным приоритетом является упрощение поиска необходимых товаров, поэтому на сайте маркетологи разместили заметную поисковую строку, причем как в футере, так и в хедере.
Вот так выглядит шапка мобильного ресурса:
А здесь изображен футер:
11. ABC
ABC — это весьма известная телевизионная компания, которая обрела популярность благодаря шоу «Танцы со Звездами», «Современная семья» и «Скандал». Десктопная версия сайта порадует пользователей множеством разнообразных опций: посетители могут проверить текущее телевизионное расписание, узнать о лауреатах премии Оскар, посмотреть свои любимые телепередачи и даже взглянуть на развлекательные новости, касающиеся этих шоу.
Но все же ABC знают, что опыт использования онлайн-ресурса на портативных устройствах должен быть гораздо проще. По этой причине мобильный веб-сайт предлагает посетителям всего одну возможность: скроллинг больших кликабельных изображений, представляющих абсолютно все телевизионные шоу. Благодаря этому пользователи могут быстро просканировать изложенную информацию и выбрать любую интересующую их передачу.
12. Lean Labs
Агентство Lean Labs занимается разработкой эффективных веб-решений, направленных на повышение конверсии. Чтобы предоставить владельцам мобильных устройств качественный пользовательский опыт, Lean Labs используют продуманные дизайнерские приемы и акцентируют внимание на своих основных ценностях, которые бросаются в глаза посетителям в течение первых нескольких секунд пребывания на ресурсе.
Взгляните, как при помощи цветовой палитры и различных масштабов выделяет определенные фрагменты своей главной страницы бренда:
Как уже было сказано, ключевые ценности — прогрессивные стратегии, адаптивный дизайн и входящий маркетинг — четко представлены пользователям мобильных устройств при помощи скроллинга.
13. Pharmacy Development Services
Pharmacy Development Services занимается коучингом и консультированием владельцев аптек, запускающих собственный бизнес. Мобильная и десктопная версии сайта отличаются максимальной простотой и удобством использования, а благодаря адаптивному дизайну клиенты компании могут наслаждаться этими преимуществами практически на любых девайсах.
На мобильном веб-сайте задействована интерактивная домашняя страница: пользователям предлагается заполнить пробелы, исходя из собственных потребностей, а затем перейти к разделу с соответствующей информацией при помощи CTA-элемента. Как видите, здесь используются короткие формы, ведь излишний ввод текста на мобильных устройствах только раздражает клиентов.
14. SAP
SAP — это коммерческая компания, занимающаяся координированием бизнес-операций и отношений с клиентами. SAP заботятся о мобильном опыте, составляя слайдеры из информации и CTA-элементов, в то время как в десктопной версии сайта призывы к действию расположены горизонтально. Такой подход не только упрощает владельцам девайсов восприятие представленной информации, но и делает все CTA-элементы достаточно заметными.
15. KISSmetrics
KISSmetrics снабжает бизнес аналитическим программным обеспечением. На посадочной странице компании размещено много информации о продукции и ее характеристиках, но в мобильной версии все обстоит немного иначе: текстовую часть здесь постарались сократить к минимуму. Но почему? Потому что маркетологи KISSmetrics знают, что в мобильных девайсах пользователи упустят из виду гораздо больше текстового контента, чем при работе с настольным ПК.
Высоких вам конверсий!
По материалам: blog.hubspot.com
