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.