Главная/ Учимся Javascript, CSS, HTML/ Бонус книги/ Programming The Mobile Web/ Coding Markup/ Тело документа. Основная структура. Разработка для мобильного Веб. Maximiliano Firtman

Тело документа. Основная структура

Подготовили: Анна Лысак и Татьяна Головко

Дата публикации: 17.06.2011

Тело — наиболее важная часть документа и именно тело определяет контент, который будет виден пользователю.

Основные рекомендации:

  • Избегай использования тегов форматирования (<center>, <br>, <font>, <b>, <i>, <u>, <s>, <sup>, <sub>, <tt>, <span>, <marquee>).
  • Используй семантически правильный, чистый XHTML; стили мы определим позже при помощи CSS.
  • Не делай документы больше 25-ти Кб, так как тяжелые документы провоцируют проблемы на старых браузерах и даже проблемы с кешированием на новых.
  • Если тебе нужно показать много текста — разбей его на несколько страниц.
  • Не используй таблицы для разметки.

Классические декстопные опции тега <meta> вроде refresh и cache-control отлично работают и в мобильных браузерах. Для мобильных устройств не самый подходящий вариант использовать метатег refresh для автообновления документов: трудности с прокруткой в некоторых мобильных браузерах и нежелательные обновления страницы врядли будут приятны пользователю.

Почти каждый мобильный браузер поддерживает кеширование при помощи или мета-тегов или HTTP заголовков (headers). В некоторых случаях <meta> подойдет больше. Например, когда нужно установить точную дату, до которой документ будет закеширован:

<meta http-equiv="expires" content="Mon, 5 Mar 2012 01:01:01 GMT" />

Основная структура

Типичный мобильный документ разделен на четыре основных раздела:

  1. Заголовок (Header)
  2. Основная навигация
  3. Контент
  4. Футер

Заголовок должен быть максимально простым; здесь используется <h1>, <title>, и/или лого или баннер компании. Основная навигация должна состоять не более чем из 5 ссылок, упорядоченных в соответствии с вероятность использования (от наиболее часто используемых к наиболее редко). С контентом думаю и так все ясно; в футере должна быть очень краткая информация об авторских правах, ссылка на главную страницу, ссылка «Назад» и другие связанные ссылки (например, «наверх страницы»).

Я знаю — это очень просто и примитивно. Но большинство мобильных веб-страниц действительно должны соответствовать такой структуре. Если же структура твоей страницы сложнее, то хорошенько подумай, оправданы ли эти усложнения.

Ад транскодеров

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

  • Он без нашего на то согласия сжимает контент, документ, CSS, JavaScript и изображения.
  • Он меняет нашу разметку и дизайн.
  • Он может изменить даже язык разметки
  • Он удаляет все исходные (оригинальные) HTTP-заголовки из браузера, тем самым лишая нас информации, какие устройства получают доступ к сайту.

Лука Пассани (Luca Passani, известный веб-разработчик) в 2008 году опубликовал манифест на тему решения проблемы с переформатированием контента. W3C тоже озаботились это проблемой и опубликовали документ под названием Content Transformation Landscape. Позже мы детальнее изучим проблему транскодеров.

Базовая структура документа должна выглядеть следующим образом. В целом, нет необходимости разделять каждый раздел тегом <div>, но при оформлении с помощью CSS это может вполне пригодиться. Вместо использования <div> главное меню может быть в виде неупорядоченного списка (<ul>):

<body>
<div id="header">
<h1>Mobile Web</h1>
</div>
<ul id="nav">
<li><a href="Tests">Tests</a></li>
<li><a href="Blog">Blog</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
<div id="content">
</div>
<div id="footer">
</div>
</body>

У <div> основного контента также в качестве дочерних элементов должны быть только теги <h2–h6>, <p>, <ul> и, если есть необходимость — другой <div&gt. Я знаю, это совсем не впечатляет. Но, при помощи CSS и, возможно, JavaScript библиотек (подготовленных специально для смартфонов) из этой простой разметки мы создадим отличные проекты для high-end устройств. Использование простой структурой документа будет одним из лучших решений в мобильном мире во избежание дублирования контента.

Меню навигационных ссылок

XHTML MP 1.2 рекомендует для навигации использовать связанные ресурсы. Меню навигационных ссылок — это серия тегов <link>, которые обычно определены в элементе <head>, который обращается к главному индекс-файлу (Home) и, возможно, следующие и предыдущие страницы в серии связанных документов. Эти ссылки могут быть полезны для индексирования и SEO оптимизации. Вот пример меню навигационных ссылок для показа фото №2 в фотогалерее:

<link rel="start" href="/" />
<link rel="next" href="photo3/" />
<link rel="prev" href="photo1/" />

«Наверх страницы»

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

<body>
<div id="header">
<a name="top"></a>
<h1>Mobile Web</h1>
</div>
…
<div id="footer">
<ol>
<li><a href="#top">Go to Top</a></li>
<li><a href="/">Go Home</a></li>
</ol>
</div>
</body>

Куда дальше

Теги: , , ,
Показать комментарии