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

Автор: | 31.12.2016

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

Почему я решил вообще завести тему о мобильных версиях сайтов? Всё очень просто! Если сравнивать посещаемость сайтов сейчас и скажем даже года 2-3 назад, стало очень много пользователей, использующих смартфоны и планшеты. И таких пользователей не мало! Следовательно следует сделать им жизнь более удобной, согласитесь, полная версия сайта, для чтения на смартфоне, не очень-то и дружелюбна. Вот об этом мы и поговорим, но для начала я хочу объяснить, что такое мобильная версия сайта.


Содержание статьи:
1. Что такое адаптивный дизайн.
2. Что такое отдельная мобильная версия сайта.
3. Что такое RESS (Responsive Design + Server Side).
4. Зачем нужна мобильная версия сайт.


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

Как видите, всё довольно просто, мобильная версия сайта, это специальная верстка, которую будет комфортно просматривать на смартфонах и планшетах. Но это всего лишь общие вещи, поскольку мобильные версии сайта можно еще разделить на различные варианты по их реализации, в основном выделяют 3 различных вида мобильной верстки сайта: адаптивный дизайн, отдельная мобильная версияRESS (Responsive Design + Server Side).  Давайте рассмотрим каждый вариант реализации в отдельности.

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

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

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

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

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

@media screen and (min-width: 360px) {
div {
display:none;
}
}
@media screen and (min-width: 720px) {
div {
display:block;
}
}

Данный код говорит, что если разрешение устройства 360px или более, то блок div выводится не будет, если разрешение 720px или более, то div будет показывать, как блочный элемент. И таким образом можно прописывать абсолютно любые свойства всем элементам при различных разрешениях. То есть это может быть и ширина, и высота, и видимость, и вариант позиционирования, да вообще что угодно, хоть другой шрифт. Но самое важное, что при использовании Media Queries, ваш адаптивный дизайн должен иметь резиновую верстку. А теперь давайте разберем какие есть плюсы и недостатки у адаптивной верстки сайта.

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

— Удобство и простота создания. Адаптивный дизайн довольно прост в разработке, поскольку одним махом верстается сразу несколько версий сайта (десктопная (компьютерная), планшетная(по желанию) и мобильная). Имея уже готовую верстку главной страницы в HTML, вам необходимо заняться написание Media Queries под меньшие разрешения, то есть для планшетов и для мобильных телефонов.

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

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

— Долгая загрузка сайта. Долгая загрузка связана с тем, что сайт хоть и сделан у нас для мобильных устройств, но дизайн адаптируется под устройство, то есть вашему смартфону необходимо загружать весь HTML и весь CSS файлы. То есть не смотря на, максимально упрощенный дизайн мобильной версии, который весит считанные килобайты, вам необходимо прогрузить всё, то есть общий вес страницы будет полная версия + мобильная. А если плохой сигнал мобильной сети, то такой сайт может грузится очень долго, согласитесь, не хорошо заставлять пользователя очень долго ждать.

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

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

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

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

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

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

Если брать адаптивный дизайн, то он пришел к нам с новыми возможностями CSS3, а отдельная версия сайта существовала задолго до появления адаптивной верстки. Не смотря на то, что это решение наиболее старое, оно не теряет своей популярности. Даже многие популярные ресурсы используют отдельную мобильную версию сайта, поскольку она обладает рядом преимуществ, которого нет у адаптивной верстки. Мобильные версии можно видеть на таких сайтах как: m.yandex.ru; m.vk.com; m.ok.ru и многие другие. То есть, вы можете видеть, что Яндекс и крупные соц. сети в рунете пользуются мобильными версиями и не переходят на адаптивный дизайн.

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

— Быстрая скорость работы. Быстрота объясняется тем, что шаблон оптимизирован под мобильные устройства и в отдельной версии не нужно подгружать различный «мусор». При использовании отдельной версии сайта, можно добиться быстрой загрузки, даже в условиях плохой связи или сети 2g. Это является просто огромнейшим плюсом для пользователей, которые заходят к вам с мобильных устройств.

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

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

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

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

— Лишняя работа в SEO. Дело в том, что сайт находится на поддомене и поисковые системы находят его как копию основного. Для решения этой проблемы, вам необходимо использовать мета-теги rel=«alternative» и rel=«canonical». Тогда поисковый робот увидит, что это альтернативный адрес для доступа к вашему сайту и никаких санкций за дублирование контента не применит.

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

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

RESS (Responsive Design + Server Side)

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

RESS (Responsive Design + Server Side) — это реализация мобильной версии на сайте, путем определения устройства, с которого зашел пользователь и в соответствии с типом устройства, запуска необходимого шаблона, соответствующего устройству. Как правило это реализуется через проверку User-Agent пользователя.

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

$user = BBrowser::detectDevice()
if($device == DEVICE_TYPE_MPHONE){
$shablon = \'mobile.php\';
}
else if($device == DEVICE_TYPE_TABLET){
$shablon = \'tablet.php\';}
else{
$shablon = \'desktop.php\';
}
include($shablon);

Вот в самом простейшем варианте реализация Responsive Design + Server Side выглядит вот так. То есть сначала мы детектируем устройство, с которого зашли к нам на сайте, а дальше через условия if и else перебираем возможные варианты, если с телефона, то выводим mobile.php, если с планшета, то tablet.php, если не то и не другое, то выводи desktop.php. Как видите всё просто, на сайте просто верстается несколько вариантов шаблона, под различные устройства и потом выводится нужный.

Преимущества Responsive Design + Server Side(RESS):

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

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

Возможность переключения между версиями. При использовании Responsive Design + Server Side можно без каких-либо проблем переключаться между версиями, добавив кнопку переключения на видное место, всегда можно включить десктопную или мобильную верстку.

Недостатки Responsive Design + Server Side(RESS):

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

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

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

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

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

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

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

Но вообще если у вас будет мобильная версия сайта, не важно адаптивная это верстка, или же отдельная мобильная версия, или же вообще Responsive Design + Server Side, это будет уже огромнейшим плюсом, потому, что не суть какая у вас реализация, главное: имеется мобилопригодная версия сайта. От неё сплошные плюсы: хорошо пользователям, больше посещаемость, плюсик от поисковой системы, больше доход от рекламы. на основании последних новостей, моё мнение: создание мобильной версии обязательно!

На этом у меня всё, надеюсь не сильно вас утомил своим длинным постом, желаю вам успехов в продвижении.

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

  1. permUpsek

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

  2. PRO КОШЕК

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

  3. Василий

    Большая и интересная статья, есть что почитать и вопросов после неё у меня не осталось, лично мне нравятся все варианты:адаптивная верстка, отдельная версия сайта и responsive design. А делать надо ту, что больше нравится и что позваляет бюджет, ну или как альтернатива, что можешь сделать сам. Спасибо за статью.

  4. Валерий

    Даже спорить не буду по поводу надобности мобильной версии для сайта. Она просто необходима в наше время. Это очень актуальная тема и написано грамотно и интересно. Спасибо автору! Жду ваших новых статей!!!

    1. Егор

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

      1. Иван Скречко

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

  5. Валерий

    Привет, Иван! Нет вопросов, мобильная версия конечно необходима для вебресурсов. Сегодня время такое, что мобильные устройства, которыми пользуются, превосходят по количеству ПК. И отсюда следует вывод сам собой. Спасибо Иван за интересную и полезную статью! До новых встреч!!!

  6. Дмитрий

    Хорошая и очень подробная статья. Сейчас без мобильной версии никуда, и насколько я знаю, гугл плохо относится к сайтам без мобильной версии и даже может из-за этого понизить. Да и с человеческой точки зрания на мобильниках лучше читать адаптивную версию. У меня просто один сайт без мобильной версии есть. Посещаемость в среднем 2000 уников, из них 1500 с яндекса и 500 с гугла. Конечно может и Панда, но может и из-за отсутствия мобильной версии. Сейчас как раз занимаюсь этим вопросом.

  7. Екатерина

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

  8. Evgeny

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

  9. Vasya

    Здравствуйте. Хочу узнать где можно заказать мобильную версию?

    1. Иван Скречко

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

Обсуждение закрыто.