Lies, Damn Lies and Google Analytics (pt. 2)
void-star.net Relaunch v0.2 WIP
Okay, so about that void-star.net redesign thing I was working on?
Right, well. It’s progressing… slowly. I kind of pick at it element-by-element, and as those of you who paid attention to the previous previous version will note, it’s changed a fair bit. I had a bit of a re-think about what it is I want my site to do exactly, and in a DARING DEPARTURE FROM THE NORM! (gasp!) I’ve scrapped the whole “generic default main blog page” concept that’s been so vogue now for the last ten years. Hrm. Ask me again in a few more months what I think about it.
Anyway, this post isn’t really about that. This post is about browser-compatibility, and how I’ve decided it’s totally overrated. Well, not totally. But mostly.
Because I am slow, it actually occurred to me the other day to trawl through Google Analytics’ handy pie charts to see what sort of people are actually coming to this site. And this, my friends, is what I learnt.
Screen Resolution
The first thing I checked was screen resolutions, since I’d already started using 960 as a layout template for the relaunch. 960 is a great framework, I think (I used it for alis.me), but it fundamentally relies on the majority of your users having a resolution above 800×600 (the ’960′ in 960 refers to its fixed width in pixels). So let’s look:
Visitor Resolution Stats
Hrm. You know, I’d never have guessed 1280×800 as being the most common screen resolution, but there you go. I guess widescreen is popular nowadays. People with monitors at 800×600 apparently still exist, but make up only 1.84% of the total. In fact, if you add up all the people with ‘problematic’ resolutions (800×5000, I am looking at you) it adds up to 3.96% of the total. And some of those are so tiny I’d be willing to bet they’re mobile devices of some kind.[i]
Point being, at 3.96% I’m willing to stop designing for browsers on resolutions smaller than 960 pixels in width.
Browsers
Second graph, browsers.
Visitor Browser Stats
Holy hell! Look at that Firefox market share; about three times that of IE!
The thing about browsers, though, is that it’s not so much about the client itself but about what layout engine it uses. There are basically three:[ii]
- Gecko, which nowadays is used almost exclusively by Firefox and Mozilla-based applications like Flock and SeaMonkey;
- WebKit, used by Safari and Chrome; and
- Trident, used by Internet Explorer.
The nice thing about Gecko and WebKit is they render almost exactly the same; you have to try fairly hard to make sites that look good in one look awful in the other. The other nice thing is that while Firefox is my primary browser, Coda — the application I used to build sites nowadays — renders previews in WebKit.[iii] So building sites for Gecko/WebKit is easy.
Of course, like everyone else, I have problems with IE. Drilldown? Yes please.
Oh you poor deluded fools!
Well, first things first. IE6 needs to die a horrible, fiery death. I’m not usually a great fan of Jeff Zeldman but he’s right in the whole “IE6 is the new Netscape 4″ thing.[iv] According to Analytics, 3.09% of my site’s viewers use IE6; ouch. It’s slightly less than the slice of users that use ridiculously 1990s screen resolutions, which makes me wonder if they correlate. I should make a custom report and check…
Anyway, point being, IE6 usage is a small enough minority and a large enough PITA that I’m will to let support for it go. Hooray!
IE7 is a bit more disappointing, bringing in 9.33% of total site hits. While that’s not huge huge, it’s a significant enough minority that I should at least try and make my new layout readable in IE7, if not stunningly beautiful. IE8 (7.57%) also goes into the “readable” bucket, and Opera (3.31%)… meeeh. It shares the same sort of percentages as other things I’m Not Supporting, so out it goes.[v]
Anyway, the upshot here is that 74.88% of users apparently use real browsers. Some of them use old real browsers — the 2.66% of hits using Firefox v1.5.0.9 I am looking at you — but real browsers nonetheless. So I’m fairly comfortable with having Gecko/WebKit as my main, fully-supported layout engines.
Next pie.
Screen Colours
Viewer Colour Depth Stats
8-bit colour? Really? Man.
Anyway, colour depth. Seems that there’s a fairly significant chunk of people still only using 24-bit colour, which is okay but worth noting. 24-bit is not usually that discernible from 32-bit — unless you’re using a lot of gradients — but according to the pie I should probably do at least a cursory test.
Actually, for whatever reason, my monitor doesn’t “do” 24-bit depth, but it does do 16-bit, which is good enough. The screenshot/Photoshop/Indexed/System palette method also works. The main concern with colour depth is that sometimes things that look different at 32-bit end up being rendered in the same shade at, say, 8-bit.
Also: People with 8-bit resolutions… Damn, man. What the hell computer are you using?
Connection Speed
Visitor Connection Speeds
While this is probably Analytics’ least reliable pie chart (look at that big ol’ chunk of Unknown), it’s still worth a peek. Remember above when I was excited about ditching IE6? Well, one of the reasons for that was so I could indulge in one of my most favourite things of all time; 24-bit PNGs.
PNGs, for the record, are awesome; those of you still stuck in the 90s with GIFs and JPEGs take note! 8-bit PNGs function basically like GIFs, with a 256 colour palette and a 1-bit transparency. They also have better compression than GIFs, and aren’t plagued with a weird patent history. In fact, the only reason I can think of you’d use a GIF over a PNG is if you wanted it animated. Other than that (and barring any timeslips sending you back to circa 1998), it’s PNGs all the way.
24-bit GIFs, on the other hand, are roughly analogous to JPEGs. JPEGs tend to compress better than PNGs, but the compression is lossy. Whether that bothers you or not depends on what you’re compressing; for photos it’s usually okay, but it starts to suck on anything with sharply-defined colour blocks or linework (e.g. text). However, where 24-bit PNGs win is in the fact that they support 8-bit transparency. That is, properly anti-aliased transparency, unlike the “jaggies” of GIF/PNG-8.
I love PNG-24; they make a whole boatload of stuff in webdesign so much easier. The downside is the filesizes can get kinda large, and when you’re stacking a couple of large files on top of one another… you can hit a couple of meg per page fairly quickly.
Is this a problem? It depends on your users, really. For the 2.72-29.10% of people on dialup, it probably sucks. For everyone else, not so much. Here, it’s looking like that majority of visitors are on faster-than-dialup connections, which means I can have some fun with PNGs, whilst not going completely nuts.
Last one.
Operating System
Visitor Operating System Breakdown
The OS is, mostly, about the fonts; Windows and OS X display fonts significantly differently. The exact technical reasons seem to be debated — some combination of differing DPIs and different font rendering philosophies — but the net result is that web text looks about 75% smaller on OS X than on Windows.
Mint OS Comparison
Using Firefox on both machines, the left side of the above image is OS X’s version, the right Vista’s.[vi]
The other thing is ClearType; Windows’ font anti-aliasing technology. There are some really nice fonts out there that the vast majority of people will have installed by default, and that look beautiful rendered in ClearType and unredably hideous without. The classic example is personal favourite Century Gothic, but any of the new Office fonts also qualify.
ClearType is turned off by default in Windows XP and older Microsoft OSes, but on by default in Vista and IE7 (regardless of the OS setting). OS X uses its own font anti-aliasing technology which is so on-by-default I’m not sure you can turn it off, and I’ve got no idea about *NIX, but I suspect it varies wildly. According to Analytics, about 45.77% of visitors use either OS X or Vista, which make them good candidates for assuming Real Font Rendering. A further 6.83% of visitors use XP with either IE7 or IE8, and sadly I can’t count the number that use XP with ClearType enabled.
Tsch. I think from reading this it’s too early to assume that it’s okay to use Windows fonts that only work in ClearType. The solution? Use sexy Mac-only fonts first, then define basics like Verdana for Windows users.
Sucks be to Windows users, I guess.
So What?
Obviously, the above isn’t the sum total of what Google Analytics has to tell me. It has other exciting lessons about keywords and content and bounces and whatnot, and this information is also important when trying to assemble what, exactly, I want the “goals” of void-star.net to be (such as they exist).
But looking at the performance metrics, I think, has been particularly enlightening. Not because they’ve caused me to deviant from my original plan much, but rather because they’ve reinforced the things I don’t need to worry about, statistically speaking.
Like IE6.
- The iPhone, for instance, logs and effective screen resolution of 320×396. It’s also fairly good at re-scaling sites to fit, and while a 960 page isn’t great on a iPhone, it’s still usable. ↩
- When I say “basically”; Opera has its own, and Konqueror uses KHTML, which is what WebKit is based on. There are also a couple of other proprietary engines, though I’m fairly sure no-one gives a crap about what, say, Novell is doing in browser-land nowadays. ↩
- Thanks, Cocoa! ↩
- Also: Hands up those of us who were actually making websites during the Netscape/IE browser wars heyday. ↩
- For the record, the design screenshotted above looks mostly the same in IE8 and the latest Opera. It’s missing the CSS rounded corners — which is expected — and the “Archive” link has dropped about 60 pixels — which is not, and seems to be due to my crappy implementation of 960. ↩
- Astute reasers will note that not only are the fonts different, but the colours are too. What a nightmare! ↩