Responsive Design and the Demise of “Pixel Perfect”

The web used to be thought of as pages—like book or magazine pages—fixed and immutable. Developers were hired based on their ability to create pages that were “pixel perfect” renditions of the Photoshop comps the graphic designers made and the client approved.

Now, the web is more often thought of as content, actions and transactions, meant to be seen and used in dozens of contexts. Websites are being displayed on devices of every size and shape. Designs that were originally envisioned to look great on a 1024 x 768 pixel monitor are now being viewed on phones with 320 x 460 pixel viewing areas as well as giant 27” monitors with 2560 x 1440 pixel screens.

Treating websites as pages like magazine spreads in this multi-device world means that every time the size of the display changes, a new layout must be created if the design is to work in this new size. In extreme cases, that means upwards of a dozen different layouts might need to be created for every page style of a website. The budget and timeline implications of trying to keep up with this layout proliferation are obvious and disastrous.

So we have to do something new.

Increasingly, the web world is turning to responsive design to account for this profusion of screen sizes and viewing contexts. Responsive designs automatically scale or rearrange page elements following a planned set of instructions to better fit displays of different sizes and shapes. Because these alterations are made automatically by the browser, the web page that is a “pixel perfect” match for the comp the designer creates is a thing of the past. Web page layouts become elastic and a traditional comp is at best a snapshot of a single state, a single view of the site on a single monitor, and does not give a true picture of what any given user might see.

Responsive design is a great technological solution to the problem of getting your site to look right and function properly on a wide array of devices. It leaves us, however, with some problems to solve in both how we think about graphic design for the web and how we communicate our designs to clients.

As we move into this world of responsive design, graphic design will be less about dictating exact layouts, and more about coming up with a flexible set of graphic elements and styling concepts that carry the site’s tone and feel. It will be less about showing clients, “this is how the page will look,” and more about helping clients understand how their content’s shape and arrangement will change from device to device while still offering a good experience.

We have to get past the idea that it’s possible, using static imagery, to see exactly how a website will look. Responsive sites might render in hundreds of slightly different ways, and we can’t possibly show them all. We need to find new ways to show design and UX to clients–ways that don’t depend on fixed layouts.

Here is some great reading about tools that some people are using to help designers and clients communicate with each other in the post-“pixel perfect” world:

• Style Tiles – Present clients with interface choices without making the investment in multiple photoshop mockups.
• Prototyping – The process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers.
• Prioritized Lists – A simpler, faster, more flexible alternative to traditional wireframes.

Want to learn more? MICROS eCommerce can help you understand what responsive design is and how it can help your property increase sales. Contact us today to learn more about how we can help you improve your business.

Recommended reads: Responsive Design 101

Interested in ramping up your online strategy? Check out the full suite of MICROS eCommerce interactive marketing tools, send us an email, or give us a call +1 301.841.4700(US) | +44 (0)20 3004 9468(UK).