Mobile first: Почему создание сайта нужно начинать с его мобильной версии

Год назад я заказал еду в офис через часы, а год до этого катался на американских горках в VR-очках. Новые технологии с каждым годом круче. Мы еще не успели понять, что нам нужно, а уже держим в руках свою мечту. И вот мы обсуждаем домашних роботов, виртуальную реальность, доступные электрокары и дронов, раздающих интернет, но почему-то забыли о банальных вещах, без которых люди не могут прожить и дня, а значит то, где кроется наш основной заработок. Смартфоны. Каждый день мы смотрим ленту в Facebook, проверяем почту, отвечаем на сообщения в Viber и Telegram. И все это делается со смартфона. При этом 95% украинских сайтов не адаптированы под мобильные устройства. Бизнес-парадокс.

Большинство компаний Украины не осознает простой истины — 45% заходов на сайты в украинском интернете осуществляется со смартфонов, и этот показатель постоянно растет. В этом показателе не учитывается использование мобильных приложений, таких как Facebook, Instagram и VK. Поэтому можно смело говорить о том, что большая часть заходов в интернет в Украине уже сейчас осуществляется со смартфона.

С развитием 3G в Украине траффик с мобильных устройств будет постоянно расти, и проблема неподготовленности украинского интернета станет еще более актуальной. 95% украинских сайтов не адаптированы под смартфоны: контент смотреть неудобно, кнопки не работают, на сайтах присутствует Flash-контент, который не воспроизводится на мобильных устройствах.

Кроме того, что вашим клиентам неудобно использовать ваш сайт, и они с большей вероятностью уйдут к конкуренту, у которого реализована адаптация сайта под мобильные устройства, вы еще и теряете посетителей сайта в органическом поиске (поиск по ключевым словам в Google и Yandex – ред.).

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

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

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

Это ­– копия вашего сайта, которая сделана для отображения на смартфоне. Для создания такого сайта необходимо нарисовать отдельный дизайн, сделать отдельную верстку сайта, отдельный программинг и т.д. Т.е., заплатить за создание сайта 2 раза. Такой подход обычно используется в сложных проектах или проектах, работающих с технологией Flash (например, музыкальные плееры). Обычно такие сайты находятся на отдельном поддомене вида «m.», например, m.example.com. (см. рис.1.)

 Рис.1. Мобильная версия сайта

 

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

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

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

Недостатки

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

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

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

Это – ваш же сайт, который изменяет структуру и расположение блоков на различных устройствах. Т.е., при сужении экрана некоторые блоки на вашем сайте уменьшаются, а некоторые меняют расположение. Эта методика подходит большинству проектов, т.к. требует небольших временных и денежных затрат и делает сайт удобнее для пользователя (см. рис. 2).

Рис. 2. Адаптивная версия сайта

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

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

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

Недостатки

• Медленная загрузка – пользователям смартфонов обычно не нужны большие картинки, сложная анимация или видеоролики, которыми изобилуют большинство сайтов украинского интернета. Поэтому, при создании классического адаптивного сайта, вес сайта будет значительным, и загружаться на 3G-интернете он будет так же долго.
• Отсутствие гибкости – все блоки, которые присутствуют в «десктопной» версии сайта, так же будут присутствовать и в адаптивной, хотя, возможно, они там и не нужны. Это может повлиять на конверсию вашего сайта, т.к. клиенту будет сложно найти то, за чем он пришел.

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

Динамический сайт

Данный подход подразумевает, что некоторые элементы сайта будут исключаться или изменяться на мобильных устройствах (см. рис. 3). Это значительно упростит навигацию на сайте и его вес. Таким образом, клиентам будет значительно удобнее использовать сайт, что повысит заработок бизнеса.

Рис. 3 Динамический сайт

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

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

Mobile First

Эта методология улучшает качество мобильных сайтов путем полного переосмысления подхода к их разработке. Если ранее дизайн сайта начинался с версии для настольных компьютеров и ноутбуков, то Mobile First говорит о том, что изначально сайт нужно разрабатывать для мобильных устройств. То есть, перевернуть все с головы на ноги (см. рис. 4).

Рис. 4. Принцип разработки дизайна Mobile First

И в этом есть логика. По прогнозам специалистов, мобильный траффик к 2020 г. в Украине вырастет на 86%. Следовательно, качество исполнения и удобство мобильного сайта будут важнее, чем версия для настольных ПК. И те компании, которые сумеют принять перемены, станут лидерами в интернете.

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

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

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

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

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

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

Виктор Локотков, CMO Genius marketing