Best size to mock-up desktop, tablet and mobile visuals

I need to mock-up some designs for a desktop, tablet and mobile version of a web page. They will only be quite basic for now, but I wanted to ask what the best size to mock-up visuals for desktop, tablet and mobile would be, in pixels. Just a rough guide would be fine.

Many thanks.

768px for phones and tablets, 993px for desktops.

However, itā€™s all about what youā€™re comfortable working with.

What are you basing those figures on? 768px sounds pretty large for a phone to me. The ā€œrough guideā€ responsive layout dimensions in the Web Developer Tool bar show ā€œtabletā€ as 768x1024, ā€œsmall tabletā€ as 600x800 and ā€œmobileā€ as 320x480. But devices vary considerably, so at best these are only a rough guide.

2 Likes

Just my experience. I like to start with large size and narrow it down as I progress.

768 pixels are way too wide. That might work for a 6ā€™ inch phone but certainly not for anything smaller than that. 4ā€™ inch phones are still quite popular, especially now with the release of the iPhone SE itā€™s no longer ā€œoldā€ models that are of this size. There are plenty of Android phone OEMs that produce phones below 5ā€™ inches as well, so 320 pixels, as @technobear said, is the minimum to go for. Though Iā€™d not use pixels for it but percentages. Add a max width so that really high res screens are still usable.

Way too wide - 950px is a more reasonable width for desktop - allowing for side by side windows on wider screens.

My work makes mockups for 1440 (desktop), 1024 (landscape), 768 (portrait), and 320 (mobile).It provides me with a good baseline of how it should scale down and when certain things (like the off canvas menu) should approximately start.

Are those sizes targeting tablets?

Supposedly. Again, I want to stress that they arenā€™t targeting devices and their orientation, per say, itā€™s just a rough mockup of how it scales down. A comp every few hundred pixels is great :slight_smile: .

Yeah, even as I typed that, I was thinking it was only being used as a rough approximation of a typical something that the average user might consider to be ā€˜a tabletā€™. /waffle

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.