Стратегия создания адаптивных сайтов

Сегодня веб-сайты используются на множестве различных устройств, а с выпуском новых планшетов и компьютеров, оптимизированных для Windows 8, это разнообразие будет только увеличиваться. Оптимальным вариантом для максимально широкой аудитории будут веб-сайты, способные корректно адаптироваться к различным характеристикам отображения и пользовательским методам ввода. В данном разделе обсуждаются стратегии использования компонентов в Internet Explorer, позволяющие создавать сайты и веб-приложения, которые отлично выглядят и поддерживают различные типы устройств под управлением Windows 8 и пользовательские методы ввода.

Общие сведения об адаптивном дизайне

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

С 2010 года, когда Этан Маркотт создал термин адаптивный дизайн, он расширил свое значение в веб-сообществе: теперь он охватывает все методы создания продуманных интерфейсов сайтов, независящих от размеров экрана пользователя, скорости соединения, возможностей сенсорного ввода и других параметров устройств.

Если вы хотите найти общие ресурсы, посвященные адаптивному веб-дизайну, то о нем написано много превосходных статей и демонстрационных программ, например следующих:

Далее в этом разделе рассматриваются новые компоненты, поддерживающие создание адаптивного, быстро реагирующего веб-сайта в Internet Explorer, а также стратегии вписывания Internet Explorer и устройств под управлением Windows 8 в крупные проекты по дизайну адаптивных веб-сайтов.

Рассмотрим два способа создания адаптивных веб-сайтов: отображение и ввод

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

Невозможно осуществить разработку и тестирование для каждой платформы, которая может встретиться у ваших пользователей. Многие владельцы сайтов предпочитают создавать несколько версий сайта, которые ориентированы на несколько конкретных представленных на рынке комбинаций "веб-платформа + устройство". При таком огромном количестве устройств, позволяющих работать в Интернете, что можете сделать вы как веб-разработчик, чтобы подготовиться к новой экосистеме устройств под управлением Windows 8? Ответ во многом зависит от стратегии содержимого вашего сайта, ресурсов разработки и общих целей. Однако если ваша общая цель — предоставить наилучшее возможное взаимодействие максимально широкой аудитории, важно обдумать различные сочетания характеристик отображения и возможностей пользовательского ввода устройств, на которых ваша аудитория просматривает и использует веб-содержимое. Хотя макет и обработка пользовательского ввода — взаимосвязанные факторы в целостном сбалансированном дизайне для взаимодействия в Windows 8, поддержка сенсорного ввода не обязательно подразумевает определенные характеристики отображения, и наоборот. Например, рассмотрим следующие нетривиальные варианты.

  • Ноутбук с широким экраном без поддержки сенсорного ввода, обновленный до Windows 8, может выполнять настроенный на минимальную ширину Internet Explorer с новым интерфейсом Windows. При этом ширина окна просмотра примерно соответствует ширине экрана обычного мобильного устройства.
  • Нетбук без поддержки сенсорного ввода, обновленный до Windows 8, может иметь тот же размер экрана, что и распространенный планшет с сенсорным вводом.
  • Моноблок Windows 8 с 24-дюймовым сенсорным экраном может использоваться исключительно для запуска приложений Магазина Windows для Windows 8, например Internet Explorer 10, без подключения мыши и клавиатуры.

Аналогичным образом, хотя Internet Explorer для Windows 8 и поставляется в двух вариантах — Internet Explorer с пользовательским интерфейсом Windows и классический браузер Internet Explorer, — характеристики отображения или сенсорного ввода не позволяют точно определить, с помощью какого именно интерфейса Internet Explorer пользователь просматривает сайт. Размер окна Internet Explorer с пользовательским интерфейсом Windows можно изменять в диапазоне от 320 пикселей (минимальная ширина) до ширины всего экрана главного устройства, а классический браузер Internet Explorer может переключаться в полноэкранный режим и обратно (с помощью клавиши F11). На оборудовании с сенсорным управлением сенсорный ввод поддерживается в обоих режимах. В целом не существует программного способа обнаружить, в каком варианте запущен Internet Explorer — с пользовательским интерфейсом Windows или как классический браузер.

Чтобы обеспечить максимальную совместимость вашего сайта с браузерами, рекомендуется распознавать не браузеры, а компоненты при определении типа взаимодействия с сайтом, которое следует предоставить пользователю. Та же самая стратегия применяется для двух интерфейсов просмотра в Internet Explorer для Windows 8. Целесообразно взять различные характеристики отображения и методы пользовательского ввода, характерные для аудитории сайта, за две отправные точки при создании удобных для пользователей макетов и применять дополнительные возможности сенсорного ввода, чтобы обеспечить правильную работу на различных устройствах под управлением Windows 8.

Стратегии дизайна адаптивного сайта с устройствами Windows 8

Вот некоторые общие рекомендации для создания адаптивных сайтов с помощью Internet Explorer в Windows 8.

Используйте распознавание компонентов вместо того, чтобы строить предположения о возможностях конкретного браузера или устройства. Internet Explorer в Windows 8 — это единая веб-платформа с двумя отдельными пользовательскими интерфейсами, и невозможно определить, с помощью какого интерфейса пользователь будет просматривать сайт. Используйте запросы носителя и методы обнаружения сенсорного ввода, чтобы получить сведения о характеристиках отображения и возможностях ввода устройства.

Адаптируйте взаимодействие с сайтом к характеристикам отображения и возможностям ввода устройства. Не разрабатывайте дизайн на основе предположений, будто определенные значения или диапазоны значений ширины окна просмотра привязаны к возможностям или ограничениям ввода. Вместо этого рассматривайте макет сайта и обработку пользовательского ввода по отдельности или, что еще лучше, продумайте различные комбинации методов ввода и экранов, которые могут применять пользователи Windows 8. Используйте запросы носителя и прослушиватели запросов носителя, чтобы настроить макет и стили сайта в диапазоне характеристик отображения, и не забывайте об адаптации CSS к устройству для переопределения автоматического масштабирования. Соблюдайте рекомендации по дизайну для сенсорного ввода, воспользуйтесь моделью указателя Internet Explorer, чтобы легко обрабатывать ввод с помощью мыши и пера, сенсорный и мультисенсорный ввод, а также улучшайте интерфейс сенсорного ввода для сайта с помощью событий жестов.

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

Две таблицы, разделенные осью х: табличные списки ширины окна просмотра 320 пикселей, 768 пикселей и 1024+ пикселей и табличные списки методов и устройств ввода: мышь и клавиатура, перо, сенсорный ввод.

Если для сайта уже предусмотрено несколько конкретных форматов, используйте их в соответствии с общими эвристическими правилами и дайте пользователям возможность переключаться между форматами. Если вы уже создали несколько версий сайта для определенных классов устройств, представленных на рынке, используйте предыдущую таблицу, чтобы сопоставить существующие интерфейсы мобильного устройства, планшета и настольного компьютера с различными размерами окна просмотра и пользовательскими методами ввода в Internet Explorer для Windows 8.

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

Связанные разделы

Дисплей и макет
Адаптация к устройству
События ориентации устройства
Макет на основе адаптируемых блоков
Макет сетки
Запросы носителя и прослушиватели
Разметка с несколькими колонками
API ориентации экрана
Обработка ввода
Оптимизация сайта для сенсорного ввода

 

 

Показ:
© 2014 Microsoft