The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

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

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

Большинство макетов, используемых для создания отзывчивых веб-страниц, можно отнести к одной из пяти категорий шаблонов: Mostly Fluid (Наиболее резиновый), Column Drop (Столбцы друг под другом), Layout Shifter (Двигающийся макет), Tiny Tweaks (Крошечные изменения) и Off Canvas (Вне экрана). В некоторых случаях на странице может использоваться сочетание шаблонов, например Column Drop и Off Canvas. Эти шаблоны, которые изначально были определены Люком Вроблевски (Luke Wroblewski), являются надежной отправной точкой для создания любой отзывчивой страницы.

Шаблоны

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

Mostly Fluid (Наиболее резиновый)

Шаблон Mostly fluid (Наиболее резиновый) состоит главным образом из "резиновой" сетки. На экранах большой или средней ширины ее размер обычно остается неизменным, в то время как на больших экранах регулируются только поля

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

В самом маленьком представлении все контейнеры div контента располагаются вертикально друг под другом. Как только ширина экрана превышает 600 пикселей, основной div контента остается с width: 100%, а второстепенные div отображаются в виде двух столбцов, расположенных под основным div. На экранах шириной 800 пикселей и более div-контейнер получает фиксированную ширину и располагается по центру экрана.

Сайты, созданные с использованием этого шаблона:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Column Drop (Столбцы друг под другом)

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

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

Контент в этом наиболее "резиновом" образце, располагается вертикально в самом маленьком по размеру представлении, а когда ширина экрана становится больше 600 пикселей, div основного и второстепенного контента занимает всю ширину экрана. Порядок расположения div задается с помощью свойства CSS order. На экране шириной более 800 пикселей отображаются все три контейнера div содержимого, занимая всю ширину экрана.

Сайты, созданные с использованием этого шаблона:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

Layout shifter (Двигающийся макет)

Шаблон Layout shifter является наиболее отзывчивым, поскольку в нем предусмотрено наличие нескольких контрольных точек для экранов различной ширины

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

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

Сайты, созданные с использованием этого шаблона:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Tiny Tweaks (Крошечные изменения)

Шаблон Tiny Tweaks (Крошечные изменения) просто вносит небольшие изменения в макет, например, регулирует размер шрифта, меняет размер изображений или перемещает контент.

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

Попробовать

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

Сайты, созданные с использованием этого шаблона:

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

Off Canvas (Вне экрана)

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

В этом образце элементы контента не размещены вертикально друг под другом, а два контейнера div контента вынесены за пределы экрана с помощью transform: translate(-250px, 0). Для отображения этих div используется JavaScript: к элементу, который необходимо показать на экране, добавляется класс open. По мере увеличения ширины экрана размещение элементов за пределами экрана убирается,и они отображаются в пределах видимости.

По поводу этого образца следует отметить, что Safari для iOS 6 и Android Browser не поддерживают функцию flex-flow: row nowrap элементаflexbox, поэтому пришлось вернуться к абсолютному позиционированию.

Сайты, созданные с использованием этого шаблона:

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}