Responsive web design

What is it?

Responsive web design lets the website that the viewer is viewing to adjust to the size, platform, and behavior of the device that it is being viewed from. This is done in an appealing, balanced, and flexible way.

Why is it important?

Responsive web design is so relevant today because the use of mobile devices has sky rocketed through out the past decade. In addition, there are many different mobile devices that have different screen sizes.

Media queries

A media query is a CSS technique introduced in CSS3. It uses the media rule to include blocks of CSS properties if a certain condition is true. In other words, it is the code that makes responsive web sites possible.

Narrow

 This website, when stretched, has a very symmetrical feel. The menu tabs are all perfectly centered and are very large. It is all one thing after the other: The logo, the title, the menu, and some additional information. It feels very cramped, but it is still attractive.

Medium

In contrast to the narrow layout of the website, the menu tab is at the very top of the page, and it is not as emphasized. The medium layout has more content because there is more space to present it. For example, there are multiple graphics at the bottom of the page. It feels a lot more spacious.

Large

The wide layout (a.k.a the full view) leaves a lot of room to breath. It is spaced out nicely. Because there is more space, more things can be included on the page. There is a register button at the bottom and the graphics are larger. 

Check out this awesome responsive site here.