Responsive верстка что это: Отзывчивый дизайн — Изучение веб-разработки

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

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

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

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

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

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

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

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

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

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

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.

1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
3. Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

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

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

Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

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

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

Узнать больше о медиавыражениях можно в документации MDN.

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.

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

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

target / context = result 

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

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

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

На более широких экранах они перемещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.

Multicol

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

.container {
  column-count: 3;
} 

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

.container {
  column-width: 10em;
} 

Flexbox

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

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

.container {
  display: flex;
}

.item {
  flex: 1;
} 

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

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

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

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

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
} 

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

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

Using viewport units for responsive typography

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  font-size: calc(1.5rem + 3vw);
}

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.

So you should always include the above line of HTML in the head of your documents.

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

• initial-scale: Sets the initial zoom of the page, which we set to 1.
• height: Sets a specific height for the viewport.
• minimum-scale: Sets the minimum zoom level.
• maximum-scale: Sets the maximum zoom level.
• user-scalable: Prevents zooming if set to no.

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

Разница между адаптивным (Adaptive) и отзывчивым (Responsive) дизайном

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

Адаптивный (Adaptive) веб-дизайн представляет собой набор дизайнерских методов, опирающихся на опыт применения различных устройств пользователем, а не на сам браузер. Он создается путем наложения определенных размеров, CSS и JavaScript кодов таким образом, чтобы пользователь мог применять имеющееся в наличии оборудование. Адаптивный дизайн, по сути, является синонимом “прогрессивного улучшения (progressive enhancement)”.

В отличии от адаптивного дизайна, который означает «резиновый» макет, изменяющийся в зависимости от установленного экрана и размера устройств, отзывчивый (responsive) дизайн — это, в действительности, разновидность адаптивного дизайна, представляющая собой только «резиновый» макет, т.е. макет, который трансформируется в зависимости от ширины экрана.

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

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

Респонсивный vs адаптивный дизайн: в чем разница и какой выбрать

Content

Почему статический дизайн больше не актуален? Во-первых, мобильные устройства долгое время используются как ведущая платформа для доступа в Интернет. Более того, 1 июля 2019 года Google ввел mobile-first индексацию. Таким образом, с этого момента SEO-оптимизация мобильной версии веб-сайта более важна, чем десктопной версии. Если у вас нет мобильной версии, ваш сайт может вообще не отображаться в результатах поиска Google.

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

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

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

Источник изображения: Statista

Из этой статьи вы узнаете:

• Что такое респонсивный веб-дизайн;
• Что такое адаптивный веб-дизайн;
• Примеры респонсивного и адаптивного веб-дизайна;
• Какой дизайн выбрать для вашего веб-сайта.

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

Респонсивный макет подстраивается под конкретный размер экрана.

В 2010 году дизайнер и разработчик Этан Маркотт использовал термин респонсивный дизайн впервые в своей книге с одноименным названием «Респонсивный веб-дизайн».

Респонсивный дизайн адаптирует размер сайта под любой экран устройства. Сайты с подобным дизайном подстраиваются как под экраны шириной 300 пикселей, так и 3000 пикселей. Это происходит благодаря гибкой разметке сайта, использованию CSS media и гибкой сетке сайта. Такой дизайн позволяет изменять размер страницы сайта, чтобы она соответствовала размеру любого экрана.

По какой причине веб-дизайнеры используют методы респонсивного веб-дизайна? Специалисты из нашего отдела дизайна считают, что создание респонсивного дизайна намного проще, чем адаптивного. Кроме того, это занимает меньше времени и меньше контроля со стороны дизайнеров. В таком дизайне используются основанные на процентах CSS-правила для изменения стиля в зависимости от размера экрана. Большинство шаблонов для CMS, таких как Magento и Shopware имеют встроенный респонсивный дизайн.

Читайте дальше наше руководство: Лучшие Magento и Shopware темы для интернет-магазина электроники

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

Зачем нужен респонсивный дизайн?

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

Когда использовать респонсивный дизайн?

Если вы сомневаетесь, мы предоставим вам окончательное решение при выборе респонсивного дизайна:

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

Преимущества и недостатки респонсивного дизайна

В зависимости от доступного пространства браузера респонсивный дизайн позволяет дизайнерам отображать контент. Он обеспечивает согласованность между тем, что сайт отображает на рабочем столе, и тем, что он отображает на портативном устройстве. Респонсивный дизайн сегодня более популярен и считается «традиционным» вариантом.

Среди преимуществ респонсивного дизайна наши специалисты выделяют следующие моменты:

• Он цельный и единообразный, что означает наличие хорошего UX;
• Многообразие шаблонов для использования;
• Дружественность к SEO;
• Обычно его проще реализовать.

А теперь давайте посмотрим на недостатки респонсивного дизайна. Среди них отметим:

• Он обеспечивает меньший контроль над размером экрана;
• Элементы могут перемещаться;
• Реклама теряются на экране;
• Для загрузки на мобильный телефон требуется больше времени.

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

Источник: weidert.com

В адаптивном дизайне используется несколько макетов для адаптации к разным размерам экрана.

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

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

Верхний блок является респонсивным, а нижний — адаптивным.

Источник: css-tricks.com

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

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

Сегодняшний стандарт – это шесть вариантов адаптивного дизайна под разную ширину экрана: 320px, 480px, 760px, 960px, 1200px и 1600px. В зависимости от данных о посетителях сайта, вам может потребоваться разработка меньшего количества дизайнов.

Респонсивный дизайн больше подходит простым сайтам. А для онлайн-магазинов и сайтов с множеством элементов мы настоятельно рекомендуем разработку адаптивного дизайна. К тому же, сайт с адаптивным дизайном загружается в 2-3 раза быстрее по сравнению с сайтом с респонсивным дизайном, что также важно для увеличения конверсии.

Дополнительные сведения о дизайне веб-сайтов электронной коммерции: 5 советов по отличному дизайну веб-сайтов электронной коммерции

Зачем использовать адаптивный дизайн?

Теоретически, адаптивный дизайн сможет обеспечить наилучшее взаимодействие с пользователем в зависимости от устройства, которое пользователь использует для интерфейса. Адаптивный дизайн предлагает индивидуальные решения, и в этом его отличие от респонсивного дизайна, когда экран «перетекает» из дизайна рабочего стола в устройство меньшего размера. Он подстраиваются под ситуативные потребности и возможности пользователей, что становится понятно из названия.

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

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Когда использовать адаптивный дизайн?

Если вы решили выбрать адаптивный дизайн, мы предлагаем вам несколько заключительных моментов, которые вы должны запомнить. Среди них:

• Адаптивный дизайн считается идеальным выбором для существующих веб-сайтов, которым нужна мобильная версия;
• Рекомендуется выбирать адаптивный дизайн для сайтов, зависящих от скорости;
• Адаптивный дизайн — идеальный выбор для целенаправленного взаимодействия, которое можно адаптировать к чьему-либо местоположению, скорости соединения и многому другому;
• Адаптивный дизайн — идеальное решение для людей, которые хотят иметь больший контроль над тем, как их сайт доставляется различным пользователям на различных устройствах.

Преимущества и недостатки адаптивного дизайна

Адаптивный дизайн был придуман в 2011 году, и он больше приспособлен к тому, что у дизайнера есть несколько фиксированных размеров макета. Этот тип дизайна является альтернативой подходу «один размер для всех».

Итак, поговорим о преимуществах адаптивного дизайна. Среди его сильных сторон:

• Он позволяет дизайнерам создавать лучший пользовательский интерфейс для соответствующего устройства;
• Мобильные устройства могут определять среду своего пользователя;
• У дизайнеров появляется возможность оптимизировать рекламу на основе пользовательских данных со смарт-устройств.

А есть ли недостатки у адаптивного дизайна? Конечно. Среди минусов адаптивного дизайна эксперты Dinarys определяют следующие:

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

Как соотносятся респонсивный и адаптивный дизайн?

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

Тем не менее, выбор адаптивного дизайна дает множество своих преимуществ. Среди них — более персонализированный и целевой пользовательский интерфейс.

Итак, чтобы сделать окончательный выбор, вы должны понять и спланировать свои цели, потребности и бюджет как сейчас, так и в будущем.

Примеры респонсивного и адаптивного веб-дизайна

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

Примеры сайтов с респонсивным дизайном

Источник изображения:Dropbox

1. Dropbox

Dropbox обладает респонсивным дизайном. Кроме гибкой визуальной составляющей, сайт меняет цвет в зависимости от фона и расположения изображения. Пользователи могут войти на сайт, используя форму регистрации, скрытую за кнопкой с призывом к действию. Благодаря этому сайтом Dropbox удобно пользоваться вне зависимости от устройства.

Источник изображения:Dribble

2. Dribbble

Респонсивный дизайн стал отличительной чертой компании Dribbble. Кроме гибкой разметки дизайна, респонсивный дизайн этого сайта меняет компоненты меню с пяти колонок обычной версии сайта на две колоноки для мобильной версии сайта. Чтобы сделать респонсивный дизайн еще более удобным, компания убрала строку поиска и скрыла меню за иконкой-бургером.

Источник изображения:GitHub

3. GitHub

GitHub — это еще одна компания, которая использует респонсивный дизайн для мобильной версии сайта. Они поменяли область на главной странице с двух колонок на одну. В мобильной версии сайта GitHub нет строки поиска, а меню скрыто за иконкой-бургером.

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Примеры сайтов с адаптивным дизайном

Источник изображения:Maplin

1. Maplin

Первый пример – это британская компания Maplin. Их адаптивная версия сайта находится на отдельном URL для мобильных устройств. Сайт определяет тип устройства посетителя и перенаправляет его на подходящую версию сайта. Как вы могли заметить, благодаря такому дизайну покупатели без проблем могут просматривать каталог товаров и комфортно совершать покупки с мобильных устройств.

Источник изображения: Home Depot

2. Home Depot

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

Источник изображения:Corcoran

3. Corcoran

Компания Corcoran также выбрала адаптивный дизайн. Сайт этой компании, специализирующейся на аренде и продаже недвижимости, показывает посетителям список ближайших объектов на продажу.

Как выбрать между респонсивным и адаптивным веб-дизайном?

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

Так как же выбрать между этими двумя типами дизайна? В этом вам помогут следующие факторы:

• Если ваш веб-сайт разработан с использованием популярной CMS (системы управления контентом), такой как Magento или Shopware, вы можете купить тему со встроенным респонсивным веб-дизайном;
• Если ваш сайт – это самописное решение со множеством функций, то вам потребуется помощь e-commerce разработчиков для создания адаптивного дизайна для экранов разного размера;
• Если вы хотите улучшить позиции своего сайта в поисковых системах, то вы можете сделать это при помощи респонсивного дизайна. Таким образом, контент вашего сайта будет корректно отображаться на мобильных устройствах и планшетах, благодаря чему у вас будет больше посетителей;
• Если на вашем сайте размещено большое количество контента и различных элементов дизайна, то вам лучше выбрать адаптивный дизайн. Для его создания наймите команду e-commerce разработчиков, которые разработают правильную разметку сайта, подходящую под различные устройства.

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

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

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

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Заключительные мысли

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

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

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

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

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

Адаптивный или респонсив сайт — что нужно вашей компании?

Как подготовить свой сайт к просмотру на мобильных устройствах? Какой подход выбрать? В чем преимущества и недостатки адаптивного и респонсив дизайна?

Данные вопросы будоражат умы владельцев сайтов, маркетологов и клиентов, которые понимают, что сани нужно готовить летом, а адаптивный или респонсив сайт еще вчера. 

Попробуем разобраться в этом вопросе, и поделиться накопленным AGENTE™ опытом. Сразу предупредим — универсального решения не существует, сколько бы об этом ни говорили на всех возможных конференциях и воркшопах. 

Терминология и отличия подходов.

Responsive Web Design (RWD) — отзывчивый веб-дизайн, Adaptive Web Design (ADW) — адаптивный веб-дизайн.  Каждый из терминов обозначает особый подход к созданию вашего веб-сайта и используется для описания процесса создания веб-сайта, который будет удобно просматривать с различных мобильных устройств. В этой статье мы расскажем вам о разнице между адаптивным и респонсив дизайном на практике, не углубляясь в техническую терминологию.

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

По сути, ADW (adaptive web design) и RWD (responsive web design) решают одну и ту же задачу, но разными способами.

При создании Responsive (отзывчивого) веб-сайта используется гибкая структура страницы — «резиновый макет» (fluid grid), пропорции и размеры элементов которой задаются в процентах. Помимо «резиновой» структуры, используются гибкие изображения (fluid images), «резиновые» текстовые блоки. При уменьшении ширины такой страницы весь контент плавно сожмется, структурные элементы уменьшатся относительно друг друга. Так, например, если ваш веб-сайт имел 3-х колончатую структуру, то на более узком экране он будет иметь две или одну колонку контента. 

Для создания responsive версии веб-сайта используются медиа запросы (media queries) — блоки кода с указанием параметров устройств вывода. Медиа запросы позволяют применять определенные правила (стили) для вывода различных контентных блоков в различном порядке и пропорциях в зависимости от ширины экрана и возможностей устройства, на котором происходит просмотр веб-сайта. 

Вот отличный анимированный пример «резинового» (респонсив) сайта: 

Чтобы еще лучше понять, как работают респонсив сайты, вы можете посетить www.bostonglobe.com либоwww.disney.com и, постепенно уменьшая размер окна браузера, следить, как содержание (картинки и текст) будет отвечать изменениям размера окна, либо посетить вот этот сайт www.liquidapsive.com, в меню которого можно выбирать различные варианты отображения страницы.

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

Например, при создании сайта проектируется дизайн страниц нескольких типовых размеров по ширине: 320 px для смартфонов, 760 px, 1024 px  для  планшетов и 1680 px для десктоп браузеров. Когда пользователь заходит на адаптивный сайт, сервер определяет, при помощи какого устройства осуществляется просмотр, и показывает юзеру нужный контент и шаблон.

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

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

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

Чтобы лучше понять и увидеть адаптивный веб сайт в действии, посетите www.lufthansa.com с вашего стационарного компьютера и смартфона. Другой отличный пример — www.colly.com. Потянув за угол окна браузера, можно отследить, как при достижении определенной ширины окна шаблон сайта начнет изменяться. 

Какой же подход выбрать?

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

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

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

К сожалению, универсального решения не существует, и каждый случай создания мобильного сайта нужно рассматривать отдельно. Для простоты принятия решения предлагаем вам небольшую сравнительную таблицу использования ADW (adaptive web design) и RWD (responsive web design).

Отзывчивый веб-дизайн | WebReference

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

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

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

Обзор отзывчивости

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

Термин отзывчивый веб-дизайн сам по себе придумал и в значительной степени разработал Итан Маркотт. Многое из того, что рассмотрено в этом уроке было впервые сказано Итаном в сети и в его книге Отзывчивый веб-дизайн, которую стоит прочитать.

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

Отзывчивый, адаптивный и мобильный

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

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

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

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

Гибкие макеты

Отзывчивый веб-дизайн разбивается на три основных компонента, включая гибкие макеты, медиа-запросы и гибкий медиа-контент. Первая часть, гибкие макеты — это практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины. Гибкие сетки строятся с использованием относительных единиц длины, как правило, процентов или единиц em. Эти относительные длины затем применяются, чтобы объявить основные значения свойств сетки, таких как width, margin или padding.

Относительные размеры области просмотра

CSS3 ввёл несколько новых относительных единиц длины, в частности, связанных с размером области просмотра браузера или устройства. Эти новые единицы включают vw, vh, vmin и vmax. Общая поддержка этих новых единиц не велика, но она растёт. Со временем они начнут играть большую роль в построении отзывчивых сайтов.

vw

Ширина области просмотра

vh

Высота области просмотра

vmin

Меньшее значение из ширины и высоты области просмотра

vmax

Большее значение из ширины и высоты области просмотра

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

Формула основана на взятии целевой ширины элемента и делении её на ширину родительского элемента. Результатом является относительная ширина целевого элемента.

цель ÷ контекст = результат

Гибкая сетка

Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родитель с классом container, который оборачивает элементы <section> и <aside>. Цель состоит в том, чтобы <section> располагался слева, а <aside> справа, с одинаковыми отступами между ними. Как правило, разметка и стили для этого макета будут выглядеть несколько похоже на следующее.

HTML

<div>
  <section>...</section>
  <aside>...</aside>
</div>

CSS

.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

Используя формулу гибкой сетки можно взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы воспользуемся процентами, но единицы em будут работать также хорошо. Заметьте, независимо от того, насколько широким становится родительский container, margin и width для <section> и <aside> масштабируются пропорционально.

section,
aside {
  margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
}
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */ 
}
aside {
  float: right;
  width: 29.3680297%;   /* 158px ÷ 538px = .293680297 */
}

Демонстрация гибкой сетки

Взяв идею гибкого макета с формулой и повторно применяя их ко всем частям сетки, мы создадим полностью динамический сайт, масштабирующийся до любого размера области просмотра. Для ещё большего контроля над гибким макетом можно также использовать свойства min-width, max-width, min-height и max-height.

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

Медиа-запросы

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

Инициализация медиа-запросов

Есть несколько разных способов применения медиа-запросов — с помощью правила @media в существующей таблице стилей, импорта новой таблицы стилей через правило @import и путём ссылки на отдельную таблицу стилей внутри HTML-документа. Вообще говоря, рекомендуем использовать правило @media внутри существующей таблицы стилей, чтобы избежать каких-либо дополнительных HTTP-запросов.

HTML

<!-- Отдельный CSS-файл -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

CSS

/* Правило @media */
@media all and (max-width: 1024px) {...}

/* Правило @import */
@import url(styles.css) all and (max-width: 1024px) {...} 

Каждый медиа-запрос может включать в себя тип носителя, за которым следует одно или несколько выражений. Основные типы носителей включают в себя all, screen, print, tv и braille. Спецификация HTML5 содержит новые типы носителей, включая даже 3d-glasses. Если тип носителя не может быть указан, медиа-запросом по умолчанию будет screen.

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

Логические операторы в медиа-запросах

Логические операторы в медиа-запросах помогают построить мощные выражения. Существуют три разных логических оператора, доступных для использования в медиа-запросах: and, not и only.

Использование логического оператора and в медиа-запросе позволяет добавить дополнительное условие и убедиться, что браузер или устройство одновременно выполняет а, б, в и т. д. Несколько отдельных медиа-запросов могут быть разделены запятой, действуя как негласный оператор or (или). В приведённом ниже примере выбираются все типы носителей с шириной между 800 и 1024 пикселей.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

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

@media not screen and (color) {...}

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

@media only screen and (orientation: portrait) {...}

Опускаем тип носителя

При использовании логических операторов not и only тип носителя может быть отброшен. В этом случае тип носителя по умолчанию принимается all.

Медиа-функции в медиа-запросах

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

height и width

Одна из наиболее распространённых медиа-функций вращается вокруг определения высоты или ширины области просмотра устройства или браузера. Высота и ширина могут быть найдены с помощью медиа-функций height, width, device-height и device-width. Каждая из этих медиа-функций также может быть использована с префиксом min или max, вроде min-width или max-device-width.

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

@media all and (min-width: 320px) and (max-width: 780px) {...}

В отзывчивом дизайне наиболее часто используемые функции включают min-width и max-width. Они помогают построить отзывчивые веб-сайты на компьютерах и мобильных устройствах одинаково, избегая путаницы с особенностями устройств.

Использование префиксов min и max

Префиксы min и max могут быть использованы со многими медиа-функциями. Префикс min указывает значения больше или равно, тогда как префикс max указывает значения меньше или равно. Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, без специального задействования символов < и >.

orientation

Медиа-функция orientation определяет, находится ли устройство в альбомной (landscape) или портретной (portrait) ориентации. Режим landscape срабатывает, когда дисплей шире, чем высота, режим portrait срабатывает, когда высота дисплея больше ширины. Эта медиа-функция играют роль в основном с мобильными устройствами.

@media all and (orientation: landscape) {...}

aspect-ratio

Функции aspect-ratio и device-aspect-ratio определяют соотношение ширины к высоте в пикселях целевой области визуализации или устройства вывода. Префиксы min и max доступны для использования с различными функциями, выявляя соотношения выше или ниже того, о котором говорится.

Значение функции состоит из двух положительных целых чисел, разделённых косой чертой. Первое число задаёт ширину в пикселях, а второе число задаёт высоту в пикселях.

@media all and (min-device-aspect-ratio: 16/9) {...}

pixel-ratio

Кроме медиа-функции aspect-ratio есть также функция pixel-ratio. Она включает функцию device-pixel-ratio, также с префиксами min и max. В частности, эта функция отлично подходит для определения устройств высокой чёткости, в том числе дисплеев ретина. Медиа-запрос для этого выглядит следующим образом.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}

resolution

Медиа-функция resolution определяет разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI. Функция resolution также принимает префиксы min и max. Кроме того, функция resolution принимает число точек на пиксель (1.3dppx), точек на сантиметр (118dpcm) и другие размеры на основе значений разрешения.

@media print and (min-resolution: 300dpi) {...}

Другие медиа-функции

Другие функции включают в себя определение доступных выходных цветов с помощью color, color-index и monochrome, выявление растровых устройств через функцию grid, а также определение процесса сканирования телевизора функцией scan. Эти функции менее распространены, но столь же полезны при необходимости.

Поддержка медиа-запросов в браузерах

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

Respond.js представляет собой облегчённый костыль, он ищет только min/max-width и должен идеально подходить там, где используются только эти медиа-запросы. CSS3-MediaQueries.js более развит и тяжелее, и предлагает поддержку более широкого множества более сложных медиа-запросов. Кроме того, имейте в виду, что любой костыль может иметь проблемы с производительностью и потенциально замедлить сайты. Убедитесь, что любой подобный костыль заслуживает снижения производительности.

Демонстрация медиа-запросов

Используя медиа-запросы мы сейчас перепишем гибкие макеты, которые построили ранее. Одна из текущих проблем в демонстрации появляется, когда ширина <aside> становится безуспешно маленькой на небольших экранах. Добавив медиа-запрос для области просмотра ниже 420 пикселей в ширину, мы можем изменить макет, отключив float и изменив ширину <section> и <aside>.

@media all and (max-width: 420px) {
  section, aside {
    float: none;
    width: auto;
  }
}

Рис. 4.02. Без каких-либо медиа-запросов <section> и <aside> становятся слишком узкими. Возможно, даже чересчур, чтобы содержать любой реальный контент.

Рис. 4.03. С помощью медиа-запросов мы убираем float и меняем ширину <section> и <aside>. Теперь они занимают всю ширину области просмотра, добавляя свободное пространство существующему содержимому.

Определение контрольных точек

Ваш инстинкт может подсказать писать контрольные точки в медиа-запросах основываясь на основных размерах области просмотра, как это определено разными разрешениями устройств, таких как 320px, 480px, 768px, 1024px, 1224px и т. д. Это плохая идея.

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

Кроме того, всё это время выходят новые устройства и разрешения. Попытка идти в ногу с этими изменениями это бесконечный процесс.

Сначала мобильные

Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.

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

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

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

/* Сперва стили по умолчанию, затем медиа-запросы */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

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

/* Стили по умолчанию */
body {
  background: #ddd;
}
/* Стили для больших устройств */
@media screen and (min-width: 800px) {
  body {
    background-image: url("bg.png") 50% 50% no-repeat;
  }
}

Демонстрация

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

section,
  aside {
  margin: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    max-width: 538px;
  }
  section {
    float: left;
    width: 63.197026%;
  }
  aside {
    float: right;
    width: 29.3680297%;
  }
}

Сначала мобильные

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

viewport

Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport.

Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.

Высота и ширина области просмотра

Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height, а для свойства width принимается ключевое слово device-width. С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.

Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width.

<meta name="viewport" content="width=device-width">

Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.

Масштабирование области просмотра

Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale, maximum-scale, initial-scale и user-scalable.

initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.

<meta name="viewport" content="initial-scale=2">

Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.

Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale. Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale. Оба значения также должны быть от 0 до 10.

<meta name="viewport" content="minimum-scale=0">

Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale. Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable. Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.

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

<meta name="viewport" content="user-scalable=yes">

Разрешение области просмотра

Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi. target-densitydpi принимает несколько значений, включая device-dpi, high-dpi, medium-dpi, low-dpi или конкретное число точек на дюйм.

Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.

<meta name="viewport" content="target-densitydpi=device-dpi">

Комбинация значений

Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content. Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale.

<meta name="viewport" content="width=device-width, initial-scale=1">

Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.

Правило @viewport

Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.

В настоящее время в некоторых браузерах уже реализовано правило @viewport, однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.

@viewport {
  width: device-width;
  zoom: 1;
}

Гибкий медиа-контент

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

Быстрый способ сделать медиа-контент масштабируемым — это использовать свойство max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой медиа-контент будут уменьшаться в соответствии с шириной контейнеров.

img, video, canvas {
  max-width: 100%;
}

Демонстрация гибких изображений

Встраивание гибкого медиа-контента

К сожалению, свойство max-width не очень хорошо работает для всех случаев медиа-контента, в частности, для <iframe> и встраиваемого медиа-контента. Когда дело доходит до внешних сайтов вроде YouTube, которые используют <iframe> для встраиваемого медиа-контента, это огромное разочарование. К счастью, есть решения.

Чтобы встраиваемый медиа-контент был полностью отзывчивым, элемент должен быть позиционирован абсолютно в родительском элементе. У родителя width должен быть 100%, чтобы он мог масштабироваться, основываясь на ширине области просмотра. Родительский элемент также должен иметь height равный 0, чтобы включить механизм hasLayout в Internet Explorer.

Затем добавляем padding снизу родительского элемента, значение которого устанавливается таким же, что и соотношение сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу гибкого макета? Если у видео соотношение сторон 16:9, то 9 разделить на 16 будет .5625, таким образом требуется нижний padding равный 56.25%. padding снизу, а не сверху используется специально для предотвращения Internet Explorer 5.5 от поломки и лечения родительского элемента, как абсолютно позиционированного.

HTML

<figure>
  <iframe src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe>
</figure>

CSS

figure {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Демонстрация гибкого видео

Ресурсы и ссылки

Автор и редакторы

Автор: Шэй Хоу

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр

Вчера была опубликована хорошая статья «

Веб-дизайн. Каждому устройству свое представление

». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

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

Почему это глупо

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

Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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

Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):

Все это называется «Responsive Web Design»

Responsive состоит из следующих техник:

Резиновый макет на основе пропорций (fluid grid)

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:

.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}

 
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}

Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:

.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}

На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

Резиновые изображения (fluid images)

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.

Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

Media queries

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

Например, так:

/* начало css */

 

Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).

 
@media only screen and (min-width: 480px) {

 

Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone  и так далее.

 
}

 
@media only screen and (min-width: 768px) {

 

Планшеты в режиме portrait.

 
}

 
@media only screen and (min-width: 992px) {

 

Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.

 
}

 
@media only screen and (min-width: 1382px) {

 

Десктоп с большими разрешениями, телевизоры.

 
}

 

 
/* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

Mobile first

Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.

Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.

Подробнее о Mobile first

Ссылки

1. Русскоязычный

блог о Responsive Web Design

2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.

Responsive или Adaptive Web Design

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

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

Почему адаптивный веб-дизайн стал необходимостью?
• Увеличение количества устройств с доступом в интернет
Сегодня есть множество устройств, которые используются для выхода в интернет. Эти устройства отличаются размером экрана, разрешением, а также тем, как на них отображаются страницы сайтов. Именно поэтому важно, чтобы Ваш сайт идеально отображался на любом устройстве пользователя.
• Рост популярности мобильных устройств, имеющих выход в интернет, и мобильного интернет-трафика.
За последнее время доступ в интернет со смартфона или планшета стал доступен практически каждому. Следовательно, каждому из пользователе должно быть комфортно на вашем сайт, в противном случае – они просто перестанут его использовать.
•Быстрая информация
Быстрый темп жизни диктует новые сценарии поведения пользователей. Сейчас ничего нет удивительно в осуществлении покупок с мобильного телефона или поиске контактов ближайшего нужного магазина, сервиса, ресторана.

Основные отличия мобильной версии сайта от адаптивного сайта
Мобильные версии сайтов и мобильные приложения, которые специального разрабатывались для различных мобильных устройств, могут сделать просмотр сайта удобным и приятным. Но у них есть определенные недостатки:
• Под каждый тип операционной системы должно быть создано свое приложение либо версия сайта, а это означает использование дополнительных ресурсов, то есть финансов и времени.
• Необходимость загрузки приложения. Чтобы пользователь мог использовать Ваше приложение ему потребуется его установить на свой гаджет. Следовательно, это требует от пользователя дополнительных усилий, поэтому большинство не будут выполнять таких действий, если у них нет уверенности в том, что это приложение им необходимо и они собираются его постоянно использовать.
• Разделение трафика. Главное неудобство мобильного приложения заключается в том, что весь трафик ресурса разделяется на два «потока» — трафик сайта и трафик приложения. Это означает, показатель посещаемости сайта будет значительно ниже, чем до создания мобильного приложения.
• Потребность в интеграции материалов сайта. Если используется мобильное приложение, тогда необходимо осуществлять синхронизацию сайта с приложением (что потребует использование дополнительных ресурсов), либо осуществлять двойную работу, под которой подразумевается наполнение сайта и приложения одинаковыми материалами.
Главным отличием адаптивного дизайна заключается в том, что сайт будет иметь один адрес, один дизайн, одну систему управление и один контент.

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

Отличия подходов  Responsive Web Design (RWD) и Adaptive Web Design (ADW)

Responsive Web Design (RWD) — отзывчивый веб-дизайн, Adaptive Web Design (ADW) — адаптивный веб-дизайн.  Каждый из терминов обозначает особый подход к созданию вашего веб-сайта и используется для описания процесса создания веб-сайта, который будет удобно просматривать с различных мобильных устройств. В этой статье мы расскажем вам о разнице между адаптивным и респонсив дизайном на практике, не углубляясь в техническую терминологию.

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

По сути, ADW (adaptive web design) и RWD (responsive web design) решают одну и ту же задачу, но разными способами.

При создании Responsive (отзывчивого) веб-сайта используется гибкая структура страницы — «резиновый макет» (fluid grid), пропорции и размеры элементов которой задаются в процентах. Помимо «резиновой» структуры, используются гибкие изображения (fluid images), «резиновые» текстовые блоки. При уменьшении ширины такой страницы весь контент плавно сожмется, структурные элементы уменьшатся относительно друг друга. Так, например, если ваш веб-сайт имел 3-х колончатую структуру, то на более узком экране он будет иметь две или одну колонку контента.

Для создания responsive версии веб-сайта используются медиа запросы (media queries) — блоки кода с указанием параметров устройств. Медиа запросы позволяют применять определенные стили для вывода различных контентных блоков в различном порядке и пропорциях в зависимости от ширины экрана и возможностей устройства, на котором происходит просмотр сайта.

Вот хороший пример «резинового» сайта:

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

Например, при создании сайта проектируется дизайн страниц нескольких типовых размеров по ширине: 320 px для смартфонов, 760 px, 1024 px  для  планшетов и 1680 px для десктоп браузеров. Когда пользователь заходит на адаптивный сайт, сервер определяет, при помощи какого устройства осуществляется просмотр, и показывает пользователю нужный контент и шаблон.

Данный подход позволяет достичь гораздо более полного взаимодействия пользователя и вашего сайта.

Определив, что пользователь зашел на ваш сайт при помощи iPad’a,  мы можем использовать возможности тач-скрин навигации, которая недоступна в браузерной версии, или отключать лишние блоки с flash элементами, которые не воспроизводятся на iOS устройствах, а так же задействовать другие характерные возможности мобильных устройств.

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

Чтобы лучше понять и увидеть адаптивный веб сайт в действии, посетите www.lufthansa.com с вашего стационарного компьютера и смартфона. Изменив размер окна браузера, можно отследить, как меняется шаблон сайта.

Какой подход стоит выбрать?

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

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

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

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

Что такое адаптивный веб-дизайн? (И как это работает)

Как веб-сайты могут успевать за миллионами экранов?

Это может быть через адаптивный веб-дизайн или дизайн RWD.

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

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

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

Содержание

Связанное чтение: Контрольный список для адаптивного дизайна из 7 пунктов

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

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

Вам также может понравиться: Статистика веб-сайта 2020

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

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

Адаптируется ли мой веб-сайт?

Вы можете быстро увидеть, реагирует ли веб-сайт, в вашем веб-браузере.

• Откройте Google Chrome
• Перейти на ваш сайт
• Нажмите Ctrl + Shift + I, чтобы открыть Chrome DevTools
• Нажмите Ctrl + Shift + M, чтобы переключить панель инструментов устройства
• Просматривайте свою страницу с мобильного устройства, планшета или настольного компьютера

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

Почему адаптивный веб-дизайн важен для веб-дизайнеров и владельцев бизнеса

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

Вот несколько преимуществ:

• Один сайт для каждого устройства: Независимо от того, просматриваете ли вы его на 27-дюймовом iMac с беспроводным подключением или с экрана вашего телефона Android, веб-сайт будет настроен так, чтобы пользователю было удобно просматривать.
• Оптимальный дизайн для устройства: Благодаря подходу адаптивного веб-дизайна все изображения, шрифты и другие элементы HTML будут масштабироваться соответствующим образом, максимально увеличивая размер экрана, который есть у пользователя.
• Нет необходимости в перенаправлении: Другие варианты проектирования для нескольких устройств требуют использования перенаправления для отправки пользователя на соответствующую версию веб-страницы.Без необходимости перенаправления пользователь может получить доступ к контенту, который он хочет просмотреть, как можно быстрее.

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

Ознакомьтесь с этими потрясающими тенденциями веб-дизайна на 2020 год

Примеры адаптивного веб-дизайна

Чтобы увидеть, как работает адаптивный веб-дизайн, войдите в Интернет со своего смартфона и просмотрите некоторые сайты, перечисленные на mediaqueri.es — онлайн-галерея с адаптивным веб-дизайном.

Теперь просмотрите те же сайты на другом устройстве с выходом в Интернет, например на своем ноутбуке или iPad. Вы также можете использовать DevTools в Chrome.

Обратите внимание, как страницы меняют свой макет, чтобы соответствовать устройству, которое вы используете?

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

Подробнее об адаптивном веб-дизайне

Хотите узнать больше об адаптивном веб-дизайне? Ознакомьтесь с этими полезными ресурсами:

Если вам нужна профессиональная помощь, чтобы сделать ваш веб-сайт адаптивным, вам может помочь WebFX.Мы предлагаем услуги адаптивного веб-дизайна и разработки, запустив более 1000 сайтов.

Позвоните нам по телефону 888-601-5359 или свяжитесь с нами через Интернет, чтобы поговорить со стратегом о решениях для индивидуального веб-дизайна!

Что такое адаптивный дизайн? | Фонд дизайна взаимодействия (IxDF)

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

Ввиду повсеместного распространения и разнообразия мобильных устройств нам, как дизайнерам, необходимо учитывать различные размеры экранов. Это проблема, с которой в настоящее время сталкивается каждый веб-дизайнер и разработчик приложений. От гигантского корпоративного монитора до умных часов сегодня существует огромное количество способов доступа пользователей к информации в Интернете. У дизайнеров, стремящихся преодолеть разрыв между устройствами, есть два варианта дизайна: адаптивный сайт или адаптивный сайт .

Автор / Правообладатель: Стефани Вальтер.Условия авторских прав и лицензия: CC BY-SA 3.0

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

Адаптивный дизайн

Автор / правообладатель: Мухаммад Рафизельди .. Условия авторских прав и лицензия: CC BY-SA 3.0

Термин «Адаптивный дизайн» впервые был придуман веб-дизайнером и разработчиком Итаном Маркоттом в его книге «Адаптивный веб-дизайн ». Адаптивный дизайн реагирует на изменений ширины браузера, на , настраивая размещение элементов дизайна так, чтобы уместилось на в доступном пространстве.

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

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

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

Адаптивный веб-дизайн был представлен в 2011 году веб-дизайнером Аароном Густафсоном в его книге « Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением». Он также известен как прогрессивное улучшение веб-сайта.

Там, где адаптивный дизайн основан на изменении шаблона проектирования, чтобы он соответствовал доступному пространству, адаптивный дизайн имеет несколько фиксированных размеров макета . Когда сайт обнаруживает доступное пространство , он выбирает макет , наиболее подходящий для экрана. Итак, когда вы открываете браузер на рабочем столе, сайт выбирает лучший макет для этого экрана рабочего стола; изменение размера браузера не влияет на дизайн .

Некоторые сайты быстро внедрили адаптивный дизайн. Amazon, USA Today, Apple и About.com сконфигурировали себя как веб-сайты, оптимизированные для мобильных устройств. Макет мобильного веб-сайта с адаптивным дизайном может отличаться от версии для ПК. Однако это связано с тем, что дизайнеры выбрали другую компоновку экрана телефона, а не оставили дизайн, чтобы попытаться изменить его сами.

В адаптивном дизайне обычно разрабатывают шесть дизайнов для шести наиболее распространенных значений ширины экрана; 320, 480, 760, 960, 1200 и 1600 пикселей.

Автономный мобильный дизайн

Существует также возможность создать веб-сайт только для мобильных устройств (они обычно обозначаются в строке URL-адреса браузера с помощью префикса «m.»). Этот вариант когда-то был отличным подходом. Дизайнеры создавали сайты для мобильных устройств, настраивая элементы и макет для определенного формата. Google обеспечивает рейтинг мобильных сайтов в поисковых системах, но сегодня те же предпочтения отдают адаптивным и адаптивным сайтам.

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

Выбор между адаптивным и адаптивным дизайном

Автор / правообладатель: Стефани Уолтер. Условия авторских прав и лицензия: CC BY-SA 3.0

Адаптивный дизайн проще и требует на меньше работы для реализации. Он обеспечивает меньший контроль над дизайном для каждого размера экрана, но на данный момент это, безусловно, предпочтительный метод для создания новых сайтов.Это также может иметь какое-то отношение к большому количеству дешевых шаблонов, доступных для большинства систем управления контентом (CMS), таких как WordPress, Joomla и т. Д. — в конце концов, кто хочет изобретать велосипед?

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

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

SEO — еще один большой аргумент в пользу использования адаптивного дизайна. Сайты с адаптивным дизайном (то есть с URL-адресами, обслуживающими все устройства) в настоящее время более удобны для поисковых систем.

У адаптивного дизайна есть веские основания для использования. Что ж, могло бы; однако имейте в виду следующее:

• Поскольку ваш веб-сайт будет «перетекать» с устройства на устройство, адаптируясь к размеру экрана, любые рекламные объявления, которые вы добавили, могут не уместиться в пространстве. Внезапно «ярлык», предлагаемый с помощью адаптивного дизайна, может нуждаться в некотором переосмыслении и доработке.
• Время загрузки зависит от настольного и мобильного устройства. Здесь большое внимание уделяется гибкости изображений. Большой дизайн, который быстро отображается на большом экране дома или в офисе, требует больше времени (и данных), чтобы появиться на вашем мобильном телефоне. Может быть, для мобильной версии лучше использовать превью меньшего размера?

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

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

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

Еще одно преимущество — исследования показывают, что компания с адаптивным веб-сайтом часто превосходит в тестах скорости компанию с адаптивным веб-сайтом. Это тоже немалая разница; адаптивные сайты часто в 2–3 раза быстрее адаптивных и предоставляют пользователю гораздо меньше данных, чтобы обеспечить удобство работы пользователя.

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

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

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

Наконец, в то время как боты поисковых систем становятся все лучше и лучше в просеивании и сортировке обращений, чтобы различать ваши сайты «.com» и «m .com», разумно принять статус-кво. Большинство поисковых систем по-прежнему неравномерно ранжируют идентичный контент по нескольким URL. Это означает, что нужно помнить, что адаптивный дизайн может удержать вас от SEO.

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

The Take Away

Автор / правообладатель: Brisbane Web Design. Условия авторских прав и лицензия: Public Domain

Современный веб-дизайн дает нам три варианта использования: адаптивный, адаптивный и автономный дизайн, хотя автономный дизайн вышел из употребления.

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

Адаптивный дизайн , разработанный в 2011 году, больше связан с тем, что у дизайнера есть несколько фиксированных размеров макета. Он предлагает альтернативу подходу «один размер для всех».

Выбор между адаптивным и адаптивным дизайном требует особого внимания. Хотя может быть разумным придерживаться адаптивного дизайна ради удобства (экономии средств, улучшения SEO и обеспечения бесперебойной работы пользователей с контентом между устройствами), крайне важно полностью проверить плюсы и минусы обоих дизайнов . Адаптивный дизайн может больше адаптироваться к различным потребностям пользователей в этой области; Таким образом, очень важно держать руку на пульсе перемен.

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

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

Ресурсы и где узнать больше

Изображение героя: Автор / Правообладатель: tfinc. Условия авторских прав и лицензия: CC BY-SA 3.0

Holst, C.(2012). «Адаптивные и адаптивные макеты и оптимальные метки полей форм». Smashing Magazine. Получено с: http://www.smashingmagazine.com/2012/11/08/ux-desi … [2014, 1 сентября]

Ицкович, А. (2012). «Создание адаптивной системы для улучшения UX». Smashing Magazine . Получено с: http://www.smashingmagazine.com/2012/12/creating-an-adaptive-system-to-enhance-ux/

Найт, К. (2011). «Адаптивный веб-дизайн: что это такое и как его использовать». Smashing Magazine. Получено с: http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/The Smashing Editor. (2012). «Рекомендации и учебные пособия по адаптивному веб-дизайну». (NB. Это отличный ресурс для поиска лучших статей, которые есть в журнале Smashing Magazine об адаптивном дизайне.) Получено с: http: //www.smashingmagazine.com/responsive-web-des …

Цао, Дж. (2015). «Адаптивный или адаптивный дизайн: что лучше для дизайнеров?», Студия UXPin.Получено с: http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Бин Узайр, С. (2013). «Адаптивный дизайн против адаптивного». Момент . Получено с: http://torquemag.io/responsive-design-vs-adaptive-design/

Обзор адаптивного дизайна, ресурсы и инструменты — Digital.gov

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

В течение многих лет большинство веб-команд создавалось для настольных компьютеров. Брендинг, навигация, рабочие процессы — общий внешний вид онлайн-приложений — все это считалось разумными областями, позволяющими отличить одно присутствие в Интернете от других. За последние несколько лет ситуация изменилась настолько кардинально, что начало работы с настольными компьютерами теперь может быть обратным способом создания веб-сайта. Мы должны уметь мыслить системно. Мобильные устройства здесь полезны, потому что вы просто видите панику на лицах людей, когда они говорят: «Что вы имеете в виду, я должен поддерживать iPhone, Android, Blackberry и планшеты… и будет ли это когда-нибудь лучше?»

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

Прочтите: Маленькие дешевые устройства разрушат наши старые предположения о UX (The Coming Zombie Apocalypse), в которых обсуждается, как грядущая волна дешевых электронных устройств в конечном итоге разрушит старые предположения о пользовательском опыте.

Зачем нужен адаптивный веб-дизайн?

С точки зрения взаимодействия с мобильным пользователем принуждение к использованию отдельных мобильных версий веб-сайтов или мобильных приложений представляет собой проблему, в частности, с согласованностью и непрерывностью следования гиперссылкам.Часто ссылки на веб-контент для настольных компьютеров разрываются, когда мобильное перенаправление вставлено без интеллекта, чтобы найти эквивалентную мобильную версию рассматриваемого контента. Хуже того, если мобильный пользователь пытается получить доступ к гиперссылке и вместо этого ему предоставляется полноэкранная реклама, чтобы перейти в свой магазин приложений и загрузить мобильное приложение для организации, в которую он пытается попасть, он испытывает неудобства либо из-за необходимости идти. через все этапы загрузки и установки и ожидания, иначе им придется выйти из рекламы и надеяться, что они все еще могут получить доступ к контенту, который они намеревались увидеть.Почему бы просто не доставлять контент пользователю в удобном мобильном формате с одним URL-адресом, который достаточно интеллектуален, чтобы переформатировать макет в зависимости от размеров экрана, используемого для доступа к нему?

В дополнение к соображениям взаимодействия с пользователем, мобильные версии веб-сайтов и приложений для мобильного контента, возможно, являются ненужными дополнительными расходами и усилиями для обслуживания, а мобильные приложения, разработанные с использованием собственных API-интерфейсов, таких как Objective-C, требуют дополнительных навыков для разработки. Более того, команда разработчиков может публиковать и распространять свои приложения и любые обновления обслуживания в зависимости от капризов процесса утверждения соответствующего магазина приложений.

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

Тематика, ориентированная на будущее

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

Изображения

Столы

Инструменты

Другие адаптивные ресурсы

Есть отзывы или вопросы? Отправьте нам письмо »

Почему адаптивный дизайн важен и одобрен Google

Можете ли вы вспомнить уменьшенную версию настольного сайта на своем телефоне, где вам нужно сжимать пальцы и увеличивать масштаб, чтобы что-то увидеть? Скорее всего, это был , а не — оптимальный опыт!

Из-за этого еще в 2015 году Google внес изменения в алгоритмы поисковых систем, которые теперь учитывают мобильное присутствие веб-сайта как сигнал ранжирования.Дата была метко названа Mobilegeddon . Только эта причина может оправдать , почему так важен адаптивный дизайн !

Проще говоря, веб-сайт должен быть удобным для пользователя на смартфоне.

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

Фактически, 40% пользователей перешли на веб-сайт конкурента из-за неудовлетворительного опыта работы с мобильными устройствами.

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

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

Мобильный адаптивный веб-сайт включает такие элементы дизайна, как:

• Читаемый текст без увеличения
• Достаточное пространство для касаний
• Без горизонтальной прокрутки

Знаете ли вы, что количество пользователей смартфонов во всем мире в 2016 году превысило 2 миллиарда?

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

Это правда, что более 60% поисковых запросов в Интернете сейчас выполняется с мобильных устройств.

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

Источник: Volusion

Давайте подробно рассмотрим, почему и как.

Во-первых… что такое мобильный адаптивный дизайн и почему это должно вас волновать?

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

Адаптивный веб-дизайн (RWD) создает систему, позволяющую единственному сайту реагировать на размер устройства пользователя — с одним URL-адресом и одним источником контента.Адаптивный веб-сайт имеет плавный и гибкий макет, который настраивается в соответствии с размером экрана.

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

По сути, ваш веб-сайт будет отлично выглядеть и хорошо работать на настольном компьютере (или ноутбуке), планшете и браузере мобильного телефона.

Получите это:

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

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

«Адаптивный веб-дизайн предлагает нам путь вперед, наконец, позволяя нам проектировать, учитывая приливы и отливы вещей». -Этан Маркотт

Наличие адаптивного веб-сайта для мобильных устройств — это не просто еще один вариант — это требование!

Преимущества адаптивного дизайна для мобильных устройств

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

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

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

Почему адаптивный дизайн важен для бизнеса

• Увеличьте охват клиентов и клиентов на небольших устройствах (планшетах и ​​смартфонах)
• Единый опыт, который может увеличить количество потенциальных клиентов, продажи и конверсию
• Аналитика, отслеживание и отчетность может быть в одном месте
• Уменьшается время и затраты на управление контентом на месте
• Опережайте конкурентов (даже 44% компаний из списка Fortune 500 в настоящее время не готовы к работе с мобильными устройствами!)

Обратите внимание, что Есть два других метода, с помощью которых можно обеспечить удобство работы с мобильными устройствами.Первый называется динамическим обслуживанием, при котором используется тот же URL-адрес, но другой код HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и выдают правильный код.

Второй способ — это вообще отдельный мобильный сайт. Когда пользователи заходят на сайт с мобильного устройства, они отправляются на другой URL-адрес для мобильных устройств.

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

На Google приходится более 5,7 миллиардов поисковых запросов, которые ежедневно выполняются в Интернете человек.

Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, — это адаптивный веб-дизайн.

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

СМОТРИ ТАКЖЕ: 5 наиболее распространенных ошибок веб-дизайна, которых следует избегать прямо сейчас

44% компаний из списка Fortune 500 в настоящее время не готовы к работе с мобильными устройствами! Нажмите, чтобы написать в Твиттере

Как создать адаптивный дизайн

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

Три основных компонента адаптивного веб-дизайна включают в себя:

• Плавную сетку
• Гибкий текст и изображения
• Медиа-запросы

Я объясню каждый далее.

A Fluid Grid

Сетка является важным элементом для создания адаптивного макета.

Теперь в сетках нет ничего нового.

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

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

Наиболее распространенные размеры экрана для адаптивного дизайна:

Большой рабочий стол
1220 пикселей и более

Рабочий стол
960 — 1219 пикселей

Планшет (портрет)
768 — 959 пикселей

Мобильный (широкий)
480 — 767 пикселей

Мобильный
479 пикселей и менее

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

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

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

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

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

Медиа-запросы

Это код, который обеспечивает гибкость макета на адаптивных веб-сайтах.Медиа-запросы указывают CSS, который будет применяться соответствующим образом, в зависимости от точки останова устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. Д.).

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

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

Взгляните:

Пользовательское тестирование отзывчивых веб-сайтов

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

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

Сайты, такие как Peek или UserTesting.com, предоставляют пользовательское тестирование за небольшую плату или бесплатно. Нетрадиционные методы, такие как тестирование в естественных условиях и сортировка карточек, также могут помочь обнаружить неожиданные болевые точки.

Тестирование браузеров и устройств для адаптивного дизайна

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

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

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

Вдохновение от адаптивных веб-сайтов

Как и в любом дизайн-проекте, найдите другие адаптивные веб-сайты, которые творчески выполняют адаптивный веб-дизайн.

Это может быть так же просто, как ответить на следующие вопросы:

• Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах?
• Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги?
• Что вы предпочитаете — мобильный телефон или рабочий стол?

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

Примеры адаптивного дизайна веб-сайтов

Один из моих любимых сайтов, где можно ознакомиться с лучшими практиками адаптивного дизайна в Интернете, — это Media Queries. Сайт представляет собой набор вдохновляющих веб-сайтов, использующих медиа-запросы и адаптивный веб-дизайн, курируемый Эйвиндом Уггедалом.

Ознакомьтесь с некоторыми из этих примеров адаптивного дизайна веб-сайтов.

Slack

Stripe

Cornell University

Medium

Будущее адаптивного дизайна для мобильных устройств

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

• Текст в удобочитаемом размере, без необходимости масштабирования
• Контент, который соответствует экрану устройства, без необходимости горизонтальной прокрутки
• Ссылки и кнопки, которые достаточно разнесены, так что нажатие не сложно
• Разумное время загрузки страниц
• Flash не используется! (надеюсь, большинство из вас спросит: «Что такое Flash?»)

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

Оптимизирован ли мой веб-сайт для мобильных устройств?

Вы можете легко проверить, реагирует ли ваш веб-сайт, воспользовавшись полезным инструментом Google.

Пройдите тест на отзывчивость Google прямо сейчас, чтобы узнать, где находится ваш сайт. Проверьте свой сайт

Вы получили зеленый свет? Отлично, ваш сайт прошел тест на отзывчивость Google.Возможно, вы уже знаете, почему адаптивный дизайн важен для пользователей вашего сайта.

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

Рекомендации по адаптивному дизайну

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

Эта статья отвечает на вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: гибкая сетка, гибкий текст и изображения и медиа-запросы.

Помните о важности адаптивного веб-дизайна для вашего бизнеса. Это поможет вам:

• Увеличить охват потребителей на всех устройствах
• Поддерживать согласованный пользовательский опыт, увеличивающий удержание
• Консолидировать аналитику, отслеживание и отчетность
• Сокращать время и затраты на управление контентом на месте
• Конкурировать в своей отрасли с другими брендами

Google привлекает 96% мобильного поискового трафика и рекомендует адаптивный дизайн как лучшую практику.Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает повысить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего веб-сайта.

Увеличение трафика приводит к лучшему привлечению потенциальных клиентов, увеличению количества конверсий и увеличению продаж — три основные причины, по которым вам нужен адаптивный веб-дизайн!

Можете ли вы рассказать о других причинах важности адаптивного дизайна?

Поделитесь своими комментариями ниже!

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

Если вам понравилась эта статья, поделитесь, пожалуйста!

Что такое адаптивный дизайн? — Определение с сайта WhatIs.com

К

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

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

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

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

Крис Конверс из Codify Design Studio демонстрирует основные элементы адаптивного дизайна:

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

Последнее обновление было выполнено в январе 2012 г.

Продолжить чтение об адаптивном дизайне

Адаптивный веб-дизайн: основные советы и подходы

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

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

–

Проще говоря, адаптивный веб-дизайн (RWD) — это подход, который позволяет дизайну и коду реагировать на размер экрана устройства. Это означает, что это дает вам оптимальные впечатления от просмотра, смотрите ли вы на 4-дюймовый мобильный телефон Android, свой iPad mini или 40-дюймовый кинотеатр.

Сравните, как выглядит наш сайт при статическом и фактическом адаптивном дизайне :

Лучшие отзывчивые веб-сайты по существу используют гибкие сетки, , гибкие изображения, и стили CSS , чтобы изменять дизайн сайта и отображать его в соответствии с шириной браузера. Конечная цель дизайнеров должна заключаться в том, чтобы легко адаптировать UI и UX дизайна веб-сайта для разных устройств и платформ.

Почему так важен адаптивный дизайн?

–

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

Основным ключом к адаптивному веб-дизайну является знание своей аудитории и того, какое устройство они используют для просмотра вашего веб-сайта. Какая часть вашего текущего трафика составляет настольных ПК, планшетов и мобильных устройств? Примерно 56 процентов трафика на веб-сайтах в США сейчас поступает с мобильных устройств. Сегодня насчитывается около 2,6 миллиарда пользователей смартфонов и к 2020 году, а к 2020 году их число может превысить 6 миллиардов . Мобильный дизайн никогда не был так важен.

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

Не любите дизайн для Интернета? Не волнуйтесь, каждый в отрасли ведет постоянную борьбу за адаптацию дизайна для всех версий браузеров, а также устройств.Лучший ответ — просто протестировать свой сайт на как можно большем количестве новых и старых устройств. (И наймите супер-гуру-разработчика!)

Для каких размеров веб-сайта я должен создавать дизайн?

–

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

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

Попробуйте создать не менее 3 макетов

–

Адаптивный дизайн веб-сайта должен иметь как минимум 3 макета для разной ширины браузера. Конкретные цифры, которые мы приводим, — это то, что мы в настоящее время используем в 99designs, но это не жесткие правила.

• Маленький: до 600 пикселей. Так контент будет выглядеть на большинстве телефонов.

• Средний: 600–900 пикселей. Так контент будет выглядеть на большинстве планшетов, некоторых больших телефонах и небольших компьютерах типа нетбуков.

• Большой: более 900 пикселей. Так контент будет выглядеть на большинстве персональных компьютеров.

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

Пример нашей страницы с логотипом для трех разных размеров экрана для адаптивного дизайна веб-сайта.

О чем задуматься

—

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

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

дизайн Karol Ortyl

• Вовлеченность: иерархия макета очень важна, особенно на мобильных устройствах. Часто лучше меньше, да лучше! Мобильный интерфейс по сравнению с настольным компьютером гораздо более сфокусирован с ограниченным пространством, поэтому способ, которым пользователи читают и перемещаются по вашему сайту, должен быть действительно четким, чтобы донести ваше ключевое сообщение и понять, о чем сайт.Также подумайте о главном действии на странице. Если ключевая цель — заставить людей нажимать кнопку «Связаться с нами», не прячьте ее внизу страницы под блоками текста. Адаптируйте свой контент и дизайн к этому опыту.

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

• Навигация важна для мобильных устройств. Существует несколько распространенных методов сопоставления больших меню и содержимого. Это может быть знакомое меню стиля гамбургера, простой раскрывающийся список, поля развертывания / свертывания или вы можете использовать вкладки, которые прокручиваются по горизонтали, как YouTube.

Дизайн

от UI Garage

• Жесты открывают новые возможности для дизайна. Людям нравится читать руками и взаимодействовать с контентом — это расширяет возможности пользователя.На мобильных телефонах и планшетах пользователи могут масштабировать или перемещать изображения по экрану пальцем. Взаимодействие сильно влияет на дизайн. Например, если у вас есть галерея изображений, постарайтесь не использовать стандартную карусель (маленькие точки), чтобы люди циклически просматривали каждое изображение. Подумайте о размере пальца человека и о том, как это превратить в полезное решение для пользовательского интерфейса. Согласно Apple: удобный минимальный размер нажимаемых элементов пользовательского интерфейса составляет 44 x 44 пикселей . Этот предел часто нарушается, и реальный предел оценки составляет около 25 пикселей.Сложный дизайн рабочего стола должен иметь возможность адаптироваться к простому интуитивно понятному интерфейсу для небольшого мобильного экрана. Всегда помните об этом при проектировании для разных устройств. Дизайн должен быть гибким, чтобы пользователям было удобнее работать на всех устройствах. Тесное сотрудничество с разработчиком, чтобы понять, какие возможности на небольших экранах повлияют на процесс проектирования.

• Разработайте как минимум 3 версии для браузеров разной ширины. Мы используем менее 600 пикселей, 600–900 пикселей, 900 пикселей +.Между этими ширинами ваш контент может свободно масштабироваться, или вы можете сохранить 3 фиксированных макета. Наличие 3 (или более) фиксированных макетов и добавление полей при необходимости обычно легче спроектировать и реализовать, чем плавное масштабирование. Однако жидкостное масштабирование может улучшить работу на большем количестве устройств.

Инструменты и ресурсы

—

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

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

• Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях. Например, ширина контента на экране рабочего стола может составлять 930 пикселей, но вы хотите, чтобы дизайн был уменьшен до 320 пикселей на мобильных устройствах.Чтобы преобразовать это в масштабируемую цифру, результат получается 320/930 = 34,4%. Когда вы примените это к размеру мобильного экрана, элементы в макете дизайна будут изменять размер по отношению друг к другу. Нам нравится One% CSS Grid.

Дизайн Антона Ахейчанка

• Медиа-запросы — это тип кода, который будет внедрен на ваш сайт, когда он будет построен. Это важно в вашем коде, потому что он задает условия, при которых дизайн волшебным образом адаптируется к размеру экрана.Например. «Когда размер экрана равен 480 пикселей или меньше, переходите к макету дизайна планшета». Попробуйте прямо сейчас, просто перетащив окно браузера меньше (если вы находитесь на рабочем столе). Вы увидите, что размер содержимого автоматически изменяется в соответствии с различными точками останова дизайна на экране.

• Другие ресурсы для начала:

Я уверен, что теперь вы знаете все об адаптивном дизайне, верно ?!

–

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

Каковы ваши лучшие советы по адаптивному дизайну?

–

Нужен адаптивный веб-сайт, разработанный для вашего бизнеса?

Наше глобальное сообщество профессиональных графических дизайнеров может это сделать!

Адаптивных сайтов: 30 примеров и 5 лучших практик | by Justinmind

Адаптивный веб-дизайн помогает создавать удобные пользовательские интерфейсы на всех платформах и устройствах.Вот 5 лучших практик и 30 примеров адаптивных веб-сайтов.

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

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

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

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

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

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

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

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

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

1. Адаптивный и гибкий макеты

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

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

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

2. Используйте по крайней мере три точки останова.

Точки останова — это точки в CSS веб-сайта, которые изменяют способ отображения содержимого при различных разрешениях экрана.Обычно они разрабатываются с использованием значений min-width и max-width в адаптивном дизайне, которые относятся к минимальной или максимальной ширине пикселей на экране или для элементов.

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

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

3. Начните с точек останова минимальной ширины

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

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

4. Расставьте приоритеты для контента

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

Согласно Interaction Design Foundation, мобильные пользователи предпочитают более короткие и простые взаимодействия. Это означает, что они будут искать более конкретный контент. Скрытие контента и раскрытие его при необходимости может помочь упрочить этот беспроблемный пользовательский интерфейс.Однако иногда вам нужно просто иметь определенный контент на веб-сайте, поэтому использование сворачиваемых и расширяемых меню может работать вам здесь.

5. Относитесь серьезно к кнопкам

Дизайн кнопок имеет первостепенное значение, когда речь идет о гибком дизайне. На рабочем столе легко нажать кнопку, особенно с помощью мыши. А как насчет планшета? Или мобильный телефон? Палец не обладает точностью мыши.

Ссылки и другие интерактивные области также подпадают под эту категорию.Если область щелчка слишком мала, вы можете расстроить своих пользователей. Средний размер касания пальцем составляет 44 × 44 пикселя, согласно Руководству Apple по работе с людьми. Для удобства использования адаптируйте пользователей, убедившись, что ваши кнопки и интерактивные области хорошо настроены для этого среднего значения.

1. An Event Apart

Конференция по дизайну взаимодействия An Event Apart обеспечивает плавный переход от их основного веб-сайта к их мобильному сайту.

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

Единственное реальное изменение — это то, что для мобильной версии хлебные крошки вверху сворачиваются с гамбургер-меню, которое четко обозначено словом «меню».

2.New York City Ballet

New York City Ballet использует видео на всех своих платформах, что дает пользователям представление о том, чего ожидать от посещения одного из их шоу.

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

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

3. Paper Tiger

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

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

4. Wired

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

Хорошим примером этого может быть сравнение мобильной версии с настольным компьютером и планшетом.Первый радикально упрощен, чтобы не ослеплять пользователя, и использует ограниченное пространство, чтобы представить «Главные новости» прежде всего.

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

5. Музей Виктории и Альберта

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

Он выхватывает печально известное гамбургер-меню на своем мобильном устройстве.

Чтобы противостоять дурной славе меню, V&A решили объединить его с четкой копией, чтобы пользователи знали, где они могут найти параметры навигации.

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

6. Popular Science

Popular Science обеспечивает удобство работы пользователей независимо от того, какое устройство вы используете.

Контент занимает центральное место, как и следовало ожидать. Благодаря адаптивным изображениям и чистой типографике Popular Science успешно создает адаптивный веб-сайт, который легко читать и использовать.

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

7. Swiss Air

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

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

Изменение сетки на основном веб-сайте и в версии для планшета на строки в мобильной версии также было разумным выбором.

8. Spigot Design

Spigot Design предлагает веб-дизайн и разработку с полностью персонализированным сервисом. Его веб-сайт может похвастаться захватывающим видео с героями с модным полупрозрачным цветным слоем поверх. Он работает отлично, независимо от того, на каком устройстве вы его просматриваете.

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

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

9. MGSM

Модный бренд MGSM специализируется на последних тенденциях на своем рынке, но он также является лидером в области веб-дизайна.

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

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

10. Дизайн «Сделано в Германии»

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

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

Интересно, что название веб-сайта уменьшается с «DMIG 5» до «5» при изменении размера или просмотре на мобильном устройстве, что означает, что дизайнеры действительно думали о количестве деталей в меньших разрешениях и о том, как это повлияет на взаимодействие с пользователем.

11. Больше опасностей Больше героев

Этот народный дуэт из Нэшвилла выбрал лучший дизайн для своего адаптивного веб-сайта.

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

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

12. Smashing Magazine

Дизайн веб-сайта Smashing Magazine громко кричит красным цветом — это кладезь забавных, интерактивных элементов и контента.

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

Это достигается за счет правильного использования интервалов и типографики; размер шрифта и положение контента были четко разработаны с учетом размера страницы.

Кнопка «Темы» меняется на кнопку «Меню» как решение для уплотнения элементов навигационной цепочки и убивает двух зайцев, переходя в раздел «Темы».

13. Flow Festival

Когда вы заходите на сайт музыкального фестиваля, первое, что вы хотите увидеть, — это состав участников. Кто играет?

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

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

14. Magic Leap One

Magic Leap One — это создание дополненной и виртуальной реальности для своих пользователей, и веб-сайт демонстрирует это. И он делает это на удивление хорошо благодаря уникальному интерактивному интерфейсу, который поддерживается на всех платформах.

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

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

15. Dropbox

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

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

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

16. GitHub

GitHub демонстрирует, что важно показать пользователю, когда речь идет о бизнесе и целях конверсии.Например, когда вы заходите на их версии для настольных ПК и планшетов, первое, что вы замечаете, — это описание того, что предлагает GitHub.

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

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

17. Shopify

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

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

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

18. Dribbble

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

Однако закрепление гамбургера слева от экрана имеет смысл в случае с Dribbble.Учтите, что большинство пользователей, попадая на Dribbble, стремятся искать определенные категории дизайна. Теперь имеет смысл зарезервировать правую часть для полосы фильтров!

19. Slack

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

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

20. CSS Tricks

Что нам интересно в CSS Tricks, так это то, что для популярного ежемесячного контента они используют карусель как для настольной, так и для адаптивной версии своего веб-сайта.

Как ни странно, в мобильной версии эта карусель действительно обеспечивает более удобную работу.На рабочем столе вам необходимо использовать полосу прокрутки для прокрутки контента, чего большинство дизайнеров UX-UI сегодня стараются избегать.

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

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

21. Deux Huit Huit

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

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

Текст на главном изображении все еще движется, а их GIF-файлы по-прежнему являются GIF-файлами. Однако при уменьшении масштаба они скрывают свои пункты меню буквально за словом «Меню», которое функционирует как кнопка. Включение текста с возможностью нажатия в мобильные версии может показаться немного нелогичным для мобильных пользователей, но, тем не менее, мы ценим инициативу.

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

22. Rally Interactive

Rally Interactive — это пример адаптивного веб-сайта, который пытается предоставить пользователю максимальное удобство между мобильной и настольной версиями своего веб-сайта. Гамбургер-меню в настольной версии точно такое же, как и в мобильной. Изображения одинаковы, и практически весь контент, включая кнопку «Вернуться вверх», одинаков.Единственное, что изменилось в мобильной версии, — это сдвиг текста из двух столбцов в один столбец.

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

23. Агентство цифрового маркетинга и рекламы VML

Адаптивный веб-сайт Агентства цифрового маркетинга и рекламы VML переходит от макета с тремя столбцами к макету с одним столбцом после того, как его масштаб уменьшается до меньшего разрешения. Однако большая часть контента остается прежней. Даже гамбургер-меню остается таким же, как и в настольной версии, как в приведенном выше примере с Rally Interactive.

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

24. Forefathers Group

Forefathers Group — дизайнерская студия, которая, очевидно, много думает и прилагает усилия для создания настольного дизайна своего веб-сайта. Первое, что приветствует пользователя, когда он попадает в настольную версию, — это немое видео-герой, в котором некоторые дизайнеры кукол обсуждают свою повседневную жизнь в студии.

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

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

25. Наоми Аткинсон

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

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

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

26. 1987 Masters

1987 Masters — компания по организации мероприятий, базирующаяся в Лос-Анджелесе. Несмотря на то, что в их доменном имени написано «1987» (1987 мастеров или 1987 год?), Их веб-сайт, кажется, построен в стиле, более близком к дизайну 70-х годов, с нечеткой рамкой, которая следует за курсором по экрану.Этот курсор немного отвлекает и в лучшие времена немного тошнит.

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

27. BeDance School

BeDance School — это адаптивный шаблон веб-сайта от Muffin Group.Он красочный, привлекательный и отвечает большинству требований, когда дело доходит до увлекательного дизайна пользовательского интерфейса. И он также в основном отзывчивый: каждый элемент, изображение и текстовый абзац красиво масштабируются в соответствии с его местом в заранее определенной иерархии контента.

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

28.Starbucks

Starbucks — отличный пример адаптивного веб-сайта — простой, привлекательный адаптивный дизайн, сделанный правильно. Здесь нет причудливого параллакса, но он одинаково хорошо справляется со статичными, но красочными изображениями их сезонной линейки продуктов. Однако у них могла возникнуть дилемма, заключающаяся в том, что их продуктовое «меню», которое также является опцией меню, объединяется в гамбургер-меню при уменьшении масштаба дизайна.

Почему это может быть проблемой? Ты угадал! Потому что многие пользователи не ожидают увидеть опцию «Меню», когда открывают гамбургер-меню.Однако Starbucks, очевидно, достаточно хорошо знала своих пользователей, чтобы понять, что они «поймут», что в данном случае они явно говорят о меню продукта, а не о меню веб-сайта!

Еще один заслуживающий внимания аспект — их подход к иерархии контента при уменьшении масштаба контента для меньших разрешений. Например, в настольной версии слева от изображения карты отображается абзац с описанием их карты Rewards Visa Card. Обычно, когда два столбца уменьшаются в масштабе, содержимое справа имеет тенденцию опускаться ниже, чем слева.Однако в этом случае изображение смещается вверх над описанием. Эта установка позволяет им показывать карточку перед текстом.

29. Paravel

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

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

30. Scott Resort

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

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