что означает понятие mobile first
Что такое mobile first
Это когда сначала всё делают для смартфона, а потом для всего остального.
Раньше все сайты, программы и сервисы делали сначала для компьютеров и больших экранов. Потом, может быть, делали адаптивную версию для мобильных или отдельный мобильный сайт. Или не делали, а оставляли как есть — кому нужно, тот и так справится с мелким интерфейсом на экране телефона.
Теперь всё иначе: просмотров с телефона уже больше, чем с компьютера. Некоторые сайты или сервисы обслуживают 70—90% клиентов с телефона. Поэтому появилось направление в дизайне и разработке — mobile first. Это означает «сначала для мобильного», а десктопную версию сделаем потом или вообще не сделаем.
Как устроено
В подходе mobile first работа идёт так:
Может быть даже такое, что с телефона сайт посмотреть можно, а с компьютера — нет, потому что предлагают сразу установить нужное приложение.
В чём нюансы проектирования под мобилку
И можно так ещё долго рассуждать. Но уже сейчас видно, что мобилка и десктоп — два разных зверя.
Где используется
Mobile First используется везде, где можно показать товар, услугу или проект на маленьком экране без ущерба для смысла, например:
Если ваш продукт достаточно прост для того, чтобы о нём можно было прочитать со смартфона и разобраться в нём, то можно использовать mobile first.
Плюсы и минусы
Минусы возникают оттого, что вам приходится делать не один, а два продукта: для мобильного и для всего остального. А ещё нужно учесть, что на разных экранах разное разрешение, а это тоже нужно учитывать при проектировании разных интерфейсов. Кроме этого:
Почему Mobile First?
О Mobile First написано достаточно много и есть хорошие книги на эту тему. И все равно большинство разработчиков и компаний не используют его в своих проектах или не знают вообще об этом подходе.
Поэтому хочу рассказать вам о нем вкратце и с примерами, это будет полезной информацией для тех кто не слышал об этом подходе.
Я постараюсь ответить на три основных вопроса:
Что такое Mobile First?
В этом году количество пользователей, использующих мобильные устройства для доступа к сети Интернет, достигло 60%. Поэтому мобильный трафик становится более значимым и владельцы вебсайтов должны считаться с этой статистикой. Как показывает практика, пользователи мобильных телефонов и планшетов проводят меньше времени в сети и предпочитают сайты из первых строчек поисковой выдачи. В то время как пользователи ПК могут проводить больше времени в поисках информации. Поэтому ваш вебсайт должен быть хорошо оптимизирован для поисковых систем (SEO) и отвечать всем требованиям Mobile First, что бы прибывание пользователя на вашем сайте было максимально удобным и понятным через его мобильное устройство.
Поэтому одни из самых важных требований в Mobile First разработке это:
О важности этого подхода недавно писал поисковой гигант Google:
«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»
Видео о значимости Mobile First от Olivier Rabenschlag – глава Агентства Творческого Развития Google.
Плюсы Mobile First подхода
Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.
Реализация
Реализация подхода будет продемонстрирована с помощью фреймворка Moff.js (Mobile First Framework). Это JavaScript фреймворк, который заточен для Mobile First разработки.
Мы будем рассматривать подход на примере страницы с детальной информацией об автомобиле.
Определяем важную часть содержания
Обычно на такой странице много данных. И мы должны решить, что из этого важно в первую очередь для пользователя.
Подробный список данных на странице:
Далее мы сверстаем страницу в которую добавим только эту информацию.
В идеале это тот объем трафика, который может быть потрачен пользователем для получения этих данных. И мы постараемся добиться этого с минимальной разницей.
В первую очередь напишем стили для отображения страниц на мобильных устройствах. И только, после настраиваются стили под другие размеры экранов через media query.
Добавляем дополнительную информацию
Теперь мы должны добавить оставшиеся данные таким образом, что бы пользователь знал об этом и мог получить данные запросив их.
И тут на помощь приходят Data Events хелперы и возможности AMD из фреймворка Moff.js
Добавляем тумбы для главной картинки
Мы должны показать пользователю, что есть еще дополнительные картинки доступные для просмотра. Для этого нам нужно добавить ссылку под главной картинкой, которая ведет на тумбы.
При клике на ссылку происходят следующие действия:
Объявление класса модуля
Moff фреймворк имеет систему модульности с помощью, которой мы реализуем класс модуля vehicle-gallery.
Модули в Moff это независимые элементы приложения, которые имею собственную бизнес логику и могут иметь зависимости от внешних библиотек.
Во время инициализации класса мы запускаем slick-carousel для создания карусели из наших тумб и устанавливаем обработчик для их просмотра.
Регистрация модуля
Регистрация модуля происходит с помощью объекта, который содержит в себе уникальный идентификатор, может содержать зависимости модуля и основной файл класса модуля.
В нашем примере мы указали в зависимостях jQuery и его плагин slick-carousel, который создает из тумб карусель. Зависимости грузятся синхронно, в той очередности, в которой вы указываете. И после зависимостей грузится класс модуля vehicle-gallery.js. Далее, после загрузки файла модуля и его зависимостей мы инициализируем модуль в с помощью события afterInclude.
Статистика результатов.
Подведем итоги результатов создания Mobile First страницы.
Нижний график показывает, что не оптимизированная страница на 73% тяжелее, чем страница адаптированная под требования Mobile First. Таким образом мы можем сэкономить 186.94 KB, которые возможно и не понадобятся пользователю при просмотре вашей страницы.
Заключение
Таким образом мы избавляемся от загрузки большого количества второстепенных ресурсов, но которые будут доступны по требованию пользователя.
В этой статье рассмотрен только один пример загрузки дополнительной информации. Полный пример можно будет посмотреть на сайте фреймворка.
Руководство по Mobile First: как адаптировать SEO-процессы. Часть 1
Разбираемся с Mobile First и разными конфигурациями мобильных сайтов.
Один из заметных трендов 2019 года — индексация Mobile First в Google. Акцент на «мобильность» сайтов становится все сильнее, и в наступающем году состояние мобильной версии сайта станет важным фактором для продвижения в Гугле. Мы уже писали о том, какие подводные камни могут встретиться при внутренней перелинковке мобильных версий сайта, а теперь перевели большое руководство о Mobile First в целом.
В этом руководстве мы разберемся, на какие SEO-параметры все еще стоит обращать внимание, а также поговорим об адаптации рабочих процессов к Mobile First. Техническое SEO, внутренняя оптимизация, создание контента и его распространение по-прежнему актуальны, однако теперь нам следует анализировать эти факторы с помощью экрана смартфона, а не десктопа.
Прим. ред. Реальность давно уже становится «мобильной»: вот открытая статистика Liveinternet — последние три месяца 2018 года число посетителей с мобильных девайсов составляло больше 70% от общего в Рунете.
Система PromoPult — рекламный комплекс для продвижения бизнеса в интернете. Полная автоматизация, готовые чек-листы, точные настройки. Создана для тех, кто хочет высвободить время на действительно серьезную работу.
До марта 2018 года ранжирование Google основывалось на сканировании и индексации десктопного контента. Googlebot для десктопов сканировал страницы сайта и передавал URL системе индексирования Caffeine. Страницы анализировались по множеству критериев, начиная от дизайна и контента и заканчивая настройками каноникализации и внешними ссылками.
Теперь Google все активнее использует Googlebot (Smartphone), а система Caffeine ориентируется прежде всего на мобильные версии. Принципы сканирования и индексации в основном остаются теми же, но то, как ваш сайт выглядит и работает на мобильных девайсах, будет иметь значительно больший вес, чем десктопная версия.
Ранжирование вашего сайта будет зависеть (или уже зависит) исключительно от мобильного, а не десктопного SEO.
Десктопная индексация все еще имеет некоторый вес, однако в конечном итоге решающим станет мобайл. О переходе на мобильную индексацию Google сообщает администраторам сайта через Search Console:
Введение Mobile First — логичный шаг Google в череде действий по развитию мобайл-френдли интернета и прямой ответ на рост использования мобильных девайсов.
В 2016 году Google объявил приход «Мобайлгеддона» (Mobilegeddon). Этот довольно слабый апдейт со странным названием можно считать предшественником индексации Mobile First. Тогда Google анонсировал изменение алгоритма, при котором предпочтение отдавалось мобайл-френдли сайтам. В реальности мало что изменилось, по крайней мере, не сразу. Реальные изменения стали заметны лишь спустя несколько месяцев. А сейчас этот процесс завершается — переходом к Mobile First.
Итак, как должны измениться SEO-процессы, когда индексация Mobile First развернулась в полную силу? Вот несколько рекомендаций для начала.
После введения Mobile First Google выпустил руководство для веб-мастеров по улучшению мобильной индексации. Советую всем SEO-специалистам и интернет-маркетологам тщательно изучить этот гайд, прежде чем двигаться дальше.
Адаптивные сайты используют один и тот же HTML-код независимо от устройства. Макет и контент масштабируются, чтобы адаптироваться под размер экрана.
Такая конфигурация рекомендована Google, поэтому она должна быть в приоритете при выборе типа мобильного дизайна.
Поскольку вы используете один и тот же HTML-код, контент не будет дублироваться. Кроме того, это облегчает администрирование контента и сайта в целом, так как не придется иметь дело с каноникализацией. По сути, мобильная версия вашего сайта ничем не будет отличаться от десктопной.
При динамическом показе сайт использует разные HTML и СSS в зависимости от устройства, с которого вы заходите. Как и для адаптивных сайтов, URL не меняется, однако мобильный контент «спрятан», когда пользователи и юзер-агенты заходят на сайт с десктопа, и наоборот.
Чтобы указать Google, какой юзер-агент он должен применить (для десктопа или для смартфонов), следует использовать HTTP-заголовок Vary.
Несмотря на то, что под одним URL будет находиться один и тот же контент, с марта 2018 года Google отдает все больше предпочтения той его части, которая используется для мобильной конфигурации. Больше информации о сайтах с динамическом показом можно найти в гайде Гугла, а вот рекомендации по настройкам для Mobile First.
В этом случае для отображения сайта на мобильных устройствах используется другой URL, обычно с поддоменом «m.».
Использование разных URL (как и динамический показ) становится все более устаревшим методом, поскольку он значительно усложняет администрирование сайта. Возможно, вам придется работать и с такой конфигурацией — это может быть обусловлено особенностями ресурса.
Например, Facebook до сих пор адаптируется под мобильные девайсы именно так. Можно предположить, что переход к другой, более современной конфигурации связан с солидными затратами, поэтому отставание компенсируется за счет большого набора специализированных мобильных приложений.
В будущем Google будет анализировать в первую очередь мобильные URL. В любом случае интересно, как эта конфигурация будет работать в мире SEO, ориентированного на мобильные девайсы, особенно учитывая быстрые перемены, связанные с каноникализацией и PageRank.
Канонические AMP-страницы (Accelerated Mobile Pages) — инициатива, запущенная Google в феврале 2016 года.
AMP помогают улучшить мобильную экосистему как для владельцев сайтов, так и для пользователей за счет заметно возросшей скорости загрузки страниц. С помощью библиотек и фреймворков AMP вебмастера получают быстрое оптимизированное решение для отображения контента на мобильных девайсах.
Этой возможностью сразу воспользовались новостные агентства и другие СМИ, постепенно AMP появляются и в е-коммерсе.
Google отмечает важность скорости загрузки страниц среди потребительских трендов 2019 года.
Настройка передачи контента через AMP аналогична использованию разных URL. Как правило, мобильная версия доступна по URL в подкаталоге /amp/. Соответственно, рекомендации по настройке те же, что и для мобильных сайтов под другим URL.
Если вы используете AMP HTML в качестве мобильной конфигурации сайта, Google выберет эту версию при индексации Mobile First. Однако если вы сочетаете AMP и не-AMP, Google предпочтет мобильную версию не-АМР.
Здесь могут возникнуть те же проблемы, что и с разными URL. Как Mobile First влияет на сайты с AMP, особенно в тех случаях, когда доступна не-AMP альтернатива? В любом случае, ключевая задача AMP — отображение на мобильных устройствах облегченной версии контента, при этом часть внутренних ссылок и других элементов оптимизации могут пропасть.
Это сайты, которые предназначены для просмотра только на десктопе и не имеют мобильной версии.
По сути, применение индексации Mobile First к сайтам без мобильной версии можно считать не совсем корректным, потому что их конфигурация изначально не предполагает отображение на смартфонах. Дальнейшее использование такого формата, несомненно, будет иметь неприятные последствия и ухудшит видимость сайта в органической выдаче (если это уже не случилось). То, что вы не предоставляете пользователям возможности удобно пользоваться вашим сайтом с мобильных устройств, прямо противоречит общим рекомендациям для вебмастеров, не только для индексации Mobile First.
Google по-прежнему принимает такую конфигурацию для индексации Mobile First, но это явно не лучший вариант. Если к 2018 году ваш сайт все еще не мобайл-френдли, вам следует всерьез задуматься о запуске нового сайта, отвечающего требованиям под мобайл.
Если вы не уверены, является ли ваш сайт мобайл-френдли, рекомендуем использовать инструмент проверки оптимизации для мобильных от Google. Для более глубокого аудита адаптированности под мобильные подойдет расширение для Chrome Lighthouse.
В следующей части руководства: как изучить ваш сайт глазами Гуглобота для мобильных (с десктопа).
5 главных преимуществ стратегии 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. 
В чем разница между адаптивным дизайном и mobile-first?
Адаптивный дизайн означает, что десктопная версия сайта или лендинга будет подстраиваться под мобильные экраны. Отличие от mobile-first в том, что десктоп при таком подходе все-таки ставится на первое место.
Преимущества стратегии mobile-first
1. Увеличение охвата
Согласно последней статистике Datareportal, в мире насчитывается 5,27 миллиардов мобильных пользователей. Что в процентном соотношении больше половины населения мира — 67,1%. В России, как показывает статистика выше от Mediascope, также большинство пользователей выбирает мобильные устройства. Ориентируясь на мобайл, есть возможность охватить большую аудиторию разных возрастов, открыть новые рынки. 
2. Построение прочных отношений с пользователями
Согласно статистике, которой делится Adjust, 51% мобильных пользователей проверяют мобильные приложения от 1 до 10 раз в день, а 25% делают это от 11 до 20 раз в день. Создавая собственное мобильное приложение, компания сможет быть постоянно «на связи» со своими клиентами.
Кроме того, это повод задуматься и о мобильных приложениях как о канале размещения рекламы. Например, мы в BYYD запускаем имиджевые рекламные кампании в мобильных приложениях, которые помогают повысить узнаваемость бренда и продукта среди большой аудитории мобильных пользователей.
3. Новые каналы для получения дохода
Применимо к мобильным приложением, перед бизнесом открываются новые возможности монетизации. Это не только потенциальное увеличение продаж, если речь идет о e-commerce приложении (потому что покупать через приложение удобнее, чем через мобильный сайт). Это еще и пути монетизации посредством рекламы в мобильных приложениях. А также встроенные покупки — подписки, которые актуальны для приложений разных категорий (например, для фитнеса — платный доступ к персональным тренировкам, плану питания и прочее).
4. Получение важных данных о своей аудитории
Через мобильные приложения можно получать подробные и персонализированные данные о поведении пользователей. Аналитика поможет скорректировать стратегию бизнеса и искать новые пути развития.
5. Обеспечение отличного UX
Работа над улучшением пользовательского и клиентского опыта — глобальная задача для бизнеса. Мобильные приложения — удобный формат для взаимодействия с брендом. Но и тут важно продумать качество пользовательского опыта. Работа в этом направлении поможет улучшить репутацию бренда и сформировать лояльную клиентскую аудиторию.
Мы в BYYD запускаем рекламу в мобильных приложениях, направленную на повышение охвата и узнаваемость бренда. Для этого не нужно создавать собственное мобильное приложение. Вы можете привлечь мобильную аудиторию уже сейчас! Мы предлагаем настройку рекламной кампании, оптимизацию, разработку рекламных креативов и посадочных страниц под РК.
Для чего нужен mobile-first? Отвечают лидеры мобайла
О mobile-first сегодня не говорит только ленивый. На сегодняшний день, когда мобильные устройства по уровню популярности находятся практически на одной ступени с зубной щеткой, не обращать внимания на такой подход — довольно опасно для будущего компаний. Что же нужно знать об этом термине маркетологам, и что полезного нам могут рассказать те, кто уже активно задействует такой метод в своей практике? Об этом — в сегодняшней статье.
Писатель Брайсон Менье побеседовал с представителями трех крупных брендов, которые являются лидерами в сфере mobile-first. Что интересного он вынес?
Перед тем, как Google провел мобайл-апдейт в апреле прошлого года, 40% всех существующих сайтов не были адаптированы под мобильные устройства. На сегодняшний день все еще довольно сложно найти бренды, которые не только будут активно развивать мобильную стратегию, но и придерживаться направления “mobile-first”, когда аудитория осуществляет коммуникацию с компанией, в первую очередь, через мобильные устройства. Такие компании не только адаптируют объем контента под маленькие экраны — они создают уникальный контент и подключают дополнительные возможности для мобильных пользователей на основе их конкретных потребностей.
В данной статье мы рассмотрим такие мировые бренды как Hotwire, TurboTax и Walgreens, чтобы понять, как и почему они решили выйти за пределы мобильных устройств в практику так называемой “мульти-экранности”. А начнем с того, чем же они отличились от конкурентов.
Данные компании одинаково хорошо и качественно могут быть представлены на всех мобильных устройствах. Преимущество состоит в том, что пользователи могут использовать полный функционал мобильных версий брендов независимо от выбранного устройства. Walgreens и TurboTax имеют адаптивные сайты с элементами на стороне сервера, а также для мобильных устройств сайт Hotwire использует мобильные URL-адреса; но все они позволяют пользователям получить доступ к полноценному функционалу через несколько экранов.
Они выходят за рамки контента и используют преимущества мобильных устройств — например, камеру и GPS-навигатор, которые предоставляют пользователям более расширенные возможности, чем на обычной версии сайта. У Walgreens, например, есть приложение, которое знает, когда Вы находитесь в одном из более 8100 магазинов по всей территории США и предлагает персонализированные акции для тех, кто на данный момент находится в магазине, — поощрительные программы, специальные предложения и купоны. Приложение TurboTax позволяет специалистам по оформлению налоговой документации и заполнению налоговых деклараций сканировать их налоговую форму W2 (вычет из зарплаты работника) и импортировать эти данные в программу, а также дает им прямой доступ к специалистам через видеовызов.
Они интегрируются с носимыми устройствами, чтобы демонстрирует ценность пользователей, которые активно перешли на mobile-first. Приложение Hotwire интегрируется с Apple Watch для отправки напоминаний в течение Вашей поездки и даже “говорит” пользователям стоимость ближайших цен на газ, когда он возвращает автомобиль в прокат.
В условиях нестабильного экономического положения достаточно сложно убедить компании в необходимости выделения бюджета на развитие мобильного направления, не говоря уже о mobile-first. Что же говорят представители брендов-лидеров этой сферы?
Кортни Фергюсон, старший менеджер мобильного продукта для TurboTax:
“Сейчас, во времена взрывной популярности мобильных устройств, не применять в компании стратегию mobile-first — разрушительно. Мир меняется с молниеносной скоростью, и компании должны развиваться в ногу со временем, чтобы радовать клиентов и оставаться всегда актуальными. Два года назад мы решили перейти на mobile-first на полную мощность — начиная проектированием и заканчивая обслуживанием клиентов. Подобно большинству брендов, поведение наших клиентов коренным образом меняется; они более мобильны и более ограниченны во времени. Мы должны быть там, где они, и сформулировать убедительную выгоду для них, быстро и зачастую на формат маленького экрана”.
Алекс Отрезов, старший директор платных поисковых операций в Hotwire отметил, что для его компании, имеющей большой опыт работы в приложении, осуществлять стратегию mobile-first довольно просто. Пользователь авторизован в приложении, соответственно, у компании есть достаточное количество данных, с которыми можно работать. “Поскольку пользователи мобильных приложений достаточно продвинуты в мобайле, было очень важно адаптировать мобильную платформу для нужд во время путешествий”, — говорит Алекс.
Бенджамин Вейсс, мобильный менеджер по продукции Walgreens отмечает, что их компания делает упор как на веб, так и на мобайл, но важный момент заключается в том, что пользователям необходимо предоставлять уникальные возможности в пределах каждого отдельно взятого канала.
Как работают лидеры mobile-first?
В Hotwire основной стратегий избран фидбэк с аудиторией. Они прислушиваются к пользователям, исследуют особенности их путешествий и даже проводят фокус-группы, в которых компания наблюдает за принципами взаимодействия аудитории с продуктом. “Мы анализируем тенденции и потребности клиентов во время путешествий и стараемся решать их проблемы, предлагая новые возможности. Мы продумываем ситуации, которые могут возникнуть у потребителей во время их перемещений и находим пути выхода”, — говорит Алекс.
Вейс из Walgreens рассматривает мобайл как расширение общей стратегии компании и повышения удобства пользования приложениями для клиентов. Учитывая интересы потребителей и попутно решая возникающие у них задачи, бренд улучшает коммуникацию с аудиторией и делает ее максимально эффективной. Помогая решать жизненные вопросы, маркетинговая коммуникация повышает лояльность клиентов к бренду.
“Для нас мобайл — это предоставление пользователям новых путей по налаживанию “общения” с Walgreens (как печать фотографий и открыток, доступ к купонам”, — говорит Вейс. “Мы тратим много времени на тестирование новых продуктов, прежде чем они попадают в руки к потребителям”, — отмечает мобильный менеджер Walgreens.
“Болевые точки” клиентов и их устранение посредством грамотной маркетинговой коммуникации бренда — вот сфера, которую необходимо развивать компании, решившей перейти в mobile-first.
Почему есть смысл переходить на mobile-first-стратегию?
Mobile-first может предоставлять пользователям более расширенный контент и функционал, чем в веб-версиях. Такой подход повышает лояльность клиентов к бренду и частоту их обращений к фирменным приложениям.
“Глубина” коммуникации брендов с пользователями увеличивается, а это значит, что они выступают уже не только в качестве представителей определенной компании, а как платформы, позволяющие решать насущные задачи. Такое “мышление” компаний наращивает органический трафик, опираясь на поведенческие особенности клиентов и их нужды, что гораздо быстрее принесет положительные результаты маркетинговой стратегии.