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

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

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

Как видите, всё довольно просто, мобильная версия сайта, это специальная верстка, которую будет комфортно просматривать на смартфонах и планшетах. Но это всего лишь общие вещи, поскольку мобильные версии сайта можно еще разделить на различные варианты по их реализации, в основном выделяют 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, это будет уже огромнейшим плюсом, потому, что не суть какая у вас реализация, главное: имеется мобилопригодная версия сайта. От неё сплошные плюсы: хорошо пользователям, больше посещаемость, плюсик от поисковой системы, больше доход от рекламы. на основании последних новостей, моё мнение: создание мобильной версии обязательно!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цифры

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

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

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

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

На текущий момент при построении мобильных версий сайтов существуют 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 варианта имеют свои плюсы и минусы, причем в зависимости от сути и направленности сайта.

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

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

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

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

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

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

Мобильная версия Вконтакте — это специально адаптированный под небольшие экраны мобильных телефонов сайт социальной сети №1 в СНГ (общая аудитория за сутки составляет более 80 млн человек, а число просмотров более 1 млрд). Ежегодно всё больше и больше людей пользуются смартфонами для захода в соц.сеть, и вполне естественно что при этом возникают некоторые проблемы. В этом материале мы расскажем как их решить.

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

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

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

При заходе на официальный сайт ВК пользователь видит обычную стену и разделы слева. Настольная версия в адресной строке браузера выглядит следующим образом: https://vk.com (протокол сайта обязательно должен быть защищенным с буквой «s» на конце, иначе есть риск попасться на другой сайт).
Чтобы зайти на мобильную версию ВК достаточно в адресной строке обозревателя прописать следующий адрес — https://m.vk.com . Как видим, отличие адреса в добавлении буквы «m», что значит мобильная.

Приставка «m» в интернет-адресе VK

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

Внимание! есть ответы на самые распространённые проблемы с мобильной версией вк, а именно:

Как перейти на полную версию вк на смартфоне?

Почему на компьюторе (ноутбуке) открывается мобильная версия вместо полной?

Если вы не нашли ответ на ваш вопрос — задайте его в комментариях, постараемся оперативно ответить!

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

Для наочного сравнения совершите вход в обычную версию — . А в другой вкладке откройте мобильную версию VK. Отличий полной и мобильной версий ВК очень мало, но есть кое-какие достоинства, которые стоит учесть:

1. Мобильная версия имеет более компактный интерфейс;
2. Шрифт больше, поэтому все пункты меню видно очень хорошо;
3. Отсутствие встроенной рекламы в интерфейсе сайта;
4. Быстрая загрузка социальной сети, так как лишних элементов почти нет.
5. Функции мобильной версии ни в коем случае не урезаны.
6. Окно подстраивается под любое разрешение – если мы начнем уменьшать окно браузера с мобильной версией ВК, то горизонтальной полосы прокрутки не будет, а все элементы будут подстроены под указанный размер окна.

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

Для сравнения, размеры шрифта в мобильной и полной версии ВК:

Шрифт в обычной версии

Шрифт в мобильной версии на ПК

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

Интерфейс мобильной версии Вконтакте

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

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

Если зайти в настройки, то, как и в полной версии, там есть следующие разделы, расположенные компактно и минималистично:

Учетная запись – содержит параметры, которые позволяют:

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

• видимость основной информации профиля;
• видимость фотографий для пользователей;
• видимость сохраненных фотографий;
• отображение групп;
• отображение списка аудиозаписей;
• отображение списка подарков;
• скрытие друзей;
• видимость записей на стене;
• взаимодействие с другими пользователями;
• видимость страницы в интернете

Следующий раздел — Оповещения . Тут настраиваются уведомления о действиях, которые совершаются в отношении вашей страницы, например, когда кто-то поставит отметку «Мне нравится» появится темное окошко, где будет показано, что поставили лайк. Данные параметры можно настроить как захочется пользователю.
Черный список – сюда добавляются люди, с которыми пользователь больше не хочет общаться.
Денежные переводы – с помощью сервиса ВК можно отправлять средства другим людям, а в этом разделе будут отображены проведенные транзакции.

Какие есть приложения Вконтакте для мобильных телефонов

В интернете можно найти очень много различных приложений для Android и iOS устройств. Конечно, стоит устанавливать ПО, которое заслужило доверие у пользователей, и не скачивать приложения из сомнительных источников.
Самым оптимальным вариантом является официальное приложение Вконтакте . Данный клиент есть и на Android и на iOS. Наличие Material Design делает интерфейс очень приятным на вид. В официальном клиенте очень удобно работать, но есть недостатки в плане ограничений прослушивания музыки до 30 минут в день и реклама. Что касается нагрузки, то приложение довольно тяжелое и может отнимать много ресурсов системы.
По функционалу большинство приложений ничем не отличается от настольной версии ВК.
VK Coffee на Андроид – это модификация официального клиента. Здесь есть такие функции, как невидимка, использования нескольких аккаунтов, отсутствие рекламных объявлений, защита пин-кодом и многое другое. Можно загружать на телефон музыку.
VK MP3 mod – поддерживает функцию невидимости для других пользователей, работа с несколькими профилями, шифрование переписки, использование большого количества разнообразных стикеров. Особенность в скачивании музыки в неограниченном количестве.
Kate Mobile — один из популярных и удобных клиентов для ВК. Имеет следующие достоинства:

1. Легкий клиент, не занимающий много места на устройстве;
2. Режим невидимости для пользователей;
3. Поддержка нескольких аккаунтов;
4. Отсутствие рекламы ВК;
5. Гибкая настройка вида интерфейса;
6. Сохранение музыки в кэш (только в Pro версии);
7. Быстрый и стабильный клиент, работающий без ошибок.

Используя данную программу для смартфона, пользователь сможет настроить внешний вид под себя. Вход осуществляется не только с помощью пин-кода, но и с отпечатком пальца.
Если пользователь хочет слушать музыку и сохранять ее в кэш, то придется скачивать Pro версию с официального сайта приложения, так как её нет в Play Market.
Lynt lite — клиент очень похож на официальный. Выполнен в стиле Material Design и имеет те же функции. Особенность во внешнем виде и темах оформления.
Вконтакте Amberfog — очередной популярный клиент, выполненный по концепции Material Design. Имеет такой же функционал, как у Kate Mobile. Большинство этих опций можно использовать только за деньги. Если платить не хочется, можно выполнять задания, за которые пользователю будут начисляться монеты. За них можно купить какую-то функцию Amberfog на месяц.
Phoenix Lite – отличие только в дизайне, функции те же, что в остальных клиентах.
Полиглот Вконтакте – отличий нет. Недостаток в отсутствии музыкального и видеораздела.
Как видим, клиентов для мобильных устройств очень много. А если вам нравится простота и доступность, то ничего не мешает использовать мобильную версию ВК с компьютера или ноутбука.

Полезное видео — Как сделать мобильну версию в Вк:

https://www.youtube.com/watch?v=v296tljggV8 Video can’t be loaded: Как сделать Мобильную версию в ВК (https://www.youtube.com/watch?v=v296tljggV8)

Ответы на самые частые вопросы по мобильной версии Вконтакте:

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

Перейти на мобильную версию Вк очень легко — просто добавьте к web-адресу сайта https://vk.com/ букву «m» . Вместе это будет выглядеть так: https://m.vk.com/

Как перейти на мобильную версию вк на смартфоне?

Если по какой-то причине у вас на телефоне открылась настольная версия социальной сети, не беда — проделайте в поле для ввода УРЛ то же, что и в предыдущем ответе — добавьте к адресу приставку «m».

Как перейти на полную версию вк на смартфоне или ноутбуке?

Это можно сделать двумя путями — или нажать на специальный пункт меню «Полная версия», который есть и на телефоне, и на компьютере, или убрать в строке УРЛ приставку «m».

Почему на компьютере (ноутбуке) открывается мобильная версия вместо полной?

Как одна из причин — вы непроизвольно могли сохранить мобильную версию в закладках браузера. Ещё одна причина — вы в браузере нажимаете ссылку на последние сохранённые заходы, где и может быть версия вк для мобильных телефонов. Чтобы упредить это — введите в строку поиска запрос (обычно это что-то типа мл vk com или m.vk.com вход ) и после нажмите на сайт Вк без приставки «m» в УРЛ.

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

Такая же ситуация (только обратная) может возникнуть и на смартфоне. Если для входа в ВК вы нажимаете на последнюю посещаемую страницу, или на сохранённую закладку с обычной версией, то чтобы изменить ситуацию и попадать на мобильную версию, просто нажмите в поиске на сайт Vkontakte с приставкой «m».

Внимание! Друзья, если у вас остались ещё вопросы или нерешённые проблемы связанные с мобильной версией вк — смело задавайте их в комментариях (ниже)!

А вы знали об этих возможностях Вконтакте?

https://www.youtube.com/watch?v=-rhA9_9DM6U Video can’t be loaded: 5 СЕКРЕТНЫХ ФУНКЦИЙ ВКОНТАКТЕ, О КОТОРЫХ ВЫ НЕ ЗНАЛИ (https://www.youtube.com/watch?v=-rhA9_9DM6U)