What is Responsive Web Design? Think Mobile.
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.
Learn more:
- 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:
Success!
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. Moreover, I love the way responsive web design looks, so I hope to convert this blog to responsive, too.
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.
Want more about responsive web design?
Leora – This sounds interesting, currently I am just using the WP Mobile plugin for proper display on mobile devices. Needs more insight I feel. Thanks for sharing.
As your site relies heavily on text, this might not be a big issue for you now. But it is certainly worth understanding, especially if you are viewing a site that is more visual.
Interesting stuff Leora. Thanks for sharing.
[...] NewJersey area and also has several interviews published on her website. One of her posts regarding Responsive Web Design was an eye opener to me and I still relish the idea yet to be implemented by [...]
[...] there was a need for responsive web design and development, the time is [...]