When I first started developing my own websites in the early 2000s a big sticking point for me was design.
I knew even then that actually designing a nice looking site was going to be beyond me, but the nuts and bolts of actually making it *work* was where my interest lay. At the time I remember being very adament about using ‘scaleable’ layouts as opposed to fixed width. This basically meant that when you resize the window, the site will contract and expand with it. To build a site that remains a fixed width could end up with ugly dead areas on higher resolution displays, and I saw it as something that pointlessly limits the space in which you’re presenting your content, especially when it has to be at a width that can be seen in full even on the lowest resolution displays.
On the other side of the coin, fixed width sites make actually designing sites much, much easier. If you want a nice image based banner at the top of your site, for example, you’re going to have a real headache making that look right as the site changes width around it. As the web moved on and broadband prolifferated, heavy use of images in web designs became more viable and sites started to be designed and laid out to the pixel, making fixed width sites far more common due to not having to worry about how it will change on one display or another – it’s comforting to know that your site will look consistent for everyone.
It’s only now, with the emergence of advanced CSS techniques, that I can really see a great opportunity to go back to the old ideals of designing sites that change based on what they’re being viewed on. The difference now is how much control the developer has. The old technique of giving all elements of the site a percentage based width is pretty heavy handed and can cause problems when squashed or expanded too much, but with Media Queries – the CSS technique that allows different styles to be applied based on variables such as the browser window width – you can basically do anything you want. At the most basic level I can take a box that is normally floated to the left of the main content area and, once the site is squashed to a certain width, I can then make that box appear at the top of the page, allowing the main content more space to be displayed correctly. The potential control is pretty much limitless and as a developer it presents some interesting new challenges, as you’re required to structure your web pages in a way that will allow the CSS to place your content wherever you need it.
A side effect of this is that brings back the need for developers to have a bit of design acumen as the functionality and form rely more heavily on each other. When we start a new project that we intend to build with a responsive design, communication between the designer and the developer becomes much more important, as you’re constantly making sure that what is being designed is technically possible to achieve in a nice, clean way when it comes to development.
Another side effect is that it’s almost forcing designs to simplify. You’re going to have a much easier time with a site that’s mainly solid colours and text than one that is packed with images in every corner and I think that can only be good for the clarity of information presented on the web. The best responsive designs I’ve seen do a great job of making the text itself beautiful, and the use of images more considered because you have to justify the presence of every design element if you’re going to work out here everything will sit in a variety of widths.
Responsive design of course has all sorts of benefits when it comes to comfortably viewing sites on mobile devices, but I think the side effect of simplifying sometimes overcrowded designs and concentrating on placing greater emphasis on the information the site is presenting is going to be of great benefit.
