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

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