Стратегии разработки веб-сайта: «сначала мобильные» и «сначала компьютеры»

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

Постоянный рост количества посетителей сайтов, которые просматривают их со смартфонов, уже давно сняло вопрос о том, нужно ли делать мобильную версию (конечно, нужно!).

Но как создается мобильная версия? И с какой версии начинается проектирование дизайна?

Здесь существуют две принципиально различные дизайн-стратегии: одна называется «сначала мобильные» (англ. mobile first), другая — «сначала компьютеры» (англ. desktop first). Их названия достаточно красноречивы. В обоих случаях создают обе версии сайта, разница только в последовательности их разработки.

В этом материале мы рассмотрим обе стратегии и попробуем выяснить их преимущества и контексты применения.

Дизайн-стратегии по разработке веб-сайта

Сначала мобильные

В дизайн стратегии «сначала мобильные» базовой версией веб-сайта предлагается выбрать именно мобильную.

В 2011 году дизайнер Люк Вроблевски посвятил этой стратегии одноименную книгу. В ней он отмечал, что долгое время веб-дизайнеры относились к мобильным версиям сайта как к вторичным. Из-за этого часто не учитывались особенности смартфонов, что существенно ухудшало опыт использования. Базовые механики сайта проектировались под использование на компьютере, и авторам сайтов не всегда удавалось удобно адаптировать их для мобильных.

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

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

Этот подход также положительно влияет на саму композицию мобильной версии сайта. Стационарная версия сайта по умолчанию более вместительна, поэтому в ней больше функциональных элементов, более длинные надписи, изображения занимают большую площадь. Когда дизайнеры создают сначала версию сайта для компьютеров, то и содержание изначально у них «компьютерное». В мобильной версии он начинает выглядеть громоздко, неорганично.

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

Согласно Вроблевски, среди преимуществ этого метода — то, что он позволяет:

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

У этого принципа проектирования немало известных адвокатов, среди которых председатель правления Google в 2011–2015 годах Эрик Шмидт, вице-президент Apple по технологиям Кевин Линч и бывший дизайн-директор Facebook и eBay Кейт Ароновитц. Последняя отмечала:

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

К этому можно добавить еще одно преимущество: этот подход позволяет выработать опыт проектирования для мобильных устройств, и его легко развить в навык разработки мобильных приложений, ведь у них есть много общего с мобильными версиями веб-сайтов.

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

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

Эта стратегия уместна, когда:

• количество посетителей с мобильных устройств на сайте предполагается значительным — более 50%, и соответственно, большинство пользователей будут взаимодействовать с сайтами на смартфонах или планшетах,
• функциональность сайта ограничена несколькими функциями (например, заказ и оплата такси).

Но несмотря на значительное количество преимуществ, эта стратегия не универсальна, и, конечно, реальная практика вносит определенные коррективы.

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

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

И тогда вам приходится придерживаться стратегии «сначала компьютеры».

Сначала — компьютеры

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

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

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

Но эта стратегия лучше подходит и по объективным причинам, когда:

• количество посетителей с компьютеров предполагается значительным — более 50%;
• большинство пользователей будут взаимодействовать с сайтами на стационарных компьютерах или ноутбуках;
• функциональность сайта разветвлена (это характерно для сайтов, в которых есть кабинет пользователя, экраны отчетности в форме таблиц или графиков, онлайн-редакторы).

В заключение

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

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