Going beyond simple pixel-width conditions

Pixel Perfect era

“There’s a time and place for pixel perfection, and the web is not it, @nickrp”

In this new world users will access your content or software using a huge varying set of devices, each of them has the reasonable expectation of being able to access the full experience and the full set of features you are providing. This changes The Web Design substantially and the expectations. Even in the old world of different PC browsers, pixel-perfect web design idea was rarely that, now with Responsive Web Design, it is even less so.

What are the problems?

1) Time

2) Performance

3) Real UX

Time: Time is money

The Post-PSD Era”, @brad_frost

Pixel perfect focus on “perfection and details” instead user-experience, not experimentation new ideas. If we could use live HTML5 mockups and do more prototype, we can play and shared the experience to others. So as soon as we finish as soon as we’ll get more feedbacks!

In brief, we can also achieve this creating a prototype and making a workflow.

“As web creators we need to see performance as design”, @elementByIdea

Performance: Design for Performance

“It is an increasingly-pathetic process that makes less and less sense in this multi-device age. I’m not making a case for ditching Photoshop altogether and designing solely in the browser, @brad_frost”

Keep it simple, but not stupid

Be smart. Reuse your components from Content First or Mobile First, if possible.

Design is not about “performance”, is about “art”. Your solution can be very very nice but with the lack of performance your solution will fail. A smart combination of both is the key to success.

If you are a designer: Don’t waste your time creating pixel-perfect. Do more prototype instead.

Real UX: Design for the web in the web

“This looks awesome: designing responsive sites right in the browser” @RWD

Have a printed paper is not good enough. Designers needs see on multiple real devices, play with them and improve the User-Experience and usability.

Possible Solutions

Think in visual individual components instead of full pages

Components can be individually replaced, removed or reordered

Design thinking on breaking points

Instead Mobile, Tablets and PC think on Small, Medium and Large

Design and Test your design in the browser

Design on the web for the web: No matter if you or ather developer will code the website, getting to feel your design in the browser is a critical step in any Responsive Web Design workflow. Not only will it benefit the design part, it will most importantly get your teammates in the loop.

Use Live Prototype Tools


Going to “Proportion perfect”

“It is no longer pixel-perfect, let’s start thinking: ‘proportion-perfect’, @leolaneseltd”

We are still following the Design but on a proportion-measure way, don’t get me wrong. A Responsive Website need to look “similar” in a proportional measure way.

One of the things that I encourage is the idea of Progressive Enhancement and Responsive Web Design, and we end up with a solution that looks “similar but not identical” on different environments or devices, which are connected to a single solution.

Simple put, the screen width it is device feature, if we decide to do a “pixel-perfect” for every single device in the world, we are going to need hire few more designers.

Test on real devices ASAP

Create clickable prototypes and have some fun with it !

Further information:

– Proportional Perfect (@leolaneseltd)
– The post psd era (@brad_frost)
– Don’t be a pixel perfectionist (@nickrp)
– The mobile-first Web (@bergie)
– Measure units and pixel perfect on Responsive (@leolaneseltd)

Want to chat about this?


Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *