Всячески пытаясь понять чем руководствуется дизайнер создавая дизайн мобильного сайта приходишь к выводу что это точно не простота верстки и удобство программирования или какая-либо другая благая цель, способная облегчить процесс создания продукта. Для дизайнера это удобство использования мобильного сайта (usability). Что именно дизайнер вкладывает в это понятие не ясно до момента окончания разработки, а это значит что создателей ожидает длительный совместный терновый путь.
Чтобы облегчить задачу совместного взаимодействия и удачно сделать мобильный проект потребуется сфокусироваться на трех основных частях работы: удобство пользования (юзабилити), легкая верстка (XHTML), быстрый и правильно структурированный алгоритмический код.
Совместить все три компонента достаточно сложно. Практически всегда преобладает какое-то одно направление, за что отвечают сотни факторов начиная с несговорчивого программиста заканчивая поджимающими сроками разработки.
Удобство пользования (юзабилити).
Всё начинается с проектирования мобильного сайта. Хорош не тот дизайнер, которому нечего добавить, а тот, кому не осталось что убрать. Мобильные сайты сами по себе ориентированы на специфическую группу пользователей с более-менее четко выраженными характеристиками. Но в подавляющем большинстве случаев от мобильного сайта требуется самая актуальная информация о чем-то. Например, какая ценовая политика у ресторана, какое расписание на сегодня у кинотеатра, что ставят сегодня в театре. Ну и конечно нужна контактная информация — телефоны, и-мейлы, адреса. А архивы, драгоценные склады документации, многотомные научные труды и всё, что требует пристального долгого внимания — ни к чему.
Кроме того, что информация должна быть максимально релевантной для пользователя и его сиюминутных нужд, она должна быть качественно и, главное, удобно представлена.
Легкая верстка (XHTML).
Сверстать мобильный сайт проще, чем стационарный веб-сайт, но точно не быстрее. Чтобы ускорить процесс потребуется стартовая информация.
Вначале - точно узнать чего хочет дизайнер, провести с ним несколько часов в обсуждении подачи информации и выявить сложные или нестандартные моменты в дизайне. Даже когда перед вами будут все нарисованные и согласованные станицы, это не значит что вам нужно сразу все нарезать и отправить программисту.
Во-первых перед началом работ требуйте от дизайнера "чистый" шаблон.
Не: "- Отключи все слои и сверстай!",
а полностью чистую версию картинки сайта только с "шапкой", "фоном" и "футером". Верстать желательно "срубом"! Древние славяне придумали чудесный метод верстки деревьев в дома! Это когда каждый следующий слой лежит на предыдущем и в критический момент можно засунуть свежее полено(слой) между двумя другими. Такая верстка избавит вас от возможно сложных переделываний шаблонов.
Полученная контрольная страничка (шапка, фон, футер) будет основой для всего проекта. Советую ни на шаг не отходить от изначального шаблона и ни в коем случае не привносить новых дизайнерских решений, - этот этап уже прошел.
Во-вторых старайтесь нарезать как можно проще, отделяя структурные элементы слоями, а динамические - параграфами, но сильно экономить байты ни к чему. Главное - избегать глубокой вложенности слоёв. Но, при необходимости, сверстайте сложные моменты отдельно несколькими способами. Чем проще будет верстка тем легче она будет для мобильного браузера. Основную нагрузку нужно сделать на CSS, а код мобильного сайта оставить минималистским.
К примеру:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Деревянные дома</title>
<link rel="stylesheet" href="stls-iPhone.css" type="text/css" />
</head>
<body>
<div class="header"></div>
<div class="logotype"></div>
<div class="back_forward"></div>
<div class="article_name"></div>
<div class="article_content"></div>
<div class="article_autor"></div>
<div class="special_class_for_designer"></div>
<div class="footer"></div>
</body>
</html>
Быстрый и правильно структурированный код.
Как правило все мобильные сайты требуют собственную CMS, так как супер-навороченные современный портальные ЦМС оставляют груды мусора в коде и делают мобильный сайт тяжелым для мобильного трафика.
О разработке Content Manager System можно говорить бесконечно, и сея задача остаётся на совести разработчиков.
Начнем с нарезки которую нам прислал верстальщик. Вот! Наконец-то прислали правильную верстку и у нас есть единая, контрольная байт-страница. Которую мы будем использовать как основной шаблон.
Первый запуск шаблона.
���������� ���� - что это?
Мобильные сайты обязательно нужно кодировать в UTF-8. Это условие для нормального отображения русских (украинских) букв и специальных символов на мобильном девайсе. Перед выдачей шаблона в браузер проверьте правильный ли заголовок (header) сервер выдает браузеру. Это однозначно должен быть Content-Type c UTF-8 на борту. Легче всего будет настроить Appache с помощью файла .htaccess или командой скриптового языка (если таковой имеется).
Сборка шаблонов в страницу.
Шаблоны лучше всего разбить по типам.
Например, для формирования новостной ленты, сохранить шаблон news_elemet.html со следующим контентом:
<div class="news_title_name"></div>
<div class="news_annotation"></div>
и за тем получить этот шаблон в переменную.
Для быстрого доступа к мобильным шаблонам нужно сформировать массив из всех шаблонов страниц:
HTML['news_name'] = '
<div class="news_title_name"></div>
<div class="news_annotation"></div>
';
HTML['main_page'] = '
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Деревянные дома</title>
<link rel="stylesheet" href="stls-iPhone.css" type="text/css" />
</head>
<body>
<div class="header"></div>
<div class="logotype"></div>
<div class="back_forward"></div>
<div class="special_class_for_designer"></div>
<div class="footer"></div>
</body>
</html>
';
и т.д.
Далее подстановкой собираем нужную страницу. Такой способ ускорит сборку страниц, но серьёзно может нагрузить сервер, если речь идёт о мобильном портале с сотнями уникальных элементов. В таком случае запрашивайте элементы HTML кода OnFly - только те куски кода, которые необходимы в данный момент. Скажем так, серверу все-равно нужно будет считать HTML код с диска и тут это считываение можно контролировать программно. К тому же в случае резкой смены курса дизайна - легко поменять шаблоны.
Очень часто наши клиенты просят сделать оффлайн версию сайта уже после того, как проект был создан и чтобы уберечь вас от тонны переделок мы рекомендум сохранять каталогоподобную структуру мобильного веб сайта.
Пример: http://domen.name/news/1/index.html
Мобильные сайты созданные таким образом будут динамичны, легко изменяемы и, по сути, безупречны.