1. Что такое мобильная версия сайта?
2. В чем отличие классического мобильного дизайна (mobile version), адаптивного (adaptive) и отзывчивого дизайна (responsive)
3. Как создать мобильную (отзывчивую, аддаптивную) версию сайта?
4. Зачем Google ввел учет наличия мобильной версии сайта и что будет с сайтами проигнорировавшими адаптацию?
5. Какие существуют варианты создания отзывчивого дизайна для вашего сайта?
1. Что такое мобильная версия сайта?
На самом деле в терминах, которые появились в рунете в последние 2-3 года, относительно вариаций отображения информации на различных устройствах, все не так просто как кажется на первый взгляд.
Путаница возникает по мере проникновения технологий в массы, и по степени понимания техническими специалистами того, как с этими технологиями работать.
На сегодня можно определить три основных подхода к так называемой мобильной версии сайта:
- Mobile verision (мобильная версия, мобильное приложение)
- Responsive design (отзывчивый дизайн)
- Addaptive design (адаптивный дизайн)
2. В чем отличие классического дизайна, адаптивного (adaptive) и отзывчивого дизайна (responsive)
Mobile version and Mobile application
Наиболее узким понятием является первое. Это мобильная версия сайта или мобильное приложение сайта. Задача адаптации под устройство решается созданием отдельного мобильного приложения которое является отдельной программой, которая пишется под Android или iOS и устанавливается затем из Google Play или Apple AppStore
Почему это понятие является узким? Потому что такая ситуация с адаптацией вашего веб-сайта подходит далеко не всем сайтам. Как правило, по этому пути идут банки, крупные стартапы, (ebay.com, molotok.ru, aviasales.ru и так далее) то есть те организации, для которых сайт является сервисом с достаточно большим количеством трафика. Такие компании не могут позволить себе упустить долю рынка приходящуюся на мобильные устройства и они просто обязаны быть в качестве отдельного мобильного приложения на iPhone или iPad
К счастью далеко не всем сайтам необходимо идти этим путем.
Responsive web-design
Впервые понятие responsive web-design ввел Итан Маркотт примерно в 2010 году. Чуть позже он написал книгу «Responsive Web Design», посвященную данной технологии. В каком-то смысле книга Итан Маркотта на сегодняшний день является библией отзывчивого веб-дизайна и руководством по всему тому что происходит вокруг адаптации дизайна (или как принято говорить в рунете верстки) современных веб сайтов. Я прочитал эту книгу в прошлом году, и конечно же рекомендую ее всем техническим специалистам, которым завтра поставят задачу сделать так, чтобы сайт прошел мобильный тест Google.
Adaptive Web Design
Чуть позже понятие отзывчивого веб-дизайна (responsive web-design) было расширено до понятия аддаптивного веб-дизайна (addaptive web-design). Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», которая рассматривает метод «постепенного улучшения» как важную составляющую адаптивного дизайна. В результате среди технических специалистов стали понимать адаптивный дизайн как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.
3. Как создать мобильную (отзывчивую, аддаптивную) версию сайта?
Свои мысли и часть опыта который я уже успел приобрести, по созданию отзывчивого дизайна я высказал на своем личном блоге в этой статье
Во-первых, проектирование макетов и верстка начинается от меньшего к большему. Этот принцип называется Mobile First, то есть проектируя макеты, сначала проектируют их для устройств с меньшими разрешениями, а затем с большими. Сегодня все те, кто будут аддаптировать свои старые версии сайтов к мобильным устройствам будут делать все наоборот. Таким образом они будут убирать лишнее, а при исполнении принципа Mobile First нужно наоборот добавлять нужное.
Во-вторых, макет строится на основе сетки и является гибким. То есть в сравнении с резиновой, табличной версткой тут уже естественно нет никаких таблиц, а есть лишь grid-based layout или fluid grid, которая совместно с использованием % и em для значений css свойств font-size, line-height, height и width, а также с использованием media-queries для определения разрешений устройств, может содержать различное количество колонок. За счет этого и достигается динамика. То есть вы как бы говорите браузеру с какого устройства и с каким разрешением зашли на сайт, и подкладываете в зависимости от разрешения определенное количество колонок, или передаете определенное значение float: left или float: right или clear: both в зависимости от ситуации, а также масштабируете размеры шрифта заголовков и абзацев текста.
В-третьих, изображения перестают быть статическими, и им задается динамическое значение ширины в пределах блока через css. То есть используется технология гибких изображений, flexible images, вы достигаете масштабирование изображений на 100% в пределах контейнера.
В четвертых, динамика шаблонов в зависимости от устройств достигается благодаря появившемуся в CSS 3.0 свойству media-queries на основании которого вычисляется минимально или максимальное разрешение экрана или разрешение устройства, и отдается в это устройство особый файл стилей.
4. Зачем Google ввел учет наличия мобильной версии сайта и что будет с сайтами проигнорировавшими адаптацию?
20 апреля 2015 года Google выкатил алгоритм ранжирования (mobile friendly) в котором начал учитывать наличие мобильной версии сайта в ранжировании. На мой взгляд учет наличия мобильной версии сайта в ранжировании, то есть влияние этого фактора на релевантность выдачи по запросу, как сейчас модно говорить, контрпродуктивно, но это реальность. Не все мои сайты на сегодня проходят тест Google на мобильную версию (этот проходит). В планах до конца следующего месяца выкатить мобильные версии на все свои сайты.
Зачем Google ввел этот алгоритм остается только догадываться. Наверное, как говорится, будущее уже наступило, а Google просто как бы заявил об этом. Теперь все те кто сомневался делать или не делать мобильную версию, будут ее делать. Google ускорил процесс перехода классического дизайна в его адаптивную версию.
5. Какие существуют варианты создания отзывчивого дизайна для вашего сайта?
Самый простой вариант решения предлагает блогер Devaka суть его решения сводится к запрету на индексацию роботу поисковой системы файлов CSS и робот начинает видеть сайт без стилей. Чаще всего этого достаточно для того чтобы пройти те условия, которые тест Google ставит для веб-мастера. Но это так называемый mobile cheat то есть хитрость, ловкость и обман. Я более чем уверен, что веб-мастера применившие этот cheat будут со временем просто заминусованы Google
Так какие же на самом деле существуют варианты? Вариант тут только один. Это сделать мобильную версию сайта.
Дочитали до этого предложения? Позвоните по телефону , спросите сколько стоит. Оценим и сделаем.
