О мобильных сайтах, приложениях и адаптивном дизайне - uGuide.ru

О мобильных сайтах, приложениях и адаптивном дизайне

  • Обновлено:
    2015-11-05
  • Просмотров:
    5128
  • Отзывов:
    3
  • Рейтинг: 4.9
Использование мобильных устройств с целью выхода в Интернет только увеличивается. Ещё год назад я относился к анализу трафика uGuide "по типу устройств" как к диковинной опции, которая не могла кардинально повлиять на мои маркетинговые решения.

С учётом интенсивности роста мобильных посещений, игнорировать мобильный трафик значит игнорировать значительную часть своей аудитории. В моём случае, это 6.78% (=10 640 уников) за последние 3 месяца.

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

Интересно, что в этом нет заслуги вашей CMS или контента. Так складывается исторически: всё больше людей начинают использовать мобильные устройства как точки доступа в Интернет.

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

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

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

В целом, существует несколько способов стать ближе к мобильному пользователю:

  1. Разработать мобильное приложение
  2. Создать мобильную версию сайта
  3. Использовать адаптивный дизайн
  4. Установить приложение "Мои сайты"

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

1. Мобильные приложения

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

Преимущества. Приложения быстро запускаются (нет надобности открывать бразуер); хорошо структурированы и компактны; многие не требуют Интернет-подключения.

Недостатки. Во-первых, это стоимость. Разработка полноценного приложения - недешевое удовольствие. Во-вторых, аналитика. Максимум, что вам удастся собрать о вашей аудитории - это количество загрузок, отзывов и оценка на Google Play или App Store + некоторые другие данные.

Сделай сам. Приложение можно создать самому. Существует множество веб-сервисов, представляющих собой удобные конструкторы мобильных приложений (как для iOS, так и Android). Они не требуют от пользователей навыков программирования. Существуют как бесплатные, так и платные конструкторы приложений.

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

Создание мобильной версии сайта подразумевает создание отдельного сайта, специально оптимизированного для мобильного браузинга. Под оптимизацией имеется ввиду "облегчение" сайта: мобильные сайты имеют менее объёмный код и не содержат элементов, которые могут некорректно или вообще не отображаться на мобильных устройствах, как например, Flash. Также, для них характерна упрощённая навигация. 

Допустим, вы - владелец успешного интернет-магазина, дизайн которого содержит множество слайдеров, высококачественных изображений продуктов, и даже несколько красивых Flash элементов. Все это отлично работает на ПК. Но для мобильных устройств такой сайт является неподъёмным грузом. Его срочно надо облегчать: уменьшать изображения, удалять лишние блоки, максимально упрощать процедуру оформления заказа. Это можно сделать лишь при помощи создания мобильной версии сайта. 

Преимущества. Мобильный сайт легок и быстр, и если создан согласно законов юзабилити, то очень удобен в использовании. В такой сайт можно добавить мобильно-специфические опции, Click-to-Call или Click-to-SMS к примеру (кнопка, при нажатии на которую пользователь может связаться с вашей компанией в один клик). Помимо этого, так как поисковики используют мобильный поиск для мобильных устройств (который отличен от десктопового поиска), можно предположить, что мобильные версии сайтов будут ранжироваться выше своих не-мобильных конкурентов.

Недостатки. Поскольку мобильная версия подразумевает создание отдельного сайта, то и обновлять вам придётся два сайта. Также, ваш трафик будет разделен на два домена: m.sitename.com и sitename.com. Следовательно, для мобильной версии тоже надо будет вести отдельные SЕО работы.

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

Важно отличать мобильные версии сайтов от PDA-версий, которые не требуют создания отдельного сайта.

3. Адаптивные сайты

Говоря простым языком, это "резиновые" сайты, которые динамически адаптируются под устройство, на котором их просматривают. Адаптивная вёрстка подразумевает использование "гибких" макетов и изображений. Следовательно, не нужно создавать отдельные версии сайта для разных устройств. У вас будет только один сайт.

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

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

Сделай сам. Большинство конструкторов сайтов изначально предлагают адаптивные шаблоны. Выбрав такой шаблон для вашего сайта вы получите адаптивный сайт автоматически, палец о палец не ударив. Стоит отметить, что некоторые сайтбилдеры дают возможность править "мобильный вид" вашего сайта в режиме drag-and-drop в мобильном редакторе, в то время как у других такие возможности ограничены.

4. Приложение "Мои сайты" от uCoz

А тем временем предлагаю вам установить приложение "Мои Сайты" для Android, Windows Phone и Apple. Установив это приложение, вы будете получать уведомления о новых статьях, а также сможете читать их в компактном формате.

Поскольку вы читаете статью на блоге, посвящённому вебмастерингу, можно смело предположить, что у вас есть собственный сайт. Также, можно предположить, что определённая часть читателей никогда не видели, как выглядит их сайт на маленьком экране. Самое время проверить .

Я очень надеюсь, что данная статья поможет вам в выборе правильного мобильного решения для вашего сайта. Делитесь опытом в комментариях!

  • Автор: Дмитрий Луценко

no avatar

Комментариев:3

Technic
3 uid Вячеслав Рудюк • 10:40, 2016-04-07
Добрый день. Возможно ли у вас заказать адаптивную верстку сайта ufaotdelka.ru И какова стоимость данной услуги. Заранее спасибо за ответ.
uguide.ru
Вячеслав, мы не занимаемся версткой шаблонов((
Вы можете выбрать адаптивный шаблон здесь: utemplate.pro/shop/responsive или заказать разработку (доработку) шаблона специально под ваш сайт в этих веб-студиях: uLab.proaThemes.ruPixelStyle.ru
nomid
2 uid Дмитрий ВДД • 21:47, 2016-02-05

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

По поводу этого недостатка. Я решил так, ненужные или не совсем нужные элементы/блоки и прочее убрал через display:none для разных разрешений экрана. Так, для 460px и 320px оставил самое нужное.

Однако, с картинками все же не получается сделать так, как это надо. Главная картинка $IMAGE1$, да и если есть другие, по размеру и объему все те же. Как это решить? Не знаю...
joker1
1 vk awdadadrdgh dadawd • 18:39, 2015-11-11
Отличная статья  up