Многие пользователи смартфонов и планшетов помнят первые мобильные телефоны: каждый раз, когда клиент выходил из браузера, приходилось проверять баланс. На первых порах мобильный Интернет был неудобным в плане использования, а также ограниченным в функционале и очень дорогим. Сейчас больше 50 % трафика относятся к сеансам, организованным на планшетах и смартфонах. С помощью этих устройств совершаются разнообразные покупки, в 2021 году доля мобильной коммерции составила порядка 70-73 % всех розничных продаж в e-commerce.
Соответствующая ситуация требует проявления особого внимания к мобильным версиям сайтов. Веб-сервисы должны производить на посетителей максимально положительное впечатление. Оптимизация сайтов для разнообразных устройств – это один из обязательных пунктов в технических заданиях разработчиков. Все чаще при соблюдении этого условия можно услышать о концепции Mobile First.
Далее будет рассказано о соответствующем подходе более подробно. Предстоит разобраться, что собой представляет Mobile First, а также чем этот подход отличается от обычной разработки веб-сайтов. Необходимо также разобраться в плюсах и минусах концепции и ее основных принципах. Эта информация поможет понять, в каком случае лучше применять соответствующую методику разработки, а также как правильно это сделать.
Определение
Стратегия «Мобайл Ферст» – это принцип разработки сайтов. Он подразумевает, что сначала создается версия для мобильных устройств, а затем уже разработчики берутся за подготовку десктопных интерпретаций веб-порталов.
Google указывает на то, что такая концепция предполагает проектирование интерфейса онлайн-сервиса, ориентированного на гаджеты. Философия подхода заключается в том, что сначала формируется прототип дизайна для планшетов и смартфонов (маленьких экранов) и только после этого – для больших. Это ключевое отличие от классического подхода Desktop First. Он используется программистами много лет.
Актуальность
Google указывает на то, что рассматриваемая верстка является актуальной. В 2022 году больше 60 % пользователей Интернета выходили в него через мобильные устройства. При поиске данных предпочтение отдавалось первым ссылкам в поисковых системах. А оставались пользователи только на красивых и удобных сайтах.
Google отмечает, что ПК-пользователи могут открыть сразу несколько окон в браузере и комфортно работать с ними. В случае с владельцами мобильных устройств ситуация осложняется. Для них на первом месте – это оперативное получение данных, причем в удобном формате. Именно поэтому подход First Mobile является актуальным: страница должна оказаться в ТОПе поисковых систем (Google и других), поддерживать мобильный дизайн и верстку, а также обладать быстрой загрузкой. Тенденция роста популярности изучаемой концепции сохранится в будущем. Связано это с тем, что программистам необходимо, чтобы веб-сайт:
- мог показать самые важные данные в первую очередь (что значительно экономит пользовательское время);
- поддерживал хорошую оптимизацию под пользовательские запросы (положительно сказывается на вывод страницы в ТОП Google и других поисковых систем);
- смог быстро загружать имеющиеся ресурсы – баннеры, изображения, видео (экономия трафика и времени).
Сайты с применением First Mobile – это удобные, быстрые и эффективные сервисы. Google указывает на то, что именно они все чаще появляются на первых страницах при поиске информации в Интернете.
Области применения
Что означает First Mobile, понятно. Теперь этот подход к разработке можно рассмотреть более детально. Такая верстка имеет значение для развития бизнеса, ведь пользователи все чаще посещают веб-страницы именно со смартфонов и планшетов.
Google указывает на то, что Ферст Мобайл применяется в областях, где необходимо показать продукт или услугу, а также завлечь потенциального покупателя. Примерами могут послужить:
- интернет-магазин;
- социальные сети;
- агрегаторы такси;
- службы доставки;
- сервисы по предоставлению дистанционных услуг.
Чтобы не запутаться, Google рекомендует запомнить простое правило: если продукт прост для того, чтобы о нем можно было узнать все, пользуясь смартфоном или планшетом, подход First Mobile – это то, о чем требуется подумать в первую очередь.
Отличие от адаптивного и отзывчивого дизайна
Google подчеркивает, что на мобильных устройствах можно комфортно работать с помощью адаптивного, а также отзывчивого дизайнов. Для того, чтобы не запутаться, каждый термин требует определения. Они помогут понять, в чем заключается разница по отношению к Mobile First.
Адаптивный дизайн
При использовании адаптивного дизайна создаются различные макеты для разных устройств. Шаблоны поддерживают структуру размещения компонентов в зависимости от ширины экрана. Обычно макеты создаются для стандартных величин. Примеры:
- 320 px;
- 480 px;
- 960 px;
- 1600 px;
- 768 px;
- 1200 px.
Google подчеркивает, что скрипты помогут определить размер пользовательского экрана, после чего произойдет загрузка соответствующего шаблона на основе этих контрольных точек.
Адаптивные макеты учитывают особенности разных устройств. Пример – для больших экранов десктопного типа поддерживается только горизонтальная ориентация и значительная область просмотра, а для смартфонов и планшетов предусматривается сенсорное управление и возможность поворота устройства для просмотра.
Отзывчивый дизайн
Рассматривая отличие концепции First Mobile от других подходов к мобильной разработке, необходимо обратить внимание на отзывчивый дизайн. В данном случае создается один гибкий макет. Он дает возможность веб-сайту подстраиваться под любую ширину экрана. Автоматическое изменение размеров контента поддерживается на всех устройствах за счет подвижной сетки, а также медиазапросов и гибких изображений.
Отзывчивый дизайн, согласно Google, хорош тем, что не нужно разрабатывать несколько версий веб-страницы и выбирать наиболее оптимальный вариант. У такой концепции есть недостаток – придется тщательно проверять, правильно ли отображаются компоненты проекта на экранах различных размеров.
Преимущества и недостатки
Изучая верстку по типу First Mobile, необходимо учитывать преимущества и недостатки соответствующего метода программирования. К преимуществам концепции Google относит:
- Удобство для пользователя. Путь посетителя площадки сразу продумывается с учетом всех ограничений, которые накладывает небольшой дисплей мобильного устройства. Крупные кнопки и шрифты, минимум визуального шума и неуместного масштабирование.
- Повышение конверсии. Этот пункт особо значим для бизнеса. Чем быстрее пользователь найдет необходимый ему продукт/данные, тем выше шансы на то, что он совершит целевое действие. Примеры: оформление покупки или подписка на рассылку.
- Скорость загрузки. Подход Mobile First исключает долгую загрузку – контент изначально подготовлен и размещен так, чтобы его первая отрисовка осуществлялась за доли секунд. Адаптивная версия сайта может долгое время подыскивать подходящий шаблон, а отзывчивая – подгонять размер под ширину экрана. Громоздкого кода у подхода First Mobile нет, дополнительных средств адаптации – тоже, фокусировка здесь поддерживается только для важного контента.
- Приоритет в ранжировании. Google запустил в 2016 году алгоритм Ферст Мобайл Index. Он ставит в приоритет сайты, оптимизированные под качественную работу на мобильных устройствах.
Недостатки у рассматриваемой концепции тоже есть. К минусам Mobile First Google относит:
- Стоимость и продолжительность разработки. В процессе создания проекта придется подготовить множество макетов для стационарных компьютеров, смартфонов и планшетов с разными размерами экранов. Для этого необходимо нанять множество специалистов. А это – немалые расходы.
- Визуальные ограничения. Минимализм сегодня в моде, но никто не знает о будущих тенденциях. Некоторым пользователям уже не по вкусу «урезанные» мобильные версии сайтов и сервисов.
Сайты с First Mobile – это простые, но функциональные и быстрые сервисы. Они могут показаться примитивными, зато эффективность работы веб-портала положительно скажется на его посещаемости и популярности.
Особенности
Google выделяет следующие особенности First Mobile для создания сайтов:
- Акцент на содержании, а не на визуальной составляющей. Главное – чтобы пользователь быстро нашел то, что ему нужно. Это положительно сказывается на работе бизнеса.
- Персонализированные товарные рекомендации. Еще одна хитрость, которую использует бизнес. На основе ранее просмотренных товаров мобильные версии порталов предлагают похожие продукты и отображают их в удобном компактном формате.
- Наличие визуальной иерархии контента.
- Простая и понятная навигация.
- Дружелюбный к пользователям интерфейс. Это значит, что сайт, написанный при помощи Mobile First, будет удобен для работы.
- Адаптация контента к ширине области просмотра.
- Грамотная типографика. Для мобильных веб-страниц рекомендуется использовать шрифты не более 12 px, а в качестве основного выбирать 14-16 px.
- Ориентированность на сенсорное управление.
- Оптимизация виджетов.
- Минимум пользовательских действий для поиска информации и выполнения различных операций на веб-сайте.
Теперь понятно, что собой представляет Фест Мобайл и почему для разработки мобильных страниц этот подход используется все чаще. Его ключевые особенности тоже понятны. Google отмечает, что соответствующий метод верстки становится все более популярным. Здесь можно увидеть непосредственное программирование с помощью рассмотренной концепции. А изучить подход получится при помощи дистанционных компьютерных курсов в срок до 12 месяцев с выдачей по окончании обучения электронного сертификата установленной формы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
