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

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

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

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

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

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

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

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

Главное в мобильном веб-дизайне — «сообщить» мобильным браузерам, что вы потратили время и силы, чтобы адаптировать ваш сайт для каждого из них. Я помню об обещании не углубляться в программные коды, но все же здесь необходимо привести синтаксис тега 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].