What size is the viewport for the desktop version?

[Brian Mandella]

Hello,

We've been working on improving our page speed scores and noticed in the graphic on the right side that our site is not at it's "natural" width, it's on the version down in our responsive design.  We can tell this because some of our images have the right side hidden because of a css property overflow: hidden. This looks to be messing with how the images continuously need optimized even though we optimized them by cutting the file size by half or more.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.80stees.com%2Fcollections%2Ftop-sellers&tab=desktop

Here is a screen capture of what I mean: http://screencast.com/t/TIQce0bNkZ

Our break point in desktop size from the natural view-port is at a max of 1026px.  We do this because in our Google Analytics it stats most users device widths are above 1024px for desktop.

Does anyone know what the desktop viewport of the page speed is using?  I know it's not a "real" device but an emulator of Google Chrome. There still is a setting for setting a device view port width.

Thanks,
Brian

[Dave Mankoff]

The pages are rendered at a screen size of 1024 pixels.

You can verify this if you create a test page with elements visible at various widths via media queries:

<div id="is-1023">1023</div>

<div id="is-1024">1024</div>

<div id="is-1025">1025</div>

<style>

div { display: none; }

@media (max-width: 1023px) and (min-width: 1023px) { #is-1023 { display: block; background: red; } }

@media (max-width: 1024px) and (min-width: 1024px) { #is-1024 { display: block; background: blue; } }

@media (max-width: 1025px) and (min-width: 1025px) { #is-1025 { display: block; background: orange; } }

</style>

-dave mankoff

man...@google.com

[Brian Mandella]

Hi Dave,

Was there any reason why it was set at 1024 pixels instead of something larger?  Lots of store bought computers are shipped with monitors that exceed that screen resolution(especially being widescreen aspect ratio).  I think that the 1024px age had passed back in '06.
I can verify on our GA that most visitors have a screen size of more than 1024px. There are a few hold outs, though, they even are stuck in the past with IE6!
My work computer has a screen resolution of 1920px by 1080px.

[Dave Mankoff]

I wasn't part of the team when it was originally chosen, but I we believe that it continues to make sense to target 1024 as a lower bound for "desktop" size. Citing statcounter, 1024x768 still makes up ~5% of the web over the last 12 months: http://gs.statcounter.com/#resolution-na-monthly-201307-201406-bar.

5% may not sound like a lot, but it's still 1 out of every 20 visitors. And, as the lower bound on desktop resolutions, if it looks good on 1024, it will probably still look good on larger screens.

I suspect most developers these days have larger screens and will ensure that it looks good for them. Conversely, many may not think to check what it looks like on 1024 which would be a mistake.

I can't promise that we'll be increasing the resolution at any particular point, but I would assume that the usage stats will have to drop below 1% before we'd realistically consider it.

-dave mankoff

man...@google.com

[Brian Mandella]

Dave,

You make a good point and we may have to adjust our viewport to be at 1024 for the natural desktop view. right now the 1st css break point is at 1026 for some reason.

I'm sure as more and more people upgrade their computers, the screen resolutions will continue to increase and maybe 4 years down the road, you guys will consider it. Maybe by then there will be something different to consider. :)

Thanks!

[Miguel García Sánchez - Colomer]

Hi Brian,

i was surprised by the average resolution reported by my Google Analytics... There are a lot of people using "sub-hd" resolutions o_0 so, i think that 1024 it's ok to start but i hope that all the people will use 720p as the "lower" resolution in future.

Cheers,

Miguel.

[Thomas Hey'l]

Hi everybody!

Dave wrote:

I wasn't part of the team when it was originally chosen, but I we believe that it continues to make sense to target 1024 as a lower bound for "desktop" size. Citing statcounter, 1024x768 still makes up ~5% of the web over the last 12 months: http://gs.statcounter.com/#resolution-na-monthly-201307-201406-bar.

Great post, Dave, fully supported!

Until February/March 2014, Google provided the browser sizes in queries from image search results (often, not always!). I collected these data and evaluated them until March.

The first quartile (width) was 1,152px in February and the average 1,313px. The third quartile (75% position) was 1,600px.

It makes perfect sense to support 1,024px as a) this is still a common size and b), many users don't use browser windows in fullsize, because some websites return unreadably long text lines then. I prefer to browse at 1,024px outer width, too.

If I remember well, users get distracted if they get too much lateral extra input and have more difficulties to concentrate on the main content.

Unfortunately, even Google has a lot of pages that cannot be read without horizontal scrolling at 1,024 × 768px and even some that cannot be read at all at this size. The nowadays often repeated cookie disclaimer in Europe cannot be accepted at 1,024px width as you will never reach the "Got it" button (shame!).

As for the 5%: This is a huge amount. Don't waste the user experience in these cases. It should not matter which device a user has or which resolution, what counts is that almost every user will be satisfied. The same is valid for outdated browsers and User agents. You don't have to provide the full set of sophisticated features for them, but give them a reasonable surfing experience. And for the drop below 1%: That seems to be a good point to move the focus to higher grounds.

Regards, Thomas

[Brian Mandella]

Hi Thomas,

On Sat, Jul 26, 2014 at 5:58 AM, Thomas Hey'l <in...@themt.de> wrote:

It makes perfect sense to support 1,024px as a) this is still a common size and b), many users don't use browser windows in fullsize, because some websites return unreadably long text lines then. I prefer to browse at 1,024px outer width, too.

If I remember well, users get distracted if they get too much lateral extra input and have more difficulties to concentrate on the main content.

Does this hold true to eCommerce websites? We thought that if we put more products above the fold for visitors, the better our chances of them buy from us.

Have a Spectacular Day,
Brian

Toll Free: 1-866-807-8337
www.80stees.com
Like us on Facebook
Follow us on Twitter