• Главная

Адаптация сайта под мобильные устройства: адаптивная верстка VS мобильная версия. Продвижение мобильной версии сайта


Энциклопедия интернет-маркетинга: мобильная версия сайта или адаптивная верстка

Лого.jpg

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

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

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

Мобильная версия сайта — это копия сайта, адаптированная под размер мобильного устройства, на поддомене (m.site.ru) или папке (site.ru/m). Самый распространенный способ — отдельная мобильная версия на поддомене.

Плюсы мобильной версии сайта

1. Более низкая стоимость.

Разработка мобильной версии обойдется намного дешевле, чем адаптивная верстка. Фактически, это копия сайта, сверстанная с учетом размера экрана мобильного устройства.

2. Высокая скорость загрузки.

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

3. Возможность независимого управления контентом.

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

Минусы мобильной версии

1. Продвижение двух версий сайта.

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

2. Сложности продвижения двух версий.

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

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

На основном же домене следует разместить ссылку на альтернативную версию страницы для пользователей мобильных устройств при помощи тега rel="alternate".

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

3. Отдельное доменное имя.

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

mobile site.jpg

Адаптивный дизайн

Адаптивная верстка сайтов — это оптимизация меню и дизайна сайта под разные типы устройства. Контент сайта не меняется в зависимости от устройства, и поисковый робот видит одинаковый html-код как на смартфоне, так и настольном компьютере. Но, вместе с этим, определяет, что контент помещается на любом экране.

Плюсы адаптивной верстки

1. Все на одном домене.

Это преимущество решает сразу несколько проблем продвижения сайта на разных устройствах:

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

2. Оптимизация под все устройства.

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

Минусы адаптивной верстки

1. Медленная загрузка сайта.

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

2. Один и тот же контент для разных устройств.

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

3. Более высокая стоимость.

Адаптивная верстка обойдется в несколько раз дороже мобильной версии. И чем сложнее и объемнее сайт, тем трудозатратнее будет ее разработка. Если на мобильной версии разрабатывается один шаблон дизайна для экранов мобильных устройств, то при адаптивной верстки необходимо учесть сразу несколько вариантов размера экрана.

Вывод

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

www.seonews.ru

Чек-лист для оптимизации мобильного сайта

О том, что каждый уважающий себя сайт должен быть адаптирован под смартфоны и планшеты, сейчас не говорит только ленивый. К концу прошлого года доля мобильного трафика в России достигла 62%, и прогнозируется ее рост (в мире в 2017 году до 75%). Согласитесь, игнорировать такой объем трафика становится попросту невозможно. А с запуском Mobile first от Гугл и Владивостока от Яндекса – еще и опасно для позиций сайта в выдаче.

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

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

Немного теории о мобильных сайтах

(можно пропустить и сразу перейти к чек-листу)

Буквально в нескольких словах о 3 типах мобильности:

1. Мобильная версия на поддомене. По сути это отдельный вариант сайта на отдельном поддомене (как правило, m.site.ru).

Пример: Сайт vk.com и его мобильная версия m.vk.com

Пример мобильной версии сайта на поддомене

2. Динамический контент. Адрес для десктопной и мобильной версий одинаковый, но контент в них различается. Обычно в мобильной версии показывают меньше второстепенного контента (слайдеров, рекламы, дополнительных текстов).

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

Мобильная версия с динамическим контентом

3. Адаптивная верстка. Адрес не меняется, да и контент остается одинаковым. Меняется только внешнее отображение контента – все блоки на сайте как бы «подстраиваются» под ширину того устройства, на котором открыт сайт (меню сворачиваются до «гамбургеров», блоки из нескольких в ряд выстраиваются друг под другом и т.д.).

Пример: Сайт mvideo.ru

Пример адаптивной верстки

Я не буду рассуждать о том, какой из вариантов лучше, – не это тема данной статьи, да и многое зависит от типа сайта и целей мобильной версии. Хотя Гугл рекомендует адаптивную верстку.

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

Оптимизация мобильного сайта

Перед тем как оптимизировать мобильную версию своего сайта, проведите оптимизацию основного сайта. Ведь все, что справедливо для десктопной версии (теги title и description, заголовки, оптимизированные тексты, перелинковка, микроразметка и прочее), в равной мере работает и для мобильной версии.

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

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

Чек-лист по оптимизации мобильного сайта

Начнем с технической части:

1. Robots.txt

Проверьте, что в файле robots.txt не закрыт доступ к картинкам, js- и css-файлам для поисковых роботов. По этому вопросу у нас есть отдельная статья, здесь повторяться не буду.

2. Скорость загрузки

Проверьте, что скорость загрузки по PageSpeed Insights не ниже 70 на вкладке «Для мобильных»:

Скорость загрузки сайта drom.ru

Лучше, конечно, чтобы скорость загрузки была выше 85 (а в идеале, близко к 100), хотя такая ситуация пока достигается редко:

Идеальная скорость загрузки сайта

Но стремиться к ней нужно. Под выставленной оценкой Гугл дает рекомендации по улучшению скорости загрузки – ориентируйтесь на них.

3. Тег viewport (для сайтов с адаптивной версткой)

Проверьте, что в коде страниц прописан мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Эта запись говорит браузеру, что нужно установить ширину окна равной ширине экрана устройства и никак не изменять масштаб страницы.

Если же viewport не указан, то на мобильном будет показана страница как для компьютера, только «втиснутая» в экран мобильника. Работать с ней будет весьма неудобно.

Пример работы тега viewport

Подробности про viewport смотрите в справке Гугла.

4. HTTP-заголовок Vary (для динамического контента)

Если обе версии вашего сайта (и десктопная, и мобильная) доступны по одному адресу, но сайт выдает разный контент (разный html-код) в зависимости от того, с какого устройства идет запрос, то нужно сообщить поисковым роботам, что на сайте используется динамический контент.

Сделать это можно с помощью HTTP-заголовка Vary со значением User-Agent, выглядит он так:

HTTP/1.1 200 OKContent-Type: text/htmlVary: User-AgentContent-Length: 5710

В таком случае поисковый робот Google для смартфонов будет сканировать именно контент мобильной версии (у Яндекса пока нет отдельного робота для мобильного поиска).

Посмотреть HTTP-заголовки, которые отдает ваш сайт, можно с помощью инструмента Проверка ответа сервера в Яндекс.Вебмастере. Подробнее про Vary так же написано в справке.

5. Переадресация (для мобильной версии на поддомене)

Проверьте, что настроена и работает корректно переадресация с полной версии сайта на мобильную (с site.ru на m.site.ru) при просмотре с мобильных устройств.

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

То есть вот так будет правильно:

https://vk.com/feed   --->   https://m.vk.com/feed https://avito.ru/irkutsk/transport   --->   https://m.avito.ru/irkutsk/transport

А вот так – нет:

https://vk.com/feed   --->   https://m.vk.com/ https://vk.com/video   --->   https://m.vk.com/apps https://avito.ru/irkutsk/transport   --->   https://avito.ru/moskva/transport

6. Тег <link rel="alternate"> (для мобильной версии на поддомене)

Проверьте, что в коде страниц основного сайта (в блоке <head>) прописаны теги <link rel="alternate"> с адресами соответствующих страниц мобильного сайта.

Вот пример для страницы https://avito.ru/irkutsk/transport:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.avito.ru/irkutsk/transport">

Это позволит избежать дублирования контента, ведь иначе поисковые роботы будут воспринимать полную и мобильную версии как два отдельных сайта (т.к. у них разные адреса).

Теперь перейдем к визуальной составляющей:

7. Favicon для мобильных

Сделайте и загрузите на сайт отдельный фавикон для мобильных устройств. В коде сайта он прописывается наряду с обычным favicon.ico в блоке <head>. Рекомендуют делать фавикон в 3-10 разных размерах, например, как на сайте М.Видео:

<link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-57x57-precomposed.png">

Но будет вполне достаточно и одного размера (114 на 114 пикселей):

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>

Этот фавикон показывается в Избранном (для некоторых устройств), в Истории просмотров:

Иконки в истории просмотра

И на рабочем столе телефона, если ваш сайт сохранили на главный экран (смотрите 3 иконки во втором ряду):

Иконки на экране мобильного

Обратите внимание на не очень четкий фавикон сайта Пегас Туристик – для него нет отдельного файла, используется обычный favicon.ico.

8. Контент под ширину экрана

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

Контент должен помещаться в ширину экрана

9. Размер шрифта

Проверьте, что все тексты на сайте удобно читать с мобильных – что нет ни слишком мелкого шрифта, ни слишком крупного:

Оптимизируйте размер шрифта на мобильных

10. Размер кнопок

Проверьте, что во все интерактивные элементы – элементы, на которые можно кликнуть – легко  попасть пальцем (и желательно мужским, а не детским):

Пример кнопок в мобильной версии

11. Расстояние между ссылками

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

Расстояние между ссылками на мобильных

12. Картинки меньшего размера (для динамического контента)

Если ваш сайт выдает отдельный html-код при просмотре с мобильного устройства, то можно в нем указать ссылки на уменьшенные копии изображений. Вряд ли на телефоне сильно нужна фотография товара шириной 1400 пикселей, вполне хватит и картинки в 800 пикселей – а это экономия в весе картинки, а следовательно, и в скорости загрузки сайта.

13. Убрать Flash

Технология Flash не поддерживается мобильными устройствами. Да и современные десктопные браузеры постепенно отказываются от поддержки Flash. Поэтому не используйте ее. Для вставки видеороликов используйте теги HTML5, вот тут есть подробная инструкция.

14. Скрыть излишний контент

Помните, что экран мобильного устройства в разы меньше экрана компьютера, поэтому старайтесь по возможности сократить объем контента в мобильной версии. Например, в мобильной версии habrahabr.ru не выводятся превью-картинки к статьям и краткие описания, что позволяет вместить в один экран мобильного 3-4 статьи из списка.

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

15. Меньше рекламы

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

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

16. Не использовать pop-up окна

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

У Google есть хороший инструмент для проверки оптимизации для мобильных – он даст информацию о визуальной части оптимизации (и некоторых технических параметрах).

И напоследок об удобстве для пользователя (UX):

17. Удобная навигация

Проверьте, что все необходимые пункты меню доступны в мобильной версии (включая выпадающие подменю). И не забудьте про «хлебные крошки» – они помогут посетителю понять, в каком разделе сайта он находится.

Пример, где с мобильного нет возможности открыть второй уровень подменю:

Пример навигации с ошибкой

А здесь все хорошо, подменю открываются (вплоть до третьего уровня вложенности), хлебные крошки есть:

Навигация работает правильно

18. Ссылки с номеров телефонов

Поставьте ссылки с номеров телефонов для быстрого набора их с мобильных устройств. Делается это так:

<a href="tel:88002007775">8-800-200-777-5</a>

После этого пользователь просто кликает по номеру телефона на вашем сайте и сразу же переходит к звонку:

Пример работы ссылки с номера телефона

19. Учет местоположения

На многих мобильных устройствах включена передача геоданных (информации о местоположении устройства).

Вы можете использовать эту информацию на своем мобильном сайте, например, при заполнении адреса доставки или при поиске объектов неподалеку, как это сделано на сайте booking.com:

Учет местоположения пользователя на сайте booking.com

20. Ссылка «Перейти на полную версию сайта» (для динамического контента, для мобильной версии на поддомене)

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

Ссылка на полную версию сайта

Итог

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

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

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

Продублирую еще раз ссылку на чек-лист по оптимизации мобильного сайта в pdf. Чек-лист для оптимизации десктопной версии есть тут.

Если у вас нет времени заниматься оптимизацией сайта, мы можем вам помочь – список работ, которые мы выполняем, и цены – всё здесь. А если ваш сайт и вовсе не адаптирован под мобильные – вам сюда.

P.S. Если есть что еще подсказать по оптимизации мобильных сайтов – пишите в комментариях.

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

1ps.ru

Мобильная оптимизация сайта

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

Трафик мобильных устройств в Рунете на 2017г. по данным Digital Report составляет 75%, а в 2018г. повысится до 79%.

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

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

  • Как узнать, нужно ли заказывать мобильную оптимизацию сайта прямо сейчас?
  • Как самостоятельно проверить mobile-friendly свойства и показатели веб-проекта?
  • Насколько готов ваш сайт/магазин к приему mobile-трафика?

Мобильная оптимизация сайта: 5 бесплатных тестов

Проведите самостоятельную проверку своего интернет-магазина, сайта-продажника или landing page, чтобы определить:

  1. Нужна ли вам mobile-оптимизация прямо сейчас.
  2. Насколько удобно вашим mobile-клиентам.
  3. Какие ошибки скрывает ваш сайт.

Мобильная оптимизация сайта входит в стандартный комплекс услуг нашей компании «ОПТИМИЗАТОР».

Мы одновременно работаем с десктопной и mobile (адаптивной) версией, чтобы по максимуму раскрутить сайт или интернет-магазин в ТОП-10, привести к вам покупателей.

Закажите бесплатную консультацию и узнайте, сколько стоит подготовка вашего сайта или магазина к мобильным продажам:

1. Тест-проверка от Google

В Google Developers (для разработчиков) есть бесплатный online-инструмент, с помощью которого проверяется степень mobile-оптимизации сайта, лендинга или интернет-магазина.

Сервис тестирует «Mobile-Friendly» качества web-ресурса по ряду параметров и доступен по ссылке: https://search.google.com/search-console/mobile-friendly

Тест-проверка мобильности от Google

Как видите, наш сайт optimizator.su идеально оптимизирован для мобильных телефонов и планшетов. А какие результаты у вас?

Если сервис показал много ошибок, задумайтесь о заказе мобильной оптимизации сайта. Чем быстрее исправить ошибки, тем больше финансов вы сэкономите.

2. Тест скорости мобильной оптимизированной версии сайта

Бесплатный инструмент Google PageSpeed Insights за пару секунд оценит скорость вашего сайта для десктопных и mobile-устройств. Оценка направлена на технические характеристики, замедляющие работу проекта.

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

Мобильная оптимизация сайта воздействует на скорость mobile или адаптивной версии и повышает результаты тестирований. Проверьте самостоятельно – нужна вам оптимизация мобильного сайта по скорости или можно обойтись без нее?

Ссылка на инструмент: https://developers.google.com/speed/pagespeed/insights/

Ниже представлен скриншот оценки скорости онлайн-магазина наших клиентов ДО оптимизации их мобильного сайта:

Тест скорости мобильной оптимизированной версии сайта

Обратите внимание на цвета 2-х вкладок и численные показатели. Максимальное значение – 100 балов. Оценка «Для мобильных» 63/100 – плохо (Poor) – срочно нужны доработки и правки. Чуть ниже – рекомендации Google, что и как можно улучшить:

  • Удалить код JavaScript и CSS из верхней части HTML
  • Подключить кеширование и архивирование
  • Сжать изображения
  • Поправить настройки хостинга
  • Сократить код HTML, CSS, JavaScript

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

3. Комплексное тестирование Test My Site

Следующий бесплатный сервис online - «Test My Site». Он показывает суммарную оценку мобильной оптимизации сайта и скорость компьютерной полной версии.

Ссылка на сервис: https://testmysite.thinkwithgoogle.com

омплексное тестирование Test My Site

Степень оптимизации мобильного сайта отображается в 2-х параметрах:

  • Mobile Friendless (дружественность, юзабилити – 96/100)
  • Mobile Speed (скорость – 53/100)

В примере выше протестированный сайт 100% нуждается в мобильной оптимизации скорости. Зато с адаптивностью (удобством) все хорошо. На скриншоте видно, что проекту также требуется ускорение десктопной версии (Desktop Speed – 66/100).

Если тест покажет «красные» или «желтые» цифры в отчете, срочно исправьте ошибки.

4. Процент mobile-трафика

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

Посмотреть текущий процент mobile-трафика можно в статистике Яндекс.Метрики:

Отчеты -> Стандартные отчеты -> Технологии -> Устройства

Процент mobile-трафика

В этом примере квартального отчета 64,9% общего трафика приходится на ПК (десктопные персональные компьютеры), а остальные 35,1% - это мобильные переходы:

  • смартфоны – 31,6%
  • планшеты – 3,5%

Если mobile-трафик более 10%, то мобильная оптимизация сайта в результате повысит продажи. Но полное отсутствие мобильных визитов – проблема...

Нулевой mobile-трафик свидетельствует о серьезных ошибках. Вероятно ваш web-проект:

  • не прошел мобильную оптимизацию
  • теряет mobile-клиентов и прибыль
  • имеет низкую конкурентоспособность в мобильной выдаче поиска Яндекс и Гугл

4. Тенденции к росту мобильного трафика

Чтобы оценить тенденции роста mobile-визитов с течением времени и на перспективу, нужно слегка перестроить отчет Яндекс.Метрики.

Выберите на той же странице отчета период – «ГОД» и отображение – «Линии» или «Области»:

Тенденции к росту мобильного трафика

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

Учтите, что конкуренты не спят!

Если конкурентные сайты лучше подготовлены к мобильным визитам, заточены под mobile-трафик, удобны и быстры в эксплуатации, вы теряете клиентов и деньги. Даже 10% мобильного трафика – существенная коммерческая величина, которой нельзя пренебрегать.

Мобильная оптимизация сайта даст дополнительный потенциал и конкурентное преимущество для покорения mobile-сегмента рынка в вашей тематической нише.

5. Аудит мобильной оптимизации сайта

Самый простой способ проверить ваш веб-ресурс на готовность к mobile-визитам – заказать аудит в нашей компании «ОПТИМИЗАТОР». В этом случае вы:

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

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

Из чего состоит мобильная оптимизация сайта

1. Работа с ключевыми словами

С телефонов часто вводят короткие (клавиатура) или очень длинные (голосовой набор) фразы, и это нужно учитывать. Семантическое ядро корректируется под mobilе-версию!

2. Оформление

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

  • шрифты и стили
  • блоки и модули
  • цвета и фоны
  • структура и навигация
  • меню и виджеты
  • поля и отступы

3. Ускорение

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

4. ГЕО-параметры

Поисковые системы в mobile-выдаче для платформ Android и iOS учитывают ГЕО-локацию, показывают пользователям ближайшие предложения по их региону. Мобильная оптимизация сайта невозможна без настройки GEO-параметров.

Как минимум, нужно добавить проект в популярные ГЕО-сервисы, справочные службы Яндекса и местные карты типа 2GIS.

5. Ошибки и рекомендации

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

6. Mobile-юзабилити

Нужно определить, насколько удобен ваш бизнес-проект при открытии с мобильных устройств. Для приема и обслуживания mobile-клиентов есть только 2 решения:

−    Адаптивная верстка (дизайн автоматически подстраивается под разные экраны гаджетов) или...

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

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

Ведь это не очень дорого, а все расходы окупятся в ближайшие 2-3 месяца. Жмите кнопку «Заказать» и вперед – к высоким продажам!

optimizator.su

Адаптация сайта под мобильные устройства

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

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

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

Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.

В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе — «Владивосток» 2 февраля 2016 года.

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

Десктопная версия сайта и адаптированная версия под мобильные устройства

Как поисковики определяют, комфортна ли страница сайта для просмотра с мобильных устройств:

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

Что самое главное, поисковики оценивают веб-сайты однозначно — либо mobile-friendly, либо нет.

С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:

Адаптация сайта под мобильные устройства

Результаты от 85 баллов и выше считаются хорошими.

Если страница сайта не удовлетворяет требованиям сервиса, выдается отчет в виде рекомендаций по устранению проблем, например:

Адаптация сайта для мобильных устройств

Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности:

Адаптация сайта под мобильную версию

Данный сервис можно использовать для начальной диагностики и выявления проблем на веб-сайте.

В каких случаях необходимо разрабатывать мобильную или адаптивную версию для сайтов?

Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс.Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.

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

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

«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL — к нему добавляется префикс «m.», например: m.example.ru.

Адаптация веб сайта под мобильные устройстваАдаптивная версия сайта

Вид на мониторе компьютера и на мобильном устройстве: мобильная версия отличается от основной

Пример сайта с адаптированной мобильной версией: http://www.lamoda.ru/ (m.lamoda.ru).

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

  • Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
  • Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
  • Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.

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

  • Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
  • При ее разработке зачастую приходится отказываться от части контента.
  • Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.

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

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

Адаптивная вёрстка или мобильная версияАдаптивная вёрстка

Вид на мониторе компьютера и на мобильном устройстве — адаптивная версия отличается от основной

Пример сайта с адаптивной версией: http://www.mvideo.ru/.

Преимущества адаптивного дизайна для мобильных устройств

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

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

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

Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?

Лучшим решением для сайта является использование адаптивной вёрстки под мобильные устройства. Несмотря на ряд недостатков, сайт с адаптивной версткой более функционален. Также наличие шаблонов страниц подразумевает простоту добавления контента на сайт, в отличие от мобильной версии, в которой работы по внесению контента дублируются, так как фактически существует два разных сайта. Большим плюсом является тот факт, что адаптивная версия улучшает поведенческие факторы основного сайта. Это полезно с точки зрения продвижения и юзабилити. Исходя из этого, свой выбор мы рекомендуем сделать в пользу адаптивной верстки.

www.demis.ru

Как оптимизировать мобильную версию сайта для поисковых систем?

Поисковые флагманы уже давно анонсировали, что приоритет поисковой выдачи на смартфонах будет отдан мобильным версиям сайтов. Это значит, что если ваш сайт не проходит проверку на оптимизацию для мобильных устройств mobile-friendly (так называемая «мобилопригодность» сайта), то велика вероятность, что на смартфоне его позиции в выдаче будут ниже. Но создание удачной мобильной версии — это только половина дела. Важно настроить сайт для его индексации поисковыми системами. О том, как сделать это правильно, мы и расскажем.

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

Правильная настройка мобильной версии зависит от способа ее реализации. Существует три вида:

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

adaptiv_1.jpg

2. Динамический показ. Мобильная и десктопная версии выглядят по разному, имеют разные коды (HTML, либо CSS), но находятся по одному адресу (URL). При запросе этого адреса с разных устройств выдаются либо страницы, написанные для мобильных устройств, либо десктопные версии.

 3. Собственный URL для мобильной версии (размещение на поддомене). Мобильная версия отличается от декстопной и имеет другой адрес. Например, версия для сайта site.ru , версия на поддомене будет иметь адрес  m.site.ru.

Подробнее об этом можно почитать у Google.

Как оптимизировать мобильную версию сайта? С точки зрения SEO гораздо удобнее использовать динамический показ разных вариантов кода. Это исключает необходимость скрытия и дублирования части контента (в адаптивной версии, например, это может быть дублирование меню) и дополнительной настройки переадресации (как для мобильной версии на отдельном URL).

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

Настройка адаптивной версии сайта

Так для правильной интерпретации поисковыми системами созданного адаптивного дизайна необходимо добавить в заголовок документа метатег “viewport”.

<meta name="viewport" content="width=device-width">

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

 

11.png    samsung-galaxy-mobile-vector-mock-up_254-2147486637.png

Настройка динамического показа разных версий сайта

Для динамического показа важно, чтобы поисковый бот прав ильно определял устройство, с которого пользователь просматривает сайт и выдавал в ответ верный код.  Для этого можно воспользоваться HTTP-заголовком “Vary” или добавить элемент “User-Agent”.

Размещение мобильной версии на собственном URL

В случае с созданием собственного URL существует 2 способа размещения:

·      В отдельный раздел сайта (в папку). При этом мобильная версия сайта будет иметь вид: site.ru/m/.

·      На отдельный поддомен. При этом мобильная версия сайта будет иметь вид: m.site.ru

При этом если Google однозначно интерпретирует оба варианта, то Яндекс может неверно воспринять размещения в папке. В связи с этим рекомендуется размещать мобильную версию сайта на поддомене.

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

Но когда мы размещаем версию на поддомене, мы фактически частично или полностью дублируем контент собственного сайта. Уникальность предоставленной информации — это важный фактор ранжирования, и, создавая собственную копию, мы рискуем потерять позиции. Чтобы этого не произошло, необходимо показать поисковому боту, что перед ним две версии одного сайта. Для этого нужно связать версии метатегами <link> и настроить переадресацию.

Еще один момент, который необходимо учесть при оптимизации мобильной версии сайта с  точки зрения SEO: важно присутствие всех продвигаемых разделов — основных точек входа. Если у вас нет «мобильного дубля» для продвигаемой страницы, то в построении мобильной выдачи будет участвовать десктопная версия. Вполне логично, что она может ранжироваться хуже, чем страницы других сайтов, заточенные под смартфоны.

Как настроить метатеги

На мобильном сайте в коде прописываем метатег “canonical”, указывающий в качестве канонической страницу десктопного сайта. На десктопном сайте — метатег “alternate”, указывающий в качестве альтернативной страницу мобильного сайта.

Например, для главной страницы сайта http://site.ru прописываем следующее:

http://m.site.ru" >

Для главной страницы мобильного сайта http://m.site.ru прописываем

http://site.ru">

Как настроить редирект (переадресацию)

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

 

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

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

www.directline.pro

разработка мобильной версии сайта

Стоимость разработки мобильной версии сайта – от 15 000 рублей

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

Таким образом наблюдается тенденция к росту мобильной аудитории интернета, а значит, ваш сайт, то есть представительство вашей компании на просторах Всемирной сети, необходимо модифицировать.

Что представляет собой мобильная версия сайта

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

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

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

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

Как интернет-аудитория предпочла смартфоны персональным компьютерам

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

По данным исследовательской компании Mediascope, к 2017 году аудитория мобильных пользователей интернета в России достигла 66 млн. человек, что составляет 54% населения. Более того, 16% пользуются исключительно мобильным Интернетом.

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

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

Почему мобильная версия сайта важна для продвижения вашего бизнеса

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

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

  • Эффективность раскрутки сайта. По сообщению представителей Google, сайты, не имеющие мобильной версии, будут априори ранжироваться ниже, в сравнении с веб-ресурсами, адаптированными к экранам смартфонов. Таким образом, мобильная версия сайта сегодня — это не только возможность для привлечения большего трафика, но и обязательное условие для успешного продвижения сайта в интернете.
  • Удобство для пользователей. 40% интернет-юзеров честно признаются, что перейдут на другой сайт, если у интересующего их сайта нет мобильной версии. С точки зрения бизнеса вы упускаете колоссальное количество потенциальных клиентов, если сайт вашей компании не адаптирован для мобильных телефонов и планшетов.
  • Блестящая репутация. Некорректное отображение вашего сайта на экране современного гаджета — существенный минус и гарантированно укоризненный взгляд интернет-пользователя. С другой стороны, наличие мобильной версии — своеобразный «плюс к карме» и поддержание правильного имиджа компании.
  • Конкурентное преимущество. Узнали, что сайт ваших конкурентов не имеет мобильной версии? Самое время воспользоваться данной осечкой и заручиться мощным конкурентным преимуществом, а именно — получить клиентов, покидающих не адаптивные сайты ваших бизнес-противников.

Как «подружить» сайт с мобильными устройствами

Решить проблему правильного отображения вашего сайта на смартфонах можно двумя методами:

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

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

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

Мобильная версия сайта от веб-студии «Аспект»: стоимость разработки

На сегодняшний день лишь часть сайтов приспособлена для работы с мобильными устройствами, а значит, у вас еще есть шанс отвоевать свою долю трафика. Разработку мобильной версии сайта вам предлагает веб-студия «Аспект».

Стоимость такой услуги — от 15 000 рублей. Мы создаем мобильную версию на основе имеющегося сайта и привлекаем к выполнению данной задачи только лучших специалистов.

В стоимость работ входит:

  • Прототипирование новых страниц.
  • Разработка дизайна мобильной версии.
  • Верстка.
  • Программирование мобильной версии сайта и ее привязка к основной.
  • Оптимизация контента.
Сколько времени занимает создание мобильной версии?

В среднем, разработка мобильной версии сайта занимает от 10 рабочих дней. Конкретные сроки зависят от объема работ, то есть количества страниц на сайте, типа представленной на них информации.

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

Как происходит разработка мобильной версии в нашей веб-студией

Алгоритм нашей работы можно представить в следующем виде:

  1. Ваша заявка на разработку мобильной версии (по телефону, e-mail).
  2. Встреча и обсуждение проекта с менеджером.
  3. Оценка объема работ и расчет точной стоимости услуги.
  4. Составление и подписание договора.
  5. Оплата и начало работ.
  6. Разработка дизайна мобильной версии сайта.
  7. Согласование и подписание акта приема макета дизайна.
  8. Верстка мобильной версии.
  9. Перенос контента.
  10. Сдача проекта.

Убедились в необходимости мобильной версии и желаете заказать ее разработку? Веб-студия «Аспект» всегда ориентируется на последние тенденции и готова оказать вам профессиональную помощь в «мобилизации» вашего сайта.

www.vzh.ru

Создание мобильной версии сайта

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

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

Разработка адаптивного дизайна

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

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

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

Сделайте репост:

webseotop.ru


Смотрите также