Why Responsive Design is really helpful today

Today the communication through the web is really changing. There are many devices with many different characteristics.
When I started to work in the industry of web I started with very simple basic web. The creation of the web pages was simply making table. The layout was just a big table and inside that table there were other many many other tables. But now things are changing!

Today looks almost pathetic and hopefully is just a distant memory. Was almost ten years ago when I started to read the theories of Zeldman, obviously one of the most remarkable theorist, researcher of the web design. He was talking about new form of the web page: the use of CSS. At that time people were starting to change. The use of "DIV" was replacing the "Tables". Was one of the revolution of the language of the web: DIV, magic word. In the last ten years many things changed.

First of all, the access to web it is now trough a lot of devices not only computer. Everywhere, around you can find many many different kind of devices, tablet, mobile phones, small computers, laptop, many really. Nobody know how many devices we have now. I think it is impossible to know all of them. I will post in this website funny pictures about this big revolution. So, why Responsive Design is so important? It is important because only through the "Responsive Design" we can have a website that is decently accessible with different devices. So if for example you are using a laptop or a small mobile phone, if the website is really "Responsive" it should be easily accessible. Of course to make accessible a website there is only one solution.

You can also have a "NO Responsive Design" and the website works. BBC website for example. It is not Responsive but has different versions. If you see the online version you will find a "m." in the url of mobile version. It means that "mobile version" and "standard computer version" have different structure, are almost different websites. They use not different CSS, but probably also "functions". Well it is not the case of the Responsive Design that I guess is really much more fascinating and usable.

This website for example, "The flying eye" have been built in all different ways and formats. The first version was in table, after I made some version using DIV, and now, version 8 is "Responsive". How make a Responsive Design? Well is not so complicate how apparently seems. There a few rules to follow, some "aesthetic" decision to take. The guy that explains but better than other how and why make a Responsive Design is Ethan Marcotte in the book "Responsive Web Design".

I think if you want to start, you have to start with that book. It is extremely clear, well done, not too long. I followed line by line his suggestions to make this website. I will give you here shortly the rules of Responsive Design, but please read the book of Marcotte that explains much better that any article that you can find online.

1. Make a fluid layout. It is essential but not enough. The rules is target├Ěcontext=result. For example if we have a div that in a static a layout is 475 where the parent div is 960 we do this operation: 475:960=0.4947. So the div will 49.47%.

2. Make fluid images. Don't specify size of them. The only thing that you have to do remember to write this line in the css: img{ max-width:100%; } you can also write img{ max-width:100%; max-height:100%; } if you want that your images can expandable in case they are too small.

3. Media queries. This is very big issue. It is impossible to say how many media queries you have to use. I used media queries to make my website usable for my HTC mobile phone and Apple iPad mini, and for different size the browser.

Related to size of the browser I would suggest an extremely interesting plug-in for Firefox that is "Firesizer". It will help you definitely.
Ok I think there are enough information. Now I'm going finish this article making a list of books, links, website that can be useful in case you want know more about Responsive Design. Enjoy.

Books
Ethan Marcotte, Responsive Web Design B. Frain, Responsive Web Design with HTML 5 and CSS 3

Links
Ethan Marcotte Website, The best: http://responsivewebdesign.com/robot/

About Media
Queries: annikalidne.com/code/the-insanely-ocd-mobile-media-queries-css-file http://www.stephentgilbert.com/mediaqueries/

More general
mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/ bradfrost.github.io/this-is-responsive/patterns.html

Fluid design
www.fiveforblogger.com/2010/10/demo-5-styles-fluid-search-bar.html