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

Еліком Етемад (Elika Etemad) і Йорун Даніелс Ньюф (Jorunn D. Newth)

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

Браузер 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 %).

Що стосується форматованих блоків (

): ми або стискується плотненько-плотненько текст (з довжиною
рядка по 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
повинен містити пустий рядок (""). [Cпецификации XHTML
має на увазі, що атрибути без значень повинні обов'язково використовувати в
як такі власні імена, тобто, в даному випадку alt = "alt". - Примітка перекл.] 
  Оптимізуємо   HTML  
 Застосовуйте
ефективну, семантично грамотну розмітку, а турботу про зовнішній вигляд залиште CSS. Таблиці стилів (CSS) більш потужний засіб, більше
компактне, не захаращують документ надлишкової інформацією про його зовнішній вигляд.
Ці якості хороші при роботі з будь-якими media-пристроями, але особливо корисними вони стають у процесі
верстки для портативних пристроїв. 
 Не
переборщіть з class-ами, div-ами і span-нами. Якщо є більш відповідний HTML тег, використовуйте його, додавши,
за потребою, особливий class.
Якщо в елементі немає особливої потреби, приберіть його. Якщо можете підібрати підходящий
на контекст клас, не вводьте новий. 
 Використовуйте
теги, найкраще передають суть і структуру контенту. Семантичні HTML теги мають загальновизнаний
сенс, чого не скажеш про вигаданих авторами класах і варіантах відображення
тексту в різних шрифти. Крім інших вигод, логічно чітка розмітка
дозволяє браузерів, не підтримують CSS (їх частіше зустрінеш на портативних
пристроях, ніж на настільних комп'ютерах), показувати користувачеві
зрозумілий, зрозумілу контент. Семантичні теги, до речі, набагато коротше,
ніж конструкції типу div + class - а це позначається на
зменшенні "ваги" файлу. 
 Створюйте
семантичні, а не оформлювальні класи і ідентифікатори. Якщо ваш код сам
пояснює, чому даний
елемент оформляється саме так, а не як
він оформляється, ваша розмітка не буде прив'язана до певного оформлення. У
майбутньому оформлення та компонування сторінки можуть бути легко змінені без
зміни розмітки. Код, написаний з урахуванням цих правил, звичайно набагато більше
компактний і читабельний. 
 розміщуйте
скрипти та стилі в зовнішні файли. У цьому випадку браузер буде їх кешувати,
що скоротить час завантаження з сайту наступних сторінок. 
 Попросимо Оперу застосовувати ваші стилі 
 Що
ж, тепер ви знаєте, як верстати
для портативних пристроїв - настав час переконатися, що в Опері включена
підтримка цих стилів: 
 Opera працює з думкою, що більшість
веб-сторінок не пристосоване до показу в портативних пристроях. Якщо включений
режим "fit
to screen "(налагодження" по
умовчанням "для більшості пристроїв), то авторські стилі ігноруються і
сторінки переформатується під невеликий екран, за винятком тих випадків, коли сторінка має
спеціальний файл зі стилями для "надолонників". 
 Щоб
вказати Опері на наявність стилів для "надолонників", в елементі  або