4.3 Responsive Design

Responsive Web Design is about making your web page look great on all types of devices - desktops, tablets, and phones. It requires different sections on a Web Page to hide, resize (shrink or enlarge) or move so the design continues to look great and provide a good user experience on any screen size.

While it is possible to rearrange elements on the page and shrink things proportionally so that everything fits on the screen as the size changes there are tradeoffs and trying to make something that is designed for a large screen fit on a smaller screen, or vice versa, is not always the best solution. Best practices for mobile environments include:

focusing on simplified navigation

providing more focused and less verbose content

perhaps showing data in lists or rows rather than multiple columns.

The final design is up to you but here are some tools to help you in the implementation:

4.3.1 Layouts

4.3.2 Designs