Изучайте отзывчивый дизайн

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

Добро пожаловать на курс “Изучение отзывчивого дизайна”! #

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

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

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

Этот курс создан для начинающих и средних дизайнеров и разработчиков. Базового понимания HTML и CSS должно быть достаточно. Вам не нужно знать JavaScript. Если вы совсем новичок в создании веб-сайтов, есть вводный курс по HTML и еще один курс, который поможет вам освоить CSS.

Вот что вы узнаете:

Введение

Узнайте, откуда взялся отзывчивый дизайн.

Медиазапросы

Адаптация дизайна к различным размерам экрана с помощью медиазапросов CSS.

Интернационализация

Подготовьте дизайн для разных языков и режимов письма.

Макросхемы

Создавайте макеты страниц, используя различные техники CSS.

Микромакеты

Создавайте гибкие компоненты, которые можно разместить в любом месте.

Типографика

Сделайте текст разборчивым и красивым, где бы он ни появлялся.

Отзывчивые изображения

Предоставьте своим посетителям изображения, наиболее подходящие для их устройств и экранов.

Элемент изображения

Проявите больше творческого контроля над своими изображениями.

Иконки

Используйте SVG для масштабируемой отзывчивой иконографии.

Теминг

Адаптируйте свой дизайн в соответствии с предпочтениями пользователя, например, с темным режимом.

Доступность

Убедитесь, что ваш сайт доступен для всех.

Взаимодействие

Подготовьте ваши страницы для различных механизмов ввода: мыши, клавиатуры и прикосновения.

Шаблоны пользовательского интерфейса

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

Особенности мультимедиа

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

Конфигурации экранов

Подготовьте свой контент для устройств с несколькими экранами.

Заключение и следующие шаги

Дополнительные ресурсы, которые помогут вам предпринять следующие шаги.

Итак, готовы ли вы изучить отзывчивый дизайн?

Этот курс был написан Джереми Китом при участии и рецензировании Рейчел Эндрю, Уны Кравец, Адама Аргайла и Камдена Бикеля.

Следующий и предыдущий уроки

Если не указано иное, содержание этой страницы лицензировано по лицензии Creative Commons Attribution 4.0 License, а примеры кода лицензированы по лицензии Apache 2.0 License. Подробности см. в Политике сайта разработчиков Google.