Responsive UI components

Designing responsive UI components

Page UI components reorder and resize to maintain readability when the viewport changes.

 Good example: Resizing the window reflows UI components

These screenshots show how, when the screen narrows from desktop to phone view, the social media and global menus reflow to be toggled visible/hidden via a “hamburger” menu button.

The hamburger pattern is discussed in module 12.

Desktop view
Figure 1: Desktop view
Phone view
Figure 2: Phone view
Back to top