What is a responsive web design | Responsive Web Design by Rick Cano @ Cano Consulting

Responsive Web Design is. . .

According to Wikipedia, its a web design approach aimed at crafting sites to provide an optimal viewing experience for easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices from desktop computer monitors to mobile phones.

Responsive Web Design – Back in the day. . .

Lets give you a bit of history before we talk about the five main elements that make for a responsive web design(RWD).  If you wanted your primary website to be viewed with a mobile device you had to create a separate “mobile” website.  Unfortunately, you would end up with two separate websites; your website to be viewed with a desktop or laptop and a mobile site.  What was even worse?  You also ended up having to maintain two separate websites on two separate servers and platforms.  Not an effective use of your time and energy, right?

Responsive Web Design – Now. . .

Back to the future, now you can accomplish a website designed to be viewed by both desktop/laptops and virtually every mobile device on the planet with only ONE platform.  Gone are the days of of editing, modifying and maintaining two separate websites on two separate servers.  Using the WordPress framework, allows us to have a responsive web design “and” still have the ability to customize the design and layout without losing any responsiveness at all.

How do we accomplish this feat? – Beginning with WordPress version 3.5.1, which was released late last year in December 2012, we’re able to utilize the responsiveness of this new framework right out of the box.  As long as we adhere to some basic rules when editing or modifying “five” key elements within this new version we’re able to maintain a responsive website.  The flexibility is accomplished because this new version is written with a “grid concept”, which is one of the most important elements to maintaining a responsive web design.

What is a responsive web designResponsive Web Design Key Elements

There are Five key elements in designing a responsive web design; overall layout, grid function, image displays, media queries and finally the server side component:

Layout 

In order to get a block of text or content to appear on a web page, your browser serves up the page with too many tools and gadgets to name in this short article.  As mobile phones and tablets became more and more the new normal, browsers had to keep up with this trend so they improvised and came up with what I call the “percentage” factor.  The new responsive web design simply has code in the back end that tells the browser to “re-size” the text to fit into a window that is 50% wide, 25% wide etc.  Although the code is embedded within the website it’s really the browser that is resizing it when a mobile phone or tablet is viewing the website.  The browser detects that the screen is smaller than a normal desktop screen.  The result is the website is automatically re-sized to fit within the screen size of any and all devices.

Grid Concept

Okay, so after it detects that the screen is smaller or larger the websites written “grid” code tells each separate element where it needs to organize itself in relation to other elements.  You might say that it gives the order how to “line up” on the screen.  If you’ve never seen it in action, go ahead and re-size your browser while your r