: Design safe area / top and bottom bars height through different systems and browsers When designing RWD how do You consider design safe area? For example in 1920x1080, do You design for 1080

@Caterina889

Mobile first

As of 2013 more people view web sites on mobile devices than on desktops. You should be far more concerned about how your site appears on a phone than on a monitor.

That being posted, you can check browser statistics to determine some general information.

For example, checking www.w3schools.com/browsers/browsers_display.asp will show that in Jan 2017 there were still a fair amount of users with a max window height of 768px.



900px would be obviously too much to show everything. Now, take W3Schools with a grain of salt. They are often incorrect on matters. They are not associated with the W3C.

There are other sites as well.
www.w3counter.com/globalstats.php shows reportedly a more recent statistic of Nov 2017:



How absolutely accurate these statistics are for your site is a mystery. Many hosting packages have a statistics package such as AWStats or you may even be using Google Analytics. These would give a more accurate understanding of those using your site. The only clear factor is designing for mobile screens is far more important than designing for a desktop screen.

Personally... for a web site on desktop, I use 600px max height as the "above the fold" area. And while responsiveness will decrease the width of a page, sticking to 600px height works well for mobile screens as well.

Vote Up Vote Down