yaponochka.com - разработка сайтов,  seo продвижение, нейминг
+38 (044) 237-45-90 seo-yaponochka Бесплатный расчет
Развитие бизнеса в интернете

Ваш сайт умеет быть мобильным? О сложных вещах на пальцах

Есть три распространённых способа работы с мобильной аудиторией сайта или интернет-магазина:

1. Мобильная версия сайта.
2. Адаптивный сайт.
3. Мобильные приложения.

Мобильные приложения мы не будет рассматривать в этой статье. Это особый вид разработки. Приложения скачиваются как отдельная программа на телефон и отображаются в виде вот таких иконок:

Мобильная версия сайта

Суть вкратце: сайт видит, что вы заходите с мобильного телефона, и перекидывает вас на отдельный домен (адрес сайта), который специально приспособлен для работы с мобильного телефона.

Как правило, основной домен сайта domen.com, а для мобильного добавляют букву «m» — m.domen.com

Давайте рассмотрим этот процесс на примере интернет-магазина sportmaster.ru. Если мы зайдем на сайт с компьютера, то увидим обычный интернет-магазин.

Но если введем тот же адрес в браузере телефона, то нас автоматически перекидывает на сайт m.sportmaster.ru. Для человека это происходит незаметно.

Обратите внимание, как перестроился каталог, изменилось верхнее меню, добавилось выезжающее меню и.т.д.

Оформление заказа. На сайте оформление разбито на шаги:

С мобильного телефона все происходит гораздо быстрее. Контакты заполнил – и заказ оформлен!

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

Здесь мы видим один из основных недостатков мобильного сайта с точки зрения бизнеса.

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

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

С основного сайта, как правило, есть ссылка на мобильную версию.

Преимущества мобильной версии сайта

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

Недостатки мобильной версии сайта:

  • Необходимость поддерживать две версии сайта. 
  • Все доработки на сайте необходимо дублировать.

Адаптивный дизайн: веб-пластилин?

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

Адаптивный сайт (вы можете встретить названия «адаптивный дизайн», «адаптивная верстка») — можно сравнить с пластилином.

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

Обратите внимание! Это не адаптивный сайт. Браузер сам уменьшил сайт и подстроил под экран.

(скриншот интернет-магазина ozon.ru)

Чтобы работать с этим интернет-магазином, его необходимо увеличивать.

В таком случае посетитель может столкнуться со следующими неприятными моментами:

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

Адаптивный сайт — давайте на примере

Пример из работы нашей компании – сайт американской компании ata-transport.com.

Главная страница в браузере выглядит так:

Ссылки, блоки, калькулятор – все размещено так, чтобы пользователь видел все возможности и выбрал нужный ему путь.

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

Обратите внимание, как перестроилось меню, как убрались отступы, сместилась информация об авторизации.

Несмотря на наши убеждения, клиент все-таки оставил логотип в первом экране.

Когда посетитель листает страницу внизу, он видит переходы на страницы.

С компьютера переходы на страницы выглядят так:

Форма расчета стоимости услуги с мобильного телефона:

Форма расчета стоимости услуги с компьютера:

Пару слов о подходе

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

Находясь на сайте, пользователь может тратить лишнее время на мелкие действия и ошибки.

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

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

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

1. Расположение элементов.
Главным фактором в адаптации сайта является расположение отдельных элементов дизайна на экране устройства, которое в данный момент использует пользователь вашего сайта.

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

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

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

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

Адаптивный сайт или все-таки мобильная версия сайта?

 

Отсутствие инструментов работы с мобильным трафиком – это уже недостаток бизнеса.

Больше 30% трафика – с мобильных устройств. Это не может не коснуться каждого сайта.

(Android, iOSIPhone, iOSIPad,SymbianOS – это все заходы с мобильных телефонов, только с разных операционных систем).

И динамика только растет.

Ссылка на статистику
http://www.liveinternet.ru/stat/ru/oses.html?period=month

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

Автор статьи:Андрей Трегубенко

Получай свежие статьи первым по E-mail

Интересное