Browser viewport (minus Address bar, nav items) on mobile. How do you make sizing decision with these in mind?

over 5 years ago from , Designer

I was just wondering if you guys have a rigid workflow around how to design for the actual browser viewport for mobile layouts (like, say, for fold considerations). Is measuring out of screenshots enough?


  • Dean HaydenDean Hayden, over 5 years ago

    For a bit of light relief, use this as reference https://twitter.com/sbholtrop/status/878611398527520768

    3 points
  • Phil LegrosPhil Legros, over 5 years ago

    I like to set my "screen size" in my prototyping software to match the pixel dimensions of the screen I'm working on. The smaller, the better. Designing for your minimum common resolution will guarantee that it'll fit nicely on bigger screens.

    1 point
  • Matt WillettMatt Willett, over 5 years ago

    It is definitely a concerted effort. When I design for web or apps, try to think about your target demographic first; is the user using a smartphone or a laptop? But don't design just for this first.

    I've found that designing with that target in mind, but working from the smallest viewport and scaling up produces work that feels comfortable and uniform. As for designing individual screens; think about general usability for those devices, phones will require bigger touch targets, laptops and desktops have more real estate to play with.

    Adobe actually published an article recently outlining some really good points.

    As for actually allotting space and determining usable screen real estate, think about the screen being locked to atypical ratios, 16:9 is great for a display, but it doesn't account for the browser and system ui. Try designing in Cinemascope for desktop and see how it works, using a ratio of 21:9 (the mailbox-looking ratio on widescreen tvs when watching movies) seems to work well. Think of it as a minimum critical viewing area for example.

    Hope it helps!

    1 point