Первоначально опубликовано на веб-сайте web-crunch.com 29 марта 2017 г.

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

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

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

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

Думайте прогрессивно

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

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

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

Фрагмент Sass Mixin

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

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

/* Breakpoints */
$cap: 1920px;
$ml: 970px;
$m: 850px;
$s: 740px;
$xs: 500px;

@mixin breakpoint($point) {
  @if $point == large {
    @media (max-width: $cap) { @content; }
  }
   @else if $point == mediumlarge {
    @media (max-width: $ml) { @content; }
  }
  @else if $point == medium {
    @media (max-width: $m) { @content; }
  }
  @else if $point == small {
    @media (max-width: $s)  { @content; }
  }
  @else if $point == extrasmall {
    @media (max-width: $xs)  { @content; }
  }
  @else if $point == mega {
    @media screen and (min-width: $cap) { @content; }
  }
}

@mixin ipadlandscape {
  @media only screen and(min-device-width : 768px) and(max-device-width : 1024px) and(orientation : landscape) {
    @content;
  }
}

@mixin ipadportrait {
  @media only screen and(min-device-width : 768px) and(max-device-width : 1024px) {
      @content;
    }
}

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

#myElement {
  padding: 5px;
  @include breakpoint(medium) {
    // On screen widths <= 850px
    padding: 25px;
  }
}

Сериал до сих пор

Первоначально опубликовано на веб-сайте web-crunch.com 29 марта 2017 г.