Чем адаптивная версия отличается от мобильной. Что лучше адаптивная вёрстка или мобильная версия

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

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

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

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

Остается два варианта: адаптивная верстка или мобильная версия. Для начала определим в чём разница между эти двумя методами.

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

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

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

Делается на поддомене. Чаще всего встречаются такие варианты m..сайт, pda..ru/mobile/.

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

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

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

Есть общие плюсы:

корректное отображения на мобильных устройствах;

заточенность под мобильные устройства.

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

возможность “вырезать” ненужный функционал

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

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

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

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

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

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

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

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

Сложный, высоконагруженный проект будет долго открываться на мобильном устройстве. Хоть 4G, хоть 24G, мобильный интернет - это мобильный интернет.

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

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

Что же выбрать адаптивную верстку или мобильную версию?

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

В пользу чего сделать выбор.

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

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

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

Быстрый сайт - хороший сайт.

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

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

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

Сергей Лукошкин

26.03.2015 | | 0 комментариев

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

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

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

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

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

Для решения этой проблемы существует два подхода:

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

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

А так она выглядит на экране смартфона


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

5 главных причин, чтобы сделать бизнес-сайт с адаптивным дизайном

Мобильный поиск. По статистике (на момент написания этой статьи) более 50% покупателей ищут товары и услуги в интернете с мобильных устройств. И эта цифра очень быстро увеличивается. А совсем недавно Google сообщил, что сайты, которые не имеют мобильной версии, будут очень низко ранжироваться в результатах поиска с мобильных устройств. Поэтому, если у вас нет мобильной версии сайта, не удивляйтесь, что вас будет трудно найти в поиске со смартфона.
Удобство для пользователей. Снова по той же статистике более 40% пользователей заявили, что уйдут на другой сайт, если у текущего нет мобильной версии. И опять же, их доля уверенно растет. Для бизнеса это значит, что вниманием покупателя завладеет тот поставщик, чей сайт удобен на любом устройстве.
Прямой контакт. Смартфон позволяет пользователю сразу сделать звонок по указанному на сайте номеру телефона (если на сайте реализована функция click-to-call). Таким образом, вы становитесь гораздо ближе к потенциальному покупателю.
Новые возможности продвижения. Сегодня широкое распространение получает мобильная реклама, но если у вас нет мобильного сайта, то ее эффективность будет катастрофически низкой. Напротив, сайты, дружественные для мобильных устройств, получают еще один мощный канал продвижения.
Конкурентное преимущество. И последнее. Проверьте, есть ли у ваших конкурентов мобильные версии сайтов. Если нет, то у вас есть отличная возможность создать мощное конкурентное преимущество и получить тех клиентов, которые покидают устаревшие сайты ваших противников.

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

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки:

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

Итоги сравнения

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

Опыт платформы для создания сайтов Nethouse

На базе Nethouse сегодня работает более 50 000 активных ресурсов: интернет-магазинов, сайтов фирм и специалистов, лендингов, портфолио и блогов. В декабре 2016 мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов мыши, без потери информации и абсолютно бесплатно.

На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.

1. Поисковый трафик.

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

2. Поисковый мобильный трафик.

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

3. Поведенческие факторы.

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

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

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

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

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

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

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

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

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

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

По данным исследовательской компании 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. Сдача проекта.

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

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

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

По последним данным число пользователей интернета, использующих мобильные устройства за год выросло на 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 заказа с телефона;
• самостоятельно можно включать или выключать отображение разных блоков и разделов.

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