Не переборщите с class-ами, div-ами и span-нами. Если есть более подходящий HTML тег, используйте его, добавив, по необходимости, особый class. Если в элементе нет особой нужды, уберите его. Если можете подобрать подходящий по контексту класс, не вводите новый.
Используйте теги, наилучшим образом передающие суть и структуру контента. Семантические HTML теги имеют общепризнанный смысл, чего не скажешь о придуманных авторами классах и вариантах отображения текста в различных шрифтах. Помимо других выгод, логически чёткая разметка позволяет браузерам, не поддерживающим CSS (их чаще встретишь на портативных устройствах, нежели на настольных компьютерах), показывать пользователю понятный, вразумительный контент. Семантические теги, кстати, гораздо короче, чем конструкции типа div+class - а это сказывается на уменьшении "веса" файла.
Создавайте семантические, а не оформительские классы и идентификаторы. Если ваш код сам объясняет, почему данный элемент оформляется именно так, а не как он оформляется, ваша разметка не будет привязана к определенному оформлению. В будущем оформление и компоновка страницы могут быть с легкостью изменены без изменения разметки. Код, написанный с учетом этих правил, обычно намного более компактен и читабелен.
Помещайте скрипты и стили во внешние файлы. В этом случае браузер будет их кэшировать, что сократит время загрузки с сайта последующих страниц.
Попросим Оперу применять ваши стили
Что ж, теперь вы знаете, как верстать для портативных устройств - настало время убедиться, что в Опере включена поддержка этих стилей:
Opera работает с мыслью, что большинство веб-страниц не приспособлено к показу в портативных устройствах. Если включен режим "fittoscreen" (настройка "по умолчанию" для большинства устройств), то авторские стили игнорируются и страницы переформатируются под небольшой экран, за исключением тех случаев, когда страница имеет специальный файл со стилями для "наладонников".
Чтобы указать Опере на наличие стилей для "наладонников", в элементе <link> или <style> в атрибуте media запишите значение "handheld", или, если ваш CSS код содержится в теле страницы, воспользуйтесь директивами @media или @import, указывающими на тип устройств:
<link rel="style sheet" href="..." type="text/css" media="handheld" />
<style type="text/css" media="handheld">...</style>
<style type="text/css">
@media handheld { ... }
</style>
<style type="text/css">
@importurl(...) handheld;
</style>
Если эта таблица стилей применяется также и к другим типам устройств (а то и ко всем сразу) - перечислите их в атрибуте media, разделив названия запятыми. И не забудьте явно вписать туда ещё и handheld. Например:
<link
rel="style sheet"
href="site-style.css"
type="text/css"
media="handheld,all"
/>
Если среди подключенных таблиц стилей найдётся хотя бы одна, имеющая атрибут handheld - Opera отключит внутренний режим SSR, и начнёт применять все таблицы стилей, написанные для портативных устройств (включая таблицы без указания типа устройства или таблицы с media="all"). Opera не загрузит внешние таблицы стилей, содержащие директивы @media или @importrules до тех пор, пока не принято решение о выключении режима отображения "растянуть на весь экран". Следовательно, вы должны непосредственно в самой HTML-странице явно указать на наличие стилей для портативных устройств.
Завершив работу над дизайном, протестируйте его. Если вам недоступно портативное устройство с установленным на нём браузером Opera - эмулируйте поведение "наладонника" на настольном ПК, запустив страницу в Опере и нажав Shift+F11.
Взгляните на пример
Для иллюстрации представленного выше подхода (адаптация дизайна под специфику "наладонников") мы создали таблицу стилей для ALA (с media="handheld"), снабдив её комментариями. Файл доступен по адресу /d/pocket/handheld.css. Вы можете оценить работоспособность, просмотрев /d/pocket/ в соответствующем браузере.
Opera вышла на своё собственное решение проблемы того, что при возросшем числе портативных устройств лишь незначительная часть веб-сайтов приспособлена к показу страниц на них. Будь Сеть идеальной - Опере бы не пришлось "тянуть на себе" все эти уловки, нужные для втискивания страницы в узкий экран. Однако мы искренне надеемся, что всё большее число веб-авторов станет проявлять интерес к созданию своих собственных приёмов, способных помочь созданию действительно качественного дизайна для "наладонников". Сделать так, чтобы веб-сайты выглядели превосходно и на небольших экранах, сложно, но всё-таки нет ничего невозможно.