Что такое адаптивный сайт: Адаптивный дизайн сайта — зачем нужен и как настроить адаптивную верстку для интернет магазина

В наши дни почти каждый новый клиент хочет иметь мобильную версию своего сайта. Ведь это практически необходимо: один дизайн для BlackBerry, другой для iPhone, iPad, нетбуков, Kindle — и все разрешения экрана также должны быть совместимы. В ближайшие пять лет нам, вероятно, потребуется разработать ряд дополнительных изобретений. Когда безумие прекратится? Конечно, не будет.

В наши дни почти каждый новый клиент хочет иметь мобильную версию своего сайта.Ведь это практически необходимо: один дизайн для BlackBerry, другой для iPhone, iPad, нетбуков, Kindle — и все разрешения экрана также должны быть совместимы. В ближайшие пять лет нам, вероятно, потребуется разработать ряд дополнительных изобретений. Когда безумие прекратится? Конечно, не будет.

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

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

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

Практика состоит из сочетания гибких сеток и макетов, изображений и интеллектуального использования медиазапросов CSS.Когда пользователь переключается со своего ноутбука на iPad, веб-сайт должен автоматически переключаться в соответствии с разрешением, размером изображения и возможностями сценариев. Можно также рассмотреть параметры на своих устройствах; например, если у них на iPad есть VPN для iOS, веб-сайт не должен блокировать доступ пользователя к странице. Другими словами, веб-сайт должен иметь технологию автоматического ответа на предпочтения пользователя. Это устранит необходимость в отдельной фазе проектирования и разработки для каждого нового гаджета на рынке.

Дополнительная информация о SmashingMag:

Неограниченное количество загрузок: 500 000+ Шаблоны HTML5, шрифты, фотографии и дизайн-активы (объявление)

Загрузить сейчас →

Концепция отзывчивого веб-дизайна

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

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

Перенесите эту дисциплину на веб-дизайн, и у нас появится похожая, но совершенно новая идея. Зачем нам создавать индивидуальный веб-дизайн для каждой группы пользователей; в конце концов, архитекторы не проектируют здания для каждого размера и типа группы что происходит через него? Как и адаптивная архитектура, веб-дизайн должен автоматически настраиваться. Он не должен требовать бесчисленных индивидуальных решений для каждой новой категории пользователей.

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

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

Настройка разрешения экрана

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

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

Мортен Хьерде и несколько его коллег определили статистику о 400 устройствах, проданных в период с 2005 по 2008 год. Ниже приведены некоторые из наиболее распространенных:

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

Часть решения: все гибкое

Несколько лет назад, когда гибкие макеты были почти «роскошью» для веб-сайтов, единственными вещами, которые были гибкими в дизайне, были колонки макетов (структурные элементы) и текст.Изображения могут легко нарушать макеты, и даже гибкие структурные элементы нарушают форму макета при достаточном нажатии. Гибкие конструкции не были такими гибкими; они могли бы дать или взять несколько сотен пикселей, но они часто не могли приспособиться от большого экрана компьютера к нетбуку.

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

В статье Итана Маркотта он создал образец веб-дизайна, в котором реализована эта более гибкая компоновка:

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

Для получения дополнительной информации о создании плавных веб-сайтов обязательно загляните в книгу «Гибкий веб-дизайн: создание жидких и эластичных макетов с помощью CSS». Zoe Mickley Gillenwater и загрузите образец главы «Создание гибких изображений.Кроме того, Zoe предоставляет следующий обширный список учебных пособий, ресурсов, идей и рекомендаций по созданию гибких сеток и макетов: «Основные ресурсы для создания жидких и эластичных макетов».

Хотя с технической точки зрения это все легко возможно, речь идет не только о подключении и использовании этих функций. Посмотрите на логотип в этом дизайне, например:

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

выше, Элемент h2 содержит иллюстрацию в качестве фона, а изображение выравнивается в соответствии с фоном контейнера (заголовок).

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

Гибкие изображения

Одной из основных проблем, которые необходимо решить с помощью адаптивного веб-дизайна, является работа с изображениями. Существует ряд методов пропорционального изменения размеров изображений, и многие из них легко сделать.Наиболее популярный вариант, отмеченный в статье Итана Маркотта о плавных изображениях, но впервые опробованный Ричардом Раттером, — это использование CSS max-width для простого исправления.

  img {max-width: 100%; }  

Пока другие стили изображения на основе ширины не переопределяют это правило, каждое изображение будет загружаться в своем исходном размере, если только область просмотра не станет уже ширины исходного изображения. Максимальная ширина для изображения устанавливается равной 100% ширины экрана или браузера, поэтому, когда эти 100% становятся уже, изображение тоже.По сути, как отметил Джейсон Григсби, «идея плавных изображений заключается в том, что вы доставляете изображения в максимальном размере, в котором они будут использоваться. Вы не объявляете высоту и ширину в своем коде, но вместо этого позволяете браузеру изменять размеры изображений по мере необходимости, используя CSS для определения их относительного размера ». Это отличная и простая техника для красивого изменения размера изображения.

Обратите внимание, что max-width — это , который не поддерживается в IE , но хорошее использование ширины : 100% решит проблему аккуратно в специфической для IE таблице стилей.Еще одна проблема заключается в том, что когда размер изображения слишком мал в некоторых старых браузерах в Windows, рендеринг не так ясен, как следовало бы. Однако для решения этой проблемы есть JavaScript, который можно найти в статье Итана Маркотта.

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

Отзывчивые изображения Filament Group

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

Этот метод требует несколько файлов, все из которых доступны на Github. Во-первых, файл JavaScript ( rwd-images.js ), файл .htaccess и файл изображения ( rwd.GIF ). Затем мы можем использовать немного HTML для ссылки на изображения как с большим, так и с меньшим разрешением: сначала маленькое изображение с префиксом .r , чтобы уточнить, что оно должно быть отзывчивым, а затем ссылку на большее изображение, используя data-fullsrc .

data-fullsrc — это пользовательский атрибут HTML5, определенный в файлах, ссылки на которые приведены выше. Для любого экрана, ширина которого превышает 480 пикселей, изображение с более высоким разрешением ( LargeRes.JPG ) будет загружать; меньшие экраны не должны загружать большее изображение, поэтому будет загружаться меньшее изображение ( smallRes.jpg ).

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

Этот метод полностью поддерживается в современных браузерах, таких как IE8 +, Safari, Chrome и Opera, а также на мобильных устройствах, использующих те же браузеры (iPad, iPhone и т. Д.). Старые браузеры и Firefox неплохо деградируют и по-прежнему изменяют размер, как и следовало ожидать от адаптивного изображения, за исключением того, что оба разрешения загружаются вместе, поэтому конечная выгода экономии места с помощью этой техники является недействительной.

Stop iPhone Simulator Изменение размера изображения

Одна из приятных особенностей iPhone и iPod Touch заключается в том, что веб-дизайн автоматически масштабируется, чтобы соответствовать крошечному экрану. Полноразмерный дизайн, если не указано иное, просто уменьшится пропорционально для крошечного браузера, без необходимости прокрутки или мобильной версии. Затем пользователь может легко увеличивать и уменьшать масштаб по мере необходимости.

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

Поскольку это работает только с симулятором Apple, мы можем использовать мета-тег Apple для решения проблемы, поместив его на ниже на Благодаря статье Think Vitamin об изменении размера изображения у нас есть метатег ниже:

Установка начальный масштаб от до 1 переопределяет значение по умолчанию для пропорционального изменения размеров изображений, оставляя их такими, как есть, если их ширина равна ширине устройства (в портретном или ландшафтном режиме).Документация Apple содержит гораздо больше информации о метатеге viewport.

Структура пользовательского макета

При экстремальных изменениях размера мы можем захотеть изменить макет полностью, либо с помощью отдельной таблицы стилей, либо, более эффективно, с помощью медиа-запроса CSS. Это не должно быть хлопотно; большинство стилей могут оставаться прежними, в то время как определенные таблицы стилей могут наследовать эти стили и перемещать элементы с помощью float, widths, height и так далее.

Например, у нас может быть одна основная таблица стилей (которая также будет использоваться по умолчанию), которая будет определять все основные структурные элементы, такие как #wrapper , #content , #sidebar , #nav , наряду с цветами, фонами и типографикой.Гибкие значения по умолчанию и поплавки также могут быть определены.

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

Вот содержимое style.css (по умолчанию):

  / * Стили по умолчанию, которые будут перенесены в дочернюю таблицу стилей * /

HTML, тело {
   задний план...
   шрифт...
   цвет...
}

h2, h3, h4 {}
p, blockquote, pre, code, ol, ul {}

/ * Структурные элементы * /
#wrapper {
  ширина: 80%;
  поле: 0 авто;

  фон: #fff;
  отступы: 20 пикселей;
}

#content {
  ширина: 54%;
  плыть налево;
  наценка справа: 3%;
}

# Боковая панель левый {
  ширина: 20%;
  плыть налево;
  наценка справа: 3%;
}

# Боковой панели правой {
  ширина: 20%;
  плыть налево;
}  

Вот mobile.css (ребенок) содержание:

  #wrapper {
  ширина: 90%;
}

#content {
  ширина: 100%;
}

# Боковая панель левый {
  ширина: 100%;
  ясно: оба;

  / * Дополнительные стили для нашего нового макета * /
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

# Боковой панели правой {
  ширина: 100%;
  ясно: оба;

  / * Дополнительные стили для нашего нового макета * /
  border-top: 1px solid #ccc;
  margin-top: 20px;
}  

медиазапросы

CSS3 поддерживает все те же типы медиа, что и CSS 2.1, такие как экран , печать и портативный , но добавлены десятки новых мультимедийных функций, в том числе максимальная ширина , ширина устройства , ориентация и цвет . Новые устройства, выпущенные после выхода CSS3 (такие как устройства iPad и Android), безусловно, будут поддерживать мультимедийные функции. Таким образом, вызов медиа-запроса с использованием функций CSS3 для этих устройств будет работать нормально, и он будет игнорироваться, если к нему обращается браузер более старого компьютера, который не поддерживает CSS3.

В статье Итана Маркотта мы видим пример медиазапроса в действии:

Этот медиазапрос довольно понятен: если браузер отображает эту страницу на экране (а не печатает и т. д.), и если ширина экрана (не обязательно viewport) 480 пикселей или меньше, затем загрузите shetland.css .

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

Можно создать несколько таблиц стилей, а также базовые изменения макета, определенные для соответствия диапазонам ширины — даже для альбомной или портретной ориентации. Обязательно загляните в раздел статьи Итана Маркотта под названием «Познакомьтесь с запросом СМИ», чтобы найти больше примеров и более подробное объяснение.

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

  / * Смартфоны (книжная и альбомная) ----------- * /
@media только экран
и (минимальная ширина устройства: 320 пикселей)
и (max-device-width: 480px) {
/ * Стили * /
}

/ * Смартфоны (пейзаж) ----------- * /
@media только экран
и (минимальная ширина: 321 пикселей) {
/ * Стили * /
}

/ * Смартфоны (портрет) ----------- * /
@media только экран
и (максимальная ширина: 320 пикселей) {
/ * Стили * /
}  

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

CSS3 Media Queries

Выше приведено несколько примеров того, как могут работать медиа запросы как из CSS 2.1, так и из CSS3. Давайте теперь рассмотрим некоторые конкретные инструкции по использованию медиазапросов CSS3 для создания адаптивных веб-дизайнов. Многие из этих применений актуальны сегодня, и все они наверняка пригодятся в ближайшем будущем.

Свойства min-width и max-width делают именно то, что они предлагают.Свойство min-width устанавливает минимальную ширину браузера или экрана, к которой будет применяться определенный набор стилей (или отдельная таблица стилей). Если что-либо ниже этого предела, ссылка или таблица стилей будут игнорироваться. Свойство max-width делает прямо противоположное. Все, что превышает максимально допустимую ширину браузера или экрана, не будет применяться к соответствующему медиа-запросу.

Обратите внимание, что в приведенных ниже примерах мы используем синтаксис для медиазапросов, которые можно использовать в одной таблице стилей.Как упоминалось выше, наиболее эффективный способ использования медиа-запросов — это поместить их все в одну таблицу стилей CSS с остальными стилями для веб-сайта. Таким образом, не нужно делать несколько запросов для нескольких таблиц стилей.

  @ media screen и (min-width: 600px) {
     .hereIsMyClass {
          ширина: 30%;
          плавать: правильно;
     }
}  

Класс, указанный в медиазапросе выше ( hereIsMyClass ), будет работать, только если ширина браузера или экрана превышает 600 пикселей.Другими словами, этот медиазапрос будет выполняться только в том случае, если минимальная ширина составляет 600 пикселей, а (следовательно, 600 пикселей или больше).

  @ media screen и (max-width: 600px) {
     .aClassforSmallScreens {
          ясно: оба;
      размер шрифта: 1,3em;
     }
}  

Теперь, с использованием max-width , этот медиазапрос будет применяться только к браузеру или экранной ширине с максимальной шириной 600 пикселей или уже.

Хотя указанные выше минимальная ширина и максимальная ширина могут применяться как к размеру экрана, так и к ширине браузера, иногда нам бы хотелось, чтобы медиа-запрос относился конкретно к ширине устройства.Это означает, что даже если браузер или другая область просмотра уменьшена до чего-то меньшего, медиазапрос все равно будет применяться к размеру реального устройства. Свойства медиазапроса min-device-width и max-device-width отлично подходят для таргетинга на определенные устройства с заданными размерами, без применения тех же стилей к другим размерам экрана в браузере, который имитирует размер устройства.

  @ media screen и (max-device-width: 480px) {
     .classForiPhoneDisplay {
          размер шрифта: 1.2em;
     }
}  

  @ мультимедийный экран и (минимальная ширина устройства: 768 пикселей) {
     .minimumiPadWidth {
          ясно: оба;
      поле на пол: 2px solid #ccc;
     }
}  

Специально для iPad существует также свойство медиазапроса, называемое Ориентация . Значение может быть либо альбомной (горизонтальная ориентация), либо портретной (вертикальная ориентация).

  @ мультимедийный экран и (ориентация: пейзаж) {
     .iPadLandscape {
          ширина: 30%;
      плавать: правильно;
     }
}  

  @ мультимедийный экран и (ориентация: портрет) {
     ,iPadPortrait {
          ясно: оба;
     }
}  

К сожалению, это свойство работает только на iPad. При определении ориентации для iPhone и других устройств, используйте max-dev