Адаптивный дизайн – использование возможностей медиа-запросов

Вторник, 1 мая 2012 г.

Мы любим данные и тратим много времени на мониторинг аналитики наших веб-сайтов. Любой веб-разработчик, делающий то же самое, заметил рост трафика с мобильных устройств в последнее время. За последний год мы увидели, что многие ключевые сайты получают значительный процент просмотров страниц со смартфонов и планшетов. Они представляют собой огромное количество посетителей с современными браузерами, которые поддерживают новейшие HTML, CSS и JavaScript, но также имеют ограниченное экранное пространство с шириной всего 320 пикселей.

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

1. Наши страницы должны отображаться разборчиво при любом разрешении экрана
2. Мы размечаем один набор контента, делая его доступным для просмотра на любом устройстве
3. Мы никогда не должны показывать горизонтальную полосу прокрутки, независимо от размера окна

Реализация

В качестве отправной точки простая семантическая разметка дает нам страницы, которые более гибкие и их легче перекомпоновать, если макет нужно изменить. Убедившись, что таблица стилей поддерживает
жидкий макет, мы уже на пути к мобильной дружелюбности. Вместо указания ширины для элементов контейнера мы начали использовать максимальную ширину . Вместо
высоты мы использовали минимальную высоту, чтобы более крупные шрифты или многострочный текст не выходили за границы контейнера. Чтобы изображения с фиксированной шириной не «раздвигали» жидкие столбцы, мы применяем следующее правило CSS:

Жидкий макет — это хорошее начало, но ему может не хватать определенного изящества. К счастью,
медиа-запросы теперь
хорошо поддерживаются в современных браузерах
включая IE9+ и большинство мобильных устройств. Они могут стать разницей между сайтом, который хорошо деградирует в мобильном браузере, и сайтом, который улучшен для использования преимуществ оптимизированного пользовательского интерфейса. Но сначала мы должны учесть, как смартфоны представляют себя веб-серверам.

Видовые экраны

Когда пиксель — это не пиксель? Когда он на смартфоне. По умолчанию браузеры смартфонов притворяются настольными браузерами с высоким разрешением и верстают страницу так, как если бы вы просматривали ее на настольном мониторе. Вот почему вы получаете «режим обзора» с крошечным текстом, который невозможно прочитать, не увеличив масштаб.
Ширина видового экрана по умолчанию
для браузера Android по умолчанию составляет 800 пикселей, а для iOS — 980 пикселей, независимо от количества
фактических физических пикселей
на экране.

Чтобы заставить браузер отображать вашу страницу в более читаемом масштабе, вам нужно использовать мета-элемент viewport:

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

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

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

Пример медиа-запросов

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

Вместо того чтобы ориентироваться на конкретные разрешения устройств, мы выбрали относительно широкий набор точек останова. Для разрешения экрана шире 1024 пикселей мы отображаем страницу так, как она была изначально спроектирована, в соответствии с нашей 12-колоночной сеткой. Между 801px и 1024px вы видите слегка сжатую версию благодаря жидкому макету.

Только если разрешение экрана падает до 800 пикселей, контент, который не считается основным, будет отправлен в нижнюю часть страницы:

С помощью последнего медиа-запроса мы входим на территорию смартфонов:

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

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

Заключение

Стоит помнить, что не существует простого решения для обеспечения доступности сайтов на мобильных устройствах и узких видовых экранах. Жидкие макеты — отличная отправная точка, но, возможно, придется пойти на некоторые дизайнерские компромиссы. Медиа-запросы — полезный способ добавить лоска для многих устройств, но помните, что
25% посещений совершаются с тех настольных браузеров, которые в настоящее время не поддерживают эту технику, и есть некоторые
последствия для производительности. И если у вас на сайте есть модный виджет, он может прекрасно работать с мышью, но не так хорошо на сенсорном устройстве, где точное управление сложнее.

Ключ к успеху — тестировать рано и часто. Любое время, потраченное на просмотр ваших собственных сайтов со смартфона или планшета, будет бесценным. Если вы не можете тестировать на реальных устройствах, используйте
Android SDK или
iOS Simulator. Попросите друзей и коллег просмотреть ваши сайты на своих устройствах, и наблюдайте, как они взаимодействуют.

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

Еще несколько примеров адаптивного дизайна в Google:

• www.google.com/about/
• www.google.com/goodtoknow
• www.google.com/culturalinstitute
• www.google.com/events/sciencefair
• www.google.com/intl/en/chrome/devices
• picasa.google.com

Автор: Rupert Breheny,
Edward Jung, и
Matt Zürrer, Google Webmaster Team