responsive_mobile_cool_design

Сейчас, более чем когда-либо, компании сосредоточены на создании отличных мобильных веб-сайтов. В конце концов, 80% интернет-аудитории используют смартфоны для поиска в Интернете.

Более того, к большим переменам готовятся и маркетологи, ибо Google запускает новый алгоритм, который, по словам представителей компании, будет более дружественен к мобильным устройствам, в том числе в определении рейтинга сайтов. Это обновление должно оказать существенное влияние на маркетинговую политику компаний.

Появление новинок от Google повлияет на 40% мобильных поисковых запросов. Для сравнения: Panda оказала влияние лишь на 12% таковых, а Penguin затронуло около 4%.

Другими словами, если вы не будете с упорством работать над улучшением мобильных версий ваших сайтов, вы можете свалиться вниз в поисковых рейтингах. Как справедливо было замечено в статье сайта Search Engine Land об обновлении от Google: «… теперь никаких степеней мобильного дружелюбия. О вашем сайте будут судить просто: либо он дружественный к мобильным устройствам, либо нет».

 

Чтобы вдохновить вас на изменения в мобильной версии вашего сайта, мы предлагаем список из 15-ти компаний с грандиозным опытом мобильных веб-разработок.

1) Shutterfly

responsive_mobile_cool_design_1

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

responsive_mobile_cool_design_2

На своем мобильном сайте компания преследует две основные цели: 1) Пользователи легко находят информацию о своих предложениях; 2) Они продают эту информацию посредством красивых снимков.

 

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

 

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

 

2) Google Maps

responsive_mobile_cool_design_4

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

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

responsive_mobile_cool_design_3

 

3) Etsy

responsive_mobile_cool_design_5

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

responsive_mobile_cool_design_6

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

 

4) Elf on the Shelf

responsive_mobile_cool_design_7

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

Впервые попав на сайт Elf on the Shelf, вы увидите множество типов Эльфов, которых можно купить. Но вместо того, чтобы заставлять пользователей прокручивать длинный, текстовый список, веб-дизайнеры сделали его легким для пользователей. Достаточно просто провести пальцем слева направо, чтобы просмотреть все существующие варианты.

 

5) BuzzFeed

responsive_mobile_cool_design_8

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

responsive_mobile_cool_design_9

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

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

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

 

6) Evernote

responsive_mobile_cool_design_10

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

responsive_mobile_cool_design_11

Если посмотреть на домашнюю страницу Evernote на настольном компьютере, то нельзя не заметить, насколько здесь четкий и чистый дизайн. Содержание страницы короткое и точное, а изображения не загромождают ее. Зайдя на мобильный веб-сайт, вы убедитесь, что этот стиль полностью сохранен. Дизайн мобильной версии Evernote является чистым, простым и не умаляет достоинств приложения.

 

7) Huffington Post

 responsive_mobile_cool_design_12

Huffington Post — известный новостной сайт, освещающий все темы — от политики и текущих событий до развлечений и техники. Уникальность их мобильной версии в том, что разработчики немного изменили свои заголовки для мобильных пользователей так, чтобы их содержание разворачивалось легко и просто.

 

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

 

 

8) Express

responsive_mobile_cool_design_13

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

responsive_mobile_cool_design_14

Создавая мобильную версию, Express прошел на шаг дальше, чем большинство интернет-магазинов. Если вы проведете по изображению пальцем слева направо, показывая на элемент одежды, изображение будет меняться так, что вы сможете увидеть одежду в ином ракурсе. Таким образом, пользователям не нужно загружать другую страницу, чтобы увидеть несколько фотографий одного и того же изделия.

 

9) Nationwide Insurance

responsive_mobile_cool_design_15

Nationwide Insurance предоставляет страховые и финансовые услуги. Казалось бы, финансовая компания должна иметь реально сложной сайт. Однако Nationwide Insurance предлагает простейшее мобильное решение.

 

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

 

10) Zappos

responsive_mobile_cool_design_16

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

responsive_mobile_cool_design_17

 

11) ABC

responsive_mobile_cool_design_18

Телевизионная компания ABC известна такими популярных шоу, как «Dancing with the Stars», «Modern Family», и «Scandal». Люди, посещающие основную версию сайта, встречаются с массой опций: программой телепередач, перечнем обладателей Оскара, возможностью просмотра любимых телевизионных шоу, лентой новостей и т.п.

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

 

12) Lean Labs

responsive_mobile_cool_design_19

Lean Labs — партнер агентства HubSpot, которое создает привлекательные, гибкие, веб-решения с высоким уровнем конверсии. Они уделяют много вниманию по обеспечению мобильных пользователей удобным контентом для маленьких экранов.

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

responsive_mobile_cool_design_20

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

 

 

13) Pharmacy Development Services

responsive_mobile_cool_design_21

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

responsive_mobile_cool_design_222

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

 

 

14) SAP

responsive_mobile_cool_design_23

SAP – мировой лидер по производству программного обеспечения и предоставлению бизнес услуг для предприятий. Мобильная версия веб-сайта компании объединяет некоторые свои СТА в слайдер, в то время как в версии для больших экранов эти СТА располагаются горизонтально. Такое решение помогает мобильным пользователям просматривать страницы, не перегруженные большим количеством информации, а также обеспечивают приемлемую читабельность призывов к действию.

 

 

15) KISSmetrics

responsive_mobile_cool_design_24

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

 

Возможно, вам известны другие поразительные мобильные примеры веб-сайтов? Поделитесь с нами в комментариях!

Май 7, 2015