10 полезных туториалов по адаптивному веб-дизайну

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

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

01. Codrops Flexbox reference

Этот гайд по Flexbox верстке написала Сара Сюайден (Sara Soueidan) – автор, который известен своей способностью объяснять концепты в простой и понятной манере. Codrops гайд регулярно обновляется, так что это отличный ресурс, к которому можно вернуться при необходимости.

02. Stacks: Flexbox for Sketch

Stacks (часть плагина Auto Layout) позволяет использовать Flexbox технологию внутри Sketch, при этом обходя стороной CSS. Эта статья объясняет, как использовать эту мощную технику для простого создания адаптивного дизайна.

03. A crash course in technical RWD

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

04. Create flexible layouts with Susy and Breakpoint

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

05. How to create responsive guides in Adobe XD

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

06. The web designer’s guide to Flexbox

Еще не начали использовать Flexbox? В этом туториале Web Bos подробно рассказывает о ключевых концептах, с помощью которых вам будет легко понять все, что нужно для использования этого мощного инструмента.

07. CSS at BBC Sport

Это не совсем туториал, но здесь есть чему поучиться. В первой из двух частей этого сообщения, фронтенд-разработчик Шон Бент (Shaun Bent) проводит для нас детальный тур по CSS в BBC Sport. Они умудрились уместить CSS код этого массивного сайта в 9кб памяти. Очень занятно посмотреть, как им это удалось.

08. Sticky footer, five ways

Прилипающий футер (Sticky footer)… должно быть просто, да? К сожалению, нет. Это значительно сложнее, чем вы думаете: разместить футер так, чтобы на всех девайсах он был в одном месте. К счастью, Крис Койер (Chris Coyier) собрал 5 способов, которые помогут справиться с этой задачей с помощью функции calc( ), Flexbox, отрицательных margin и грид-системы.

09. Adapting to input

Адаптивный дизайн не только помогает в правильном отображении сайта на всех устройствах, но и делает так, чтобы он хорошо функционировал. Это означает, что ввод данных должен отлично работать в мире, где у десктопных компьютеров есть тачскрины, а у телефонов клавиатуры. Это статья Джейсона Григсби (Jason Grigsby) о Cloud Four содержит много хороших советов.

10. Our best practices are killing mobile web performance

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

• Читайте также: Инструменты дизанера, без которых невозможно обойтись

Перевод статьи 10 really useful responsive web design tutorials

Автор оригинального текста: Таня Комбринк (Tanya Combrinck)