In recent years I’ve talked a lot about the importance of measuring the browser viewport (it’s not as big as you think).
The rapid adoption of responsive web design and the launch of devices with high definition screens where a pixel is no longer a pixel have made measuring and understanding the visible real estate available in the web browser crucial.
Recently Jakob Nielsen published an alertbox proclaiming that computer screens are getting bigger. He is, by and large, right – excluding mobiles and tablets they are indeed getting bigger.
What he fails to mention is that the browser viewport isn’t increasing at any where near the same rate.
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.
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.
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).
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.
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 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?
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
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. Yet studies have shown that site-searches result in a significantly higher conversion rate than the average. Clear opportunity for improvement there…
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
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.
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.
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.
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.
Keep it above the fold! Employees demand a clean Intranet home page, no scrolling, fewer links.
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.
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.
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(); ?>>
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!
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?