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

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

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

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

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

Спрячьте ненужные изображения с помощью display: none - Opera не будет их скачивать.

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

Укажите Опере использовать содержимое атрибута alt вместо скачивания самого изображения:

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

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

Не забывайте писать для изображений альтернативный текст, наполненный смыслом. Помните, идея атрибута alt состоит в том, что он не описывает картинку, а заменяет ее. Если изображение служит лишь для декоративности, alt должен содержать пустую строку (""). [Cпецификация XHTML подразумевает, что атрибуты без значений должны обязательно использовать в качестве таковых собственные имена, т.е., в данном случае alt="alt". - Примечание перев.]

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

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

Не переборщите с class-ами, div-ами и span-нами. Если есть более подходящий HTML тег, используйте его, добавив, по необходимости, особый class. Если в элементе нет особой нужды, уберите его. Если можете подобрать подходящий по контексту класс, не вводите новый.

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

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

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

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

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

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

Чтобы указать Опере на наличие стилей для "наладонников", в элементе <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">

@importurl(...) handheld;

</style>

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

<link

rel="style sheet"

href="site-style.css"