Статьи, мысли, заметки...

Все статьи о дизайне

Создание мобильной версии сайта

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

Создай внятную семантическую разметку

Прочная основа хорошего мобильного (и не только) сайта — в четкой семантической разметке. То, без чего можно обойтись на обычном сайте, может создать проблемы при использовании его мобильной версии. Грамотная валидная верстка по стандартам W3C поможет обеспечить правильное отображение сайта практически любым браузером, а это в свою очередь произведет на посетителей сайта самое благоприятное впечатление.

Раздели контент и css-дизайн

Помимо семантически верной верстки, требуется также сделать контент, т.е. текст сайта, независимым от оформления, т.е. элементов дизайна сайта, создаваемых с помощью графики и таблиц стилей (css). Посетители мобильных сайтов, в отличие от пользователей настольных компьютеров, почти наверняка для экономии трафика будут просматривать страницы с отключенной графикой и CSS . Самое главное для таких посетителей – иметь доступ к контенту и ссылкам: оформление уходит на второй план. Сайт с четкой разметкой, где текст структурирован с помощью html-тэгов и хорошо читается без css, имеет все шансы на успех.

Пропиши Alt -атрибуты для изображений

Наверняка не все пользователи захотят просматривать картинки, поэтому очень важны Alt -теги. Понятно, что они должны использоваться в любом случае, но для мобильных версий сайтов это особенно актуально. Обязательно прописывай Alt для основного логотипа компании (если название сайта словами не прописано) и подписывай кнопки навигации, если уж случилась на тебя такая проруха, что ссылки на разделы сайта у тебя сделаны картинками или, не дай Ктулху, imagemap-ами! ))

Обозначь элементы форм текстовыми метками

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

Позаботься о заголовках

Учитывая, что мобильные браузеры не всегда отображают текст, отформатированный с помощью css адекватно, стоит уделить больше внимания заголовкам. Мобильные браузеры редко отображают текст так, как вам хочется, но теги h1, h2, h3 и т.д. помогают структурировать текст страницы для удобства пользователей.

Не используй плавающие блоки (свойство float)

Даже если мобильный браузер корректно отображает страницу, содержащую блоки контента с обтеканием (со свойством float), вряд ли она будет хорошо смотреться на маленьком экране: текстовые блоки или наедут друг на друга, или вытянутся длинным неудобным столбиком.. Как правило, наилучшим решением в таких случаях становится отказ от "плавающего" текста в пользу обычного, фиксированного.

Уменьшай поля и отступы (margins и padding)

Почти наверняка у мобильной версии вашего сайта значения отступов должны быть меньшие, чем на основном сайте. Конечно, все зависит от того, насколько велики они в данный момент. Помни: очень большие отступы в любом случае выглядят ужасно. На маленьком экране хочется сэкономить пространство и по максимуму заполнить его контентом. Сократи поля и отступы до минимума.

Уделяй внимание навигации

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

Создай цветовой контраст

Экраны мобильных телефонов не могут обеспечить такое же качество изображений, как у мониторов настольных ПК и ноутбуков, поэтому позаботься о том, чтобы цвета текста и фона были достаточно контрастными.

По материалам http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
Перевод: Дмитриевой Е.

наверх