П мобильная версия. Вконтакте — мобильная версия ВК: вход. Настройки мобильной версии ВК
Зачем нужна мобильная версия или адаптивный дизайна сайта?
Если у молодого поколения бизнесменов данный вопрос не вызывает сомнений, то другая часть задумается, зачем тратить на это деньги.
Чем же обусловлена необходимость в наличии той или иной версии для мобильных устройств.
По последним данным число пользователей интернета, использующих мобильные устройства за год выросло на 90%! Из всех 80 млн. пользователей интернета по всему миру 50 млн. используют мобильные устройства. В русском сегменте мобильный трафик насчитывает 25% и доходит до 40% в некоторых тематиках.
Основная проблема в том, что ранее сайты изначально делались с ориентацией на разрешение мониторов компьютеров, а как оказалось традиционная верстка для мобильных устройств не совсем подходит, поскольку размеры экрана смартфона отличаются от диагонали монитора, из-за чего происходит несоответствие графики и дизайна. Пользоваться такими сайтами с телефонов совершенно не удобно: долго грузятся, мелкий и нечитабельный текст, неудобная навигация, горизонтальная прокрутке, не работают flash и java скрипты. Большинство посетителей такие сайты раздражают, и они их сразу покидают, не совершив целевых действий.
Еще одна причина, по которой следует задуматься о разработке мобильной версии - это наличие мобильного поиска, и если ваш сайт не имеет мобильной версии, то он и не попадает туда. Об этом нам сообщают Google и Яндекс в своих обращениях и рекомендациях, и это понятно, т. к. в десктопном поиске наблюдается своего рода стабильная ситуация, поисковики устремили свой взор на растущий рынок мобильного поиска. Все это и подтолкнуло нас на разработку бесплатной мобильной версии для вашего сайта.
Цель поисковых систем - предоставление людям релевантной и полезной информации. Поисковики и разработчики сайтов стараются стремиться к тому, чтобы посетителям с любого устройства было просто и удобно просматривать сайт, после перехода из поисковой выдачи.
Последние исследования показывают, что те, кто пользуется смартфонами и другими мобильными устройствами для доступа в интернет, чаще возвращаются на сайты, которые имеют мобильную версию, так же такие пользователи чаще совершают покупки в интернете, что согласитесь очень важно. А так как поисковые системы за всем этим следят и стараются повышать качество поисковой выдачи, то удобный просмотр сайта с таких устройств стал фактором, влияющим на продвижение сайта.
Решения для получения мобильного трафика
Существует 3 технологии создания мобильной версии:
- Мобильная версия, как отдельный сайт для мобильных устройств на поддомене;
- Адаптивный дизайн;
- Мобильные приложения для IOS, Android, Windows Phone.
С мобильными приложениями все понятно: их разрабатывают для мобильных операционных систем, а посетители сайта при заходе с мобильного устройства получают предложение их скачать, например, как у kinopoisk.ru.
Разработка подобного приложения стоит соразмерно мобильной версии, а порой и дороже.
Плюсов у подобного решения много, это и продуманный интерфейс, и какие либо «фишки», личный кабинет, и т. п.
Минус же тут в том что пользователя нужно побудить скачать и установить приложение, что является отдельной статьей расходов, или пунктом в маркетинговой стратегии.
Подобные приложения необходимо обслуживать и обновлять, защищать от взлома и т. п. Что так же стоит денег.
Теперь разберем отличия мобильной версии от адаптивного дизайна.
Адаптивный дизайн
Адаптивный дизайн означает, что за счет определенных стилей кода, ваш сайт автоматически по ширине адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон, планшет. Ранее мы писали об этом в нескольких статьях «Как сделать мобильную версию сайта » и «Использование мета-тега Viewport ». При разработке сайта, верстальщики верстают сайт не под определенный размер, например 800х480 px, а создают страницы сайта из элементов автоматически подстраивающихся под ширину экрана. Блоки просто изменяют свое расположение, а некоторые и вовсе не показываются на смартфонах. Подобный вариант больше подходит для простых сайтов-визиток или блогов.
Преимущества адаптивного дизайна:
- Грамотное отображение страниц сайта и всех его элементов на любых устройствах за счет адаптации стилей к мобильным браузерам;
- Соответствует требованиям Google к удобству просмотра на мобильных устройствах;
- Удобство в разработке, стоимость ниже чем создание мобильной версии;
- Один url у обычной версии сайта и с адаптивной версткой, благодаря чему не понадобится перенаправление пользователей, а так же, посетителям не нужно будет запоминать отдельный адрес поддомена.
- Красота изначального сайта, что-что, а все таки красивый дизайн можно сохранить и это немаловажно.
Недостатки адаптивного дизайна:
- Большой вес страниц сайта, потому что адаптивный дизайн не дает возможности заменить тяжелые декстопные элементы облегченными, из-за этого сайт долго грузится с мобильных устройств. Что очень критично, поэтому скорость загрузки нужно оптимизировать;
- В случае проблем на адаптивной верстке, посетитель сайта не имеет возможности перейти на обычную версию сайта;
- Адаптивный дизайн предполагает переработку всех страниц сайта, что может оказаться неудобным, если ваш бизнес полностью зависит от сайта и от его работы.
Мобильная версия сайта
Мобильная версия предполагает разработку версии сайта на поддомене, например, m.vk.com, на который перенаправляется посетитель в случае использования мобильного устройства. Как правило, такая версия создается под мобильные экраны с шириной менее 620px. Такая технология позволяет создать мини версию сайта с наиболее важной информацией, не перегруженный контентом и различными элементами дизайна, а главное большими элементами навигации. Подойдет как для простых сайтов, так и для интернет-магазинов, различных сервисов: почта, новости, социальная сеть.
Преимущества мобильной версии:
- Удобна для пользователя, потому что сильно упрощена по сравнению с обычной версией. Мобильная версия дает наиболее приоритетную информацию, а так же позволяет совершать заказ/покупку с минимумом действий.
- Легко вносить существенные изменения, т. к. это отдельная версия и не требуется вносить изменения в основной сайт;
- Быстрая загрузка страниц, так как все необходимые элементы имеют меньший вес.
- Есть возможность перейти на полную версию сайта, в случае с проблемами на мобильной;
- Соответствует требованиям Google к удобству просмотра на мобильных устройствах.
Недостатки мобильной версии:
- Стоимость разработки, разработка мобильной версию сравнима с созданием приложения;
- Стоимость обслуживания, необходимо поддерживать работу версии для разных устройств;
- От части информации, файлов и возможностей сайта придется отказаться.
Как вы увидели, оба варианта имеют свои преимущества и недостатки, мы же решили совместить лучшее из обеих версий. В итоге получилась мобильная версия с элементами адаптивного дизайна, вы можете как транслировать материалы с основного сайта, и он будет адаптирован под мобильные устройства, так и создавать отдельные разделы доступные только для мобильных устройств. Все это позволяет настраивать мобильную версию максимально гибко.
Мобильная версия в подарок!
Разработчики Nubex заботятся о своих клиентах и о качестве выполняемых сайтов, поэтому мы подготовили совершенно бесплатное обновление, благодаря которому мобильная версия появилась у всех, кто пользуется нашим конструктором сайтов. Если по каким-то причинам она вам не нужна, ее можно выключить одним щелчком мышки. Так же ее настройки совершенно просты и интуитивно понятны, настроить мобильную версию можно за 5-10 минут.
Мы учли требования поисковых систем при создании мобильной версии:
- Динамичная верстка сайта, область просмотра должна автоматически подстраиваться по размеры экранов, чтобы пользователь мог избежать горизонтальной прокрутки страницы и смены масштаба.
- Автоматическая смена размера шрифтов, для повышения читаемости текста.
- Удобный дизайн интерактивных элементов (кнопки и пр.), расположенные на определенном расстоянии друг от друга, так, что бы при нажатии выбиралась необходимая область
- Адаптивный дизайн — все должно работать и отражаться на основе технологий современных мобильных устройств.
Так же мы учли:
- свернутое главное меню (удобно разворачивается и экономит место);
- корзина, поиск по сайту;
- удобное отображение фотографий, альбомов, слайдеров и товаров;
- для интернет магазинов — удобная форма on-line заказа с телефона;
- самостоятельно можно включать или выключать отображение разных блоков и разделов.
Выполните настройки мобильной версии сайта самостоятельно, или обратитесь в нашу службу технической поддержки клиентов, для повышения качества работы вашего веб-ресурса.
Приветствую вас, уважаемые читатели, в этой статье, я хочу поговорить с вами о мобильной версии сайта. А точнее, нужна ли мобильная версия и какие могут быть от неё плюсы.
Почему я решил вообще завести тему о мобильных версиях сайтов? Всё очень просто! Если сравнивать посещаемость сайтов сейчас и скажем даже года 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, это будет уже огромнейшим плюсом, потому, что не суть какая у вас реализация, главное: имеется мобилопригодная версия сайта. От неё сплошные плюсы: хорошо пользователям, больше посещаемость, плюсик от поисковой системы, больше доход от рекламы. на основании последних новостей, моё мнение: создание мобильной версии обязательно!
На этом у меня всё, надеюсь не сильно вас утомил своим длинным постом, желаю вам успехов в продвижении.
Эта статья поможет вам определиться, нужна ли вам мобильная версия сайта, зачем она вам, и какие у нее бывают версии. Также поделимся интересными цифрами по теме.
Около 25% трафика интернета приходится на мобильные операционные системы, этот показатель растет с каждым днем. Наряду с ростом пользователей интернетом с помощью мобильного устройства возникает вопрос, адаптировать ли сайт под мобильный трафик, какие методы существуют и стоит ли это потраченных сил? Разберемся!
Зачем сайту мобильная версия?
- Пользоваться мобильной версией сайта с гаджетов намного удобнее: отпадает необходимость в горизонтальной прокрутке сайта, весь функционал сайта работает корректно, просмотр сайта доставляет пользователю удовольствие;
- Мобильная версия сайта намного легче, имеет менее объемный код, благодаря этому сайт с мобильных гаджетов будет загружаться в несколько раз быстрее, в том числе, это поможет экономить пользователю драгоценные мегабайты;
- Специально разработанная версия сайта под мобильные телефоны позволяет работать именно с этой целевой аудиторией, так, например, для мобильной версии интернет-магазина можно вставить отправку SMS-сообщения прямо с мобильной версии или определить местоположения и расстояние до ближайшего пункта продаж;
- Поисковые системы используют мобильный поиск для телефонов, поэтому и ранжироваться мобильная версия вашего ресурса будет выше, соответственно возрастет количество переходов.
Виды мобильной версии сайта
- Адаптивный дизайн . С помощью CSS3 можно задавать свои стили для разных размеров экрана сайта. Этот способ широко используется сегодня, а хорош он тем, что не требует плодить дополнительные страницы сайта. Минус заключается в том, что не все на сайте оптимизировано, вес страницы по прежнему велик, но придерживаясь принципа «mobile first» этого можно избежать (принцип, когда сначала сайт оптимизируют под мобильные телефоны).
- Отдельный мобильный сайт . Изменения в такую версию внедрять проще, ведь структуры мобильной версии и десктопной не зависят друг от друга в плане кода.
- RESS . В этом методе ПО на стороне сервиса определяет устройство и выводить для него свои HTML и CSS. Минусы здесь кроются в том, что технология определения устройства пользователя не идеальна, да и является дополнительной нагрузкой на сервере.
- - Отдельное приложение . Это не совсем то, что подходит под определение видов. Скорее, это дополнение. Приложений становится все больше, и некоторые пользователи стали совершать покупки и просматривать новости сайтов преимущественно через них. Об этом решении стоит задуматься крупным и посещаемым интернет-проектам или обреченным нацеленным на коммерческий успех.
Необходимые функции в мобильной версии сайта
- Совместимость . Сайт должен корректно отображаться на большинстве популярных разрешениях экранов (480x320, 1280x720 и т.д). На таких сайтов лучше использовать xHTML, JavaScript лучше обойти стороной.
- Юзабилити . Навигация – залог успеха, а хорошая навигация – прямой путь к победе, постарайтесь сделать все превосходно, постоянно просите друзей или на различных форумах оценить версию, предложенные исправления пользователями учитывайте при дальнейшей разработке;
- Оптимизация контента . Этот пункт особенно относится к картинкам: они должны быть легкими в килобайтах и в габаритах;
- Дизайн. Самая важная составляющая . Нынешняя тенденция дизайна для мобильных – максимальная легкость и простота в использовании.
Каким сайта в первую очередь необходима мобильная версия
Исследования различных интернет порталов позволяют оценить целесообразность создания мобильной версии для следующих тематик:
- Социальные сети и подобные сервисы;
- Средства массовой информации;
- Интернет-магазины;
- Справочные порталы.
Чтобы точно знать, нужна ли вашему сайту мобильная версия, проанализируйте трафик вашего ресурса за последний год через любую систему аналитики, и если доля мобильного трафика составляет 18 и более процентов, задумайтесь о скорейшем создании мобильной версии.
Вы все еще раздумываете? Предлагаем вдуматься в эту небольшую статистику:
- Мобильные телефоны используются более 87% населения, остальные 13% - дети в возрасте до 5 лет;
- Рост мобильной коммерции к 2020 году по данным различных организаций вырастет в более чем 99 раз .
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Мобильная версия сайта – это дублирующая версия основного сайта, для которой применяется специальная верстка, позволяющая удобно просматривать и перемещаться по страницам ресурса с мобильных телефонов и планшетов.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Мобильный телефон давно превратился в лучшего друга для большинства жителей планеты. Современные мобильные гаджеты практически полностью переняли на себя роль стационарных компьютеров и кардинально изменил поведение пользователей в интернете. Они одновременно являются источником информации и средством реализации многих задач. Динамика жизни требует максимально рационального использования времени, поэтому мы уже давно изучаем, покупаем и бронируем на ходу.
Каждый проект в интернете имеет свой основной сайт, но разрешение экранов мобильных устройств отличается от компьютеров и ноутбуков. Вследствие этого, воспользоваться сайтом с телефона практически невозможно, поскольку его отображение очень неудобное. Именно поэтому возникла потребность в наличие оптимизированной версии сайта, которая будет читаемой для карманных гаджетов.
Зачем нужна мобильная версия сайта
Изобилие тождественных web-ресурсов, как информационных, так и продающих, порождает дефицит лояльности со стороны посетителей. Пользователи интернета имеют возможность выбора, поэтому, когда посетитель натыкается, например, на неудобную навигацию ресурса, он предпочитает не тратить свое время, а покинуть сайт и уйти к конкуренту. Такая ситуация вынуждает администраторов создавать максимально комфортные условия для того, чтобы не только привлечь посетителей, но и мотивировать их задержаться.
Максимальный охват целевой аудитории и создание комфортных условий для нее - вот для чего нужна мобильная версия сайта.
Отдельная мобильная версия сайта – это реализация комфортного доступа к сайту с мобильных устройств, которая стала применяться достаточно давно. В смартфонах сайт отображается в одну колонку, поэтому перед тем, как сделать мобильную версию сайта разработчику нужно хорошенько продумать дизайн - разместить все так, чтобы ничуть не урезать посетителя в функционале и при том, сделать взаимодействие с ресурсом максимально удобным.
Как это работает
Принцип, по которому принимается решение, какую версию показывать посетителю, заключается в том, что, когда пользователь заходит на сайт, происходит автоматическое определение экрана устройства. Если ширина экрана идентифицируется, как мобильный гаджет, то запускается переадресация на мобильную версию ресурса, которая находится на отдельном поддомене. Чтобы в будущем поисковые системы не воспринимали эту версию как отдельный ресурс, лучше разместить поддомен на том же домене, что и основной сайт, иначе продвижение мобильной версии сайта будет контрпродуктивным.
Как перевести сайт на мобильную версию
Существуют определенные принципы, и для их реализации потребуются навыки программирования и верстки.
В моб. версии нужно сохранить общую концепцию с десктопной версией, но при этом, разработать отдельные дизайнерские решения, а также максимально удобный для юзабилити интерфейс. Элементы ресурса на экране посетителей должны быть соответствующе разнесены, и отображаться достаточно крупно для удобного нажатия пальцем. После чего, идет тестирование и финальный запуск.
Мобильная версия vs адаптивная верстка
Параллельно с отдельной мобильной версией сайта, существует и другая интерпретированная вариация – адаптивный дизайн.
Попытаемся разобраться, чем отличается мобильная версия сайта от адаптивной.
Адаптивный сайт – это не отдельная версия ресурса, это и есть основной сайт, и он автоматически подстраивается под разрешение устройства, с которого происходит вход.
К преимуществам адаптивной верстки относится тот факт, что она имеет один адрес с основным сайтом, поэтому перенаправление не требуется. А это значительно усиливает позиции сайта при ранжировании поисковыми системами. Во время открытия отображается абсолютно тот же контент сайта и его функционал, но вид его подстраивается под размеры окна. Кроме того, есть возможность оптимизации ресурса.
Но разработка адаптивной версии является более трудоемким процессом, соответственно затратная часть мероприятия также будет больше.
Адаптивный дизайн является актуальным для ресурсов, у которых нет большого оборота посетителей – интернет-магазины, блоги, визитки, а также сайты, их основная задача заключается в доставке контента.
Плюсы и минусы мобильной версии
Мобильная версия имеет более высокие скорость загрузки и удобство навигации. Поскольку посетитель видит минимум отвлекающей информации, то вероятность положительного действия с его стороны выше. Кроме того, отдельная мобильная версия является полностью автономной от десктопной. Это дает возможность работать с ними отдельно.
К минусам такой концепции можно отнести определенные трудности в области SEO продвижения. Поскольку размещение одинакового контента воспринимается как дубль, - это требует отдельных мероприятий по устранению негативного влияния на процесс раскрутки сайта. С учетом того, что мобильная версия не является универсальной, то она требует отдельной статьи расходов помимо содержания основного сайта.
Такой вариант сайта подходит для больших проектов, которые уже имеют высокую посещаемость основного сайта, но хотят повысить лояльность к мобильным устройствам без редизайна. В большинстве случаев, отдельная мобильная версия актуальна для ресурсов, где важна скорость загрузки – социальные сети, почтовые сервисы, новостные порталы.
Подводя итоги, можно сказать только то, что сегодня обоснованной необходимостью для любого интернет-проекта является возможность корректного отображения сайта на мобильных устройствах. Как это реализовать - зависит от целей и задач сайта, бюджета и возможностей.
Для того чтобы определить, что лучше - адаптивный дизайн или мобильная версия сайта, сначала следует понять, для чего всё это необходимо.
По данным 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 для всего контента.
- Гибкий интерфейс - можно настроить комфортное отображение сайта для любой ширины экрана.
- Адаптивный дизайн соответствует требованиям поисковиков к удобству просмотра сайта на мобильных устройствах.
- Если у сайта есть адаптивная версия, то поведенческие факторы становятся лучше на мобильных устройствах, а от этого улучшаются общие показатели сайта. Для ранжирования в поисковой выдаче это будет большим плюсом.
Недостатки адаптивного дизайна для мобильных устройств
- Необходимость создания отдельных макетов страниц сайта под каждое разрешение дисплея.
- Адаптивную версию, в отличие от мобильной, нельзя переключить в обычный режим. Т. е. у пользователя не остается выбора отображения сайта. Недостаток актуален, если в адаптивной версии имеются ошибки - например, некорректно отображаются элементы.
- Сложность добавления нового шаблона страниц, т. к. их нужно будет настраивать для корректного отображения на адаптивной версии. Если добавлять информацию на уже имеющиеся шаблоны страниц, то никаких проблем с отображением не будет.
Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?
Лучшим решением для сайта является использование адаптивной вёрстки под мобильные устройства. Несмотря на ряд недостатков, сайт с адаптивной версткой более функционален. Также наличие шаблонов страниц подразумевает простоту добавления контента на сайт, в отличие от мобильной версии, в которой работы по внесению контента дублируются, так как фактически существует два разных сайта. Большим плюсом является тот факт, что адаптивная версия улучшает поведенческие факторы основного сайта. Это полезно с точки зрения продвижения и юзабилити. Исходя из этого, свой выбор мы рекомендуем сделать в пользу адаптивной верстки.