Once upon a time, web designers would painstakingly comp every page of a website in Photoshop, and then present those pictures to a client as the final version of a design. And for a little while, that could work. For the most part, monitors had similar resolutions, so designers and developers concluded that 960px wide was the golden standard. It remained the gold standard, even as monitor sizes started to vary significantly.
Then this happened:
Many Screen Sizes, Zero Control
Smartphones broke the dam on the issue of fluid screen sizes and ushered in responsive development techniques. Now designers made 3x the amount of mockups – one for desktop, one for tablet, and one for mobile. And those pictures were then presented to the client as the final version of a design.
This process still created a ton of gaps. Designers ended up with triple the workload, and what they saw developed didn’t quite match the comps exactly. And where was the fold?!
Presenting fully baked Photoshop comps is the most effective way to show your clients what their website will never look like. - Brad Frost
Usually what looked great on an iPhone looked a bit off on a Galaxy Note, and what was fine on an older iMac display was pixelated on a retina MacBook Pro. And so even our breakpoint-based comps couldn’t prepare us for the reality of a fragmented web experience. Attempting to get all of these screens to look exactly like the comps is a waste of time. The pursuit of pixel perfection is an unrealistic goal.
Pixel perfection was one of the biggest issues I encountered when working within traditional agencies, and was often a sticking point for creative directors who weren’t used to a fluid medium. On the bright side, it’s totally possible to transition to a different way of thinking about web design.
Think in systems, not pages
Pages are an archaic way of looking at web content; a holdover from the early days when we needed a metaphor for electronic documents. Today, most websites are composed of systems of modules, which then form into template layouts.
Content and context are kings of the web. No one goes to a website to view brand photography, unless that website is the photographer’s portfolio. If we think of our design as blocks tailored to specific kinds of content, and then arrange that content in the right context, we can leave the page metaphor (and tons of painful comp files) behind.
Rethinking Deliverables
Most workflows involve showing the client a few pictures of a website on a laptop, disappearing for a few months to code, and then reappearing with a staging link. Instead, we ought to be engaging in pattern explorations along with branding at the beginning of projects, and delivering a system of component parts.
These components are a lot like Legos, in that the content within can fit anywhere, and in any context.
Rethinking the approach to “pixel perfect” website designs can save a ton of time and headaches, while delivering a solid design system to our clients.
Lately, I’ve experimented with presenting style tiles and approaching my layouts using an Atomic Design methodology.