Общие шаблоны

Дизайны мобильных сайтов строятся, как правило, на базе общих стилевых шаблонов.

Свойство display

Для свойства display наиболее распространенными являются значения: none, block, inline. Эти значения поддерживаются, но не полностью. Если ты попробуешь динамически при помощи JavaScript изменить значение — многие браузеры просто не отобразят изменения.

Есть также и другие значения вроде inline-table, table-column, table-cell, которые я не рекомендую использовать. Из-за отсутствия поддержки в Internet Explorer они, как правило, не применяются и для декстопных веб-сайтов.

И вообще, зачем нам в мобильном Вебе применять CSS свойства для табличной разметки? Если нам нужно представить пользователю табличные данные, то можем сделать это в HTML, а не путем использования CSS свойств.

Даже если мы разрабатываем под какие-нибудь новые смартфоны, как например Nokia N900, где ширина экрана составляет 800 пикселей, все равно нужно избегать использования макетов с более чем с 2-мя колонками. Даже размером в 800 пикселей — это небольшой экран и всегда нужно помнить о ситуации, в которой пользователь обычно использует смартфон и будет читать этот текст.

Мы будем активно использовать правлило display: none в JavaScript и Ajax разработке. В следующей главе мы протестируем динамическую совместимость браузеров с этим свойством.

Абсолютное и плавающее позиционирование

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

Плавающие элементы в большинстве мобильных устройств отлично работают (таблица 7.9). Но, даже в устройствах со средним размером экрана лучше не размещать более двух плавающих элементов в одной строке. В таком случае лучше использовать float: left и float: right.

Относительное позиционирование (position: relative) уже сложнее в реализации в случае с мобильными браузерами. Такой тип позиционирования определяет смещение от исходного положения (для указания значения смещения используются свойства top, bottom, right, left) .

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

Для создания плавающего футера существует JavaScript решение, называется iScroll. Главная проблема при использовании такого типа решений — они влияют на производительность наших сайтов.

Фиксированное позиционирование (position: fixed) не поддерживается всеми мобильными браузерами (таблица 7.9) и его не рекомендуется использовать для мобильных веб-сайтов. Проблема в том, что в мобильных браузерах мы прокручиваем само окно, а не контент. И в зависимости от зума или размера окна, для фиксированного позиционирования могут быть разные значения.

В Интернете существует движение, направленное на ликвидирование этой проблемы в будущем. Можешь почитать о нем на сайте http://www.abettermobileweb.com, где объясняется суть проблемы фиксированного позиционирования и как ее можно будет в будущем решить.

Ричард Эррера (Richard Herrera, http://www.doctyper.com) также создал для iPhone и других браузеров с движком WebKit несколько JavaScript и CSS-решений для эмуляции фиксированного позиционирования.

Скроллинг и фокус-навигация могут доставить нам проблемы с абсолютным позиционированием. А с z-index проблемы могут возникнуть на low- и mid-end устройствах.

В соответствии со стандартом WAP CSS свойства position и z-index не являются обязательными и потому наличие или отсутствие их поддержки зависит уже конкретно от браузера.

Скругленные углы

Дизайнеры, кажется, просто обожают скругленные углы (pисунок 7.6) и в течении многих лет это был кошмар каждого разработчика, которому приходилось верстать блок со скругленными углами. Табличная верстка скругленных углов не подходит для мобильного Веба и здесь мы можем рассчитывать только на CSS. Если устройство не поддерживает соответствующие стили (см. таблица 7.10) — забудь про скругленные углы для него.

Рис. 7.6. Возможность закругленных углов позволяет нам скруглить какую-либо определенную границу или цвет фона на совместимых устройствах.

У WebKit для скругленных углов есть расширение (-webkit-border-radius); в Mozilla также есть аналогичное (-moz-border-radius), но оно очень слабо поддерживается в мобильных устройствах.

Другой вариант решения проблемы — при помощи canvas нарисовать прямоугольник со скругленными углами. Подробнее об этом элементе HTML5 поговорим позже (глава 9).

Свойство -webkit-border-radius может быть определен одним значением (как 5 пикселей или 10 %), двумя значениями (top-bottom и left-right) или четырьмя — для каждого угла отдельно.

Заголовки

Стандартный вариант для low- и mid-end устройств: для создания заголовка нужно положится на HTML теги и CSS. Более лучший вариант — указать ширину равную 100%, задать цвет фона, верхнюю и нижнюю границы и padding:

		h1 {
			width: 90%;
			text-align: center;
			background-color: red;
			color: white;
			border-top: 6px solid #500;
			border-bottom: 6px solid #500;
			padding: 8px 20px;
			clear: both;
			font-size: larger;
		}
	

На рисунке 7.7 можем увидеть, как очень простой CSS применяет некоторые стили к заголовку без использования изображения.

Рис. 7.7. С простыми CSS мы можем создать приятный дизайн без картинок (и задержки в сети). Мы можем сделать больше для смартфонов, как мы увидим в последующих главах.

Псевдоклассы

Псевдоклассы :link, :active, :focus и :visited совместимы со всеми XHTML-браузерами и стандартами. Вопрос: когда применяются псевдоклассы? Некоторые ситуации хорошо всем известны: например, :link используется для еще не посещенных пользователем ссылок, а :visited — для тех ссылок, которые уже в истории просмотра.

Так что там насчет псевдоклассов :focus и :active? Сценарии их поведения могут отличаться в зависимости от типа навигации в мобильном браузере: фокус-, курсор- или тач-навигация.

Хорошо известный псевдокласс :hover не доступен нам в стандарте WAP CSS, но он совместим с большинством не-сенсорных устройств и предлагает аналогичный с мышью сценарий поведения в устройствах с фокус-навигацией. В сенсорных устройствах нет события наведения мышью на объект — невозможно обнаружить какие-либо движения пальцем, пока пользователь не коснется конкретного объекта.

В некоторых интерфейсах на сенсорных мобильных устройствах применяется шаблон двойного касания — при единичном нажатии на значок элемента получается hover эффект, а двойное касание уже воспринимается как клик. Реализовать такой эффект можно при помощи JavaScript и обработки событий.

Помни, что даже если браузер поддерживает этот псевдокласс, он все равно не будет работать на сенсорных устройствах.

В таблице 7.11 демонстрируется ситуация с поддержкой псевдоклассов в различных мобильных браузерах.

Фоны

Изменение цвета фона — это была первая функция из XHTML MP, которую стремился использовать каждый WML-разработчик. Это же был просто рай после старого черно-белого WML. Каждый мобильный браузер понимает свойство background и его специальные определения вроде background-image и background-repeat. Но мы всегда должны помнить о том, что декстопным компьютером и мобильным устройством человек пользуется, как правило, в разных ситуациях и условиях. Поэтому не рекомендуется использовать сложный фон. И лучше использовать сильный цветовой контраст между фоном и контентом.

В браузерах с соответствующей поддержкой отличным решением для уменьшения количества сетевых запросов будет использование для фонов URI шаблонов. Единственная функция, при использовании которой на мобильном устройстве могут возникнуть проблемы — background-attachment: fixed. Эта функция позволяет фону даже после прокрутки оставаться в фиксированном положении.

Назначение нескольких фоновых изображений (разделенных запятыми) нельзя назвать хорошим вариантом для мобильных браузеров. Кажется, браузеры Symbian S60 вообще одни из немногих, кто поддерживает такую возможность. Некоторые браузеры WebKit (например, мобильный Safari), также понимают отдельные CSS3 в виде расширений вроде -webkit-background-origin и -webkit-background-size. В таблице 7.12 указано, какие браузеры поддерживают background.

Overflow

Типичной практикой в декстопном веб-дизайне является использование <div> (или какого-нибудь другого элемента) с фиксированным размером и контентом, который превышает размер родителя. При помощи свойства overflow мы можем выбрать значение scroll, auto, visible (по умолчанию) или hidden, для того чтобы указать, что должно происходить с контентом, которые выходит за границы элемента. Если мы будем использовать значение scroll, то у <div> будет своя полоса прокрутки в устройствах, где есть соответствующая поддержка.

Использование свойства overflow может быть также проблемно, как и с техникой iframe. Даже в устройствах, где есть поддержка могут возникнуть проблемы с юзабилити — пользователь не сразу сможет определиться, какую полосу прокрутки нужно перемещать — основную или внутреннюю. И даже если это работает, остается еще куча проблем в мобильных браузерах, начиная с сенсорных устройств, где скроллинг вообще не поддерживается и заканчивая мобильными устройствами, которые скрывают контент, выходящий за границы элемента и при этом не предоставляют полосу прокрутки. Еще хуже поддерживаются свойства CSS3 overflow-x и overflow-y. В таблице 7.12 раскрывается ситуация с поддержкой свойства overflow.

Content

Свойство content позволяет нам использовать псевдоэлементы :after и :before, чтобы определить какое изображение, текст или значение атрибута будут вставлены после или перед селектором. Проблема в том, что эти псевдоклассы не определены в сабсете WAP CSS и поэтому они будут работать не на всех устройствах.

В некоторых браузерах свойство content можно применять к любому селектору, но так делать, как правило, не рекомендуется, потому что это приводит к тому, что мы вставляем текст и контент в CSS вместо (x)HTML документа.

Код следующего примера добавляет две звезды после текста ссылки и буллит перед ним:

	a:after {
		content: " ** "
	}
	a:before {
		content: url('bullet.gif');
	}
	

В таблице 7.12 приведены данные о поддержке свойства content.

Opacity

Во многих low и mid-end устройствах на мобильных сайтах не будет работать альфа-прозрачность, поэтому мы должны использовать его с осторожностью. CSS 2.1 свойство opacity не определено в сабсете WAP CSS, но мы можем использовать его для тех браузеров которые его могут обрабатывать. Какие браузеры поддерживают это и другие свойства прописано в таблице 7.12.

Списки

В предыдущей главе мы много говорили об упорядоченных и неупорядоченных списках. Теперь пришло воспользоваться возможностями CSS и их оформить. Для этого у нас есть типичные CSS свойства списка — list-style-type, list-style-image и list-style-position, а также сжатый вариант — list-style.

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

Для дизайна твоего сайта будет лучше, если для буллитов будешь использовать изображение. Помни, что на устройствах с соответствующей поддержкой мы можем использовать data URI изображения и избегать таким образом дополнительных запросов для изображений.

Visibility

Свойство visibility позволяет скрывать и показывать элемент. Это свойство присутствует во всех мобильных стандартах и мы спокойно можем использовать его значения visible и hidden. А вот со значением collapse уже могут быть проблемы.

Управление курсором

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

Для мобильных сайтов лучше всего использовать курсоры default, pointer и progress. Другие доступные курсоры (resize и move) довольно сложно использовать в мобильной среде. Курсор pointer нужно использовать для определения активных элементов, которые не являются ссылками.

Курсор progress часто применяется к <body> вместе с JavaScript, чтобы показать пользователю, что выполняется какая-то операция. Для браузеров с поддержкой сенсорной и фокус-навигации мы это можем реализовать используя модальное pop-up окно с анимированным изображением (loader).

Модальные Pop-up окна

Модальный pop-up — это может быть <div>, который во время отключения и/или постепенном затухании фонового контента выводит на экран важную для пользователя информацию.

В мобильном Вебе рекомендуется использовать модальные pop-up окна только для смартфонов и то, делать это очень внимательно и осторожно. Если нам нужно показать пользователю простой текст, то лучше использовать стандартную JavaScript функцию window.alert.

В таблице 7.13 показано в каких браузерах поддерживаются курсоры progress и pointer.

Куда дальше

• следующая — CSS спрайты
• предыдущая — CSS методы
• содержание