Responsive Web Design

  • Published on Thursday, 04 October 2012 23:59
  • Hits: 3547
User Rating:  / 1
PoorBest 

The first time i first heard about it acouple of years ago, responsive web design, i thought it was just a bundle of rules and methodology to build a web with ...responsibility??..Error free design that only could come out from a well organized studio in a dry village by a sin free person??, ...then i just understood two things:

  • I needed to improve my english as "responsive" has another meaning that nothing has to do with responsible.
  • Responsive in this case stands for "adaptable", "flexible"..

Which finally turned into a web design that can suit to any screen resolution and device. How is this done??. Where is the magic?. Well, fortunately there is no magic so it will depend a lot on your skills with makes it exciting!!, isn't it?.

A responsive website is based in three pillars:

  1. A pure Responsive Website may use only one CSS, but another approach is, through CSS3 Media Queries, choose the right CSS style rules based on the Device you are using, mainly a big screen, a laptop, a mobile phone or a tablet. Let's say that the trick in any of the cases is to get to know the width of the screen Resolution and resize the elements to fit properly in it.
  2. Use of Relative Units and Avoid Absolute units. Mandatory to be able to resize the contents to the screen resolution. This will created Fluid grids and components. This applies as well to images and multimedia
  3. Components alignment. Depending on the device and screen resolution you may prefer to have the content align in one column, or two, of the menu may be on the left hand side or in a listbox!!.


What are the media queries??. Is a CSS3 mechanism, or let's call it module, which help your site to adapt the rendering of webpages based on conditions such as screen resolution. I recommend this link about CSS3 Media Queries from the great Web Designer Wall. Choosing different CSS and same HTML you can create very nice Design that will adapt to any device. I recomend you to take a peek at this msdn Article "HTML5, Responsive Web Design", ..yes i am mentioning a Microsoft resource...for those of you that consider me a MAC guy!!

Relative units sometimes may take to unwanted results such as a content oversized in a 27" display or a ridiculous size of a movie in a 3 column website in your galaxy SIII big screen. But combined with the other 2 responsive website Pillars everything will be under control.

The proper way to control component alignment is mainly done using CSS styles, although developments as jquery masonry will make your day on this issue. Actually these two links can be usefull to undertand how easy that alignment may be accomplished:

 As i said before, there is not a magic application which will turn into your old site into a responsive web design but reading through the links that i have provided will help you a lot!!, ..and surely you will get to develop web as the ones in these 20 examples of Responsive Web Design

Music You like..

IT News to be aware of ..

New in FreakZion...

Most Visited...

Famous, the most beautiful javascript Li…

Hits:3975

Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more

AngularJS, No more Dom Manipulation

Hits:6647

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more

QR Codes: The best 9 QR Code Generators

Hits:40846

QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more