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

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

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

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

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

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

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

Это дополнительная упрощенная версия сайта, расположенная как правило на поддомене с приставкой «m» (например, m.сайт).

Как видно из картинки на планшетах также открывается версия для телефонов и ее раздраконивает растягивает по ширине, ведь планшет — это практически очень-очень широкий смартфон 🙂

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

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

• Так как это дополнительная версия сайта, то она грузится отдельно (т.е. основной сайт не загружается). И еще раз повторюсь: как правило, она сильно упрощена. Поэтому быстро загружается относительно адаптива.
• Поддерживать мобильную версию достаточно просто: изменения и доработки не затрагивают компы.

Недостатки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

• Адаптивный дизайн;
• Отдельная мобильная версия сайта;
• RESS (Responsive Design + Server Side).

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

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

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

• Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
• Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

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

• Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
  В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
«вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
• Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

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

• Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
• Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
• Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
• Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

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

• Несколько адресов -
• Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
• Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS

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

• Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
• Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы RESS

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

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

Резюме

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

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

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

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

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