Course

Responsive Web Design and Implementation

Responsive web design enables the automatic resizing of web content to fit the screens of different devices—an essential design feature given the myriad of mobile devices available. A UX design needs to adjust to be rendered similarly on smartphone, tablet, and desktop.

In this course we will cover both the design and implementation of mobile-first and the progressive advancement approach. We will focus initially on building for the small screen of mobile phones, including the most basic functions and features. After that, we will add interactions, more complicated UX effects, and nice-to-have features for bigger tablet and desktop screens, also known as progressive advancement. We will practice responsive web design patterns, including grid layout, navigation, embedded media, responsive forms, and animation.

In the implementation aspect, we will introduce media query to detect the device that renders the website and apply different CSS rules based on the corresponding device features. Then, we will cover Google Materialize library in detail, the most popular responsive front-end framework based on Google Material Design. We will illustrate, using many examples, how easy it is to implement the responsive website for different devices using Google Materialize library.

In the project-based course, you will put what you have learned into practice by designing and implementing a couple responsive websites that can be added to your product portfolio.