Day 23 - What is Responsive Design?

People use phones, tablets, and desktop computers every day, and there are more devices on the way. With so many form factors, one strategy to display content appropriately for a device is responsive design. Responsive web design is a type of design strategy where you create once and run your content everywhere e.g. phone, tablet, desktop. The site design automatically adapts to how the site is being viewed. In other words, the website responds to the needs of users based on the devices they're using.

An advantage of responsive design is that you maintain one design system rather than building and maintaining separate apps for the various device types.

When designing for responsive:

1. Define the problem.
2. Start with the content. It's not safe to assume screen sizes, they're changing.
3. Design and develop prototypes using gird frameworks such as Foundation or Twitter Bootstrap.

Responsive techniques allow your product to be flexible and adjustable to the different device types and screen sizes while being accessible and future friendly.

Here are some responive design examples.

Take a look at websites on both your phone and a laptop to see how they respond.  Are they using responsive design? Are they using two different systems like mobile web and a desktop web design?