Responsive Web Design

Responsive web design is a website that resizes itself depending on what size the screen is such as a tablet, mobile phone, or web browser. Responsive web design has become so important because there is an increasing high percent of people looking at websites on a phone or tablet and it needs to be easily accessible. Media queries are a great way to give different styles for different devices, lets the designers style based on width of the screen. A breakpoint in web design is a marker in the code that tells the debugger to stop the operation or request.

Example Site: Every Second Counts
http://www.everysecondcounts.co.uk

The layout of this site displays a lot of content as columns of photos that fill the page. This version of the site does not have the menu visible but rather has a sidebar that when clicked will open the menu.

The width of this site allows their to be variation in the size of the content. The menu is this site is displayed across the top and has one main content in the middle. The text stayed a similar size.

The version of this site looks as if it is just a big video but when scrolling down you can see the other content. The navigation bar is smaller on the width of this site.