Что выбрать: мобильная версия vs адаптивный дизайн? Что выбрать: мобильную версию или адаптивный дизайн? А что с конверсией и CTR

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

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

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

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

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

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

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

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

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

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

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

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

У адаптивного дизайна есть огромное количество плюсов

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

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

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

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

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

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

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

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

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

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

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

Мобильная версия предназначена исключительно для экранов смартфонов.

Начнем с неоспоримых преимуществ мобильной версии.

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

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

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

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

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

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

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

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

Доля мобильных пользователей растет уверенными темпами: в конце 2014 года их количество в Сети впервые превысило количество пользователей стационарных компьютеров. Более 10 миллионов человек выходят в Интернет ТОЛЬКО с мобильных устройств. И это все происходит в России прямо сейчас.

У вас еще остались сомнения по поводу того, нужен ли вам мобильный сайт? Тогда переходим к делу.

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

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

Адаптивный (отзывчивый) дизайн (англ. Adaptive/Responsive)

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

Адаптивность достигается с помощью следующих инструментов:

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

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

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

Отдельный мобильный сайт

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

По этой ссылке открывается отдельный сайт с другим URL-адресом, например, m.vk.com для Вконтакте. Также обычно на основном сайте настраивается автоматическая переадресация всех мобильных пользователей на мобильный сайт.

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

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

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

Мобильное приложение

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

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

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

Разработка мобильного приложения весьма трудоемкий и финансово затратный процесс. Веб-сайты кроссплатформенны, а мобильные приложения придется создавать отдельно под каждую платформу (iOS, Android, Windows Phone).

Конечно, существуют специальные инструменты, которые упрощают создание приложений и позволяют портировать его сразу на все основные платформы, например, Phonegap, Ionic, jQuery Mobile. Но в любом случае за разработкой и обновлением приложения придется обращаться к специалистам.

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

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

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

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

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

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

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

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

P.S. Тех, кому интересна тема работы с мобильными пользователями, 16 июля мы приглашаем на мастер-класс «

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

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

Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн, оптимизированный под мобильные устройства, чтобы контент подавался в удобочитаемом виде и загрузка происходила почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.

Преимущества

Удобство

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

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

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

Правки по сайту

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

Переход на основную версию

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

Недостатки

Дублирование

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

Обновление

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

Ограничение функционала

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

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

Адаптивная верстка

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

Преимущества

Удобство реализации

Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.

SEO

Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.

Недостатки

Тяжеловесность

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

Цели посещения

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

Нет выбора

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

Итог: адаптивная верстка или мобильная версия?

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

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

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

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

Около 20% трафика в Рунете приходится на мобильные операционные системы. И этот показатель продолжает набирать обороты. Это ли не повод задуматься о том, адаптировать ли ваш сайт под мобильный трафик, ведь это совершенно другая аудитория.

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

Зачем сайту мобильная версия?

1. Пользоваться мобильной версией сайта со смартфонов и мобильных телефонов намного удобнее: нет необходимости в горизонтальной прокрутке, весь функционал работает корректно (на некоторых неадаптированных сайтах даже товар положить в корзину невозможно!).
2. В мобильной версии можно разработать дополнительные возможности, направленные именно на эту целевую группу посетителей: организовать отправку смс прямо с сайта, определить местоположение и расстояние до ближайшей точки продаж и т.п.
3. Навигация таких сайтов делается адаптированной под тачскрин (Touch screen ), что также намного удобнее.
4. Мобильная версия сайта более легкая, имеет менее объемный код, поэтому загружается быстрее, что уменьшает затраты пользователя на ее загрузку при оплате мобильного трафика.
5. Поисковые системы используют мобильный поиск для телефонов, поэтому и ранжироваться мобильная версия сайта в нем будет выше, а значит и переходов на ваш сайт будет больше.

Виды мобильной версии сайта

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

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

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

• Дизайн. Пожалуй, самая важная составляющая. Последние тенденции дизайна для мобильных сайтов - это максимальная легкость и простота.
• Совместимость. Сайт должен корректно отображаться на наиболее популярных разрешениях экранов (240х320, 480х320 и некоторые другие). На таких сайтах лучше не использовать или использовать по минимуму javascript , применять xhtml .
• Оптимизация контента. Особенно это касается картинок: они должны быть легкими как в габаритах, так и в килобайтах.
• Юзабилити. Хорошая навигация - залог успешного мобильного сайта!

Мобильная версия или адаптивный дизайн?

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

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

Каким сайтам нужна мобильная версия?

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

• Справочные сайта
• Социальные сети и сервисы
• Веб-сервисы
• Интернет-магазины

Если вы уже задумались над тем, нужна вашему сайту версия под мобильные или нет, проанализируйте трафик на сайт на протяжении последнего года через системы аналитики. Если доля мобильного трафика составляет 15% и выше, ответ очевиден!

Цифры

Вы еще не решили? Тогда вдумайтесь в эту статистику:

1. Мобильные телефоны использует 87% всего населения. Видимо их нет только у маленьких детей!
2. Рост мобильной коммерции по прогнозам увеличится в 99 раз в ближайшие 5 лет!
3. Только 21% сайтов адаптированы для работы с мобильными устройствами. У вас еще есть шанс получить свою долю трафика!

Полезные статистические данные приведены ниже в инфографике (кликабельная).

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

Чем же обусловлена необходимость в наличии той или иной версии для мобильных устройств.

По последним данным число пользователей интернета, использующих мобильные устройства за год выросло на 90%! Из всех 80 млн. пользователей интернета по всему миру 50 млн. используют мобильные устройства. В русском сегменте мобильный трафик насчитывает 25% и доходит до 40% в некоторых тематиках.

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

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

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

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

Решения для получения мобильного трафика

Существует 3 технологии создания мобильной версии:

1. Мобильная версия, как отдельный сайт для мобильных устройств на поддомене;
2. Адаптивный дизайн;
3. Мобильные приложения для IOS, Android, Windows Phone.

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

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

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

Теперь разберем отличия мобильной версии от адаптивного дизайна.

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

Адаптивный дизайн означает, что за счет определенных стилей кода, ваш сайт автоматически по ширине адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон, планшет. Ранее мы писали об этом в нескольких статьях «Как сделать мобильную версию сайта » и «Использование мета-тега Viewport ». При разработке сайта, верстальщики верстают сайт не под определенный размер, например 800х480 px, а создают страницы сайта из элементов автоматически подстраивающихся под ширину экрана. Блоки просто изменяют свое расположение, а некоторые и вовсе не показываются на смартфонах. Подобный вариант больше подходит для простых сайтов-визиток или блогов.

Преимущества адаптивного дизайна:

• Грамотное отображение страниц сайта и всех его элементов на любых устройствах за счет адаптации стилей к мобильным браузерам;
• Соответствует требованиям Google к удобству просмотра на мобильных устройствах;
• Удобство в разработке, стоимость ниже чем создание мобильной версии;
• Один url у обычной версии сайта и с адаптивной версткой, благодаря чему не понадобится перенаправление пользователей, а так же, посетителям не нужно будет запоминать отдельный адрес поддомена.
• Красота изначального сайта, что-что, а все таки красивый дизайн можно сохранить и это немаловажно.

Недостатки адаптивного дизайна:

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

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

Мобильная версия предполагает разработку версии сайта на поддомене, например, m.vk.com, на который перенаправляется посетитель в случае использования мобильного устройства. Как правило, такая версия создается под мобильные экраны с шириной менее 620px. Такая технология позволяет создать мини версию сайта с наиболее важной информацией, не перегруженный контентом и различными элементами дизайна, а главное большими элементами навигации. Подойдет как для простых сайтов, так и для интернет-магазинов, различных сервисов: почта, новости, социальная сеть.

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

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

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

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

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

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

Мобильная версия в подарок!

Разработчики Nubex заботятся о своих клиентах и о качестве выполняемых сайтов, поэтому мы подготовили совершенно бесплатное обновление, благодаря которому мобильная версия появилась у всех, кто пользуется нашим конструктором сайтов. Если по каким-то причинам она вам не нужна, ее можно выключить одним щелчком мышки. Так же ее настройки совершенно просты и интуитивно понятны, настроить мобильную версию можно за 5-10 минут.

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

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

Так же мы учли:

• свернутое главное меню (удобно разворачивается и экономит место);
• корзина, поиск по сайту;
• удобное отображение фотографий, альбомов, слайдеров и товаров;
• для интернет магазинов — удобная форма on-line заказа с телефона;
• самостоятельно можно включать или выключать отображение разных блоков и разделов.

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