0

I apologize if this question seems rudimentary... I've been doing UX work for just a bit of time and I have typically provided wires that gives the designer guidelines, but offers them creative leeway.

Now I've been asked to deliver "pixel perfect" wires for a responsive website.

I've done a bit of research but I haven't found any concrete answers to my question. (And also how does this apply to retina screen resolutions.) I can do this but I don't exactly know the proper dimension to consider for mobile/tablet/desktop when putting my Axure files together.

Any advice would be appreciated. Thanks!

1

I'm not sure if your client knows exactly what they are after, a responsive design is meant to fit at every screen width. So for it to be 'pixel perfect' you would need a design that works at 640px wide and one at 641px wide, as your images will be slightly bigger, some text might wrap differently. The idea is that content is fluid and fills that area that you show it.

There are a couple of options though when designing a responsive layout, one school of thought is to change the width of the browser on your design until the layout 'breaks' and then use that as the new width for your next design.

Another option would be to use a responsive framework like Bootstrap as the basis for your design. These frameworks still have fluid and full width components that will look different at every width, but also have some set breakpoints where things change.

So that doesn't really give you a hard answer, and is more like saying 'It can't really be exactly pixel perfect as the whole point is that it can change'.

But if you want some actual numbers, then depending on how the site is being built, you could opt for the dimensions that meet a framework like Bootstrap 4 - 544px, 768px, 992px, 1200px. Bootstrap 4 Grid Options (alpha)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.