This will typically start with us launching Photoshop and creating a range of design options based on the information gathered so far. OK, so we’ve launched Photoshop …. what size should we make the canvas? Ah….and here lies the problem!

Web design has changed and at quite a rapid pace. Traditionally we would create our designs at 1024px x 768px screen, quite often the ratio of the most commonly used desktop screen. As we all know screen sizes now vary in size. They range from huge television sets, desktop monitors, laptop screens right down to the smallest of smartphones in your pocket. How on earth are we supposed to show the client how their website will look across all these devices in this early design stage?

Our ‘default position’ is to use responsive web design within our projects, where possible. Responsive design is the technique of utilising a fluid, flexible grid system that makes sure your presentation layer scales perfectly to your screen size. The challenge is to illustrate this early in the project, when you’re delivering design options.

In this article we review a few ways that some agencies have tackled this issue. Unsurprisingly our approach very much depends on time and budget but however we tackle this, it’s obviously very important that the client has a clear vision of how their website will look across all devices BEFORE we dive into the build phase.

Designing in browser

chromeThis approach involves creating actual web pages as simple html. Make iterations and tweak the html / css with the aim of getting sign off based on what the client sees in a browser. Why? The fact is that the browser is responsive by default. The basics of the web is to create HTML documents and have them be viewable almost everywhere on almost anything. By default the web has no optimal width, optimal height, optimal font-sizes or optimal anything really. Designing in the browser gives us responsiveness for free. It also, just as importantly, centers our design thinking around the fluidness of the web.

There are other benefits too. We can show gradients and shadows across multiple devices simultaneously. We can experiment with our design and have the changes reflected instantly across desktops, tablets, phones in landscape and phones in portrait. We are designing with the diversity of the web in mind. The variety of the web becomes part of our canvas.

This all makes complete sense to me so why does it blow my mind to ditch Photoshop and work in this way? I know it does for a number of our designers too. I don’t think we should say that we must only design in the browser. I would encourage our designers to experiment and try things out in what ever way they are comfortable with.

The prototype

And so the process leaves us in a position where we need to create quick, simple prototypes. The graphics will be cropped or created and optimised (yes in Photoshop) and then the theory is that you jump straight into html to code up your responsive grid. Now this starts to sound time consuming, considering that the client might not like what you’ve designed and throw it out entirely!

Firstly, some would argue that it takes no longer than pixel pushing in Photoshop. Secondly, there are some tools that help us do this quickly and more efficiently. A popular choice is Twitter Bootstrap. This will give you some neat components and a responsive grid following a quick config and download. It gets you up and running quickly. You may even be able to re-use some of the html in the final web template development. Another that’s caught our eye is Axure, interactive wireframe software and gives you the power to quickly and easily deliver prototypes.

bootstrap

Don’t take our word for it!

I came across this video that explains the whole thing very well. This guy works for Zurb (if you’ve not heard of them then don’t worry but they’re a great agency that are ahead of the curve of this stuff. They’ve been preaching this for a while. It’s quite a long video but definitely worth watching.

Can Fireworks help?

It looks like Fireworks may be able to bridge the gap here. CS6 promises to help you create beautiful designs for websites and mobile apps in a snap – without writing code. It claims to provide new prototyping tools for tablets and phones

Create and optimize vector and bitmap art, comps, wireframes, and mock-ups for smartphones and tablets. Pixel-precise rendering keeps your designs crisp on all screen sizes.

How to handle project constraints

All this does end up taking more effort. So what should you do if there simply isn’t time for all this (or budget for that matter)? Well, we still fall back to Photoshop. I think we realise that it’s not ideal but we’re pretty pragmatic about these kind of things. We’ve found a way of demonstrating mock ups at key screen sizes (as jpegs) once the desktop version is signed off. It’s sometimes the only option if these kind of constraints are in place. This can only really be applied to simple websites that are not too complex in their functionality.

Conclusion

Personally I can really see the advantages to designing in browser however I really am not ready to turn my back on Photoshop (my trusty friend for over 15 years!). Use an approach that you feel comfortable with and enjoy the design process. Creativity is not a process that should be prescribed. Which ever technique you use it’s important to share the mobile vision with the client early on in the process, not at the end.

mobile sites

References / Links

http://www.adobe.com/uk/products/fireworks.html
http://www.netmagazine.com/opinions/designing-browser
http://www.axure.com
http://twitter.github.io/bootstrap
http://webdesign.tutsplus.com/articles/workflow/tips-for-designing-in-the-browser