Напишите нам: hello@noorsoft.ru

Noorsoft — профессиональная команда разработчиков мобильных и веб приложений

mobile-first
Мар 19

Получите клиентов в проект из мобильного. Стратегия Mobile First

Стратегия Mobile First: что это и почему на него стоит обратить внимание?

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

Да, от хостинга и скорости интернета это в некоторой степени зависит. Но все же основную роль в скорости загрузки играет построение страницыЕсли более слабые модели гаджетов учитывались при ее создании, то загрузка сайта пойдет быстрее. А «подводные камни», возникающие во время открытия страницы, будут минимальны. Такое построение сайтов носит название Mobile First. Оно направлено на оптимизацию работы именно в мобильных устройствах и переводится как «сначала мобильные». О нем и пойдет речь. При рассмотрении Mobile First стоит остановиться на паре основных вопросах: философии дизайна и технической реализации. Разделение этих понятий довольно значимо, без этого может начаться путаница с определениями, подобными «адаптивному дизайну».

Философия дизайна

Без названия

Подавляющее большинство программистов приступают к созданию сайта с версии для больших экранов. И это кажется логичным, ведь объемная версия содержит больший функционал. Однако такой подход устаревает, поскольку в последние годы идет тенденция к переходу от ПК и ноутбуков к гаджетам. В США, к примеру, любители мобильных устройств составляют 25% от всех пользователей интернета, а в Китае – 45%, как утверждает информация On Device Research за 2013 год.

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

В этом подходе мобильная версия сайта несколько отличается от компьютерной. Здесь скрыты лишние элементы, препятствующие продаже товаров, основная информация читабельна, удобно расположена. Примером использования Mobile First является сайт компании Best Buy. Здесь версии для ПК и гаджета различны. В мобильной версии компактная картинка, небольшой вводный текст, категории товаров представлены в виде текста и скрыты в отдельной вкладке, навигация имеет упрощенный вид.

Техническая реализация Mobile First

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

Почему стоит обратить внимание на mobile first?

Ответ очевиден – данный подход дает вам возможность увеличить прибыль. Mobile first позволяет ресурсу загружаться оперативно, а это одно из главных преимуществ перед конкурентами. Мало где об этом говорят, но поисковая система Google отдает предпочтение тем ресурсам, которые имеют высокую скорость загрузки и имеют мобильную версию. То есть ваш рейтинг при поисковом запросе поднимется с использованием подхода. Так же с mobile first уменьшается стоимость пропускной способности. Все чаще люди совершают покупки с гаджетов. Например, во время Черной пятницы с помощью мобильных устройств было совершено 36,6% всех покупок, а во время Киберпонедельника – 26%, по данным 2015 года.

С каждым годом гаджеты вытесняют персональные компьютеры и это официально подтвержденная статистика. Поэтому и необходимость в подходе будет расти с каждым годом все больше. А, как говорится, кто первый, тот и на коне. Чем раньше вы примените mobile first, тем быстрее начнете получать рост прибыли. Адаптирование сайтов под гаджеты так важно, что часть компаний специально устанавливают ограничения на скорость интернета и оценивают работу сервиса. Потому что не малый процент пользователей с медленным интернетом во всем мире видит их сайт именно таким.

43-650x487

Ранее говорилось о том, что подход mobile first подразумевает проектирование от меньшего экрана к большему. А это значит, что вам предстоит практически полное переосмысление веб-дизайна. Мобильная версия предполагает небольшое пространство, сжатые файлы и отсутствие лишних элементов. При этом должно получиться ярко и удобно для пользователей. Чтобы не упустить важные детали, начинайте с главных элементов и переходите к второстепенным (такой подход называют прогрессивным улучшением). Кстати, прогрессивное улучшение отождествляют с адаптивным дизайном. Создателем этого термина является Аарон Густавсон (2011 год). При progressive enhancement визуальная иерархия предстает в новом свете. Расположение кнопок, навигация, масштабы – с этой позиции все смотрится по-другому.

На большом экране редко можно нажать не на тот пункт меню, который вас интересует, мышка помогает делать точные клики. А вот при использовании гаджета такое бывает частенько: нажимаешь меню – блокируется экран, хочешь посмотреть следующий блок текста, долго водишь пальцем по странице и вспоминаешь не добрым словом создателей ресурса. Подобные недочеты подхода «сверху вниз» можно исправить с помощью внедрения mobile first.

Пара слов об адаптивном дизайне

Неверно считать, что mobile first и адаптивным дизайн конкуренты. Они скорее являются дополнением друг к другуПрогрессивное улучшение создается по параметрам определенных мониторов, а затем подстраивается под меньшие размеры. То есть сайты с адаптивным дизайном предназначены, в первую очередь, для ПК.  Если вы открываете мобильную версию такого ресурса, то сначала подгружается полная версия и только потом фильтры, изменяющие вид сайта. При этом тратится слишком большой объем оперативной памяти и устройство может просто не завершить загрузку. Однако, если подобные проблемы не возникают, progressive enhancement может быть лучше на гаджетах чем mobile first при любых параметрах устройства.

Особые свойства мобильных устройств

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

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

Выводы

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *