Design mockups for iPhone

[coljung]

So ever since retina mobile devices came out, i’ve had trouble understanding what is the right size for PSD mockups for iPhone specific devices.

I always ask my designers to provide 320px wide mockups, but they insist on 640px or more wide designs. I know with retina displays the pixel ratio on iphones can be of 2x or more, but does this mean the mockups have to be doubled in size ?

When im given a 640px, and i have to fit everything on a physical 320px screen, i end up having to reduce every single measurement on the page by 2 ( font-sizes, borders, widths, etc. ).

Wouldn’t it be more convenient to have a 320px wide design, with a resolution 2x the standard ( 144 for example ) ?

Thanks for any input on this.

[Paulie_D]

I always ask my designers to provide 320px wide mockups, but they insist on 640px or more wide designs.

They misunderstand what pixel density is and that “a pixel is not a pixel”

If you ask for something and they don’t supply it…you have to ‘educate them’ into giving you what you asked for.

If I ask for an apple, I expect and apple…not a melon.

[coljung]

Ok thx.

Now, regardless of what i ask, what is the standard width for an iphone PSD mockup ?

Thanks again.

[Paulie_D]

what is the standard width for an iphone PSD mockup ?

No such thing as ‘standard’.

[coljung]

Ok… then if there is no ‘standard’ what should i be asking my designers to provide for iphone mockups. Width and dimension wise ?

Thx.

[Paulie_D]

Width and dimension wise ?

You are too hung up on actual dimensions…these aren’t necessary in responsive design…percentages are more important than pixels.

[coljung]

so after 3 posts u havent been able to give me a single answer…

regardless of how we code, and how we dont usually require mockups for responsive, sometimes we require a base design, and im looking for a ‘standard’ width even if there is no ‘standard’.

also, i can not ask my designers to give me a design that is 80% wide.

my main question is, is it ok to have a 320pt wide design at 300 Ppi, or something like 640px at 72ppi.

[shaneisme]

Designers shouldn’t be providing mockups or comps like it’s for print.

Designers should be providing mockups or comps in a browser, preferably also while using a device lab.

Paulie was giving you an answer, maybe not one you wanted to hear. You can’t have a fluid grid inside Photoshop unfortunately. If you’re building websites, build a website :)

[coljung]

If you’re building websites, build a website :)

Really ? This has nothing to do with my question at all.

All i want or need is a suggestion regarding a size.

I’m fully aware that designing and coding RWD sites, doesnt require mockups like it used to. On 90% of my sites i tend to just base my responsive code on the desktop version, no need for comps for this.

It just happens that i have a project now that is mobile only, and we need some kind of design for that. We have wireframes, but again, some design guidance is needed and unfortunately i can not have my designer sit next to me for that.

Anyways, i’ll somewhere else.

Thanks.

[shaneisme]

Then just pick an arbitrary number. There’s no single pixel size for even iPhones any more.

[Nocturnes1984]

@coljung I understand you…its hard to understand right, atleast it was for me. In the non-responsive era you could just do: Width:320px, etc…you had some kind of size where you could work in. But now…how to still know in what you are working in? Width:90% – What is 90% right…how do you know, the browser size is always different. Smartphones, tablets, SmartTV, different LED screens, you name it….But once you start to understand those % specifications,….things get easier.

But its hard, i know! People here just say:”Why ask? Its just like that, don’t think in pixels”. Like they never had to find out for themselves or ask someone. Don’t get me wrong! I learned loads of things on here, but responding with answers like…its just the way it is – is bloody frustrating. Not everyone has people in the webworld in rl where we can ask questions to.

[Ed]

http://iphoneresolution.com – just pick whichever you want. If I were you, I’d use the iPhone 5’s.

http://www.paintcodeapp.com/news/iphone-6-screens-demystified elaborates, but you seem rather impatient and unwilling to listen.

[Author]

Posts