Адаптивная верстка или мобильная версия? Что выбрать: мобильную версию или адаптивный дизайн? Преимущества адаптивного дизайна для мобильных устройств

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

С каждым годом посетители все чаще заходят в Интернет и осуществляют покупки с мобильных устройств. С них, согласно данным Яндекс.Метрики от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки:

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

Итоги сравнения

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

Опыт платформы для создания сайтов Nethouse

На базе Nethouse сегодня работает более 50 000 активных ресурсов: интернет-магазинов, сайтов фирм и специалистов, лендингов, портфолио и блогов. В декабре 2016 мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов мыши, без потери информации и абсолютно бесплатно.

На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.

1. Поисковый трафик.

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

2. Поисковый мобильный трафик.

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

3. Поведенческие факторы.

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

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

Вариант 1: Адаптивный дизайн

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

Плюсы :

1. Только одна версия каждой страницы. Страница адаптируется к типу устройства для отображения содержимого (определяется тип устройства, а затем выводится различное содержание).
2. Данный подход значительно упрощает обслуживание сайта.
3. Отзывчивый дизайн не полагается на обнаружение агента пользователя, как это делают другие два варианта. Обнаружение User-Agent (т.е. обнаружения какой браузер или устройство запрашивает веб-страницу) не плохо само по себе, но оно не совершенно, и если есть сбой в процессе, пользователи могут получить неправильную версию вашего сайта. Кроме того, это освобождает поисковых пауков от необходимости сканировать ваш сайт, под различными User-Agent — это значит, что ваш сайт будет лучше индексироваться.
4. Адаптивный дизайн сайта, как правило, загружается в браузерах быстрее. Потому что все устройства получают одинаковое содержание, нет процесса обнаружения возможного перенаправления запроса из-за агента пользователя. Каждый знает, что скорость имеет значение.

Минусы:

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

Если вы решите выбрать сайт с отзывчивым дизайном, имейте в виду, что обязательно нужно и проверить свой ​​сайт на различных браузерах и устройствах (или использовать хороший User-Agent эмулятор), прежде чем запускать сайт.

Хороший пример адаптивного дизайна — это сайт сайт :

Мобильная версия изменяет сайт довольно красиво.

Вариант 2: Динамическая сервировка

Суть динамической сервировки или переадресации состоит в том, что сначала определяется User-Agent посетителя (т.е. какое устройство он использует для просмотра вашего сайта), а затем выполняется перенаправление на уровне сервера на нужный УРЛ. Динамическая переадресация может быть сделана несколькими способами.

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

Второй тип, двунаправленное перенаправление — когда пользователи перенаправляются также и с мобильной версии на обычную. Части кода, отвечающие за такой редирект иногда называют управляющими тегами. При реализации подобного указывается тег rel=»alternate» на обычной версии, указывая на мобильный сайт; и на мобильном сайте, размещается тег rel=»alternate» , указывающий на основную полную версию сайта.

Плюсы:

1. Так как перенаправление осуществляется на уровне сервера, будет только один URL для каждой страницы.
2. Динамическая переадресация также хорошо работает для обычных телефонов — мобильных, которые содержат фиксированный набор функций, но не так широки, как смартфоны. Например, мобильные телефоны, как правило, не могут загружать приложения, но, как правило, имеют определенные возможности просмотра веб-страниц. Большая разница в том, что мобильные телефоны не могут обрабатывать CSS , так что они не могут хорошо справиться с отзывчивым дизайном. Поэтому важно знать свою аудиторию и какой тип мобильных устройств они используют.
3. Если вы хотите иметь специально для ваших мобильных пользователей, то эта опция позволит вам сделать это, так как у мобильных пользователей и пользователей обычной версии выводится разный код HTML .

Минусы:

1. Такая реализации удваивает количество работы, потому что нужно делать отдельный сайт для мобильных устройств, с отдельным набором индексируемого HTML , требующий отдельного SEO .
2. Необходимый перечень строк значений пользовательских агентов также требует постоянного обслуживания, так как новые строки должны быть добавлены, когда выпускают новое мобильное устройство.
3. Наконец, имейте в виду, что вы должны будете использовать «HTTP-заголовок Vary «, если ваш сайт выдаёт контент динамически. Заголовок помогает получить содержание должным образом и помогает движку сайта правильно его кэшировать. Google показывает подробную информацию о том, как добавить этот заголовок (https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving ) .

Вариант 3: мобильный сайт

Этот вариант, как следует из названия, включает в себя создание отдельного домена специально для мобильных пользователей. Наиболее распространенными примерами являются m.domain.ru или mobile.domain.ru . Это популярный вариант для крупных предприятий розничной торговли. Такой метод включает в себя разработку контента, специально для посетителей с помощью мобильного (и нет перенаправления на уровне сервера).

Плюсы:

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

Минусы:

1. Ваш мобильный сайт не выиграет от любого положительного роста профиля обратных ссылок на основной сайт (если вы не реализовали двунаправленную переадресацию). Так что если вы хотите чтобы ваши мобильные пользователи могли найти вас в органическом поиске, этот момент может быть особенного негативным.
2. Ваш мобильный сайт будет требовать некоторую дополнительную работу по SEO. Вы должны будете представить отдельные карты XML Sitemap для Google и Яндекс. Кроме того, потребуется редактировать свои мета-теги. Мобильные мета-теги должны быть короче, чем для сайта обычной версии.

Вот пример, когда мобильный сайт сделано правильно. NYTimes.com имеет основной сайт для посетителей с настольных ПК:

И mobile.nytimes.com для мобильных посетителей:

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

Выводы

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

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

Доля мобильных пользователей растет уверенными темпами: в конце 2014 года их количество в Сети впервые превысило количество пользователей стационарных компьютеров. Более 10 миллионов человек выходят в Интернет ТОЛЬКО с мобильных устройств. И это все происходит в России прямо сейчас.

У вас еще остались сомнения по поводу того, нужен ли вам мобильный сайт? Тогда переходим к делу.

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

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

Адаптивный (отзывчивый) дизайн (англ. Adaptive/Responsive)

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

Адаптивность достигается с помощью следующих инструментов:

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

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

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

Отдельный мобильный сайт

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

По этой ссылке открывается отдельный сайт с другим URL-адресом, например, m.vk.com для Вконтакте. Также обычно на основном сайте настраивается автоматическая переадресация всех мобильных пользователей на мобильный сайт.

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

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

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

Мобильное приложение

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

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

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

Разработка мобильного приложения весьма трудоемкий и финансово затратный процесс. Веб-сайты кроссплатформенны, а мобильные приложения придется создавать отдельно под каждую платформу (iOS, Android, Windows Phone).

Конечно, существуют специальные инструменты, которые упрощают создание приложений и позволяют портировать его сразу на все основные платформы, например, Phonegap, Ionic, jQuery Mobile. Но в любом случае за разработкой и обновлением приложения придется обращаться к специалистам.

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

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

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

Если проект информационный, например, блог или новостной портал, то для него больше подойдет обычная адаптивная верстка.

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

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

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

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

P.S. Тех, кому интересна тема работы с мобильными пользователями, 16 июля мы приглашаем на мастер-класс «