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

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

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

 

 

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

Прокрустово ложе

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

Итак, что же эти ограничения значат для дизайнера?

• Укладывайтесь в одну колонку, избегая плавающих блоков ;
• Оптимизируйте ваш HTML-код, используя рациональную и семантически грамотную разметку, а также CSS;
• Сведите к минимуму число декоративных изображений. Создавая навигацию, не полагайтесь на картинки и плагины;
• Снабжайте изображения хорошим пояснением в атрибуте alt;
• Не применяйте динамические эффекты в навигации, для которых обычно требуются мышь или клавиатура.

Уменьшаем масштаб

Даже если со временем возрастёт разрешение экрана "наладонников", их физическая ширина всё равно будет не больше, чем ваш карман. Отсюда наиболее важный вывод: на страницу можно поместить только один столбец текста. Кроме того, вам необходимо, чтобы колонка была широка настолько, насколько это возможно - т.е. так, чтобы она не была похожа на стихотворение (текст должен быть без выключки вправо; не иметь "рваный" правый край. - Прим. перев.).

Прежде всего, избегайте использовать размер в пикселях для всего, что крупнее 5px (именно так!). Пиксельные размеры больше, чем этот, будут плохо масштабироваться - используйте для них проценты или "em".

Уменьшите ширину полей, отступов и границ сообразно ограничениям маленького экрана. 3em перед заголовком хороши для экрана монитора, но для "наладонника" это - чересчур. Ширину границ следует лишь слегка уменьшить, а отступы надо "урезать" пропорционально. Это поможет уменьшить избыточные границы и разрядку (spacing) в некоторых вариантах компоновки страниц: на маленьких экранах они будут казаться "ужатыми".

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

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

Выстраиваем в линию

Лучше всего страница вытягивается в одну колонку тогда, когда её структура специально приспособлена для этого. Если документ структурирован сообразно логике, у вас есть гарантия, что такая организация страницы будет понятна не только в версии Оперы для портативных устройств, но также и в браузерах, не поддерживающих CSS (и тех, что установлены в небольших устройствах, и тех, что в "больших" компьютерах), в голосовых браузерах, и в терминальных браузерах типа Lynx.

Свёртывание макета в одну колонку на удивление просто осуществить (конечно, если для вёрстки вы используете CSS): просто отбросьте или отмените правила, добавляющие плавающее и абсолютное позиционирование. Если основой вашего макета служит таблица - прикажите ячейкам вести себя как блочные элементы:

table, tbody, tr, td, th {
display: block; }

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

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

Умещаем всё в один экран

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

К элементам с фиксированным размером относятся изображения и элементы форм. Для того, чтобы они не вылезали за пределы экрана, задайте им максимальную ширину в 100% (max-width: 100%).

Что касается форматированных блоков (<pre>): мы либо ужимаем плотненько-плотненько текст (с длиной строки по 25-30 символов), либо разрешаем разрывать строки при переносе. Последнее можно сделать, добавив в вашу таблицу стилей следующие правила:

pre { white-space: -pre-wrap; /* Расширение CSS для браузера Opera */ white-space: pre-wrap; /* Дополнение для CSS 2.1 */}

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

Отказываемся от динамики и эффектов

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

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

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

Ужимаем графику

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

Вы можете сделать свой дизайн менее нагруженным графикой, следуя этим советам:

• Спрячьте ненужные изображения с помощью display: none - Opera не будет их скачивать.
• Используйте для навигационных элементов настоящий текст, а не графические файлы.
• Укажите Опере использовать содержимое атрибута alt вместо скачивания самого изображения:

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

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

Не забывайте писать для изображений альтернативный текст, наполненный смыслом. Помните, идея атрибута alt состоит в том, что он не описывает картинку, а заменяет ее. Если изображение служит лишь для декоративности, alt должен содержать пустую строку ("").

Оптимизируем HTML

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

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

Попросим Оперу применять ваши стили

Что ж, теперь вы знаете, как верстать для портативных устройств - настало время убедиться, что в Опере включена поддержка этих стилей:

Opera работает с мыслью, что большинство веб-страниц не приспособлено к показу в портативных устройствах. Если включен режим "fit to screen" (настройка "по умолчанию" для большинства устройств), то авторские стили игнорируются и страницы переформатируются под небольшой экран, за исключением тех случаев, когда страница имеет специальный файл со стилями для "наладонников".

Чтобы указать Опере на наличие стилей для "наладонников", в элементе <link> или <style> в атрибуте media запишите значение "handheld", или, если ваш CSS код содержится в теле страницы, воспользуйтесь директивами @media или @import, указывающими на тип устройств:

<link rel="style sheet" 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>

Если эта таблица стилей применяется также и к другим типам устройств (а то и ко всем сразу) - перечислите их в атрибуте media, разделив названия запятыми. И не забудьте явно вписать туда ещё и handheld. Например:

<link
rel="style sheet"
href="site-style.css"
type="text/css"
media="handheld,all"
/>

Если среди подключенных таблиц стилей найдётся хотя бы одна, имеющая атрибут handheld - Opera отключит внутренний режим SSR, и начнёт применять все таблицы стилей, написанные для портативных устройств (включая таблицы без указания типа устройства или таблицы с media="all"). Opera не загрузит внешние таблицы стилей, содержащие директивы @media или @import rules до тех пор, пока не принято решение о выключении режима отображения "растянуть на весь экран". Следовательно, вы должны непосредственно в самой HTML-странице явно указать на наличие стилей для портативных устройств.

Завершив работу над дизайном, протестируйте его. Если вам недоступно портативное устройство с установленным на нём браузером Opera - эмулируйте поведение "наладонника" на настольном ПК, запустив страницу в Опере и нажав Shift+F11.

Взгляните на пример

Для иллюстрации представленного выше подхода (адаптация дизайна под специфику "наладонников") мы создали таблицу стилей для ALA (с media="handheld"), снабдив её комментариями. Файл доступен по адресу /d/pocket/handheld.css. Вы можете оценить работоспособность, просмотрев /d/pocket/ в соответствующем браузере.

Opera вышла на своё собственное решение проблемы того, что при возросшем числе портативных устройств лишь незначительная часть веб-сайтов приспособлена к показу страниц на них. Будь Сеть идеальной - Опере бы не пришлось "тянуть на себе" все эти уловки, нужные для втискивания страницы в узкий экран. Однако мы искренне надеемся, что всё большее число веб-авторов станет проявлять интерес к созданию своих собственных приёмов, способных помочь созданию действительно качественного дизайна для "наладонников". Сделать так, чтобы веб-сайты выглядели превосходно и на небольших экранах, сложно, но всё-таки нет ничего невозможного.

Йорун Даниелсен Ньюф работает техническим писателем в компании Opera Software ASA.

Elika Etemad (Fantasai) эксперт-консультант в W3C CSS Working Group. В свободное время на добровольных началах помогает развитию проекта Mozilla.