Создание сайтов » Создаем мобильный сайт
Создаем мобильный сайт
Все больше и больше пользователей выходят в web с
мобильных устройств и игнорировать таких клиентов непозволительная роскошь. Перед разработчиком
встает вопрос адаптирования сайта для просмотра с наладонников и смартфонов.
Рассмотрим основные моменты создания мобильного сайта.
Для начала разработчику нужно определить тип мобильного устройства, с которого пользователь будет просматривать сайт. Используем атрибут media.
Атрибут media: устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.
<link rel=”stylesheet” href=”mobil.css” media=”handheld”>
Что необходимо изменить в стиле для мобильных устройств mobil.css:
Компоновку страниц: все колонки необходимо свести в одну; ширина колонки не более 480 точек
Удалить фоновые изображения
Удалить изображения для кнопок и навигации, заменить их текстовыми аналогами
Увеличить шрифт, сделать его более читаемым
Увеличить расстояние между объектами (display: block); для элементов, требующих нажатия добавить padding
Плавающие элементы (float) могут некорректно отображаться в мобильных устройствах. Их следует, по возможности, удалить.
Задать ссылки для номеров телефонов:
<a href=”tel: 19012372156” class=”phone-link”>(901)237 21 56</a>
(номер в ссылке должен начинаться с единицы)
Помните, что технологии и стандарты мобильных устройств и браузеров непрерывно изменяются, посему данная статья имеет срок годности :)
|
|
© 2010-2012. Перепечатка материалов только со ссылкой на it-folio.ru Сайт находится под управлением CMS MODx |
