Любой сайт должен выглядеть по-разному на экране монитора и на экране смартфона, из-за их разных размеров. Поэтому требуется создание мобильной версии или адаптивной вёрстки. Это диктуется не только требованиями поисковиков, но и удобством для пользователей.
Сейчас всё популярнее становится такая технология разработки, как Mobile First. У неё есть некоторые достоинства, хотя имеются и недостатки. Давайте посмотрим, что это такое и в каких случаях может использоваться.
Для чего используется Mobile First
Мобильный интернет может быть очень даже скоростным, но у него есть большой минус – нестабильность этой скорости. Поэтому и существует одно из требований для сайтов – быстрая загрузка даже при низкой скорости, например, в сетях 2G.
Проблема в том, что сайт для компьютеров зачастую имеет очень много элементов, которые долго загружаются – большие изображения, стили, скрипты, иногда ещё разные дополнительные библиотеки. Всё это загружается и для телефона. Но из-за маленького экрана некоторая часть функционала в мобильном браузере просто не используется, а часть контента скрывается. И получается, что на каждой странице загружаются лишние мегабайты.
Mobile First в веб-дизайне
Чтобы решить эту проблему, есть такой вариант, как использование мобильной версии сайта – облегчённой, которая загружается только тогда, когда пользователь заходит на сайт со смартфона. А на компьютер загружается другая версия – полная. Но здесь есть недостаток – обе эти версии самостоятельные и требуется их отдельная разработка, да и дальнейшая поддержка создаёт трудности.
Поэтому появился другой вариант – Mobile First. При этом создаётся одна версия сайта, но разработка начинается с интерфейса для мобильных устройств. Основная структура сайта получается несложной – именно она и загружается на смартфон.
В чём отличия Mobile First от адаптивности
Когда сайт верстается по адаптивной схеме, то работа начинается с больших экранов. Затем при переходе к меньшим разрешениям часть контента на страницах меняет размеры, перестраивается, или даже совсем скрывается. Поэтому на смартфоне страница выглядит проще, чем на компьютере. Но и здесь есть один недостаток – загружается она в любом случае полностью. То есть выигрыша для медленного Интернета здесь нет никакого.
При разработке сайта по технологии Mobile First работа ведётся от мобильного варианта к десктопному, с подключением дополнительного функционала по мере необходимости – других стилей, скриптов. В этом и есть главное отличие адаптивного подхода от Mobile First, ведь даже само это понятие означает «сначала мобильные».
В чём плюсы Mobile First
Облегчённая версия сайта для мобильных устройств само по себе даёт не только ускорение загрузки, но и такое побочное явление, как улучшение ранжирования. Поисковики на этот параметр обращают большое внимание и считают сайт более качественным, если он загружается быстро. Кроме того, это позволяет уменьшить процент отказов, особенно с мобильных устройств – таких посетителей очень много, около половины и даже больше от всей аудитории.
Что такое Mobile First? Плюсы и Минусы. Почему за него Топят Программисты
Есть и другие возможности, которые открывает Mobile First. В первую очередь это использование различий в технологиях самих устройств. Так как на смартфоне загружается самая лёгкая версия сайта, в неё можно включить функционал, типичный для мобильников, и использовать его. Это может быть не только сенсорное управление, но и геолокация, доступ к камере, микрофону, другие возможности. Для компьютера всё это можно исключить или заменить на что-то другое.
Когда можно использовать Mobile First
Возможности, которые даёт Mobile First, казалось бы, велики. Да и поисковики, особенно Google, постоянно продвигают и поощряют такой подход. Однако использовать его везде всё же не совсем правильно.
Во-первых, это не даёт какого-то заметного выигрыша по времени загрузки, но может усложнить разработку. Ведь придётся создавать практически две версии сайта – десктопную и мобильную, хотя они и будут слиты воедино. И чем сложнее работа, тем она идёт дольше и стоит дороже.
Во-вторых, есть и такой недостаток – при использовании Mobile First сайт загружает разные файлы в зависимости от устройства. Например, при просмотре сайта на смартфоне может подключаться один набор скриптов, а на компьютере – другой, и обычно более объёмный. А чем больше файлов, тем медленнее происходит их загрузка. Оптимизировать этот процесс путём объединения файлов в один скорее всего окажется невозможно, потому что тогда потеряется весь смысл Mobile First. На смартфон не должно загружаться всё то же самое, что и на компьютер.
С другой стороны, правильно оптимизированный адаптивный сайт может прекрасно работать на всех устройствах и показывать хорошие результаты. Затевать глобальные изменения ради экономии пары килобайт явно не стоит.
Поэтому каждый проект нужно сначала прорабатывать и потом смотреть, будет ли на нём какая-то заметная выгода от Mobile First, или можно использовать обычную адаптивную вёрстку. Вопрос этот сугубо индивидуальный, и решается по-разному.
Источник: dzen.ru
5 главных преимуществ стратегии mobile-first для бизнеса
Мобильная аудитория растет в России и в мире. Стратегия mobile-first для бизнеса может открыть больше возможностей. Подробности — в статье.
Все больше пользователей становятся мобильными. Все больше покупок совершается с мобильных устройств. И сегодня уже нельзя представить развивающуюся компанию, которая не адаптирует свои предложения и рекламу под мобильных пользователей. На основе поста в блоге Adjust рассказываем о преимуществах стратегии mobile-first. Но начнем с базы — с определения.
Что такое mobile-first?
Adjust пишет, что этот термин стал популярен после выхода книги «Mobile First» Люка Вроблевского (Luke Wroblewski) в 2009 году. Сегодня Люк занимает должность директора по продуктам в Google.
Термин mobile-first означает формирование бизнеса с учетом приоритета мобильных пользователей. Конкретнее — приоритет мобильных приложений и мобильного веба над десктопом.
Почему компании переходят к mobile-first?
Все просто — число мобильных пользователей растет.
Например, согласно статистике Mediascope в России, за февраль-ноябрь 2020 года мобильные устройства для выхода в Интернет использовали россияне всех возрастов. «Раз в месяц интернетом с мобильных устройств пользовались 86,6 млн человек (70,8% населения). А среднесуточная мобильная аудитория интернета составила 79,8 млн человек (или 65,2% населения)», — пишут Mediascope.
Источник: Mediascope
В чем разница между адаптивным дизайном и mobile-first?
Адаптивный дизайн означает, что десктопная версия сайта или лендинга будет подстраиваться под мобильные экраны. Отличие от mobile-first в том, что десктоп при таком подходе все-таки ставится на первое место.
Преимущества стратегии mobile-first
1. Увеличение охвата
Согласно последней статистике Datareportal, в мире насчитывается 5,27 миллиардов мобильных пользователей. Что в процентном соотношении больше половины населения мира — 67,1%. В России, как показывает статистика выше от Mediascope, также большинство пользователей выбирает мобильные устройства. Ориентируясь на мобайл, есть возможность охватить большую аудиторию разных возрастов, открыть новые рынки.
Источник: Datareportal
2. Построение прочных отношений с пользователями
Согласно статистике, которой делится Adjust, 51% мобильных пользователей проверяют мобильные приложения от 1 до 10 раз в день, а 25% делают это от 11 до 20 раз в день. Создавая собственное мобильное приложение, компания сможет быть постоянно «на связи» со своими клиентами.
Кроме того, это повод задуматься и о мобильных приложениях как о канале размещения рекламы. Например, мы в BYYD запускаем имиджевые рекламные кампании в мобильных приложениях, которые помогают повысить узнаваемость бренда и продукта среди большой аудитории мобильных пользователей.
3. Новые каналы для получения дохода
Применимо к мобильным приложением, перед бизнесом открываются новые возможности монетизации. Это не только потенциальное увеличение продаж, если речь идет о e-commerce приложении (потому что покупать через приложение удобнее, чем через мобильный сайт). Это еще и пути монетизации посредством рекламы в мобильных приложениях. А также встроенные покупки — подписки, которые актуальны для приложений разных категорий (например, для фитнеса — платный доступ к персональным тренировкам, плану питания и прочее).
4. Получение важных данных о своей аудитории
Через мобильные приложения можно получать подробные и персонализированные данные о поведении пользователей. Аналитика поможет скорректировать стратегию бизнеса и искать новые пути развития.
5. Обеспечение отличного UX
Работа над улучшением пользовательского и клиентского опыта — глобальная задача для бизнеса. Мобильные приложения — удобный формат для взаимодействия с брендом. Но и тут важно продумать качество пользовательского опыта. Работа в этом направлении поможет улучшить репутацию бренда и сформировать лояльную клиентскую аудиторию.
Mobile First: что это и как это работает
Как следует из самого термина, mobile-first design – это подход, при котором веб-дизайнеры сначала начинают разработку продукта для мобильных устройств. Для этого можно сделать эскиз или прототип веб-приложения, рассчитанный на небольшой экран, и постепенно переходить к более крупным размерам экрана.
Разработка дизайна для мобильных устройств имеет смысл, поскольку в устройствах с небольшим размером экрана ограничено пространство, и командам необходимо позаботиться о том, чтобы ключевые элементы веб-сайта были хорошо видны всем, кто пользуется такими экранами.
Проектирование и разработка для небольших экранов вынуждает дизайнеров удалять все, что не является обязательным для визуализации и навигации сайта.
Как появилась технология Mobile-First Design?
Ранее веб-сайты часто разрабатывались с учетом того, что доступ к ним будет осуществляться в основном с настольных компьютеров. В конце концов разработчики попытались изменить эти сайты, сократив некоторые функции для улучшения просмотра на мобильных или планшетных устройствах.
Такой подход к уменьшению масштаба веб-сайтов широко известен как Graceful Degradation или Desktop-First Approach.
Недостаток этого подхода в том, что некоторые веб-элементы плохо адаптируются к меньшим размерам экрана. Следовательно, это ухудшает визуальный вид веб-сайтов на небольших устройствах.
Чтобы решить эту проблему, разработчики предложили другой подход — Progressive Advancement или Mobile-First Design.
Подход mobile-first позволяет дизайнерам начинать процесс разработки веб-сайта сначала для небольших устройств, а затем добавлять больше функциональных возможностей для экранов большего размера.
Почему Mobile-First Design так важен?
Мобильные устройства стали неотъемлемой частью современного веб-ландшафта и будут продолжать играть важную роль и в будущем. Как уже упоминалось в начале, на долю мобильных устройств приходится примерно половина всего веб-трафика.
Следует также учитывать, что число пользователей мобильных устройств превысило число пользователей настольных компьютеров. По данным Statcounter GlobalStats, общее число “мобильных” пользователей продолжает расти, и их доля на рынке составляет 60,43% по сравнению с пользователями настольных компьютеров. Например, пользователи смартфонов проводят в своем телефоне в среднем 3 часа 15 минут, а проверяют телефон 58 раз в день.
Приведенные выше данные показывают, что пользователи по всему миру постепенно переходят с ПК на мобильные устройства. Естественно, веб-дизайнерам имеет смысл по-другому расставлять свои приоритеты и следовать правилу «mobile-first» при разработке ИТ-продуктов.
Как реализовать подход Mobile-First в дизайне продукта?
Представим, что веб-дизайнеру необходимо разработать сайт для ресторана. Поскольку необходимо следовать подходу mobile-first дизайнер должен подумать о том, что пользователь будет ожидать от сайта ресторана на мобильном устройстве.
Дизайнеры должны определить основные вещи, которые ищет пользователь, заходя на сайт ресторана с мобильного устройства. Учитывая, что пользователь находится на мобильном устройстве, можно предположить, что он обычно ищет: часы работы, точное местоположение и контактные данные (или кнопку для звонка, учитывая, что это мобильный телефон).
Когда речь идет о ПК, у веб-дизайнеров есть все необходимое пространство для того, чтобы продемонстрировать дополнительные детали. Эти детали могут включать сообщения в блоге, изображения недавно проведенных мероприятий, интерьер или контактные формы для улучшения продвижения ресторана.
Резюмируем
Глобальные тенденции в области технологий меняются с бешеной скоростью, но ключевой критерий успеха e-commerce остается неизменным: чтобы увеличить прибыль, лояльность и узнаваемость бренда, вы должны создать превосходный пользовательский опыт. Все элементы веб-сайта должны работать, быстро загружаться и помогать пользователям находить то, что им нужно.
Начиная процесс проектирования и разработки для маленького экрана, важно определить ключевые элементы, которые будут способствовать привлечению пользователей. Ориентируясь на потребности пользователей мобильных устройств, вы сможете повысить узнаваемость своего бренда в Интернете и создать аудиторию, которая будет приносить прибыль на годы вперед.
Источник: migra.ru
