Рассчитаны ли ваши сайты на просмотр с помощью мобильных устройств? Виржиния ДеБолт дает несколько тем для размышлений и предлагает техники тестирования сайта, на различных мобильных устройствах.

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

В этой статье я затрону тему создания доступного для пользователей мобильных устройств контента, написания CSS стилей для медиа типа handheld, и тестирования сайта на различных устройствах. Пользователям Dreamweaver и Flash я предлагаю обратить внимание на новые продукты Adobe упрощающие тестирование страниц для мобильных устройств.

Основы

Если вы начали с соответствующего стандартам HTML и семантической разметки, то вы уже в игре. Хорошо структурированный документ с чистой, семантической разметкой, хорошо отображается, удобен и доступен на любом устройстве, включая мобильные. Использование CSS чтобы отделить контент от оформления, сделает ваш сайт доступным даже на самых простых мобильных устройствах. Обратите внимание и на другие базовые элементы, например, хороший альтернативный текст для изображений, соответствующие метки для полей форм.

Чистая, семантическая разметка критична для удобства просмотра сайта с помощью мобильных устройств, особенно если учесть огромную разницу между ними. Некоторые телефоны поддерживают только WAP, другие могут понимать WAP2, что позволяет им отображать сайты с XHTML и CSS. Некоторые устройства имеют черно-белые дисплеи, другие цветные, некоторые поддерживают CSS, другие нет. Некоторые понимают только HTML 3.2 тогда как другие понимают XHTML. Некоторые устройства понимают таблицы, плавающие блоки, фреймы, JavaScript, динамические меню, но многие нет. Многие мобильные устройства не поддерживают cookie. Наиболее продвинутые мобильные устройства, такие как BlackBerry, Palm или iPhone, имеют возможности близкие к возможностям обычных компьютеров.

Все эти различия напоминают времена войн браузеров Internet Explorer 4 и Netscape Navigator 4, но есть две вещи которых тогда у нас не было, стандарты HTML и XHTML и возможность разделения контента и оформления с помощью CSS. Если вы будете придерживаться требований стандартов и отделять оформление от контента, доступность сайта для пользователей мобильных устройств не будет проблемой.

Тестирование

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

Opera предоставляет хороший инструмент для тестирования в стандартном браузере, выберите в меню View > Small Screen чтобы увидеть страницу в режиме отображения близком к мобильным устройствам. В панели для разработчиков есть кнопка Dispay которая позволяет отключить CSS (без панели для разработчиков можно так: View > Style > ManageModes… > Presentation modes, галочка Page style sheet). Вот два примера того, как выглядит мой блог, Web Teacher, в этом режиме с включенными и выключенными CSS соответственно.

Обратите внимание что, контент расположен в том же порядке, что и в HTML файле, но если разметка семантическая то элементы остаются хорошо заметными и узнаваемыми, особенно хорошо это видно на втором изображении (с отключенным CSS). В данном случае в примере не были предусмотрены специальные стили для handheld устройств, но когда они есть, Opera в режиме Small screen использует именно их.

Для мобильных устройств существует бесплатный браузер Opera Mini, и платный (с несколько большими возможностями) Opera Mobile, оба доступны на opera.com. Поскольку продажи браузеров для мобильных устройств занимают не последнее место в бизнесе компании, в Opera разработали очень полезный эмулятор operamini.com/demo, с его помощью можно загрузить страницу в Mini Demo и с помощью мышки и клавиатуры работать как на обычном мобильном телефоне. На изображении видно, что Mini Demo отображает CSS и изображения, хотя в этом примере все еще нет специальных стилей для мобильных устройств.

Абсолютно бесплатный и очень простой способ для проверки структуры сайта заключается в использовании Firefox’s Web Developer extension. Отключив с его помощью изображения, JavaScript и CSS, вы получите представление о том, как будет выглядеть сайт в старых или имеющих ограниченные возможности телефонах.

Не забывайте, что некоторые старые мобильные устройства не понимают таблицы, и практически все не понимают фреймы, поэтому важно использовать соответствующую стандартам, семантическую разметку.

Специфические эмуляторы

На сайтах некоторых производителей телефонов и PDA можно найти эмуляторы их продуктов, предназначенные для тестирования. У некоторых производителей есть ресурсы для разработчиков, например, Sony Ericsson’s Developer World и раздел XHTML на форуме разработчиков Nokia.

Тестирование стилей для медиа типа handheld

Посмотреть результат применения специальных стилей для handheld можно с помощью Web Developer Toolbar в CSS > View CSS by Media Type > Handheld (если все стили в одном файле, то это не работает). На Web Teacher я использую простую двухколоночную разметку с float:left для div, содержащего контент, и большом margin-left для второй колонки. Для мобильных устройств я добавлю файл стилей, в котором сбрасываются размеры и float для колонки контента и сайдбара.

#content
{
    float: none;
    width: 95%;
}

#sidebar
{
    width: 90%;
    margin-left: 5%;
}

Ссылку на этот файл стилей нужно добавить в заголовочную часть документа, после ссылок на файлы для других медиа типов. Для этого я использую элемент link, это надежней использования @import, хотя некоторые продвинутые устройства понимают и его.

<link href="mobile.css" rel="stylesheet" type="text/css"
    media="handheld">

Браузер при отображении документа может использовать только один медиа тип. Если нужно задействовать все существующие стили и для мобильных устройств, можно перечислить несколько медиа типов через запятую media="handheld,all".

<link href="2col.css" rel="stylesheet" type="text/css"
    media="handheld,all">

<link href="mobile.css" rel="stylesheet" type="text/css"
    media="handheld">

Стили и цветовая схема из 2col.css будут использоваться и для мобильных устройств, а двухколоночная разметка будет отключаться в mobile.css.

На первом изображении показан обычный вид сайта, на втором с помощью Web Developer Toolbar командой CSS > View CSS by Media Type > Handheld включены стили для мобильных устройств.

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

Тестирование с помощью платных сервисов

До этого речь шла только о бесплатных способах тестирования, но существуют и платные сервисы для таких тестов, часто они стоят потраченных на них денег. Сервис Browser Cam, с помощью которого можно протестировать сайт в различных браузерах имеет дополнительную возможность, которая называется Device Cam, она позволяет протестировать сайт в некоторых PDA основанных на Windows Mobile, и в нескольких версиях BlackBerry.

Не отстают и бренды, Adobe предоставляет пользователям программ CS3, сервис Adobe Device Central. Device Central использует десятки скинов мобильных устройств для отображения вашего сайта. Вот пример отображения тестовой страницы с использованием скина Nokia 7390.

С помощью Device Central можно тестировать как готовые сайты, так и различные файлы из приложений Adobe CS3. Если включен small screen view, при отображении учитываются стили для handheld, в противном случае сайт отображается с использованием обычных стилей.

Советы для handheld CSS

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

Что нужно сделать, чтобы сайт был удобным для мобильных пользователей? Для начала нужно устранить все проблематичные элементы.

• Устраните float и фреймы
• Устраните лишние колонки, одна колонка, вначале которой расположен контент — лучшее решение
• Устраните такие эффекты как выпадающие меню, замените их чистым HTML
• Устраните декоративные изображения, они замедляют загрузку. С помощью display:none удалите все необязательные элементы, но помните, что это не помогает, если устройство не поддерживает CSS.
• Устраните вложенные таблицы и исключите разметку с помощью таблиц. Если у вас есть табличные данные, подумайте, как оформить их альтернативным способом.

После удаления лишнего можно приступать к создания необходимых стилей.

• Если вы еще не используете относительные единицы, самое время перейти на em или проценты вместо пикселей.
• Сделайте меньше поля, отступы и границы, чтобы эффективнее использовать небольшой экран
• Используйте меньший размер шрифта для основного текста и заголовков
• Если на сайте большой список навигационных ссылок вначале страницы, добавьте ссылку перехода к содержанию или переместите ссылки в конец документа. Постарайтесь свести к минимуму количество кликов необходимое для перехода к контенту. Без мышки или клавиатуры преодоление большого количества ссылок не самое приятное занятие.
• Контраст между цветом фона и текста должен быть достаточным, особенно для устройств с небольшим выбором цветов.

Советы для блогеров

Некоторые платформы для блогинга дают возможность отображать один и тот же пост с помощью различных шаблонов, один из которых может быть предназначен для мобильных пользователей. Получить доступ к упрощенным страницам обычно можно с помощью специального URL, например, mobile.mysite.com. Проверьте, есть ли такая возможность у вашей платформы. Не забудьте минимизировать количество постов на странице, чтобы ускорить загрузку.

Обобщая можно сказать, что, чтобы получить удобный для пользователей мобильных устройств сайт, нужно использовать соответствующий стандартам HTML или XHTML, семантическую разметку, делающую страницу удобной даже без CSS, и специальный файл стилей для мобильный устройств.

Похожие статьи

• Адаптивная разметка
• Как не испортить впечатление пользователя