Beantin

James Royal-Lawson

browser viewport

The browser viewport: Remember laptops!

A few years ago I wrote about how screen sizes were getting getting smaller, and this is proving to be the case. Tablets, Android devices/iPhones, iPads – the number of horizontal rows (in landscape mode) is really getting squeezed.

The amount of new websites appearing that are effectively broken when viewed on a laptop is alarming. Laptops and their screen sizes with relatively few number of horizontal rows aren’t going away any time soon. Neither are tablets.

Laptop resolutions

In December 2010 at the time of writing, there were 2673 laptops listed on Swedish price comparison website Prisjakt, of which 1828 of them had a vertical resolution of less than 801 rows. That’s 68%.

Width-wise screen-size statistics and viewport statistics correspond pretty well. This is in part due to the number of laptop users that run their browser maximised to fill the screen. Maximised though, does not mean that you have the full screensize available to you and your web site design.

The browser, it’s chrome, it’s toolbars, your add-ons and bookmarks – all eat away at the number of horizontal rows that are left for your website to fill.

Toolbars eat height

Most browsers are going to eat up at least 100 pixels of your vertical resolution (number of horizontal rows), and quite easily more (it only takes one Google Toolbar to eat up another 30 rows).

Laptop resolutions revisited

If we return to our price comparison site and include the laptops that have a vertical resolution of 900 and below, we find that 2346 of 2673 of new laptops have a likely browser viewport of less than 800 rows. That’s 88%.

In addition to laptops we have tablets and smartphones. The iPad, iPhone, and every single Android device currently in existence also fail to knock up a potential viewport height of over 800 pixels.

Beantin.se

Let’s walk through some stats using visits to this blog as an example. The normal visitor to this website is someone who works with the web, or perhaps communication. You are by no means a normal, average person. The general understanding would be that visitors to web tech sites would have higher screen resolutions than normal. With this in mind, the statistics become even more startling.

The stats

  • 65% of page views had a viewport height of less than 800 pixels
  • 1269×718 is the average beantin.se visitor’s viewport size
  • The Median viewport size is 1276×723
  • Most common viewport size (the mode) for beantin.se is 1280×664
  • Of the top ten screen resolutions only 14.71% had more than 800 horizontal rows.

The focus in the web design industry is still on the screen size of the visitor. This is understandable as a numver of major statistics tools (such as Google Analytics) don’t offer any data about the browser viewport. Although understandable, it’s not acceptable.

Do you provide viewport statistics to your web designers?

As a web designer do you consider the viewport size?

10 Articles worth reading… (Spotted: Week 29-31, 2010)

BBC News website’s content management and publishing systems

The BBC Internet blog often produces some really good in-depth insights into how things work at the BBC. This time, in connection with the recent redesign of BBC News, they take a look at web management, web standards & their in-house CMS

Why QR Codes Are Poised to Hit the Mainstream

SL have just started testing Quick Response codes at a number of bus stops here in Stockholm. Co-incidentally Mashable writes “Why QR Codes Are Poised to Hit the Mainstream” around the same time. You shouldn’t produce any printed matter now without a QR Code in my opinion.

Half of site searches are unsuccessful: report

Half of site searches are unsuccessful. Yet studies have shown that site-searches result in a significantly higher conversion rate than the average. Clear opportunity for improvement there…

The Internet Generation Prefers the Real World

This article from Spiegel Online describes how the (German) Internet Generation would appear to prefers the Real World – or rather, that it is integrated into their lives but that they are not necessarily “internet experts”. What you can conclude is that there is no global norm when it comes to the internet generation and their internet usage. Read my earlier post about Internet usage and young Swedes in Sweden

18 Simple SEO Items Commonly Missed in Web Development

Not a bad list. Your next site won’t be worse if you follow all of these 18 points! There are, of course, more than 18 things that are normally missed.

Blog – Subdomain or Subfolder? Which Is Best?

More on the eternal question of on-domain, off-domain, or sub-folder blog – which is best? Well, they all can be in my opinion. Really does depend on each individual case.

Will the Real Browser Stats Please Stand Up?

Global visitor stats are always misleading. Make sure to always study the stats for your own site (and therefore visitor groups), especially browser version and viewport size before a redesign.

How long are intranet projects?

Steptwo write about how long an intranet project should be (it is often not given enough time) – As is often the case, similar things apply to Internet projects too.

Employees demand a clean intranet home page, no scrolling

Keep it above the fold! Employees demand a clean Intranet home page, no scrolling, fewer links.

Enterprise 2.0 Roll-up: Google Kills Wave, Collaboration Ain’t Easy

In this CMSWire article they’ve taken the example of how a global collaboration product (Google Wave) failed to be adopted and likened it to the difficulty of implementing collaborative tools within the Firewall. Fair few pearls of wisdom from some clued-up people.

WordPress plugin: Measuring browser viewport size

Previously I’ve written about the importance of browser viewport size, and also explained how you can measure the browser viewport of your visitors and store the result in Google Analytics as events.

Given the 25 million sites out there running WordPress, I decided to invest a bit of time into creating a WordPress plugin to track viewport size. It uses exactly the same technique as described in my earlier post but conveniently wrapped up as an easy to install WordPress plugin.

Download the plugin

You can download the Measure Viewport Size plugin from the WordPress plugin directory. Or you can install it directly from your WordPress site by searching for “Measure Viewport Size” from the “add plugin” page.

There are a few prerequisites; you will need to have Google Analytics installed on your site (the asynchronous “_gaq” version). I’ve tested the plugin with Google Analytics for WordPress and it works fine. You will also need to make sure that your theme supports the body_class trigger. The body tag in header.php wthin your active theme should look something like the following:

<body <?php body_class(); ?>>

How does it work?

The plugin uses a javascript function to obtain the width and height of the viewport of the browser window your website visitor is using to view your site. It then sends three “events” to your Google Analytics account. One for the width, one for the height, and one with a text label containing the full dimensions.

You can then view the events that have been recorded as people visit your site in Google Analytics under Content -> Event Tracking. It can take a day or so for the events to be processed and to appear in your GA reports, so be patient!

Why bother?

Monitoring and analysing the browser viewport size is a crucial part of designing and maintaining a successful website.

50 pixels fewer in available height for content could be the difference between your call to action being visible or disappearing below the fold. That could have a noticeable impact on your conversions and goals.

The browser viewport is the window in to your world. Your visitor sees everything through it. So why drive blind when you can quite easily gather and analyse a bit of data?

1 of 2
12
Reload this page with responsive web design ENABLED