17 действительно полезный отзывчивый учебник по веб-дизайну

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

01.

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

02. Создайте отзывчивый сайт с размерами на основе em

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

03. Приоритетные руководства: первая альтернатива каркасам для контента

Каркасы могут быть наиболее широко используемым инструментом для проектирования веб-сайтов, приложений и других цифровых интерфейсов, но они не лишены своих недостатков, особенно когда речь идет о гибком дизайне. Здесь Heleen van Nues и Lennart Overkamp представляют свою предпочтительную альтернативу каркасам: приоритетные направляющие, содержащие контент и элементы для мобильного экрана, отсортированные по иерархии сверху вниз и без макетов.

04.

[194590001]

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

05. Как создать отзывчивые и устройства-агностические формы

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

06. Создайте отзывчивый макет с CSS Grid

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

07. Руководство для веб-дизайнера Flexbox

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

08. Codrops Ссылка на Flexbox

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

09. Стеки: Flexbox для Sketch

Стеки, входящие в плагин Auto Layout, предоставляют вам возможность использовать Flexbox в Sketch, без использования CSS. В этой статье объясняется, как вы можете использовать эту мощную технику для легкого реагирования на дизайн.

10.

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

11. Создайте гибкие макеты с Susy и Breakpoint

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

12. Как создать отзывчивые руководства в Adobe XD

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

13. CSS на BBC Sport

Это не учебник как таковой, но есть много обучения Вот. В этом посте первая из серии из двух частей, сторонний разработчик Shaun Bent, рассказывает нам о том, как CSS делается на BBC Sport.

Липкий нижний колонтитул … это должно быть достаточно простым, не так ли? К сожалению нет. Это может быть сложнее, чем можно ожидать, чтобы получить нижний колонтитул в нужном месте на каждом устройстве. К счастью, Крис Койер собрал пять трюков, которые помогут вам сделать это, используя calc () Flexbox, отрицательные поля и сетку.

15. Адаптация к вводу

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

16. Наши лучшие практики убивают мобильную работу в Интернете

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

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

Статьи, относящиеся к