Мы изучили ввод данных, средства взаимодействия и общую организацию информации на мобильных устройствах. Теперь давайте поговорим о великом множестве устройств, для которых предназначаются все эти элементы. Итак, переходим к следующей главе: верстка.
ПРИНЦИПЫ ОРГАНИЗАЦИИ КОНТЕНТА и элементов интерфейса, применяемые при разработке дизайна обычных сайтов, несомненно, могут быть полезны и при проектировании мобильных веб-приложений. Но как быть уверенными в том, что эти принципы будут актуальны для любых мобильных устройств — как существующих сегодня, так и тех, что появятся в ближайшее время?
Для этого необходимо:
• принять тот факт, что в обозримом будущем мобильная индустрия будет развиваться столь же стремительными темпами;
• «сообщать» мобильным браузерам, что созданный вами сайт оптимизирован для просмотра;
• создавать «гибкие» (flexible), «резиновые» (fluid) и «отзывчивые» (responsive) макеты веб-страниц;
• хорошо представлять, в чем состоят технические различия между устройствами;
• проектируя мобильные сайты, избавляться от всего лишнего и ненужного.
Пока я обдумывал и писал эту книгу, мобильная отрасль несколько раз претерпела кардинальные изменения. Прежние лидеры рынка мобильных платформ утратили свои позиции. Появились устройства с новыми возможностями, а значит, и новыми ограничениями. Производители устройств, разработчики мобильных платформ и операторы сотовой связи объявили о партнерстве.
Добро пожаловать в мобильный мир, где постоянны лишь изменения! Этот мир продолжает стремительно меняться, поэтому я сосредоточусь на тех тенденциях, которые в последнее время незыблемо задавали параметры разработки дизайна для мобильных устройств. Речь идет о появлении более мощных процессоров, увеличении скорости передачи данных, росте популярности тач-интерфейса и совершенствовании веб-браузеров.
Так что же делать веб-дизайнеру, оказавшемуся в этом море постоянной нестабильности? Плыть по воле волн? Ни в коем случае. Вы все еще на Диком Западе, а значит, придется стать ковбоями. Рискуйте, экспериментируйте, творите и примите как данность, что в настоящий момент далеко не все границы между устройствами, браузерами и веб-стандартами нанесены на карту.
Итак, седлайте скакунов — и в путь! Вооружившись принципами и методами мобильной верстки, попробуем укротить непокорные мобильные устройства. (Обещаю, ковбойских метафор больше не будет.)
Главное в мобильном веб-дизайне — «сообщить» мобильным браузерам, что вы потратили время и силы, чтобы адаптировать ваш сайт для каждого из них. Я помню об обещании не углубляться в программные коды, но все же здесь необходимо привести синтаксис тега viewport[9] как важнейшей части любого мобильного сайта.
Процитирую Питера-Пола Коха, много писавшего о применении этого атрибута (http://bkaprt.com/mf/56):
Тег 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).
