Сейчас, на многих сайтах присутствует форма приветствия посетителей. Эта область, обычно, появляется для новых посетителей, объясняя суть сайта и его функционал.
Приветственные страницы, как правило, более распространены на личных сайтах, портфолио, или интернет-магазинах. Они менее популярны на новостные сайтах (где вместо приветствия, обычно располагается сводка новостей). Конечно, области с приветственной частью не считаются необходимыми на сайтах с понятной тематикой и уже сложившейся аудиторией – например, нет никакого смысла размещать приветствие на CNN.com, поскольку посетители, скорее всего, уже и так знают, что это.
Очень часто достаточно прочесть слоган, чтобы определить, о чем идет речь на сайте. Поэтому, если вы хотите сэкономить пространство на сайте, то лучше использовать краткое описание – бриф в одну строчку.
Подготовка страницы к принятию этих запросов в действительности ничем не отличается от вызова внешнего файла CSS. Все, что нам нужно, это добавить несколько параметров в строку HTML-кода. Хорошей идеей будет создать три отдельных CSS файла для вашего сайта, каждый из которых предназначен для какого-то одного типа устройств. Очень часто вы можете встретить подобные файлы с названиями mobile.css, tablet.css и screen.css. Давайте начнем с того, что взглянем на саму ссылку и посмотрим, как мы можем структурировать ее в строке, располагаемой в заголовке файла HTML5:
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 340px)" />
В примере выше я запросил «мобильный» файл CSS, поскольку это устройство, вносящее наиболее существенные изменения в наш макет. Для приспособления нашего контента под другие характеристики, к примеру, разрешение планшетника, ваш HTML не будет существенно отличаться от приведенной выше строки для мобильных устройств. Ключевыми элементами, интересующими нас в этой статье, являются медиа-параметры:
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" /> <link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />
Ваш сайт в планшетном стиле не должен сильно отличаться от оригинальной desktop-версии. Когда речь заходит о планшетных и мобильных устройствах (к примеру, продукции Apple) вам не помешает следовать стратегии продуманного содержимого. Дело в том, что устройства Apple не визуализируют Flash-контент. Именно здесь пригодятся возможности HTML5 работать с аудио и видео. Впрочем, мы поговорим об этом в следующий раз. А пока, возможно, вам пригодится услуга it аудит.
Чем дальше в лес…
Теперь, когда вы настроили «медиа» параметры в HTML заголовке, перейдем непосредственно к сборке CSS. Первым делом начнем с планшета.
Вам не придется менять в теле CSS ничего по сравнению с существующим screen.css, но давайте взглянем на содержимое селектора в нашем tablet.css. Нам нужно изменить значение ширины контейнера на 700 пикселей так, чтобы оно совпадало с размерами медиа-запроса, написанного нами ранее для планшетника.
Теперь мы можем начать изменять размеры нашего содержимого. Предположим, в качестве элемента дизайна мы решили включить область с изображением. Создадим уменьшенную версию изображения, подходящую под размеры макета для планшетника и взглянем на нашу CSS.
Теперь мы изменим ширину текстовой зоны, чтобы она вписывалась в размеры документа:
#container #content { padding: 20px 20px 30px 20px; width: 680px; }
Последним, но не менее важным штрихом будет работа с текстом внутри нижнего колонтитула. Если вы взгляните на раздел #footer, вы заметите, что вся работа с ним заключается в простой замене ширины. К примеру:
Верите или нет, это все, что вам нужно знать о портировании на планшеты. В следующей статье я расскажу вам о работе с мобильной CSS и о том, как можно применить эти знания на практике.
С возникновением абсолютно нового рынка мобильных устройств и планшетов, необходимость адаптировать свой сайт под различные платформы становится актуальной как никогда прежде.
Существует старый, давно проверенный метод использования набора целевых HTML страниц с применением JavaScript для перенаправления вас на соответствующую страницу и последующей согласованной стилизации контента. Однако, вы можете значительно упростить свою работу, воспользовавшись богатыми возможностями CSS3 и медиа-запросов.
Среди интересных особенностей HTML 5 следует также отметить легкоиндексируемые теги, которые он будет включать. Главным образом HTML 5 улучшит сегментацию страниц. Это будет осуществляться с помощью тегов верхнего и нижнего колонтитулов, а также nav-тегов. Такой подход будет очень полезен для SEO. Одним из наиболее интересных тегов является "article". Этот тег как нельзя лучше подойдет для идентификации ключевого контента, который сможет содержать обратные ссылки на различные сайты и будет весьма важен для построения системы ссылок. Улучшение сегментации страниц поможет Google и другим поисковым системам легко индексировать сайт при выполнении комплексных функций.
Похоже, о HTML 5 с каждым днем говорят все больше и больше по мере того, как работа над ним приближается к завершению. Наиболее часто поднимаются вопросы о том, что же такое HTML 5 и какое влияние он окажет на SEO. Не важно, нравится нам это или нет, но рано или поздно HTML 5 придет на замену нынешней версии HTML и нам в любом случае придется им пользоваться. И оптимизировать свои сайты под него соответствующим образом – если, конечно, мы и дальше хотим оставаться в списке лучших. Возможно вам и не хочется это слышать, но отказываясь от будущего HTML 5 вы, вместе с ним, отказываетесь и от лучших средств SEO-оптимизации.
