Responsive Web Design

Responsive web design is the art of crafting websites to provide an optimal viewing experience. It includes easy reading and navigation with a minimum of resizing and scrolling. The design and development respond based on the user’s screen size, platform, and orientation. 

With all of modern day technology, there are many screen sizes and resolutions. Creating a website version for each resolution and new device would be impossible. Using a responsive web design is a way for web designers to create a site that is applicable to all devices.

Media queries are added in a separate CSS, and present the content of the site tailored to a specific range of devices without having to change the content itself. Media queries allow web designers to target specific screen sizes. It pulls different style declarations from stylesheets based on the current window width of the viewing device.

Break points are browser widths that have a media query declaration to change the layout once the browser is within the declared range. On average, every responsive web design has a minimum of two break points. Break points are the points when the content of the site responds to provide the user with the best layout.

An example site that uses Responsive Web Design is Dean Oakley, a web designer from Gold Coast, Australia:

http://deanoakley.com

As you adjust the size of the webpage of Dean Oakley’s site from narrow to medium width, you will notice that the headline font will increase in size, as well as the image of the rocks and the bird. An additional navigation bar is added at the bottom of the narrow viewing window so as people read to the bottom of the page; they don’t have to scroll back up to the top navigation bar.









As you go from a medium to a wide viewing window, you will notice that the image changes completely to one that stretches the full width of the page. There is a slight color change and gradient added, and the navigation bar is now vertical. The headline is placed into a band at the top of the page. A sliding bar of posts has been added.