Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

22.01.2010 | Рубрики: Верстка
Тэги: pda-версия сайта, мобильный интернет

Не за горами приход Nexus One, который, судя по некоторым данным, станет убивцем iPhone. Ну, во всяком случае, в плане ожидаемой стоимости. Хотя пока все это слухи. Но речь не о том. Интернет, как среда обитания (да, да, для некоторых хомо сапиенсов оно уже так и есть), становится все более мобильным. А стало быть, владельцам сайтов пора уже конкретно призадуматься о том, как отображаются их детища на экранах мобильных устройств а ля PDA.

В спецификации CSS 2 давно уже определен ряд устройств вывода информации, и к каждому из них можно применить индивидуальный набор правил. Выражаясь языком научным, это дает возможность создавать аппаратно-зависимые стили.

К примеру, если путь к внешнему css файлу прописать в коде страницы таким образом:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

то данные стили будут применены к сайту при отображении его только лишь на экранах мониторов. Ключевое слово здесь — screen.

Если же нам нужно дать возможность вывести страницу сайта на печать, то мы должны создать для этого отдельный файл css, в котором убирается все лишнее: фоновые изображения, картинки-кнопки, свойства ссылок и т.п. Понятно, что для печати все это добро лишнее. Но чтобы принтер не съел лишнего, мы должны показать, что у нас есть специально подготовленный лист стилей. Тогда ссылка на него будет выглядеть уже так:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Думаю, принцип понятен.

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

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />

Все супер гуд! Но возникает сразу же вопрос — что конкретно должно быть или отсутствовать в данном листе стилей? С принтами понятно: все лишнее долой. Но для PDA что можно определить как лишнее? Ведь по сути, на экране мобильного устройства мы видим все тот же сайт, что и на большом мониторе, а стало быть вся функциональность должна присутствовать, но при этом не загромождать маленький экранчик.

Во-первых, следует учитывать, что в мобильных устройствах все содержимое выводится в одну единственную колонку. Пусть даже в реалиях сам сайт состоит из 2-х, 3-х, 5-ти и т.д. Поэтому всевозможные float-ы в стилях для блоков просто бесполезны.

Во-вторых, ширина экрана большинства современных PDA “гуляет” в пределах 200 пикселей. Значит, и задавать жестко ширину блоков в стилях не имеет смысла. Нужно всегда указывать 100%

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

Примеры стилей для PDA можно посмотреть на следующих ресурсах:

http://pda.lenta.ru/
http://pda.blogs.yandex.ru/
http://pda.yaca.yandex.ru/yca/tungrp/cat/Computers/Internet/pda/
http://pda.computerra.ru/
http://pda.kp.ru/
http://pda.gismeteo.ru/gm/normal/node/main/3/

Сохраните любую из этих страниц и поковыряйтесь в коде стилей. Простота там рулит.

Если вы заметили, то все указанные ресурсы специально для мобильных версий самое себя размещены на поддомене с соответствующим именем. Это на самом деле удобно. Но! Это удобно только в том случае, когда одна и та же новость или статья автоматически попадает в PDA-версию сайта. На указанных ресурсах этим занимается специальная программная часть. А как такое можно реализовать, например, для CMS? Для Wordpress уже есть несколько специальных плагинов. Об одном из них — WP-PDA, писал Дмитрий Донченко. У него вы можете скачать русифицированную версию плагина. Принцип действия не слишком понятен, ибо описание у автора плагина весьма скудное. Вроде как плагин сам определяет версию браузера и автоматом там что-то предпринимает для этого.

Пара других плагинов более вразумительная. Это WordPress Mobile Edition и Smooci. Оба также на автомате определяют браузер, которым пользователь просматривает сайт, и для PDA подставляет совершенно другой шаблон. Что весьма удобно. Все-таки настроить отдельный шаблон проще, чем пытаться перекроить основной.

Ну, а теперь, пожалуй, самый сложный вопрос: а на кой все это действительно нужно? Ведь сейчас даже обычные мобильные телефоны имеют на борту встроенный браузер, который вполне адекватно отображает большинство сайтов и даже умеет ресайзить картинки. Да, при этом картинки имеют тот же вес и жрут массу трафика. Да, сама страница грузится достаточно долго. Но все-таки работает же. Так имеет ли смысл извращаться со стилями?

Я думаю, что изначально следует исходить из самой специфики (читай — тематики) сайта. Например, для новостного портала PDA версия — это уже устоявшийся джентльменский минимум. Там мобильная версия в самую что ни на есть в тему. Блог, обновляемый ежедневно да не по одному разу? Тоже пойдет. Хотя именно здесь следует рассмотреть ситуацию более подробно.

Не каждый блог, как впрочем и не каждый статичный сайт, имеет смысл запихивать в тесные рамки PDA. Возьмем, к примеру, сайты, где приоритетом является визуальная составляющая. Сайты-портфолио, дизайнерские ресурсы, фото-сайты и т.п. Какой смысл делать для них специальную PDA-версию, если в результате на экранчике не будет толком ничего видно?

Опять же, для чтения блогов многие пользователи с успехом пользуют обычную rss-ленту. Откомментить, правда, через rss не получится.

Поэтому такая моя имха: если ваш ресурс по преимуществу содержит текстовую информацию, то вперед — на штурм! Если же преобладает визуальная, то смысла дергаться нет. Может кто-то думает иначе? Прошу отметиться в комментах.