Люк Вроблевски: Сначала мобильные!

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

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

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

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

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

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

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

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

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

• Примите тот факт, что в обозримом будущем мобильная индустрия продолжит развиваться столь же стремительными темпами.

• Используйте тег viewport, чтобы «сообщать» мобильным браузерам, что в процессе разработки сайта вы о них не забыли.

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

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