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.
Responsive 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 reading this article and you’ll see how every element is re-organized.
In other words…the fluid grid concept calls for the page element sizing to be relative units like percentages, rather than absolute units like pixels or points. Now as you view the display it will be more fluid using an iPhone, iPad, smartphone or even a tablet. The visitor will have a more user friendly experience on a website designed with a grid element.
Flexible Images
What happens to images in a responsive web design site? Magically images become flexible and are also sized in relative units, just as blocks of content, so as to prevent them from displaying outside their containing element.
For example – If you have an image that has a width of 150pixels and a height of 150 pixels, in a normal desktop screen you’ll see 150×150 image. No real difference right? What will the size of the image be on a mobile phone or tablet? The image will have the same dimensions, however two things will happen. First, the image will be reorganized on the mobile device screen and secondly the image display will appear to re-size itself. Go ahead and re-size your browser and watch what happens to the images and how they shrink and reorganize at the same time.
One word of caution when it comes to images on a responsive web design: What you’ll find is that technology in mobile phones and tablets has advanced so fast that they require very high pixel density images so that they will maintain their quality either on a desktop screen as well as a mobile device. I’ll try not to get too technical here, however a normal pixel density or dpi on a desktop or laptop is about 96dpi’s. That said, a mobile device is held closer to a person’s eyes and the advanced technology will require that same image to have at least 150dpi. So what we usually do is “compress” the image if the image is of good quality. That won’t get the image to 150dpi’s, but it’ll get it close and it will display nicely on both a desktop and a mobile device.
Media Queries
Okay, what about videos, audio and more dynamic media like a slider? Most media such as YouTube and Vimeo videos, while encased within a “grid” will automatically re-size the video to fit into a smaller screen. Essentially what happens is the different CSS style rules are based on characteristics of a particular device so the site will display the media based on universal width size of browsers within a desktop and laptop as well as a mobile device. The only issue I’ve encountered with media is on some older modules and plugins that serve up image sliders. However, we’re beginning to see some of these older sliders catching up and upgrading their CSS style sheets in order to keep up with mobile responsive technology.
Server-Side Components
We’ve begun to see some of your major web hosting companies like Blue Host, Hostgator and even GoDaddy initiate some major changes within their servers to support and maintain mobile responsiveness. For example, One of the major changes we’ve seen is how these new servers are producing faster-loading websites and with unbelievable richer functionality and useability.
Whats the Take-Away?
If your website is not responsive, I highly suggest that you upgrade your website to a mobile responsive web design as soon as you can. Internet research companies have noticed that over 52% of internet users, access websites with a mobile device. Any static website can be converted and upgraded to a Mobile Responsive web design. If you really love the look and feel of your current website it can be duplicated to look and feel almost identical.
We offer a mobile responsive web design conversion and upgrade of any website for “FREE” in order for our clients to take it on a test run “before” purchasing our conversion package. We host the demo site in one of our demo locations so you can take it on a test run and see how it actually works.
Once you’ve had a test drive I can almost guarantee that you’ll never go back!Wikipedia definition
Thank you Bruce for your comment – You’re correct, it would be a huge advantage if you’re working with a skillful and experienced Web Designer. As I always like to quote Red Adair “If you thinks its expensive to hire a professional to do the job, wait until you hire an amateur.” Thanks again, Rick
This technique is fully supported in modern browsers, such as IE8 , Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.
Thank you Dario, very good observation and for the comments.