Создание сайтов для мобильных платформ
Итак, особенностью создания сайтов под мобильные платформы является особенная нужда в резиновости сайта, т.к. просмотр сайта возможен как в горизонтальном положении, так и в вертикальном (автоповорот экрана), а еще критичней это из-за того, что просмотр сайта возможен как на мобильном мини-компьютере или мобильном телефоне, так и на сравнительно большом планшетнике.
Существуют специальные спецификации и рекомендации для разработки сайта под мобильные платформы:
- XHTML заголовок несколько отличается от обычного
- Следует использовать не сокращенные форматы представления данных и их определений, например
не
color:#fff;
а
color:#ffffff;
а так же, желательно не
margin:0px
, а отдельно каждое определение, т.е.
margin-left:..., margin-top:...
и т.д. Возможно, теперь большинство браузеров нормально обработает страницу, но береженого Бог бережет :-)
- подход к картинкам должен быть особо тщателен - не следует делать особый упор на картинках. Идеальный вариант, если Вам удастся сделать красивый мобильный сайт совсем без графики, только стилями... дело в том, что некоторые браузеры пережимают картинки, даже PNG... выходит очень странно. Так поступает по-умолчанию Опера, например так поступает моя опера под Андроидом. Эту опцию можно и отключить, но это совсем не очевидно, поэтому разработчик сайта обязан учитывать этот момент.
Разработка сайта
- Скачайте эмулятор мобильной версии Оперы. Для создания сайта - это Ваш первый шаг
- Создание главной страницы сайта. В отличии от сайта для рабочих станций, главная страница сайта для мобильных устройств обязана содержать ТОЛЬКО следующие элементы
- логотип вверху (не более 30-50 пикселей в высоту)
- меню сайта (не слишком много, не более 10)
- возможно, некоторая справочная информация мелким шрифтом, копирайт или что-то в этом роде
- Никакая внутренняя страница сайта не может содержать главное меню, а лишь ссылку вроде "Вернуться на главную страницу"... места и так слишком мало, чтобы размещать повторяющуюся информацию на каждой странице.
- Дизайн контраста: не увлекайтесь дизайном, весь текст, ссылки должны быть отчетливо видны - не забывайте, что Ваш сайт, возможно, читают с мобильного телефоне в полумраке, а слабый контраст создает большую нагрузку для глаз. То что позволено для сайта оьчного - не дозволительно для мобильного.
- Все script и style элементы должны находится в самой странице, а не в подключаемых файлах. (спецификация XHTML Mobile Profile 1.0)
Пример кода главной страницы сайта для мобильных устройств
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Главная страница</title>
</head>
<body>
<div id="head"><a href="/"><img alt="Image" width="100" height="25" src="./logo.gif"/></a></div>
<div id="content">
<p>Мобильная версия</p>
<p>
Тут можно разместить меню
</p>
</div>
</body></html>
Удачи!