The New Pixel Perfection: Designing in the Browser

Remember back in the day when things were simpler? Web design was confined to tabular layouts, local fonts and bandwidth-sucking web 2.0 buttons? Desktop was king and smartphones were still years away. Fast forward to now; devices of all shapes and sizes have but one common thread…content. People want to be able to access the same information from any device, and not some watered down version.

Enter Responsive Design.

With new techniques come new challenges, especially in a team environment. As an interactive designer, knowing some basic html and css can come in handy when you’re designing. But when you get into the development phase, a little bit of flexibility goes a long way.

Designing in the browser.

Now, I’m not going to tell people how and where they should conceptualize their ideas, I’m a firm believer in finding what works for you. However, I can tell you that I prefer to build my ideas in Photoshop first so that I can experiment visually and not in code. While I stand firm on this, there may be a place in my workflow for designing in the browser just yet. Getting back to the idealism of pixel perfection and preserving the integrity of our designs, responsive design will force us to change the way we work.

Working as a team.

The roles of designer and developer are now intertwined to the point that a designer can no longer just hand off their design and call it a day. Designing responsively means considering how your design is going to be viewed at a plethora of sizes. Setting up comps or even wireframes for every breakpoint is cost prohibitive, and even if we did, you cannot always anticipate how your design is going to look at every size without going through the motions of resizing your browser window and testing on different devices. That’s where designing in the browser comes in.

Should a developer know how to design?

Just as interactive designers are well served to understand the structure of code; it would be helpful for a developer to have a trained eye when it comes to design. In reality though, this sometimes takes even the most naturally gifted designer years to perfect.

What’s the solution?

The solution is having an ongoing collaboration between designer and developer. Being willing to throw off the shackles of pixel perfect design and adjust our designs in development ensures our design will be effective at every break point and on every device.

Trish Duffy is the Senior Interactive Designer at Flying Cork.