Что такое адаптивный дизайн? (Пояснительное видео и инфографика)

адаптивный веб-дизайн

На то, чтобы адаптивный веб-дизайн (RWD) стать мейнстримом, поскольку Кэмерон Адамс впервые представил концепция. Идея была гениальной - почему мы не можем создавать сайты, которые адаптируются к области просмотра устройства, на котором они просматриваются?

Что такое адаптивный дизайн?

Адаптивный веб-дизайн (RWD) - это подход к веб-дизайну, направленный на создание сайтов для обеспечения оптимального просмотра - легкого чтения и навигации с минимальным изменением размера, панорамирования и прокрутки - на широком спектре устройств (от мобильных телефонов до настольных компьютеров). мониторы). Сайт, разработанный с помощью RWD, адаптирует макет к среде просмотра с помощью плавных, пропорциональных сеток, гибких изображений и медиа-запросов CSS3, расширения правила @media.

Википедия

Другими словами, можно настраивать такие элементы, как изображения, а также макет этих элементов. Вот видео, в котором объясняется, что такое адаптивный дизайн, а также почему вашей компании следует его внедрять. Недавно мы переделали Highbridge сайт должен быть отзывчивым, и сейчас мы работаем над Martech Zone делать то же самое!

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

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

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

Люсинда Дункальф, генеральный директор Monetate

Вот инфографика от Monetate, иллюстрирующая потенциальные преимущества создания одного адаптивного дизайна для нескольких устройств:

Адаптивный веб-дизайн инфографики

Если вы хотите увидеть адаптивный сайт в действии, укажите на Google Chrome браузер (я считаю, что у Firefox есть такая же функция), чтобы Highbridge, Теперь выберите Просмотр> Разработчик> Инструменты разработчика из меню. Это загрузит набор инструментов в нижней части браузера. Щелкните небольшой значок мобильного устройства в дальнем левом углу строки меню инструментов разработчика.

отзывчивый-тестирование-хром

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

3 комментариев

  1. 1
  2. 2

    Большое спасибо Дуглас за эту хорошо объясненную статью. Я должен согласиться с этим, хотя на содержательной стороне вещей. Для большинства сайтов, которые мы делаем, адаптивной верстки будет недостаточно. Нам нужен адаптивный контент. Но для более простых веб-сайтов мы обязательно воспользуемся вашей хорошо документированной статьей о том, как с этим справиться!

    • 3

      Я думаю, ты абсолютно прав, Аарон. Недостаточно просто изменять размер и перемещать объекты… нам также необходимо эффективно использовать контент.

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.