What is Responsive Web Design?
Responsive web design is setting up one’s website so it will look good on any platform, whether it is a desktop browser, a mobile phone, or a tablet like the iPad. Well-designed responsive web design allows for a subtle transition from one platform to the next, so the user has smooth experience and doesn’t lose good and attractive design just because the platform is smaller than a large browser.
- A List Apart: Responsive Web Design
- Six Revisions: Understanding the Elements of Responsive Web Design
- Adaptive Web Design (book review)
What is an Example of Responsive Web Design?
As an example, I will talk about how I converted http://www.leoraw.com/blog/ to responsive web design. About half a year ago, I switched the theme of that blog to the Twenty Ten theme, thinking, oh, this is now the default theme for WordPress, that would be a good way to go for many platforms, right? Wrong. One of my friends reported that my blog on her iPhone looked like a lot of white with a bit of imagery in it. Sigh. So I took a theme that was responsive to mobile platforms, changed it, added parts of another theme that was responsive to mobile platforms, tweaked a few settings here and there, combined it with some jQuery for older browsers and the media queries CSS, and here is the resulting recipe page on my friend’s iPhone:
And the home page on her iPad:
Warning: this isn’t the easiest thing to do. It did take a fair amount of time, and I’ve been designing websites for over ten years. So if you want your site to be responsive, find a designer that knows how to implement responsive web design and plan that you may have to adjust your web layout so it will work with the adjustment changes. Your images will probably have to be re-sized, and you may find the easiest way to get your site to look good on mobile is to use display: none for parts of your layout – meaning, don’t show it on mobile.
Can I See How Responsive Design is Responsive?
If you want to get a taste of how a good responsive design works, take a site such as http://www.leoraw.com/blog/ and view it in the latest Firefox browser. Re-size the browser slowly so you can see the changes as the size of the screen gets smaller. It’s rather fun to view.
What are Alternative Solutions for Mobile?
For this blog, Websites for Small Biz, I have an alternate theme for mobile, the WordPress Mobile Pack. That is still the easiest way to go with setting up your browser for mobile platforms. But it’s boring and takes out the images. Originally, this blog had a mobile theme separate from the main theme. But no more – I love the way responsive web design looks, so this blog did get converted to responsive, as well.
Can I Afford Responsive Web Design?
An alternative way to ask that question: Can I afford not to have my website show up in a clear, beautifully-designed and usable fashion on platforms besides basic browsers? Would I lose customers? One can also specifically choose a WordPress theme that has already been set up for responsive web, such as these 10 Free Responsive WordPress Themes. The easiest one to choose is the Twenty-Twelve theme – a great choice that now comes with WordPress.
Want more about responsive web design?