7 Верстка

7

Верстка

ПРИНЦИПЫ ОРГАНИЗАЦИИ КОНТЕНТА и элементов интерфейса, применяемые при разработке дизайна обычных сайтов, несомненно, могут быть полезны и при проектировании мобильных веб-приложений. Но как быть уверенными в том, что эти принципы будут актуальны для любых мобильных устройств — как существующих сегодня, так и тех, что появятся в ближайшее время?

Для этого необходимо:

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

• «сообщать» мобильным браузерам, что созданный вами сайт оптимизирован для просмотра;

• создавать «гибкие» (flexible), «резиновые» (fluid) и «отзывчивые» (responsive) макеты веб-страниц;

• хорошо представлять, в чем состоят технические различия между устройствами;

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

Лишь изменения постоянны

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

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

Так что же делать веб-дизайнеру, оказавшемуся в этом море постоянной нестабильности? Плыть по воле волн? Ни в коем случае. Вы все еще на Диком Западе, а значит, придется стать ковбоями. Рискуйте, экспериментируйте, творите и примите как данность, что в настоящий момент далеко не все границы между устройствами, браузерами и веб-стандартами нанесены на карту.

Итак, седлайте скакунов — и в путь! Вооружившись принципами и методами мобильной верстки, попробуем укротить непокорные мобильные устройства. (Обещаю, ковбойских метафор больше не будет.)

Вы здесь ради них

Главное в мобильном веб-дизайне — «сообщить» мобильным браузерам, что вы потратили время и силы, чтобы адаптировать ваш сайт для каждого из них. Я помню об обещании не углубляться в программные коды, но все же здесь необходимо привести синтаксис тега viewport[9] как важнейшей части любого мобильного сайта.

<meta name=«viewport» content=«width=device-width»>

Процитирую Питера-Пола Коха, много писавшего о применении этого атрибута (http://bkaprt.com/mf/56):

По умолчанию атрибутивное значение viewport устанавливается равным ширине, которую разработчик считает оптимальной для просмотра сайтов на обычных компьютерах. Задав для тега viewport значение device-width[10], вы можете быть уверены, что ширина страниц вашего сайта будет соответствовать ширине экрана того устройства, на котором ее будут просматривать.

Тег viewport позволяет также преодолеть различия в разрешающей способности дисплеев мобильных устройств. Разрешающая способность, измеряемая в пикселях на дюйм (ppi), показывает число пикселей, из которых состоит горизонтальная или вертикальная линия длиной в 1 дюйм, отображенная на экране конкретного устройства. iPhone первого поколения имел экран с диагональю 3,5 дюйма и разрешением 320 X 480 px; таким образом, разрешающая способность этого экрана составляла 164 ppi. У смартфона Google Nexus One был 3,7-дюймовый экран с разрешением 480 X 800 px, а следовательно, его разрешающая способность равнялась 252 ppi. Почему это так важно?

Разрешающая способность определяет физические размеры элементов, отображающихся на экране. Чем выше ppi, тем меньше физические размеры каждого пикселя. Посмотрите, как графический объект — в данном случае набор кнопок — выглядит на мониторе Apple Cinema Display, ppi которого составляет примерно 94 единицы, как и у большинства мониторов настольных компьютеров. А теперь взгляните, как те же кнопки отображаются на экране смартфона Nokia N900 с разрешающей способностью 266 ppi. Разница заметна невооруженным глазом. То, что в первом случае было крупным и читаемым, во втором стало крошечным и практически нечитаемым (рис. 7.1).

Если вы создаете приложение с расчетом на то, что его будут просматривать на устройствах, имеющих разную разрешающую способность экрана, то подобный нюанс может стать проблемой. Однако решить ее довольно легко — для этого достаточно при разработке дизайна вашего сайта включить в него тег viewport, который распознают все мобильные браузеры. Как заметил Питер-Пол Кох (http://bkaprt.com/mf/56), браузеры для iPhone первого поколения (разрешающая способность экрана 164 ppi), Google Nexus One (252 ppi) и iPhone 4 (329 ppi) используют значение параметра device-width, равное 320 px, что позволяет обеспечить столь необходимое постоянство отображения веб-страниц.

Следующий вопрос: просмотр изображений высокого разрешения. В отличие от интерпретируемых браузером объектов (формы, кнопки, текст, линии и другие визуальные элементы) растровые изображения автоматически не адаптируются к разрешающей способности того или иного экрана. На дисплеях с высокой разрешающей способностью они будут иметь правильные физические размеры, но при этом отображаться недостаточно четко и резко (рис. 7.2).

Чтобы решить эту проблему, вам потребуется сделать два комплекта изображений: с высоким (удвоенным) и стандартным разрешением. Затем, используя медиазапросы CSS3 (media queries), JavaScript или серверный сценарий, необходимо дать браузеру команду загружать на устройства с высокой разрешающей способностью изображения из первого набора (http://bkaprt.com/mf/57).

Если идея с двумя комплектами изображений вас не привлекает (да и кому она может понравиться?), максимально задействуйте возможности визуального оформления, заложенные в CSS. Градиентные заливки и скругленные углы в дизайне мобильного сайта Yahoo! (рис. 7.2) создаются средствами CSS3 и поэтому отлично выглядят на экранах как с высоким, так и с низким разрешением. Благодаря их использованию разработчикам не пришлось тратить время на создание нескольких версий каждого изображения, а посетители были избавлены от необходимости их загружать.

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

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

Гибкость и отзывчивость

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

Чтобы справиться с этой, а заодно и с любыми другими проблемами, связанными с шириной страницы, мы должны сделать верстку максимально адаптируемой к устройствам отображения. И как бы мы ни называли такой макет — гибким (flexible) или резиновым (fluid), — дизайн, при котором страница сужается и расширяется в зависимости от размера экрана, является обязательным атрибутом мобильного вебдизайна. При таком подходе элементы интерфейса (например, поля поиска и элементы меню на мобильном сайте Google Places, рис. 7.3) меняются в зависимости от доступного им пространства.

Гибкий макет — вещь важная, но это только начало.

Отзывчивый веб-дизайн

С увеличением диапазона размеров экранов мобильных устройств для корректного отображения веб-страниц гибкого макета оказывается недостаточно. Только представьте, сколько существует возможных вариантов размещения элементов вашего сайта на устройствах с шириной экрана 768 px и 320 px. Экран с горизонтальным разрешением 768 px предлагает в два с половиной раза больше свободного пространства! Очевидно, мы можем сделать что-то гораздо более интересное, чем просто растянуть страницу до границ окна! И здесь нам на помощь приходит технология отзывчивого веб-дизайна.

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

На практике это означает выбор определенных значений ширины экрана, которые станут «контрольными точками», задающими новые параметры отображения страницы и ее графических элементов (изображений, видео). Другими словами, «контрольная точка» — это условный оператор, определяющий, соответствует ли устройство определенному критерию (например, ширина окна браузера менее 600 px). Если условие выполняется, браузер использует новый набор параметров отображения страницы (как правило, новую таблицу стилей CSS, а иногда и новый код JavaScript), а сайт видоизменяется, масштабируясь под доступное пространство. О деталях этого процесса можно узнать, прочитав отличную книгу Итана Маркотта «Отзывчивый веб-дизайн»[11].

Таблицы стилей CSS определяют наличие и расположение элементов на странице, а также размер изображений. Однако изменения не должны быть ни кардинальными, ни еле заметными (рис. 7.4).

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

Взаимодействие с устройствами

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

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

• Основной метод ввода данных: жесты/дистанционное управление, мышь/клавиатура, нажатие/сенсорный ввод, цифровая клавиатура.

• Размер экрана: настенный, настольный, переносной, наладонный или еще меньше.

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

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

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

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

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

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

Чем проще, тем лучше!

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

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

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

Проектирование пространства

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

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

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

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

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

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

• Сводите число элементов сайта к минимуму, позволяющему сохранять функциональность.

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

Данный текст является ознакомительным фрагментом.