In the last few years the computer technology really developed and we have a ton of new gadgets that are a lot more faster and offer better resolution and capacity. Now when we are talking about websites a very important thing that has emerged is the actual size of a website. Because it does matter whether it is 1024 pixel wide or 960 (as I talked about it a few days ago).
Everybody knows that there are a lot of devices out there, and a lot of different screen resolutions. The giant iMac screen, some typical 19″ screens, iPhones, other smartphones, iPods, iPads and tablets, laptops, and many many more. And this is the nightmare of the developer. Because many clients say that they want their site to be readable on a small smartphone screen and this often requires a completely new coding process. And doing this over and over again, so you can view a site on every possible platform is not pleasant.
Anyway here comes in the responsive web design. But before that I’d like to add that using a 960 grid system can also help a typical website. If you don’t need a new layout for an iPhone, with the 960 grid system you can guide a website that it will be readable on a smartphone and it won’t be hard on the eye.
Responsive layouts
But now back to our topic. So what is a responsive website design, or layout? Well it is really simple. This means that your site will adapt on different screens to the current resolution. It means that a certain site will look somewhat different on a smaller screen: the content will adjust to the current width, and the images will automatically resize. So you don’t have to zoom or toil with things like that.
So you have fluid grid and fluid images in your website. This means that with different resolutions the proportions will change as you need it. But this is a bit more different than that in real life. It sure sounds easy, and yes it gives you more freedom, but it also needs planning. For example using a fluid image means that the image will be resized or cropped when loading the page on a small device. But you need to see which one is better! For example with some images cropping can be practical, it is still at a high resolution, you can see what it is. But as for a logo it is a really bad idea, you definitely need to resize that.
So when using a responsive website layout you have to manoeuvre between these guidelines. This being an introductory article about what is a responsive website design, I will not get into how to achieve it, or what are the exact parameters of it. Some people have done it before me, so I’ll just rely on them and share the links with you guys, so if you’re interested you can browse further.
Further reading
The fluid image and grid system is really important in this process, so here are two articles talking about these, a bit more detailed, with technical data.
Unstoppable Robot Ninja – Fluid Images
You can read about the fluid grids, similarly detailed, here:
Ethan Marcotte – Fluid Grids
Ethan Marcotte also wrote a little article about responsive web design in general, sharing some very interesting details, and sharing a specially designed website, just to prove his point.
Ethan Marcotte – Responsive web design
Finally on Smashing Magazine you can read about the what is and how to sections, in a really long and detailed article. If you want to dig deep, read this one.
Smashing Magazine – Responsive web design
In the end I’d like to share some really beautiful examples of responsive website design from line25. Get a good look at them, and play around with your window size!
