Mobile First: да или нет?

Вступление

Что такое Mobile First и в чем его суть

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

Есть ли разница между адаптивным дизайном и Mobile First

• Адаптивный вариант. При создании веб-проекта создают статичные макеты, рассчитанные на разные гаджеты. Шаблоны имеют структуру расположения и размера зависимо от экрана. Как правило, создают стандартные макеты от 320 до 1600 пикселей. Специальные скрипты выявляют размеры дисплея конкретного посетителя и открывают подходящий шаблон. В таких макетах учитывают особенности разных моделей устройств. Допустим, для больших экранов — создают только горизонтальный вид, а для гаджетов — возможность переключения между горизонтальным и вертикальным видом.
• Вариант Mobile First. При таком раскладе сначала создается и открывается версия для гаджетов. После этого она изменяет масштаб зависимо от ОС, вебмастер сможет вносить в дальнейшем правки, добавляя дополнительные опции и работать со стилями.

Как работать с Mobile First

1. Создается дизайн, чтобы на смартфоне всё смотрелось красиво. Основываясь на нарисованном дизайне пишут код. Либо код и сам дизайн создают параллельно исходя от общего видения.
2. При необходимости создают отдельный вариант версии для ПК, если необходимости нет — делают так, чтобы мобильный дизайн мог «увеличиваться» до больших размеров.
3. При внесении правок работают сначала с версией для смартфонов и только потом переходят к компьютерной версии.

Особенности проектирования

Делаем акцент на контенте

• их главная цель — найти нужную вещь;
• для облегчения поиска — можно воспользоваться фильтром;
• ваша задача — сделать возврат к их корзине максимально удобным.

Создаем визуальную иерархию

• самое важное содержимое расположено в центре дисплея;
• не важные по значимости элементы можно разместить сверху или снизу основного содержания;
• не особо приоритетный, но желательный контент можно разместить вверху сайта.

Упрощаем навигацию

• посетители на сайте чаще взаимодействуют с навигацией в нижней части экрана (правило “большого пальца” в действии);
• такое размещение навигации на сайте напоминает интерфейс множества приложений, поэтому человеку будет проще ориентироваться на веб-проекте.

Создаем интерфейс User-friendly

• Расположение содержимого в области просмотра;
• Грамотная типографика;
• Нацеленность на сенсор;
• Устранение контента, который не воспроизводится;
• Оптимизация всех виджетов сайта;
• Уменьшение ненужный пользовательских действий.

Где нужно применять

Плюсы и минусы Mobile First

Плюсы:

• Удобство для посетителей сайта;
• Увеличение конверсии и удержание постоянных клиентов;
• Максимально быстрая загрузка веб-страниц;
• Приоритет в ранжировании поисковиками.

Минусы:

• Временные и финансовые затраты на разработку mobile first;
• Визуальное оформление весьма ограничено.