Some Browser Share Analysis of My Blogs

As web designers, we all know how important it is that you are aware of your target audience, and what sort of browser they might be using to view your sites.

I was idly fiddling with the Sitemeter Stats for my blogs today, and was intrigued by the variation in browser share between them - largely reflecting their readerships, and how "geeky"/computer literate the visitors may be. They're all hosted on Blogger and have referrals from a variety of sources.

First up, this blog shows the largest number of different browers - even getting a few percent of views with Konqueror and Opera 9. I see 2% of folks are still straggling along with Netscape 5 too! The majority are on Firefox 2 - just edging IE7 by 6%. I guess this wide spread of browsers reflects the "geekery" of the content and people using niche browsers are likely to read webhead stuff!

[Browser Share pie chart for this blog readership]

The second chart is my Rugby Mad blog - the first one I started back in Feb 2006. Although the subject is just limited to rugby, I'm guessing that the readers represent a more "average" web user - the blog was linked from the BBC's Six Nations blog last year, and I got massive numbers of hits from that. They are certainly a less geeky crowd than above. This is reflected by the stats - nearly half of them are using IE7 - with IE6 the next largest chunk at 28% <sigh />. Firefox has plummeted 20% compared to the geeky blog. And it looks like around 8% read from a Mac (although I suppose some could be using Safari on a PC now). But no Netscape in sight!

[Browser Share pie chart for my RugbyMad blog readership]

My Photographic blog is most similar to the web design one - although there aren't any die-hard Konqueror or Opera fans amongst the readership! The Netscape stragglers are back in about the same numbers :-)

[Browser Share pie chart for my Photographic blog readership]

Last of all is my newest blog, My Year In Pictures. It's been running less than a month, whereas the rest have been going for a year or more. I guess potential users of older browsers may have upgraded before this one went live (I think the stats are derived from the last 12 months if the blog has been going that long). The most surprising is Firefox 2 with a whopping 42% share, a good 8% ahead of IE7. There's still around 18% of users clinging to IE6. Safari and Netscape figure in the few percent.

[Browser Share pie chart for my Year In Pictures blog readership]

So, what does all this tell me? It just shows that with the proliferation of new browsers, while Firefox is doing well in the geeksphere, IE7 is gaining ground - but IE6 is still alive and kicking (us) amongst the "average" web user. And yes, there are still some poor folks using Netscape - people, if it's within your power, upgrade to a nice shiny new browser!

When I build sites for clients, I'll always design it for Firefox. Then test/fix for IE7 (some niggles but not major problems) and pesky IE6 (usually requires more tweaks). I'll also have a look at them in Safari (PC) and Opera 9.02 - there may be slight presentational differences, but no show-stoppers.

For a laugh, I'll also take a peek in IE5.5 (and 5.02 if I'm feeling masochistic), but I'm not going to waste any time fixing bugs for them. Let's face it - none of the above readers have registered as using them - and I'm guessing on average, these stats are pretty applicable for most web users these days, no matter what content they are browsing - so why should I flog myself unneccessarily?

Browser Wars or Spoiled For Choice?

Two new browsers have launched in the same week. As Olly says, it's a bit like London Buses. First a drought, and then they all come at once.

Firefox 2 - first impressions

As a regular user of FF1.5, I was keen to get the 2.0 release and like the slightly "shinier" look of the browser - someone's polished the chrome!

I found an excellent article on tweaking Firefox, and have done a little customisation to make myself happy with it. One thing I was having trouble with - the new version put an "X" on every tab to close it, whereas 1.5 just had the one at the righ hand end of the tab bar.

Fiddling with the browser.tabs.closeButtons parameter, and setting it to "0" just gives you the close button on the active tab. Much better!

The browser.tabs.tabMinWidth default is 100[px]. If you have many tabs open at once, you end up with scroll arrows in the tab bar, and only get about 7 tabs across by default before this happens. Changing this parameter to 75 gives you about 10 tabs before they start scrolling.

I like the "Recently closed tabs" in the History menu too - how many times have you closed a tab, only to think, "damn, I wanted that one"? Restore it quickly via this menu, and voilà!

Setting browser.urlbar.hideGoButton to "true" (default false) will get rid of the annoying green arrow next to the address bar. Personally, I never use it, I'm in the habit of bashing "return" once I've typed in a URL.

There are other new features, but I've yet to fully explore them.

IE7 - first impressions

I've been waiting in trepidation for Microsoft's latest browser to be released. Yet ANOTHER browser us poor web developers will have to take into account when testing our sites. Yesterday, I bit the bullet.

No troubles in downloading the update, or installing it (thankfully!). Similarly, I went and trawled the evolt.org browser archive for a standalone version of IE6. I've heard some people have had problems with these standalone versions, but thankfully, no aggro as yet. So I've now got IE6, IE5.5 and IE5.01 on my PC too. Along with Opera, that has most of the major PC browsers covered.

Looks like none of my sites have major issues in IE7 - thank heavens! But I would have been surprised if they did - most were designed with standards in mind (IE7 is just catching up with the standards used by Firefox for years), and I haven't got loads of IE-specific hacks lurking in my code.

Two things about IE7 I do like, and don't think Firefox2 has (let me know if I've missed these options buried in FF somewhere):

1. Page thumbnails
2. Whole-page zoom

Page Thumbnails

If you click the thumbnails tab at the LHS of the tab bar (outlined in red) -
the browser gives you a large thumbnail of what each tab's page looks like. A bit trivial if you have lots of different sites open, perhaps, but useful if you quickly want to tell the difference between several pages from the same site. The thumbnail display looks like this:


Whole-Page Zoom

And secondly, with accessibility in mind, IE7 will actually zoom the whole page, rather than just text. So if your standard page looks like this:

Once the page is zoomed, even up to 400%, it makes a pretty decent job of rendering text in graphics at this larger size (click the image below to see an actual-pixels version):


I'm sure there will be little niggles and glitches which become apparent as the web community gets used to these new browsers. For the moment, although I see IE7 as a massive improvement over the crusty old IE6, I don't think it's quite persuded me to swich from Firefox as my default browser. And that's largely to do with the developer extensions and addons I use. Perhaps for a regular surfer, it would be enough.

Finally, A Night At The Opera

Lastly, I've just downloaded the upgrade for Opera, now version 9. The Opera website details what's new in Opera9. Haven't really had a chance to look at this in depth, but it's always good to have another browser option to test.

Playpen #4 - Microformats/Too Many Tails?

Enthused by the WSG meeting on Microformats last Thursday, I thought I would update my website to include some hCard information, so put together an About Me section.

I thought I would include links to "me" elsewhere on the web, too - such as Flickr and Upcoming. The hCard spec allows for these sort of additional URLs, as long as you mark them up with class="url", which I duely did.

However, when the Tails extension for Firefox scrapes the page for Microformat info, if you have marked up multiple links with class="url" - it just takes the last one in the vCard element as the one which is displayed in the popup. I removed the class from the last link in the list, and Tails took the next one up. So, it seems Tails doesn't parse mutlitple URLs and list them too, it just uses "last man wins" as the URL to display - a shame :-( It would be nice if it took the one associated with the name or organisation element as primary. Perhaps there is a way to say which one is primary, and I'm missing the point?

In order that I don't mess up my about me page, I've taken these extra classes off it, but in order to show you what I mean, I've replicated the problem in the playpen4 page.

If anyone has any thoughts or comments, I'd be interested to hear them.

31st October - add:

Further to Trovster's comments, here are two screenshots for my version of Tails (0.3.4):

[click for a bigger version] - Tails displays my Contact details with just one URL: the link surrounding "Freelance Web Design & Photography" is the only anchor marked up with class="url" on this page.

However, the playpen4 page looks like this with Tails:

[click for a bigger version] Tails still displays just one URL, but this time it's the last one in the hCard list marked up with class="url", this time the link for my dConstruct Backnetwork profile.

Introduction

I thought it would be useful for me to start a professionally-based blog rather than polluting my Rugybmadgirl blog with stuff about XHTML, CSS and web technologies, which is for entirely different audiences. So here goes...

I'm a web designer and developer with 10 years experience of coding sites - I started with Notepad back in '96 and have progressed quite a lot since then! My current weapons of choice are:

• Dreamweaver8 - Macrodobe's latest offering (I've been using DW since version 4) which has much better support for CSS layout, XHTML and .Net than its predecessors
• PhotoshopCS - essential for graphics preparation and photographic retouching
• Firefox 1.5 with various plugins, notably:
  

1. Web Developer Toolbar - turn off css or javascript at the flick of your mouse, outline block level elements, debug scripts, and heaps more.
2. Tidy HTML validator - great as it runs on your localhost and immediately validates any page directly in the browser. Especially useful if you are developing offline or for intranet apps when you can't get the W3C validator to play ball - its the same validation engine
3. IE Tab - allows you to open tab in Firefox which uses the IE rendering engine - dead handy if you have a pathalogical fear of using Internet Explorer :-)
   
4. Foxytunes - for keeping you supplied with music, this plugin gives you all the basic controls over your media player of choice in the status bar of the browser, and takes up much less task-bar real estate than the minimized Media Player
   

• XHTML - usually 1.0 transitional, but sometimes 1.0 strict. Essential if you want to improve your standards-compliance and accessibility for your content
• ASP.NET - I have developed a few sites driven by .net, and have found it to be resonably easy to get to grips with. Examples are:
  

1. www.cazphoto.co.uk - an online portfolio site for my general photography
2. www.rugbypix.com - specialising in my rugby photography
3. www.johnflood.co.uk - electronic publishing for John Flood, professor of Law & Sociology
   

• Access2000 - so far, the sites I have developed have not needed the extra scalability required by mySQL or SQL Server, but I do intend to build sites with mySQL in the future.

I'm also looking to develop my PHP skills in the near future.