Мобильная версия и адаптивная верстка отличие. Вконтакте — мобильная версия ВК: вход

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

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

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

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

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

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

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

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

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

Статистика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iloveadaptive.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 для ссылок и кнопок.

Если вы когда-либо создавали таблицы 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.сайт).

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

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

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

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

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

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

• Адаптивный дизайн;
• Отдельная мобильная версия сайта;
• RESS (Responsive Design + Server Side).

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

• Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
• Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

• Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
  В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
«вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
• Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

• Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
• Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
• Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
• Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

• Несколько адресов -
• Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
• Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

• Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
• Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

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

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

Сергей Лукошкин

26.03.2015 | | 0 комментариев

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

Только после этого, они поедут в выбранный магазин, или просто закажут товар через интернет. Сегодня уже более 60% покупателей поступают именно так.
Казалось бы, для успеха нужно, чтобы у вашей компании был сайт или интернет магазин, и всё. Однако, теперь этого уже совсем недостаточно.

Дело в том, что с появлением смартфонов и планшетов всё больше покупателей ищет товары и услуги в интернете именно с помощью этих устройств, а не со стационарных компьютеров или ноутбуков. А всё потому, что это очень удобно. Где бы ни находился покупатель, он может осуществлять поиск прямо со своего мобильника, и не нужно включать компьютер.
Это здорово, но физический размер экрана носимого гаджета, будь то планшет или смартфон, довольно мал и поэтому сайт, который прекрасно смотрится на компьютере или ноутбуке, очень неудобен для просмотра на экране мобильного устройства.
Вот почему сейчас, как никогда, стало важно, подходит ли ваш сайт для использования на смартфонах, планшетах или фаблетах (фаблет – нечто среднее по габаритам, между смартфоном и планшетом).

Для решения этой проблемы существует два подхода:

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

А так она выглядит на экране смартфона


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

Мобильный поиск. По статистике (на момент написания этой статьи) более 50% покупателей ищут товары и услуги в интернете с мобильных устройств. И эта цифра очень быстро увеличивается. А совсем недавно Google сообщил, что сайты, которые не имеют мобильной версии, будут очень низко ранжироваться в результатах поиска с мобильных устройств. Поэтому, если у вас нет мобильной версии сайта, не удивляйтесь, что вас будет трудно найти в поиске со смартфона.
Удобство для пользователей. Снова по той же статистике более 40% пользователей заявили, что уйдут на другой сайт, если у текущего нет мобильной версии. И опять же, их доля уверенно растет. Для бизнеса это значит, что вниманием покупателя завладеет тот поставщик, чей сайт удобен на любом устройстве.
Прямой контакт. Смартфон позволяет пользователю сразу сделать звонок по указанному на сайте номеру телефона (если на сайте реализована функция click-to-call). Таким образом, вы становитесь гораздо ближе к потенциальному покупателю.
Новые возможности продвижения. Сегодня широкое распространение получает мобильная реклама, но если у вас нет мобильного сайта, то ее эффективность будет катастрофически низкой. Напротив, сайты, дружественные для мобильных устройств, получают еще один мощный канал продвижения.
Конкурентное преимущество. И последнее. Проверьте, есть ли у ваших конкурентов мобильные версии сайтов. Если нет, то у вас есть отличная возможность создать мощное конкурентное преимущество и получить тех клиентов, которые покидают устаревшие сайты ваших противников.

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