Таблицы стилей CSS определяют наличие и расположение элементов на странице, а также размер изображений. Однако изменения не должны быть ни кардинальными, ни еле заметными (рис. 7.4).
Итак, применяя принципы отзывчивого веб-дизайна, мы можем масштабировать нашу веб-страницу под размеры экрана устройства, на котором ее будут просматривать. Но устройства отличаются не только размерами экранов.
Взаимодействие с устройствамиСовременные устройства предполагают не только многообразие характеристик и ограничений, но также и различные способы взаимодействия. Сравните телевизоры со встроенным доступом в Интернет, настольные компьютеры, ноутбуки, планшеты, смартфоны и обычные телефоны — каждое из этих устройств уникально по нескольким параметрам:
• Поза, которую принимает их владелец: сидит в кресле на расстоянии нескольких метров от экрана, в течение нескольких часов непрерывно находится за рабочим столом, сидит на диване, или лежит в кровати с устройством в руках, или использует его несколько раз в течение дня там, где это удобно.
• Основной метод ввода данных: жесты/дистанционное управление, мышь/клавиатура, нажатие/сенсорный ввод, цифровая клавиатура.
• Размер экрана: настенный, настольный, переносной, наладонный или еще меньше.
Комбинация этих параметров зачастую определяет способ взаимодействия пользователя с устройством. Каждый из этих способов требует определенного подхода к дизайну пользовательского интерфейса, поскольку то, какие именно задачи решает владелец при помощи своего устройства, во многом зависит от условий, в которых он находится в данный момент, так же как, например, проектирование сайта и элементов управления зависят от методов ввода данных и размеров экрана.
В результате разработчикам веб-приложений во многих случаях приходится создавать уникальное решение для каждого интерфейса. Например, сервис потокового видео Netflix спроектировал отдельные сайты для телевизоров со встроенным доступом в Интернет, планшетов, настольных компьютеров и смартфонов (рис. 7.5). Конечно, создание такого числа вариантов занимает немало времени, зато каждый из разработанных интерфейсов максимально учитывает особенности взаимодействия пользователей с конкретным устройством.
Разумеется, вы можете спроектировать единый пользовательский интерфейс, но результатом такого «универсального» решения, скорее всего, станет необходимость идти на компромиссы и соглашаться с наличием множества ненужных элементов. К тому же единый дизайн не способен в полной мере учесть ограничения и возможности использования тех или иных устройств.
Например, телевизор со встроенным доступом в Интернет позволяет просматривать текстовые списки, оптимизированные под обычный мобильный телефон, но вряд ли кто-то захочет это делать. И напротив, веб-приложение, оптимизированное под планшетные компьютеры, вполне подойдет и для стационарных ПК, поскольку у первых экран меньше, средства взаимодействия с пользователем проще, а кнопки и ссылки крупнее. И хотя при разработке этого интерфейса не учитывались ни поза, которую принимает владелец устройства, ни методы ввода данных, ни размеры экрана обычного компьютера, он все равно будет функциональным.
Понимание особенностей взаимодействия пользователей с различными устройствами помогает задать критерии, определяющие новые параметры отображения веб-страницы и ее графических элементов — ведь сайт должен не только хорошо выглядеть, но и хорошо работать. Расположение и масштаб элементов должны соответствовать доступному пространству и учитывать имеющиеся средства ввода данных (например, тач-зоны не могут быть меньше определенного размера).
В сочетании с принципами отзывчивого дизайна такой подход обеспечит эффективную работу вашего сайта на любых мобильных устройствах — как существующих сегодня, так и будущих.
Чем проще, тем лучше!На всякий случай, если до сих пор эта мысль не прозвучала достаточно убедительно, повторю: основное правило разработки мобильных интерфейсов — чем проще, тем лучше. Тач-зоны должны быть достаточно крупными, чтобы мы могли управлять ими при помощи своих не всегда точных пальцев. Отзывчивый дизайн должен помогать сайтам адаптироваться к изменениям разрешения экрана и размеров области просмотра. По мере увеличения объемов контента и появления устройств с новыми характеристиками мобильные приложения должны оставаться простыми и удобными в использовании.
Все это подталкивает нас к тому, чтобы на экранах мобильных устройств располагалось как можно меньше элементов — это позволит пользователям легко управлять нашими сайтами, быстро достигать поставленных целей и допускать меньше ошибок. Поэтому, проектируя мобильный сайт, оставляйте лишь то, что действительно необходимо вашим пользователям, независимо от того, какие задачи они будут решать — искать или изучать информацию, проверять обновления или создавать и редактировать контент.
Избавляясь от всего лишнего, вы не только облегчаете процесс создания мобильного сайта, но и помогаете пользователям сосредоточиться на выполнении основных задач. И если они вдруг начнут просить, чтобы и обычные сайты стали такими же, как мобильные версии, знайте: вы на правильном пути.
Проектирование пространстваМобильный ландшафт продолжает видоизменяться, поэтому дизайн наших сайтов должен быть готов к тому, чтобы полностью отвечать потребностям пользователей независимо от времени и места их взаимодействия с веб-приложением, технических характеристик мобильных устройств или размеров их экранов.
• Примите тот факт, что в обозримом будущем мобильная индустрия продолжит развиваться столь же стремительными темпами.
• Используйте тег viewport, чтобы «сообщать» мобильным браузерам, что в процессе разработки сайта вы о них не забыли.
• Не забывайте о разрешающей способности экранов и старайтесь показывать изображения высокого разрешения на устройствах, позволяющих это делать.
• Применяйте принципы отзывчивого веб-дизайна, чтобы адаптировать свои сайты к различным устройствам отображения.
• Создавая отзывчивый веб-дизайн или используя серверные процедуры, учитывайте особенности взаимодействия пользователей с различными устройствами.
• Сводите число элементов сайта к минимуму, позволяющему сохранять функциональность.
Перечень рассмотренных в этой книге принципов и методов разработки мобильных веб-приложений, каким бы широким он ни был, нельзя считать исчерпывающим. Новые решения появляются практически каждый день. Мобильная вселенная постоянно расширяется, и даже само понятие мобильного устройства начинает размываться. Принципы мобильного веб-дизайна еще только формируются, и основные изменения ждут нас впереди. Держите руку на пульсе!
Надеюсь, что мой простой призыв «сначала мобильные!» станет катализатором новых идей и решений. Сегодня мобильные устройства заменили нам персональный компьютер: они всегда при нас, они подключены к Интернету, они позволяют решать массу различных задач, общаться друг с другом или просто хорошо проводить время. Поэтому если при разработке сайтов мы прежде всего будем думать об этих персональных портативных устройствах, мы сможем:
• воспользовавшись растущей популярностью мобильного Интернета, предложить потребителям новые способы взаимодействия с нашими сайтами и приложениями;
• приняв ограничения, присущие мобильным устройствам, сконцентрироваться на наиболее приоритетных задачах и функциях;
• используя возможности мобильного интерфейса, найти инновационные решения для удовлетворения потребностей наших клиентов;
• переосмыслив накопленный нами опыт в области традиционного веб-дизайна, по-новому взглянуть на свойственные мобильным устройствам особенности организации контента, взаимодействия с пользователями, ввода информации и визуальных решений.
И в завершение — несколько практических советов.
• Если есть возможность, тестируйте верстку и код на реальных мобильных устройствах. Программы-эмуляторы и браузеры стационарных компьютеров не способны в полной мере их заменить.
• Если в вашем распоряжении нет нужного устройства, отправляйтесь в ближайший магазин и протестируйте результаты вашей работы на выставочных образцах.
• Прототипы, прототипы, прототипы! Чем раньше вы сможете опробовать то или иное мобильное решение, тем быстрее поймете, работает ли оно в реальном мире.
И последнее по счету, но не по значению. Не бойтесь начинать с малого. Некоторые из самых крупных и успешных проектов, реализованных в мобильном бизнесе, начинались с небольших экспериментов, проводившихся командами страстно увлеченных веб-дизайнеров и разработчиков. Вам не нужно знать о мобильных технологиях все — возьмите с собой то, что уже знаете, и отправляйтесь в путь.
