Давайте рассмотрим некоторые моменты, которые должны учитывать дизайнеры во время работы над сайтом, если необходима мобильная версия, т.е. вариант сайта, который пользователи будут загружать на мобильный телефон, iPhone и прочие мобильные девайсы небольшого размера.
Прочная основа хорошего мобильного (и не только) сайта — в четкой семантической разметке. То, без чего можно обойтись на обычном сайте, может создать проблемы при использовании его мобильной версии. Грамотная валидная верстка по стандартам W3C поможет обеспечить правильное отображение сайта практически любым браузером, а это в свою очередь произведет на посетителей сайта самое благоприятное впечатление.
Помимо семантически верной верстки, требуется также сделать контент, т.е. текст сайта, независимым от оформления, т.е. элементов дизайна сайта, создаваемых с помощью графики и таблиц стилей (css). Посетители мобильных сайтов, в отличие от пользователей настольных компьютеров, почти наверняка для экономии трафика будут просматривать страницы с отключенной графикой и CSS . Самое главное для таких посетителей – иметь доступ к контенту и ссылкам: оформление уходит на второй план. Сайт с четкой разметкой, где текст структурирован с помощью html-тэгов и хорошо читается без css, имеет все шансы на успех.
Наверняка не все пользователи захотят просматривать картинки, поэтому очень важны Alt -теги. Понятно, что они должны использоваться в любом случае, но для мобильных версий сайтов это особенно актуально. Обязательно прописывай Alt для основного логотипа компании (если название сайта словами не прописано) и подписывай кнопки навигации, если уж случилась на тебя такая проруха, что ссылки на разделы сайта у тебя сделаны картинками или, не дай Ктулху, imagemap-ами! ))
Как и Alt -атрибуты, текстовые метки элементов форм делают сайт более удобным для посетителей его мобильной версии. Представьте, как можно использовать форму, не зная, что и где нужно напечатать или отметить. Простые вещи, вроде Alt-атрибутов и текстовых меток поля формы очень полезны в этом отношении.
Учитывая, что мобильные браузеры не всегда отображают текст, отформатированный с помощью css адекватно, стоит уделить больше внимания заголовкам. Мобильные браузеры редко отображают текст так, как вам хочется, но теги h1, h2, h3 и т.д. помогают структурировать текст страницы для удобства пользователей.
Даже если мобильный браузер корректно отображает страницу, содержащую блоки контента с обтеканием (со свойством float), вряд ли она будет хорошо смотреться на маленьком экране: текстовые блоки или наедут друг на друга, или вытянутся длинным неудобным столбиком.. Как правило, наилучшим решением в таких случаях становится отказ от "плавающего" текста в пользу обычного, фиксированного.
Почти наверняка у мобильной версии вашего сайта значения отступов должны быть меньшие, чем на основном сайте. Конечно, все зависит от того, насколько велики они в данный момент. Помни: очень большие отступы в любом случае выглядят ужасно. На маленьком экране хочется сэкономить пространство и по максимуму заполнить его контентом. Сократи поля и отступы до минимума.
У большинства веб-сайтов главное меню находится на самом верху страницы. Это работает и на мобильных версиях сайтов, но число пунктов там, как правило, сокращается. Оставьте только самые необходимые ссылки и по возможности обеспечьте пользователям легкий доступ к остальным пунктам навигации.
Экраны мобильных телефонов не могут обеспечить такое же качество изображений, как у мониторов настольных ПК и ноутбуков, поэтому позаботься о том, чтобы цвета текста и фона были достаточно контрастными.