Mobile first

Сегодня поговорим о тенденциях 2019 года касающихся веб дизайна и проектирования интерфейсов. Разберем чем отличаются две технологии Mobile first и Desktop First. Расскажем о плюсах и минусах данных подходов, приведём примеры. Затронем элементы дизайна и ответим на вопрос. Стоит ли переходить на мобильное проектирование в 2019 году.

Ни для кого не секрет, что мобильные технологии захватывают мир. Ежегодное увеличение пользователей мобильными устройствами растет как на дрожжах, и на начало 19 года доля мобильного трафика составляет 61% от общего числа пользователей сетью интернет. По сравнению с предыдущим годом рост составил 5%.

Это статистика по России. Если рассматривать города миллионники, то процент возрастет. Это говорит о том, что пора задумываться над улучшением качества мобильных версий сайта. Ведь не за горами тот день, когда большинство юзеров откажутся, а многие уже отказались, от десктопных громоздких PC и перешли на сторону портативных решений, таких как планшет, смартфон. Я уверен на 100%, что больше половины прочитавших эту статью сделали это с помощью мобильного браузера.

Основы Mobile First дизайна

Немного теории, чтобы нам лететь в одной ракете. Mobile first design – это методология разработки веб проектов, первым делом, для мобильного устройства и уже потом для десктопных версий. Смысл заключается в том, что интерфейс сайта изначально проектируется под небольшие экраны мобильных устройств, продумывается логика, расположение разделов, порядок блоков, учитываются UI/UX факторы. Мобайл ферст применяется не только для дизайна, но и для верстки проекта.

Это новая технология, и применяют ее далеко не все веб студии, особенно это касается нашей страны, в связи с дороговизной исполнения. Ведь для такого подхода необходим дизайн-макет для трех разрешений.

• Мобильной версии сайта
• Планшетной версии сайта
• Десктопной

И так для каждой уникальной страницы сайта. После этого происходит верстка сайта. В большинстве случаев по методологии БЭМ, разработанной Яндексом, для структурирования и удобства управлении проектом. Для верстки интерфейсов сайта применяются последние технологии построения сеток сайта, либо Bootstrap 4 на основе FlexBox, либо Grid. Гибкий и функциональный, не требующий использования зависимостей и модулей – это Grid. Он уже изначально встроен в современные браузеры и позволяет применять весь дизайнерский потенциал, не боясь, что задумку невозможно будет сверстать.

Большинство сайтов, особенно это касается шаблонных, изначально создавались для экранов мониторов и уже потом подгонялись под экраны мобильных устройств. И до сих пор 90% шаблонов продаются нацеленными на стандартные разрешения экрана 1920Х1080. К чему ведет некачественная проработка мобильного дизайна? Перечислим основные недостатки Desktop First для мобильных страниц.

• Плохая оптимизация под маленькие разрешения
• Проблемы с большими отступами
• Смещение абсолютно позиционированных элементов
• Не логичное расположение блоков
• Неудобство пользования
• Низкая скорость загрузки

Перечисленные выше пункты ведут к повышению отказов на сайте и уменьшению конверсий, а это прямая зависимость к недополученной потенциальной прибыли.

Что выбрать Mobile first vs Desktop First?

Если стоит задача создания интернет ресурса, будь то интернет магазин или сайт компании, или шаблонный вариант неприемлем сразу (надеюсь, причина отказа от шаблона понятна). Встает нелегкая задача: определиться по какой технологии стоит заказывать разработку сайта? Перечислим плюсы и минусы каждого метода и облегчим принятие решения.

Плюсы Mobile first

• Понятные и простые интерфейсы
• Отличная оптимизация под все разрешения
• UX / UI проектирование
• Легкое восприятие сайта
• Сразу видно, что сайт качественный и не шаблонный
• Высокая скорость загрузки
• Проработаны все элементы для различных разрешений
• По дизайн-макету сразу можно оценить как будет выглядеть мобильная версия сайта
• Поисковые системы “любят” такие сайты
• Отсеивание неквалифицированных специалистов
• Повышенная конверсия с мобильных устройств
• Перспектива на будущее

Минусы Mobile first

• Высокая стоимость проекта
• Долгое время изготовления
• Ограничение в креатив-проектах

Плюсы Desktop First

• Низкая стоимость изготовления
• Высокая скорость изготовления
• Не требует высокой квалификации
• Возможность креативить

Минусы Desktop First

• Уходящая технология
• Рано или поздно придётся менять формат
• Невысокое качество изготовления
• Посредственное качество верстки
• Возможность использования «костылей»
• Сходство с шаблонными сайтами
• Плохая оптимизация для маленьких разрешений
• Повышенные отказы с мобильных девайсов

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

Логичнее создать сайт с нуля, используя перспективную технологию, и в дальнейшем развивая ресурс, чем пытаться костылями создать подобие нормальной мобильной версии.

Адаптивный мобильный дизайн кончился

Ответ на вопрос очевиден. Если, конечно, вы не старовер со своими традициями. А вот в сайтостроении, при видимой пользе современных технологий, большинство все равно используют Desktop First. Потом тратят деньги, пытаясь улучшить сайт, нанимая дизайнеров для редизайна, и программисты лепят JS костыли для адаптации, при этом теряется скорость загрузки, возрастают отказы, а в итоге падает конверсия, а с ней и доход.

Давайте разберемся, в чем разница адаптивного мобильного дизайна и проектируемого Mobile first дизайна? Можно подумать, что это одно и тоже, но это не так.

Адаптивный дизайн – это подход, ориентируемый на изменения размеров блоков, шрифтов посредством CSS и множества медиа-запросов. Такой код получается громоздким и трудно читаемым. Этот подход больше адаптирован под дизайн PC версии и как необходимость подключается мобильная версия, но не прорабатывается.

Mobile first web design изначально проектируется под пользователей, использующих мобильные устройства. Блоки-кнопки, формы заказа, карточки товара, создаются для удобства пользования на маленьких экранах. И после этого уже происходит адаптация под большие экраны. Согласитесь, ведь проработанную маленькую структуру гораздо легче перенести на большие экраны, чем наоборот.

Основные принципы проектирования мобильных веб-сайтов

Главный принцип построения мобильного дизайна – это простота. Забудьте о сложных, непонятных структурах, громоздких слайдерах, ненужных декоративных элементах. Придерживайтесь следующей техники. Если элемент на сайте не несет в себе информативности, то его нельзя использовать для облегчения понимания веб-ресурса, и после его удаления не потеряется смысловая нагрузка. Поэтому просто удалите его. Теперь перечислим по порядку техники, которые необходимо применить для создания правильного мобильного сайта.

Меньше контента на коммерческих страницах

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

Оставьте большие подробные описания для других страниц: “блога”, “новостей”, “о компании”.

Важно понять, что юзер, зашедший с мобильного устройства, не будет пол часа скролить вниз пока доберётся до сути. Он просто уйдет с сайта. Сокращайте и убирайте ненужное, оставляя только суть.

Упрощайте веб ресурсы

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

В 2019 году правит Material Design, разработанный Google или подобные трансформированные техники.

Люди любят простоту во всем, и веб-сайт — не исключение. Чем быстрее посетитель сайта получит ответ на свой вопрос, тем быстрее он станет счастливее, и, возможно, превратится в покупателя или пользователя ваших услуг.

Mobile first web design элементы

Убедитесь, что элементы, присутствующие на сайте работают. Это очень важно для мобильных сайтов. Если на сайте есть не работающие элементы, то с 90% вероятностью посетитель покинет страницу. Перечислим проблемные места, с которыми можно столкнуться.

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

Спросите: -Чем вредят призывы к действию, и попытки получить от пользователя контактные данные? Они не вредят, но если они не оптимизированы под мобильные ресурсы или конкретно под сайт, на котором находятся, то процент отказов резко увеличится. В основном, все точки закрытия ресурса связаны с невозможностью пользователем закрыть всплывающее окно. Вы думаете, редко встречается? По нашей практике можно сказать, что каждый второй сайт, попавший к нам на аудит, имел проблемы с всплывающими формами.

А представьте, что будет при медленном интернете... На территории России это сплошь и рядом. Даже в Москве стоит отъехать на 20км от МКАД и о LTE можно забыть, в лучшем случае 3G. Мало того что потенциальный посетитель ждал 5 минут пока загрузится веб-ресурс, еще и тут он нажимает на неработающую ссылку, ждет и видит 404 ошибку. Как вы думаете, какую реакцию стоит ожидать?

Мобильный дизайн

У вас может возникнуть вопрос: важен ли дизайн для мобильных версий? Ответ: Однозначно – да! Сайт может быть выполнен по технологии мобайл ферст, но быть на столько ужасным и отталкивающим, что толку от использования данного метода не будет. Чтобы предотвратить это, мы расскажем о тенденциях в мобильном дизайне в 2019 году.

• Яркие цвета
• Типография
• Геометрические фигуры и абстрактные узоры
• Градиенты и дуотоны(двухцветные изображения)
• Реальные фотографии

Что это значит? Экспериментируйте с формами, не бойтесь ярких цветов, перестаньте использовать стоковые изображения, применяйте обычные необработанные (домашние) фото. Снимайте собственные видео-беграунды рабочего процесса. Не бойтесь отойти от стандартных шрифтовых пар.

Скорость загрузки мобильной версии

Не так давно мы писали подробную статью, посвящённую seo-оптимизации и скорости загрузки сайта. Используйте ее как актуальный и подробный мануал для оптимизации ресурса. Для мобильной версии это второй критический фактор. Без проведения оптимизации скорости загрузки, Сайт не сможет добиться высоких результатов.

Будущее за Mobile first

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

С каждым годом растет скорость жизни, процессов, потоков. И если сейчас не задуматься о будущем, которое уже наступило, то через несколько лет придется либо догонять не паровоз, а локомотив, либо закрываться.

Вы всегда можете заказать разработку профессионального веб дизайна сайта по технологии Mobile first в нашей студии.