Адаптивный Веб-Дизайн
"Отзывчивый дизайн" перенаправляет здесь. Подход автоматизированного проектирования см. В разделе адаптивный автоматизированный дизайн . Не путать с отзывчивостью .
Адаптивный веб-дизайн (RWD) - это подход к веб-дизайну, который позволяет веб-страницам хорошо отображаться на различных устройствах и размерах окон или экранов. Недавняя работа также рассматривает близость зрителя как часть контекста просмотра как расширение для RWD. Содержание, дизайн и производительность необходимы для всех устройств, чтобы обеспечить удобство использования и удовлетворение.
Сайт разработан с кузовом типа адаптирует макет на просмотр окружающей среды через жидкость, на основе доли сетках, гибкий изображений, и с помощью CSS3 медиа-запросы, расширение @media правило, следующим образом:
- Концепция fluid grid требует, чтобы размер элемента страницы был в относительных единицах, таких как проценты, а не абсолютные единицы, такие как пиксели или точки .[8]
- Гибкие изображения также измерены в относительных блоках, для того чтобы предотвратить их от показа вне их содержа элемента .
- Медиа-запросы позволяют странице использовать различные правила стиля CSS, основанные на характеристиках устройства, на котором отображается сайт, например, ширина поверхности рендеринга (ширина окна браузера или физический размер дисплея).
- Адаптивные макеты автоматически настраиваются и адаптируются к любому размеру экрана устройства, будь то настольный компьютер, ноутбук, планшет или мобильный телефон.
Адаптивный веб-дизайн стал более важным, так как объем мобильного трафика в настоящее время составляет более половины всего интернет-трафика. Таким образом, Google объявил Mobilegeddon в 2015 году, и начал повышать рейтинги сайтов, которые являются мобильными дружественными, если поиск был сделан с мобильного устройства. адаптивный веб-дизайн является примером пластичности пользовательского интерфейса .
Связанные понятия[править]
Мобильный во-первых, ненавязчивый JavaScript и прогрессивное улучшение
"Мобильный первый", ненавязчивый JavaScript и прогрессивное улучшение-это связанные понятия, которые предшествуют RWD. браузеры базовых мобильных телефонов не понимают JavaScript или медиа-запросов , поэтому рекомендуется создать базовый веб-сайт и улучшить его для смартфонов и ПК, а не полагаться на изящную деградацию, чтобы сделать сложную, тяжелую работу сайта на мобильных телефонах. Прогрессивное улучшение на основе браузера, устройства или обнаружения функций
Из-за большого объема интернет-трафика с помощью мобильных устройств их уже нельзя игнорировать. В 2014 году впервые больше пользователей получили доступ к интернету со своих мобильных устройств, чем с настольных. где веб-сайт должен поддерживать основные мобильные устройства, которые испытывают недостаток в JavaScript, обнаружении браузера ("пользовательский агент") (также названный " обнюхиванием браузера ") и обнаружении мобильного устройства существуют два способа выведения, если поддерживаются определенные функции HTML и CSS (в качестве основы для прогрессивного улучшения)—однако эти методы не являются полностью надежными, если они не используются в сочетании с базой данных возможностей устройства.
Для более способных мобильных телефонов и ПК популярны платформы JavaScript, такие как Modernizr , jQuery и jQuery Mobile , которые могут напрямую тестировать поддержку браузера для функций HTML/CSS (или идентифицировать устройство или пользовательский агент). Polyfills можно использовать для добавления поддержки функций-например, для поддержки медиа-запросов (требуется для RWD) и повышения поддержки HTML5 в Internet Explorer. Обнаружение функции также может быть не совсем надежным; некоторые могут сообщать, что функция доступна, когда она либо отсутствует, либо настолько плохо реализована, что она фактически нефункциональна.
Проблемы и другие подходы[править]
Люк Вроблевский обобщил некоторые проблемы RWD и мобильного дизайна и создал каталог шаблонов компоновки нескольких устройств. он предлагает, чтобы, по сравнению с простым подходом RWD, опыт устройства или RESS (отзывчивый веб-дизайн с серверными компонентами) подходы могли обеспечить пользовательский опыт, который лучше оптимизирован для мобильных устройств. серверная "динамическая CSS" реализация языков таблиц стилей, таких как Sass или MML Incentivated может быть частью такого подхода, получая доступ к API на основе сервера, который обрабатывает различия устройства (обычно мобильного телефона) в сочетании с базой данных возможностей устройства для улучшения удобства использования. RESS дороже для разработки, требуя больше, чем просто клиентская логика, и поэтому, как правило, зарезервированы для организаций с большими бюджетами. Google рекомендует адаптивный дизайн для веб-сайтов смартфонов по сравнению с другими подходами.
Хотя многие издатели начинают внедрять адаптивные проекты, одной из постоянных проблем для RWD является то, что некоторые рекламные баннеры и видео не являются жидкими. однако поисковая реклама и (баннерная) реклама поддерживают таргетинг конкретной платформы устройств и различные форматы размера рекламы для настольных компьютеров, смартфонов и базовых мобильных устройств. Различные URL-адреса целевых страниц могут использоваться для разных платформ, или Ajax могут использоваться для отображения различных вариантов рекламы на странице. CSS таблицы позволяют гибридные фиксированные+жидкие макеты.
В настоящее время существует множество способов проверки и тестирования проектов RWD , начиная от валидаторов мобильных сайтов и мобильных эмуляторов до одновременных инструментов тестирования, таких как Adobe Edge Inspect. браузеры Chrome, Firefox и Safari, а также консоль Chrome предлагают адаптивные инструменты для изменения размера видового экрана, как и третьи стороны.
Случаи использования RWD теперь будут расширяться с увеличением использования мобильных устройств; согласно Statista, органические посещения поисковой системы в США, поступающие с мобильных устройств, достигли 51% и увеличиваются
История[править]
Первым сайтом, на котором был представлен макет, адаптированный к ширине окна просмотра браузера, была Audi .com, запущенный в конце 2001 ,создан командой в razorfish, состоящей из Юргена Спэнгла и Джима Калбаха (информационная архитектура), Кена Оллинга (дизайн) и Яна Хоффмана (разработка интерфейса). Ограниченные возможности браузера означали, что для Internet Explorer макет может динамически адаптироваться в браузере, тогда как для Netscape страница должна была быть перезагружена с сервера при изменении размера.
Кэмерон Адамс создал демонстрацию в 2004 году, которая до сих пор в сети.[46] к 2008 году для описания макетов использовался ряд связанных терминов, таких как "гибкий", "жидкий", "жидкий" и "эластичный". Запросы СМИ CSS3 были почти готовы к прайм-тайму в конце 2008 / начале 2009 года. Итан Маркотт придумал термин "отзывчивый веб—дизайн" (RWD) и определил его как "жидкая сетка/ гибкие изображения/ медиа—запросы" - в статье в мае 2010 года в отдельном списке . он описал теорию и практику адаптивного веб-дизайна в своей короткой книге 2011 года под названием адаптивный веб-дизайн. Адаптивный дизайн был указан как #2 в Top Web Design Trends на 2012 по .net magazine после прогрессивного улучшения на #1.
Mashable назвал 2013 год Годом адаптивного веб-дизайна.[50] многие другие источники рекомендовали адаптивный дизайн в качестве экономически эффективной альтернативы мобильным приложениям из-за его способности размещать весь код на одном веб-сайте. Как пользователи, так и разработчики начали осознавать преимущества и важность мобильных проектов, поскольку использование мобильных устройств продолжало расти. это понимание важности было подтверждено, когда Google объявила, что поисковые системы вознаградят адаптивные веб-сайты повышенным рейтингом.