What is Responsive Design?

by Ben Johnson - Posted 12 years ago

Responsive design for mobile friendly websites. 

Responsive web design is a way of creating websites that respond to the different size screens and types of browsers people use to access the web. It is a mobile friendly way to build a website that allows it to render in an attractive fashion without the need to resize, pan, or scroll.

Responsive Web Design, more technically, means that a web site is crafted to use W3C CSS3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images. 

We encourage everyone to have a mobile friendly website. In February 2012, we ran a campaign to educate our our subscribers of the importance of adapting to the mobile landscape. Over 69 percent of US mobile users access the internet on their phones daily, and by next year more people will be accessing the internet by mobile devices than by computers. Responsive design allows a website to have a beautiful yet consistent design across all browsing platforms. 

ApogeeINVENT has begun offering the option of websites to be designed using Responsive Web Design. One of our first projects was for RHH Foam Systems. Their "old" site, built by us in 2010, is a nicely designed site that renders in all web browsers from any computer: 
responsive design

And here is what it looked like on a mobile device:

 

Responsive Design for Websites 


The new website was designed using Responsive Design, and now looks great on any computer browser as well as any mobile browser. It not only looks great, it also can be viewed without adjusting the screen, panning back and forth, or zooming in and out. This is because the design adjusts automatically based on the screen size. 


Computer Design 

 The design will look like this on a computer screen:

   

Tablet Design


When viewed from a tablet device, such as an iPad, the design will render slightly differently. The left navigation moves to the top of the screen, and the extra space on both the left and right sides is reduced: 


 

e-Reader Design 

When the website is viewed from a small tablet or e-reader device such as a Kindle, the design will again "respond" to the screen size by adjusting more design elements. In this rendering, the left navigation is on the top, and the right hand column has now been pushed to the bottom of the page. The flash animation of the logo will be removed, saving space and loading time.

 


An additional size, very similar to the small tablet, will remove the image of the hand spraying the Versi -Foam for a slightly smaller screen size: 


 

Mobile Phone Design

For users accessing the website via a mobile phone, the website will focus heavily on navigation. The top navigation will become vertical below the logo(the flash animation is absent in this version, as well). The formerly horizontal tab navigation on the left side is now a vertical navigation below the top header Welcome to Versi-Foam, and only the initial subheader is visible. This focus makes it simple for phone users to access the part of the site most important to them, and make the navigation easily clickable. It also lets a user know they are in the right place by prominently displaying logos and headers.

   

Responsive Web Design ensures you have a nicely rendering website for both web browsers and users accessing it via a mobile device. 

Is your website Responsive? Is this the best way to deal with mobile optimization? Share your thoughts in the comments below.