Что такое Mobile First и в чём отличие от адаптивной разработки сайта
Любой сайт должен выглядеть по-разному на экране монитора и на экране смартфона, из-за их разных размеров. Поэтому требуется создание мобильной версии или адаптивной вёрстки. Это диктуется не только требованиями поисковиков, но и удобством для пользователей.
Сейчас всё популярнее становится такая технология разработки, как Mobile First. У неё есть некоторые достоинства, хотя имеются и недостатки. Давайте посмотрим, что это такое и в каких случаях может использоваться.
Для чего используется Mobile First
Мобильный интернет может быть очень даже скоростным, но у него есть большой минус – нестабильность этой скорости. Поэтому и существует одно из требований для сайтов – быстрая загрузка даже при низкой скорости, например, в сетях 2G.
Проблема в том, что сайт для компьютеров зачастую имеет очень много элементов, которые долго загружаются – большие изображения, стили, скрипты, иногда ещё разные дополнительные библиотеки. Всё это загружается и для телефона. Но из-за маленького экрана некоторая часть функционала в мобильном браузере просто не используется, а часть контента скрывается. И получается, что на каждой странице загружаются лишние мегабайты.
Чтобы решить эту проблему, есть такой вариант, как использование мобильной версии сайта – облегчённой, которая загружается только тогда, когда пользователь заходит на сайт со смартфона. А на компьютер загружается другая версия – полная. Но здесь есть недостаток – обе эти версии самостоятельные и требуется их отдельная разработка, да и дальнейшая поддержка создаёт трудности.
Поэтому появился другой вариант – Mobile First. При этом создаётся одна версия сайта, но разработка начинается с интерфейса для мобильных устройств. Основная структура сайта получается несложной – именно она и загружается на смартфон.
В чём отличия Mobile First от адаптивности
Когда сайт верстается по адаптивной схеме, то работа начинается с больших экранов. Затем при переходе к меньшим разрешениям часть контента на страницах меняет размеры, перестраивается, или даже совсем скрывается. Поэтому на смартфоне страница выглядит проще, чем на компьютере. Но и здесь есть один недостаток – загружается она в любом случае полностью. То есть выигрыша для медленного Интернета здесь нет никакого.
При разработке сайта по технологии Mobile First работа ведётся от мобильного варианта к десктопному, с подключением дополнительного функционала по мере необходимости – других стилей, скриптов. В этом и есть главное отличие адаптивного подхода от Mobile First, ведь даже само это понятие означает «сначала мобильные».
В чём плюсы Mobile First
Облегчённая версия сайта для мобильных устройств само по себе даёт не только ускорение загрузки, но и такое побочное явление, как улучшение ранжирования. Поисковики на этот параметр обращают большое внимание и считают сайт более качественным, если он загружается быстро. Кроме того, это позволяет уменьшить процент отказов, особенно с мобильных устройств – таких посетителей очень много, около половины и даже больше от всей аудитории.
Есть и другие возможности, которые открывает Mobile First. В первую очередь это использование различий в технологиях самих устройств. Так как на смартфоне загружается самая лёгкая версия сайта, в неё можно включить функционал, типичный для мобильников, и использовать его. Это может быть не только сенсорное управление, но и геолокация, доступ к камере, микрофону, другие возможности. Для компьютера всё это можно исключить или заменить на что-то другое.
Когда можно использовать Mobile First
Возможности, которые даёт Mobile First, казалось бы, велики. Да и поисковики, особенно Google, постоянно продвигают и поощряют такой подход. Однако использовать его везде всё же не совсем правильно.
Во-первых, это не даёт какого-то заметного выигрыша по времени загрузки, но может усложнить разработку. Ведь придётся создавать практически две версии сайта – десктопную и мобильную, хотя они и будут слиты воедино. И чем сложнее работа, тем она идёт дольше и стоит дороже.
Во-вторых, есть и такой недостаток – при использовании Mobile First сайт загружает разные файлы в зависимости от устройства. Например, при просмотре сайта на смартфоне может подключаться один набор скриптов, а на компьютере – другой, и обычно более объёмный. А чем больше файлов, тем медленнее происходит их загрузка. Оптимизировать этот процесс путём объединения файлов в один скорее всего окажется невозможно, потому что тогда потеряется весь смысл Mobile First. На смартфон не должно загружаться всё то же самое, что и на компьютер.
С другой стороны, правильно оптимизированный адаптивный сайт может прекрасно работать на всех устройствах и показывать хорошие результаты. Затевать глобальные изменения ради экономии пары килобайт явно не стоит.
Поэтому каждый проект нужно сначала прорабатывать и потом смотреть, будет ли на нём какая-то заметная выгода от Mobile First, или можно использовать обычную адаптивную вёрстку. Вопрос этот сугубо индивидуальный, и решается по-разному.