Best width to design a mobile mockup?

Design & UX
1

Hi there,

This is a bit of a basic question, but I need to put together a mockup of a website for a mobile version.

Can anyone suggest a good width that I should provide a mobile mockup at?

Thank you!

2

For me, the normal method is to code for desktop
then reduce the page width to the break points and
then use media queries to adjust the CSS.

There is no defined width for where this may occur. :biggrin:

coothead

3

Hi,

Thanks for the reply. This is for a visual mockup not the coding at this stage. I read that a possible size would be 320px, but that seems a bit small for a visual?

4

You’re reading the wrong literature. :rofl:

There really are no hard and fast rules. :winky:

coothead

5

Make the mock-up for desktop, reduce the page
width until the horizontal scrollbar appears, set
the media query point(s) with the appropriate code.

There may be one, there may be many or there
may be none.

Without CSS interference HTML code is always
responsive regardless of page width.

coothead

6

I’ve done the desktop mockup as JPEG, but they want to see a visual of how the mobile would look, so I need to create a JPEG. I’m not at the coding stage yet :slight_smile:

7

Design the mockup in inches/cm, based on the size of a typical phone screen. Make it so that you can read it, and of a style that’s typical for phones.

8

Thanks, but I’m wondering what best size for that would be? Is there an average size of a phone screen?

9

Here’s a 2015 article… I’m not sure it would be too far off today. There seems to be an upper limit based on the size of pockets :slight_smile:

10

Thanks, I will take a look.

11

No. :unhappy:

And, as I keep pointing out, your approach to this
project of yours is really out of kilter :wonky:

Well, that is useless for testing various devices
and a waste of valuable time and effort

coothead.

13

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