Responsive design, documenting a live project
Designing and developing a website to be compatible with several different browsers has long been a headache for designers and web developers. Now it's not just a variety of browsers that need to be considered; smart phones, iPads and a variety of screen resolutions must also be taken into account. In fact, the majority of clients now ask for a mobile version of their website to be developed.
We are swiftly reaching a stage of being unable to keep up with the emergence of endless new resolutions and devices.
So what's the solution?
Well, designing websites to respond to different screen resolutions is a great idea and can take the hassle out of designing and developing individual desktop browser or mobile solutions.
Some nice examples of websites that achieve this are:
These examples are attractive but there is also so much behind them. Recently I have been given an opportunity to design a site that will use Responsive Web Design techniques to cater for different screen resolutions and even a mobile site. It's exciting and a bit of a scary challenge as it could go horribly wrong.
So I've started the design using a grid system to make sure that everything can be scaled up and decreased correctly. It's a good idea to understand how the CSS layout works at different screen resolutions (see tutorial sites below). These are more for Front End Developers but it's vital for designers to understand the tools/techniques being used.
Tutorial examples
1. http://csswizardry.com/fluid-grids/
2. http://surgeworks.com/blog/responsive-web-design-using-compass-pt1
3. http://surgeworks.com/blog/responsive-web-design-using-compass-pt2
My next challenge here is to move the layout so it can fit into a mobile site. The beauty with responsive layouts is that you can drop certain elements/content when the screen gets smaller. You can see this in action in the above examples.
Stay tuned…
