Do you remember the time when websites with guest counters, animated gifs and layouts made of html tables were popular? I don’t. I was kind of a late starter, so when I first got into front-end development the use of CSS along with practices like separating structure and presentation were already well established.
At that time I’ve learnt building websites using pixel values. Usually the sites were fixed-width and centered horizontally. I used pixels everywhere in my CSS, even for font sizes. It was easy and convenient when converting designs into a functioning website.
But things have changed. The one-size-fits-all 960 pixels wide web is getting old. We now have many different web-enabled devices like smartphones, smart TVs and of course desktops, each with it’s own resolution and pixel density.
Fixed-width pixel-based websites cannot handle all those different device classes. Instead, websites are becoming adaptive. Layouts are becoming fluid and the web is slowly becoming responsive.
Responsive Web Design
You’ve probably heard of responsive design. It’s all about websites responding to the environment they live in. To make your website respond to changes in display size, the first thing you have to do is to let go of pixels and think in proportions instead.
We’re currently rebuilding our company website. And part of this is making the site responsive. This whole topic was completely new to me and I want to share with you some of the resources that helped me getting started with this relatively new approach in web design:
Grid systems are popular on the web and fluid grids are able to adapt to different screen sizes. They’re widely used in responsive design.
Media queries allow you to define device-dependent css rules.
Learn how to create responsive texts.
Images in responsive layouts are tricky. The full story:
Putting it all toghether
There is an awesome series of blog posts on .net magazine going through all the steps necessary to make a responsive site:
Build a responsive site in a week:
By looking at how responsive design is taking over the web design/front-end community it feels like the good old pixel is on it’s way to become tomorrows table layouts and animated gifs. What do you think?