This concept is relatively new in the web design and development world and consists of an approach that aims to create an optimal viewing experience for the user that visits a website. We have to remember that effective web design must be centered on the user (not in the web designer, or the developer, or the website owner).
The most important thing in web design and development is that our visitor is happy using the website. It doesn't matter the purpose is (i.e. business, search, e-commerce, etc.) the same rules of usability and ease of use apply.
One advantage using a Responsive Web Design (RWD) approach is that we can optimize the user experience for a wide variety of screen sizes and resolutions such as those found in mobile devices. While everyone immediately thinks of small screens like phones, it is important to remember this can also help with very large screens like TVs and monitors.
What do I need to know before starting with RWD?
Some nice tools for RWD
- Responsinator: http://www.responsinator.com/?url=base22.com, thanks to Paulina Galindo (former Base22 employee) for sharing it.
- Mobile emulation for Google chrome: https://developer.chrome.com/devtools/docs/mobile-emulation
- Firefox Responsive Design View: https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
What kind of results can we obtain of RWD?
Next image shows base22.com in a 360x640 px in portrait and landscape.
Now, this is an example of our website using a 1024 x 768px resolution. As you can see, when we are creating a website it is important to start from the smallest to highest resolution.
If you are interested in this topic you can complement your knowledge inside our wiki and visiting some of these links:
How to use Media Queries
This article is great for knowing the media queries you can use in different devices: Responsive Webdesign – CSS3 Media Queries – CSS-Template for browsers and mobile devices.