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

Но с чего начинать разработку сайта? Дизайн для смартфонов должен стать отправной точкой, или стоит начать с полноэкранной версии?

Изящная деградация или прогрессивное улучшение

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

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

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

Пришло ли время для Mobile First?

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

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

Гиганты мира онлайн согласны с тем, что мобильное будущее уже наступило. В 2016 году Google объявили что впервые количество поисковых запросов с мобильных устройств превзошло количество запросов с ПК. И в этом же году Google выпустили проект с открытым кодом, который позволяет веб-страницам подгружаться намного быстрее на мобильных устройствах.

Что на самом деле важно?

Помимо изменениям в Интернете, которые благоволят мобильному веб-дизайну, у подхода mobile-first есть и другие преимущества. Искусство создания сайтов под мобильные устройства предполагает работу с максимальными ограничениями. Это значит что прежде чем принять решение, веб-дизайнеру нужно хорошенько расставить приоритеты.

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

Люди много времени проводят в мобильных устройствах и ведут там самую разную активность. Ваша первостепенная задача — обеспечить их лучшим пользовательским опытом. Техника mobile-first ставит эту задачу во главу угла, а также помогает сразу отделить зерна от плевел. На данный момент это самый эффективный подход к работе!

Автор статьи spyrestudios

Перевод — Дежурка

Смотрите также:

• Как сделать веб-дизайн, доступный для всех
• Используем адаптивную типографику в веб-дизайне
• 10 тенденций в графическом дизайне на 2018 год