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.
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.
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.
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.
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 .
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