Адаптивная версия или мобильная. Адаптив или мобильная версия. Все читается, все просматривается

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

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

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

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

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

Недостатки

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

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

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

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

Сегодня большинство людей выходят в сеть через мобильные гаджеты - планшеты, телефоны, в связи с этим оптимизация сайта также выходит на новый уровень. Если пользователь заходит и видит, что сайт не оптимизирован для мобильных устройств: изображение невозможно просматривать, кнопки съехали, шрифты маленькие и нечитабельные, дизайн перекошен - 99 из 100%, что он выйдет и начнет искать другой более удобный. А поставит галочку, что ресурс нерелевантен, т. е. не соответствует поисковому запросу. Поэтому дизайн страницы должен быть обязательно адаптирован под различные мобильные устройства. Что такое мобильная версия сайта, как сделать ее, и какой способ лучше применить? Подробнее в этой статье.

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

Способ первый - адаптивный дизайн

Адаптивные шаблоны предполагают изменение картинки сайта в зависимости от размера экрана. Как правило, они задаются на стандартные 1600, 1500, 1280, 1100, 1024 и 980 пикселей. Для реализации применяют Queries. Сам при этом не меняется.

К преимуществам этого способа стоит отнести:

удобную разработку, поскольку структура сама подстраивается под параметры экрана, а любое обновление не требует разработки дизайна с нуля, достаточно подправить CSS и HTML;
один адрес URL - пользователю не нужно запоминать несколько названий, отсутствует необходимость редиректа (перенаправления с одного адреса на другой), который может усложнить работу вебмастера, да и поисковику легче сортировать и ранжировать ресурс с единым адресом.

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

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

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

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

Этот метод очень распространен и часто с успехом делает сайт на мобильном устройстве удобнее для восприятия. Суть его в том, чтобы создать отдельную версию страницы, нарисованную под приложение и расположенную на отдельном URL или поддомене, например, m.vk.com. При этом основной функционал сохраняется, просто иначе выглядит дизайн сайта. Преимущества такого способа налицо:

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

Но и здесь не обошлось без недостатков:

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

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

Третий способ - RESS-дизайн

Поисковик Google активно поддерживает это направление мобильного дизайна. Это самый сложный, затратный, но действенный метод адаптировать сайт под телефон или планшет. Называется он RESS. Это таргетирование ресурса в мобильное приложение, которое можно скачать для каждого устройства отдельно. Для андроида - с GooglePlay, а для Apple - с iTunes.

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

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

Самый дешевый способ сделать мобильный сайт

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

Скачайте специальные шаблоны (плагины) для адаптивного дизайна. Например, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и другие. Они помогут корректнее отображать сайт в телефоне, при этом вы получите несколько подсказок, что следует исправить для лучшей адаптации странички к мобильной версии.

Конечно, данный метод вряд ли подойдет для серьезных ресурсов. Скорее, это бесплатная возможность предназначается для мелких и самых простых сайтов, блогов, новостных лент. Не стоит также забывать, что поисковик Google, так же как и "Яндекс", сегодня предъявляет серьезные требования к мобильным версиям, поэтому есть огромная вероятность понизить свои позиции, используя такой метод.

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

Принципы создания мобильных версий

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

Убираем все лишнее

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

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

Выравнивание

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

Объединение

Когда возможности длинной цепочки переходов нет, пробуйте объединять несколько шагов в один. Например, на сайте требуется ввод данных в несколько этапов - имя, затем адрес, где в каждой отдельной ячейке расположены отдельно дом, улица, квартира и т. п. Чтобы не вынуждать пользователя пробовать попасть по множеству мелких ячеек, предложите ему заполнить всего 2 - имя и адрес.

И разъединение

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

Перечни

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

Фиксированный удобен в том случае, если пользователь точно знает, что ищет. Например, город, номер или дату. Второй вариант подойдет для длинных сложных названий или для случаев, когда есть множество вариаций у одного и того же названия, а каждый приближает пользователя на шаг к цели. Вариант с автоподстановкой чаще используется в том случае, когда посетителю нужна помощь. Например, сайт по вязанию предлагает купить спицы. Пользователь вводит поисковой запрос “Металлические спицы”, а в подсказке видит “Спицы 5 мм”, “Спицы 4,5 мм” и т. д.

Автозаполнение

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

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

Все читается, все просматривается

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

Немного статистики

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

Цифры следующие. Сегодня гаджетами пользуются 87% населения, видимо, кроме самых маленьких детей и некоторых людей пожилого возраста. Экономисты прогнозируют рост мобильной коммерции в 100 раз на ближайшие 5 лет. При этом только 21% сайтов адаптирован под работу с мобильными устройствами. Значит, интернет-трафик и рынок электронной торговли занят лишь на малую 5-ю часть.

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

Где нужна мобильная версия

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

Без мобильной версии не могут существовать:

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

Вместо заключения

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

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

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

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

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

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

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