Дизайн для портативных устройств

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Умещаем всё в 1 дисплей

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

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

Что до форматированных блоков (

): мы или ужимаем плотненько-плотненько текст (с длиной строки по 25-30 знаков), или разрешаем разрывать строки при переносе. Последнее возможно сделать, добавив в вашу таблицу стилей последующие правила:
pre { white-space: -pre-wrap;
/* Расширение CSS для браузера Opera */
white-space: pre-wrap;
/* Дополнение для CSS 2.1 */}
 


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