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

О мобильности говорят все, кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.

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

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

Зачем? Зачем? Зачем?

Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства.

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

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

Удобство для пользователей

В 2016 году аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7.

Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.

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

Статистика

С каждым годом отрыв растет все сильнее - например, в 2018 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.

Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.

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

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

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

Предпочтения поисковых систем

Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.

У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется - “Владивосток”.

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

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

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

А значит и поведенческие характеристики ухудшатся. Как следствие - Вы на последних необитаемых страницах Яндекса и Гугла по .

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

Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас , тогда перейдите в “Отчеты -> Технологии -> Устройства”.


Аналитика

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

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

виды мобильных версий

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

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

1. Адаптивная верстка

Технически, это один сайт, но вот структура страниц подстраивается под размер устройства.

В упрощенном варианте выглядит так: для компьютеров открываем все пункты меню и строим товары в три столбца.

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


Адаптивная верстка

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

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

Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:

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

Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:

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

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

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

Тем не менее, адаптивный дизайн - самый популярный вариант мобильной версии в интернете.

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

2. Отдельная мобильная версия

В этом случае у Вас будут два разных сайта - у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.

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

Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).


Отдельная мобильная версия

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

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

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

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

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

Справедливости ради - у отдельной версии сайта для мобильных устройств есть и недостатки:

  • Разные адреса сайта у мобильников и десктопа. Это может создать неприятности при SEO - поисковики видят два разных сайта с одинаковым содержимым.

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

  • Неудобно сидеть с планшета - на нем элементы расплываются по всему экрану.

    А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;

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

    Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;

  • Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.

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

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


Сайт интернет-магазина 3. Динамический показ (RESS)

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

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

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

Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.

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

Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.

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

КРИТЕРИИ ИДЕАЛЬНОСТИ

Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.

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

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

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

    Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях.

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

    Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог - 24х24, но это в крайнем случае.

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

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

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

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

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

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

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

  • Информация в один столбец. Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране.

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

    • Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов.

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


    Форма захвата ПрОВЕРКА мобильностИ

    Лучший эксперт, который скажет Вам, удобный ли у Вас сайт - это посетитель. Проведите небольшое тестирование своей мобильной версии по методу “Мысли в слух”.

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

    Попросите добровольца сделать заказ - пусть он пройдет полный путь покупателя. Только не мешайте и не поправляйте его.

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

    Любые трудности и замешательства Ваш подопытный должен комментировать вслух.

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

    Техническая проверка

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

    Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете - исправите сами, нет - будете знать, что написать в ТЗ программисту.

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

    Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.


    Google Search Console

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

    Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная - с рекомендациями и комментариями.


    Яндекс Вебмастер

    Проверка от поиска Bing. Да-да, такой поисковик тоже есть. Пусть им пользуется очень мало людей, но сейчас Вам нужны не они.

    Сервис может увидеть ошибки, на которые предыдущие два не обратят внимание. Ну и, как говорится, хуже не будет.


    Проверка от поиска Bing Визуальная проверка

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

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

    responsinator.com - показывает сразу все популярные устройства на одной странице. Всего в сервисе их десять: Pixel 2 (и в целом Андроиды), Айфоны и Айпады.


    responsinator.com

    iloveadaptive.com - можно выбрать, какие платформы отобразить сразу, не перемешивая разные устройства.

    Из дополнительных плюшек: в правом верхнем углу есть базовые показатели скорости загрузки страницы.


    iloveadaptive.com

    quirktools.com - одновременно отображает только одно устройство, но зато какой выбор. Все экраны разбиты по группам: современные смартфоны, кнопочные телефоны, компьютеры и телевизоры.

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


    quirktools.com

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

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

    В целом это не сильно сказывается на качестве мобильности, но лучше это иметь ввиду.

    Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.

    Коротко о главном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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