Адаптивная верстка или мобильная версия. Что выбрать: мобильную версию или адаптивный дизайн? Ошибочная интерпретация адаптива

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

Если Ваш сайт до сих пор не мобилен, рекомендую воспользоваться моими советами или обратиться к профессионалам - http://www.Mobile-version.ru которые сделают все по стандартам поисковых систем. По этой же ссылке можно и проверить свой сайт на мобильность.

В 2013 году Google начал давление на вебмастеров (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html ), убеждая в необходимости создания облегченных модификаций сайтов, а с 2015 года мобильность стала одним из аспектов ранжирования (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.

Mobile Friendly сегодня - это не просто забота о посетителях, а непременное условие продвижения.

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

Есть три подхода:

  • Отдельный адрес и макет - размещается на поддомене вида m.site.ru. Перенаправление происходит посредством серверного редиректа по юзер-агенту.
  • Адаптивный дизайн - url и html остаются теми же, что и в настольном формате, но в CSS медиа-запросами отдаются правила для разных экранов.
  • RESS - респонсивный дизайн, адрес остается прежним, но сервер посылает наборы стилей в зависимости от того, какой тип оборудования запрашивает страницу.

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

Мобильная версия сайта: как сделать правильно

Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.

Информация для новичков: в CSS слова перед фигурными скобками означают конкретные куски html файла, за отображение которых они отвечают. Пишутся чаще с точкой или решеткой - #место {свойство: значение;}.

Шаг 1. Снимаем ограничения.

Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.

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

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

img {

Max-width: 100%;

Height: auto;

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

table {

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Обтекания - задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.

Блоки встали друг над другом. Добавление обтекания убирает переводы строк, выставляет элементы в линию на все доступное пространство.

Шаг 2. Планирование реорганизации контента.

Выясните, какие детали десктопного сайта должны отображаться на мобильных устройствах. Для этого ответьте себе на вопросы:

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

Шаг 3. Удобство.

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

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

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

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

Реализация Media Queries с примерами

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

Media queries - логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.

Медиа запросы можно назначать по параметрам:

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

Актуальный список аргументов доступен в официальной спецификации.

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

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

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

Для исправления убираем фиксированные рамки, прописав в стили шаблона:

@media only screen and (max-width: 1000px) {

Nav { width: 100%; }

Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.

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

Дописываем в тот же самый медиаквери:

Block { width: 35%;}

Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку - fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент - 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.

Впрочем, можно применить box-sizing для контента, чтобы не высчитывать каждый раз пиксели, а работать по общим габаритам.

Переходим к заданию отображения на экранах с меньшим разрешением:

@media only screen and (max-width: 600px) {

Block {

Float:none;

Width:85%;

Margin: 1em auto;

Если экран менее 600 px, то наши блоки должны встать в одну колонку - убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.

Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.

Продемонстрируем возможности на примере смены цветов и отображений.

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

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

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

Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.

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

Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.

Сам скрипт доступен на гитхабе (https://github.com/scottjehl/Respond ), добавляет в старые IE поддержку минимальных и максимальных габаритов и медиаквери.

Еще одна проблема - адаптивный дизайн подразумевает использование Html5, который опять же непонятен старым браузерам. Лечится хаком:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:

header, nav, section, article, aside, footer {display:block;}

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

If ($(document).width() > 980) {

$.getScript("путь к скрипту");

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

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

Если сайт переверстывается на локальном сервере, корректность можно определить в ami.responsivedesign.is . Владельцам денвера для верного отображения потребуется сменить кодировку на utf-8, отредактировав серверный файл httpd.conf.

Сервис продемонстрирует, как выглядит проект на разных устройствах.

Дополнительно шаблон тестируется https://developers.google.com/speed/pagespeed/insights/ или в спецформе https://www.google.com/webmasters/tools/mobile-friendly , а также в вебмастерских.

В Яндексе это выглядит подробно, а Google просто сообщит, что проблемы отсутствуют.

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

Ниже нажав на одну из кнопочек вы сможете скачать 2 примера страницы свертанной в данном уроке и уже просто работать с готовыми страницами и копировать код.

С уважением, Галиулин Руслан.

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

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

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

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

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

Чем же обусловлена необходимость в наличии той или иной версии для мобильных устройств.

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

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

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

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

    Простые способы проверки мобильной версии сайта

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

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

    Вторым по сложности вариантом, позволяющим проверить мобильную версию сайта через компьютер, является установка специального браузера. Например, Opera Mobile Classic Emulator . Его версии существуют для Windows, Mac и Linux. К сожалению, эта разработка основана на старом движке Presto, использованном до 12 версии браузера Opera, и не покажет реально, как отображается сайт в современном мобильном браузере. C 2013 года браузер Opera работает на программном движке Blink, поэтому проверку мобильного сайта лучше провести на современном браузере. Это может быть как Opera так и Chrome , работающие на одинаковом движке Blink на основе WebKit, используемого в Apple Safari.

    Необходимо включить в указанных браузерах специальный режим разработчика (F12 в Chrome или Ctrl+Shift+i в Opera) и переключиться в режим мобильного устройства:

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

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

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

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

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