Designing in the Browser

Filed under: Advice Web Design

A recent Forbes study estimated that almost 80% of internet access is now made via a mobile device rather than a desktop computer. With even more mobile devices entering the market, all with different screen sizes,  it’s more important than ever to ensure your site is built to cater for a mobile audience.

Back in January 2013 we went to New Adventures in Web Design in Nottingham. One of the talks that stuck in my mind was by Jason Santa Maria, entitled ‘The Nimble Process‘. Jason spoke about web design processes and how, as designers  we must constantly improve and evolve the way we work. Having designed websites the same way for years I remember feeling quite apprehensive about having to adapt to the rapidly changing landscape of web design. The catalyst for such dramatic change? The mobile internet and ‘responsive’ web design.

Here at Pixel Air we’ve been advocates of responsive web design for some time – although it’s meant that we’ve had to reestablish the way we work. Long gone are the days of the common linear process of design, build and publish. Nowadays we find ourselves combining all three stages right from the start. We’re having to look at the content and figure out how it’s going to be displayed across a plethora of devices and screen sizes.

Efficiency is Key

Faced with this, we’ve had to drastically change our design process. As designers we were used to the tried and tested process of producing flat designs of a desktop home page and content page in Photoshop and presenting these to our client. With the advent of responsive web design we found our workload pretty much tripled overnight. How would we cope with suddenly having to put in so much extra design time?  To get sign-off from a client now, we would not only have to present a selection of pages but also how these pages would look and work at different screen sizes and orientations. The solution? Being more nimble. Jason’s talk suddenly became more relevant than ever. We realised things had to change – our process had to evolve.

It had become clearly apparent that designing responsively in Photoshop was an inadequate method and was too time-consuming. Even after a design was given the OK by the client, any tiny tweaks later on in the process just meant that we had to spend hours going back through each and every one of our template pages to make the change.

So we took the brave step of ‘designing in browser’ – and effectively turned our current process on it’s head. Rather than loading Photoshop – we got stuck into code right away. It not only meant we could produce a design that would scale and adapt to different screen sizes but any design changes could be implemented quickly and efficiently. ‘Designing in browser’ has totally changed the way that we work for the better.

Back to the Drawing Board

One of the first projects that we designed in browser was for Synergy AV. The site consisted of three separate mini-sites that shared a landing page, and if designed in Photoshop, would have taken up most of the budget just getting us through the design phase.

So we started out with some simple wireframe sketches of how the site should would look on different devices and presented these to the client. They were able to provide some immediate feedback on the different proposed content areas and how they’d like things to appear and were even as adept as us at using a pencil and eraser! Once we were all on the same page (literally), we were able to take the sketches and start coding up the HTML wireframes.

The client was able to follow the whole process from their browser. Any necessary changes were able to be made in the code and would be visible on all platforms immediately. We were able to avoid the time-consuming process of tweaking multiple Photoshop comps individually. And because we use SASS, it meant amends to a few variables and the colours, spacing and typography were updated quickly and efficiently.

Of course, we still used our much loved Photoshop – but more as a tool for preparing assets these days – and to mock up the occasional idea. It’s unlikely that we will use Photoshop as a core design tool as we have done traditionally. It certainly has its place within our work. With CSS3 you can pretty much create any effect that you would have done previously in Photoshop – rounded corners, gradients and shadows – you name it – but with the added layer of interaction to demonstrate different buttons states or transitions.

Stripping Back Design

It’s probably not a bad thing to take some of the fuss out of the design process anyway. Often you’ll see too much form and not enough function; designers who are hell-bent on producing an all-singing, all-dancing website that looks amazing. However, take it onto mobile and it’s hard to navigate and read, and potentially it’s  slow and bandwidth hungry.

As we know, designing responsively with a mobile-first approach means that from the start, you have to think about the content. Designing in browser lets you see very quickly how it will display and scale across devices in a fluid layout. You can focus on the delivery of the content rather than aesthetic embellishments and visual flourishes.

The Technical Stuff

Ok, so it’s not for everyone, just yet. The main disadvantage to designing in browser is the fact you need to know HTML and CSS. However, just learning the basics and having a small understanding can bridge the communication gap between designer and developer. You’d be amazed at how a developer will suddenly understand your design ideas when speaking their own language and showing that you understand things from their point of view.

Here, at Pixel Air, we try to be fairly savvy with our code and have embraced the challenge of  browser-led-design with relish. It’s always good to be learning new tricks, especially with a really solid foundation to start with. The industry in which we work is always changing, due to it’s very nature, and with the promise of more efficient processes, we welcome this change with open arms!

“Progress is impossible without change, and those who cannot change their minds cannot change anything.” George Bernard Shaw