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