Прикарманенный дизайн

Перевод Кирилла Грушко

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

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

Ограниченные возможности.

Главный недостаток карманных устройств – ограниченный размер экрана – зачастую сопровождается отсутствием возможности горизонтальной прокрутки текста. Ввод информации в КПК осуществляется обычно при помощи электронного «пера» – стило; загрузка информации через сеть чаще всего происходит медленно и стоит дорого. Процессоры и объем памяти карманных устройств сильно уступают параметрам полноразмерных компьютеров. Благодаря перечисленным недостаткам, многие пользователи КПК предпочитают отключать автоматическую загрузку изображений из Интернета.

Как в этих стесненных условиях работать веб-дизайнеру? Для начала перечислим несколько непреложных правил:

1. Страница сайта должна представлять собой одну-единственную колонку с информацией.
2. Недопустимо использование плавающих колонок.
3. Код страницы следует оптимизировать посредством эффективной, семантической разметки и таблиц стилей.
4. Следует по возможности избегать изображений, плагинов и всевозможных украшательств, в особенности для навигационных ссылок.
5. Если изображение все-таки должно присутствовать на странице, его следует снабдить внятным alt-текстом.
6. Не следует прибегать к динамическим эффектам навигации, требующим использования мыши или клавиатуры.

В поисках минимализма.

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

Если размеры объектов превышают 5 пикселей, лучше указывать их габариты в единицах измерения em или в процентах; в противном случае объекты будут плохо масштабироваться.

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

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

Длина строки должна быть максимальной, а количество горизонтальных отступов – минимальным. Абзацный отступ в 1 em на узком экране покажется огромным; в большинстве случаев левое и правое поля, а также горизонтальные отбивки не должны превышать в ширину 1 em. При этом в качестве единицы измерения лучше всего обходиться процентами, т.к. они напрямую зависят от ширины экрана и позволяют не заботиться об экранных размерах.

Подгонка макета страницы.

Выстраивать страницу в одну колонку лучше после того, как весь документ был должным образом структурирован. Это придаст уверенности, что страница будет опрятно выглядеть не только в Opera, но и в браузерах для КПК, не понимающих CSS (а также в браузерах для обычных компьютеров, и в голосовых и терминальных браузерах, наподобие Lynx).

Воспользовавшись CSS, весьма нетрудно уместить целый макет в одну колонку. Таблицы стилей позволяют с легкостью отключать «плавучесть» колонок и их абсолютное позиционирование на экране. Если же при создании страницы использовались таблицы, их ячейки можно превратить в последовательность блоков следующим образом:

table, tbody, tr, td, th {

display: block; }

Самая ценная часть экранного пространства – верхнее поле, мгновенно привлекающее внимание читателя. Поэтому навигационные элементы и украшательства должны занимать как можно меньшую его часть. Достаточно разместить здесь логотип и два-три навигационных элемента, например, ссылки и поисковую строку. Пространные списки ссылок, кричащие рекламные баннеры и другая избыточная информация должны располагаться вслед за основным текстом (эквивалентно размещению объектов в правом поле большого экрана). XHTML-структура сайта A List Apart является тому прекрасным примером.

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

Предотвращение перехлёста.

В связи с малыми размерами экранов и, в отдельных случаях, невозможностью горизонтальной прокрутки содержимого сайта, главной проблемой карманный устройств является перехлёст текста. Уместив всю информацию в одну колонку, необходимо убедиться, что элементы веб-страницы вписываются в ширину экрана. Изображения и формы имеют фиксированную ширину; присвоив им параметр max-width: 100, можно заставить их не покидать пределов экрана.

Для текстовых блоков, отформатированных с помощью тэга <pre>, следует задать как можно более частые переносы (в пределах 20-30 знаков), либо обозначить разбивку длинных строк, добавив к таблице стилей следующее правило CSS:

pre { white-space: -pre-wrap;

/* Opera CSS Extension */

white-space: pre-wrap;

/* CSS 2.1 Addition */}

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

Долой динамические эффекты!

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

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

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

Уменьшение изображений.

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

Постараемся облегчить жизнь пользователям КПК. Для начала скроем ненужные изображения при помощи display: none, тем самым запретив Opera их загружать. Затем попросим Opera выводить вместо изображений alt-текст:

img.as-text { content: attr(alt); }

Помните, что смысл альтернативного текста – в замене изображения, а не описании его содержания. Если изображение носит декоративный характер, alt-текст должен представлять собой пустую строку (« »).

Для изображений, которые все-таки требуется вывести на экран, установите атрибуты width и height. Это зафиксирует расположение элементов на странице и предотвратит её «расползание» после загрузки изображений. То, что предназначено для большого экрана, не всегда хорошо выглядит на экране карманного компьютера; поэтому откадрируйте, уменьшите, и/или оптимизируйте размер изображений, предназначенных для просмотра на КПК.

Наконец, присвойте навигационным элементам и заголовкам сайта свойства обычного текста.

Оптимизация HTML.

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

• Не перегружайте разметку элементами class, <div> и <span>; используйте более подходящие тэги HTML, при необходимости вместе с подклассами. Избавляйтесь от элементов, в незаменимости которых возникают сомнения. При всякой возможности используйте существующие классы вместо того чтобы вводить новые.
• Выбирайте тэги, соответствующие назначению и структуре документа. Семантические тэги HTML, в отличие от авторских классов и тэгов изменения шрифта, обладают общепризнанными значениями. Семантическая разметка позволяет весьма распространенным на КПК браузерам, не поддерживающим CSS, выводить страницы в удобочитаемом виде. Семантические тэги значительно короче комбинаций div+class, что способствует уменьшению объемов загружаемых страниц.
• Вводите семантические, а не презентационные имена классов и id. Программный код должен объяснять, зачем вы присваиваете элементу стиль, а не каким образом вы его присваиваете; в этом случае разметка станет универсальной, а стили и макет будет легко изменять, не затрагивая разметку. Код, написанный в соответствии с этим правилом, экономит место и лучше читается.

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

Заставляем Opera использовать CSS.

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

По умолчанию Opera предполагает, что веб-страницы создаются для настольных систем. На большинстве карманных компьютеров изначально включена функция переформатирования страниц под ширину экрана, что приводит к игнорированию авторских стилей (если только страница не содержит таблицы стилей, созданной специально под КПК). Чтобы Opera обнаружил наличие на странице стиля для КПК, установите параметр «handheld» в атрибуте media для <link> или <style>. Другой способ – использовать приспособленные под КПК правила @media или @import:

<link rel="stylesheet" href="..." type="text/css"

media="handheld">

<style type="text/css" media="handheld">...</style>

<style type="text/css">

@media handheld { ... }

</style>

<style type="text/css">

@import url(...) handheld;

</style>

Если страница предназначена для вывода и на других устройствах, перечислите все типы предполагаемых устройств через точку с запятой, не забыв, конечно, упомянуть карманные («handheld»):

<link rel="stylesheet"

href="site-style.css"

type="text/css"

media="handheld,all">

При наличии «handheld» в списке устройств, Opera отключит SSR и будет использовать таблицы стилей, предназначенные для КПК – включая те из них, где не указаны типы устройств или присутствует параметр media="all". Opera не станет загружать внешние таблицы стилей для проверки правил @media или @import, не отключив функцию переформатирования страницы под ширину экрана. Именно поэтому следует обязательно указать наличие таблицы стилей для КПК на HTML-странице.

По завершении трудов не забудьте протестировать код. За отсутствием доступа к карманному устройству с установленным Opera, можно переключить обычную версию браузера в карманный режим нажатием Shift+F11.

Практические результаты.

Проиллюстрируем данный подход при помощи таблицы стилей и комментариев к ней, созданных специально для сайта A List Apart и позволяющей просматривать содержимое сайта на карманных устройствах. Таблица располагается по адресу /d/pocket/handheld.css. Работоспособность скрипта можно проверить, переведя браузер в режим КПК и посетив страницу /d/pocket/.

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