Полезные элементы в контейнере <HEAD>
для мобильных сайтов

Этим постом я закончу предыдущий и одновременно начну серию статей на тематику мобильного веба.
Думаю, все в курсе, что мобильные девайсы в настоящий момент активно захватывают мир. Еще год назад по данным Stat Counter доля мобильного интернет-трафика в мире составляла 4%, на данный момент это значение уже равняется 8% с копейками, а это двукратный рост, на минуточку. Что интересно, тенденция 2*x прироста мобильного трафика наблюдается с 2009 года, когда его доля составляла 0,7%. (Последний отчет СтатКаунтера)
И что совсем интересно — этот рост не только не остановится, но и будет увеличиваться. Например, специалисты из Ericsson прогнозируют, что мобильный трафик данных вырастет к 2016 году в десять раз. А еще одни специалисты из не менее уважаемой компании Cisco прогнозируют рост в 18 раз — пруф.

Из всего вышенаписанного можно сделать вывод, что если кто из веб-разработчиков еще не окунулся в мир мобильного веба, то сейчас самое время это сделать.
В этой статье я рассмотрю те элементы контейнера <head>, которые десктопные олдскульные верстальщики возможно и не встречали в своей практике.

Начнем с самого первого тега, в который добавим небольшой апгрейд:

<!--[if IEMobile 7 ]> <html class="iem7" lang="en"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html lang="en"> <!--<![endif]-->

Таким нехитрым способом с помощью условных комментариев (conditional comments) тегу <html> присваивается класс .iem7 в том случае, если страница открыта в браузере IE Mobile. Иногда бывает это полезно, так как известно, что браузеры от Microsoft не идеальны. А с помощью дополнительного класса мы можем в случае чего сделать развилку стилей.
Статья о таргетировании CSS для Windows Phone

Appcache

<html manifest="default.appcache">

Также, для хеда можно сделать дополнительный апгрейд — добавить параметр manifest и включить поддержку appcache (Application Cache). Эта часть спецификации HTML5 позволяет использовать веб-приложение в оффлайн режиме. Да, в браузерах есть собственный механизм кеширования, но он ненадежен и не всегда работает так, как мы от него ожидаем. (Примечание: На iPhone/iTouch кэшируются файлы размером не более 25 Kb).
Использование appcache предоставляет следующие преимущества:

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

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

CACHE MANIFEST
img/splash.png
img/apple-touch-icon.png
css/style.css
js/libs/jquery-1.7.1.min.js
js/libs/modernizr-2.5.min.js

Кстати, для этого файлика существует официальный валидатор

Title

<title>Заголовок</title>

Да, стандартный тег для задания заголовка страницы. Функция этого тега аналогична десктопной, однако стоит учитывать некоторые особенности. На некоторых устройствах title страницы используется в качестве заголовка в самом верху экрана; в других же title используется как текст по умолчанию для закладок и истории. Кроме того, по сравнению с десктопным браузером, в мобильном под title отведено довольно мало места — в среднем от 15ти до 40ка символов (60 в горизонтальном положении). Исходя из этого мобильные заголовки желательно делать короткими и значимыми, а не такими, какими советуют сеошники :).

HandheldFriendly

<meta name="HandheldFriendly" content="True">

Мета-тег HandheldFriendly изначально поддерживался старыми моделями Palm и Blackberry, где использовались такие браузеры, как AvantGo. Там тег использовался для определения разметки, ориентированной на мобильные устройства. Сегодня этот мета-тег также распознается некоторыми мобильными браузерами и параметр “true” служит индикатором того, что на странице использована оптимизированная для мобильных устройств разметка. Кроме того, он служит директивой для того, чтобы веб-документ отображался без автоматического масштабирования. (документация)

MobileOptimized

<meta name="MobileOptimized" content="320">

Мета-тег MobileOptimized был введен компанией Microsoft для того, чтобы контролировать ширину макета веб-страниц, которые рендерятся в браузере Internet Explorer Mobile. Контент мета-тега задается как целое число в пикселях. В IE Mobile наличие этого мета-тега принуждает страницу отображаться одной колонкой с заданной шириной, тем самым избавляясь от попыток браузера самостоятельно подогнать макет по размеру так, чтобы он помещался в экран. Кроме того, это позволяет избавиться от полосок горизонтальной прокрутки.
Некоторые мобильные не MS браузеры могут также использовать этот мета-тег для тех же целей. Более того, поисковые роботы, индексирующий сайты для мобильных устройств, также используют этот мета-тег для определения мобильно-ориентированного HTML. почитать подробнее

Viewport

<meta name="viewport" content="width=device-width">

Этот метатег я умышленно пропущу и вернусь к нему в отдельной статье, т. к. он важен и требует более детального рассмотрения.

Иконки

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/h/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/m/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="images/l/apple-touch-icon-precomposed.png">

Safari в iOS и дефолтный браузер в Андроиде обладают полезной функцией сохранения закладок на сайты и веб-приложения на рабочем столе, наряду с иконками для обычных приложений. Для таких типов закладок можно указать иконку, положив в корень сайта PNG картинку размером 57x57px с названием apple-touch-icon.png. Также можно указать иконку для отдельной страницы или раздела сайта, используя тег link со значением apple-touch-icon в аттрибуте rel и адресом картинки.
С появлением iPhone 4/4s и iPad, требование к этой иконке изменились – теперь она должна быть размером 114×114 для айфона или 72×72 для айпада. В принципе, размер этой иконки может быть и больше, мобильный сафари самостоятельно сожмет ее до нужного размера, плюс скруглит углы, добавит небольшую тень и эффект стеклянности к иконке. Выглядит это как-то так:

Также, поддерживается полупрозрачность иконок. В этом случае прозрачные области будут залиты черным цветом:

При желании от стеклянного эффекта можно отказаться, прописав вместо apple-touch-icon значение apple-touch-icon-precomposed.
Многие рекомендуют всегда использовать precomposed-иконки, чтобы всегда держать под своим контролем их дизайн.
Тем не менее, даже если вы решили использовать только apple-touch-icon-precomposed.png, есть смысл также оставить запись и с apple-touch-icon.png для максимальной совместимости — к примеру iOS 1 и BlackBerry OS6 не поддерживают precomposed.
Кстати, если подразумевается, что ваш сайт будет рассчитан на работу только с мобильными девайсами от Apple, то можно вообще отказаться от ссылок на иконки в HTML коде. Достаточно создать версии изображения в нужных размерах, задать им правильные названия и положить в корень проекта. Небольшая документация по этому поводу

Стоит сказать, что Android в свое время тоже научился распознавать эти иконки и использовать аналогично iOS устройствам — заявлена поддержка версий 2.1+. (Примечание: Android 2.1 поддерживает только precomposed иконки) — прув

<link rel="shortcut icon" href="images/l/apple-touch-icon.png">

Позволяет задать иконку для некоторых других устройств, например некоторые модели смартфонов Nokia.

<link rel="apple-touch-startup-image" href="images/l/splash.png">

Эта строка позволяет задать картинку загрузки (splash image) при открытии закладки с рабочего стола.
Выглядит это примерно следующим образом:

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

  • 320×480 (iPhone < 4, iPod Touch)
  • 640×960 (iPhone 4+, новый iPod Touch)
  • 768×1004 (iPad portrait)
  • 1024×748 (iPad landscape)
<meta name="apple-mobile-web-app-capable" content="yes" />   

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

<meta name="apple-mobile-web-app-status-bar-style" content="default">

Меняем дизайн статус-бара — тонкой полосы в самом верху экрана, где отображается время и иконка заряда батареи.

Для того, чтобы его изменить, используется мета-тег apple-mobile-web-app-status-bar-style.

Здесь может быть один из трех вариантов – default, black или black-translucent.
Default — оставит его в стандартном синем дизайне, black — заставит изменить фон на черный. black-translucent — также сделает статус-бар черным, но добавит к нему полупрозрачность — это немного расширит видимую область контента, что возможно потребует дополнительных правок в css. (документация)

Некоторые дополнительные мета-теги, которые могут быть включены при надобности:

<meta http-equiv="cleartype" content="on">

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов. Чем многие и пользуются :).

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">

Эти строки позволяют отключить автоматическое распознавание форматов. Проще говоря, если вы где-нибудь на странице указали номер телефона в html-коде и не указали в хедере, то смартфон распознает его как телефонный номер и попытается набрать его по клику. То же самое и с адресом.

8 мнений о Полезные элементы в контейнере <HEAD>
для мобильных сайтов

  1. Pingback: Что такое Viewport, как он работает и для чего вообще нужен | frontender.com.ua

  2. день добрый.
    можно ли как-то заставить принудительно мобильное устройство распознавать телефонные номера? Сейчас это происходит некорректно((( Обрубается часть номера. Это как-то лечится? Спасибо

    • многое зависит от того, в каком виде вы задаете эти номера

      обычно достаточно задать в ссылке что-то типа такого
      href=»tel:+1234567890″

  3. Инфа оказалась полезной, практически вся. Я разрабатываю свой движок и наткнулся на одну проблему. Мой движок для мобильного сайта. О проблеме. Когда просматриваеш страницы сайта с пк все элементы растягиваются в ширину окна браузера а мне нужно чтобы и div элементы и общий фон были в мобильном режиме тоесть в одну колонку под мобильное устройство и по возможности чтобы элементы не выскакивали за границы body при открытии страницы на древних мобильниках. Как и что мне прописать в head чтобы это получилось.Пришлите пожалуйста инфу или ссылку по решении этой проблемы на почту kniazleonid@mail.ru

  4. Читал вашу статью по использованию «мета тегов» нашел много интересного, буду использовать на своем сайте wordpress-live.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *