Skip to end of metadata
Go to start of metadata

About

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?

From a technical perspective responsive web design combines Cascading Style Sheets (CSS), with Javascript and HTML. The first lesson is  about CSS media queries. (Please, see this article to get more information about: Media Queries). For example, on base22.com we are using following media queries:

/*
*  Media queries used in base22.com
*/
/* Devices with resolution smaller than 480px */
@media (max-width: 480px) {
    
}
/* Devices with resolution smaller than 480px in landscape orientation */
@media (max-width: 480px) and (orientation:landscape) {
    
}
/* Devices with resolution smaller than 480px in portrait orientation */
@media (max-width: 480px) and (orientation:portrait) {
}
/* Target: iPad mini in portrait orientation */
@media (min-width: 481px) and (max-width: 767px) {
}
/* Target: iPad mini in landscape orientation */
@media (min-width: 768px) and (max-width: 979px) {
}
/* Devices with resolution smaller than 767px */
@media (max-width: 767px) {
 
}
/* Devices with resolution smaller than 979px */
@media (max-width: 979px){
    
}
/* Devices with resolution smaller than 979px and landscape orientation */
@media (max-width: 979px) and (orientation:landscape) {
}

Some nice tools for RWD

What kind of results can we obtain of RWD?

It is incredible that with a little experience on CSS and Javascript you can get an amazing website, let me show you an example that we have created for our Base22 website:

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.

Complementary information

If you are interested in this topic you can complement your knowledge inside our wiki and visiting some of these links:

http://alistapart.com/article/responsive-web-design

http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

http://www.lukew.com/ff/entry.asp?1509

http://www.lukew.com/ff/entry.asp?1514

UPDATE: http://www.creativebloq.com/css3/tools-responsive-web-design-5132770

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.

 

About the author

Enterprise Web Developer

Alex is an experienced technology professional. His background includes:

  • Web Technologies: Semantic Web (RDF, OWL), MVC Frameworks (CakePHP, CodeIgniter) Content Management Systems (Drupal, Joomla, WordPress), JavaScript libraries (jQuery, Mootools), CSS3, HTML5, mobile web (Sencha, jQuery mobile), Operating Systems, and,
  • Research: Complex Systems (Cellular Automata in specific), Artificial Intelligence, Computer Graphics and Computer Simulation to create computer models of living.

1 Comment

  1. Nice article, thanks