cazmockett.com

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?

Discovering Microformats
For viewing Microformats, and discovering them in a web page, I’ve blogged about Tails for Firefox in the past. But recently, I’ve been beta testing Andy Mitchell’s excellent Webcards 0.3 extension for Firefox. So what does it do?

The first time you load a page containing Microformatted information, the green WebCards ribbon pops up at the bottom of the browser viewport to alert you. This also appears when you mouse over the bottom of the browser:

[WebCards ribbon tells you what sort of Microformats are in the page]

Playing Tag
Clicking the “Tags” link in the ribbon brings up the Tags panel:

[Default view of the "tags" panel is the Related option, allowing easy search of del.icio.us or Upcoming for the tags in question; "brian suda" in this example.]

Similarly, clicking the Feedback or Media icons gives alternative search options for that tag:

[Feedback offers to search Technorati, Media offers to search Flickr for the tag in question]

An alternate way to access the tags panel is to right click any tag on the page (which will be highlighted by the green icon):

[Right-click (configurable) the TAG icon to get a floating version of the Tags panel]

Making Contact
When displaying contact information, the extension will display the blue icon whenever it encounters any hCard info. Right click to get the floating panel for the hCard information:

[Default view for hCard is the Information icon. Shows multiple links if they are in the hCard]

The Application icon will allow export of the hCard info to Outlook or other address book application. The Related icon shows other search options for that person:

[Related search options are LinkedIn, Google or Wikipedia]

Getting Friendly
My blogroll is marked up with XFN and when you mouse over the relevant link, WebCards will let you see the orange icon. Right click and it shows relationship in the XFN panel:

[The XFN panel shows the page owner's relationship to the linked person]

Make A Date
The last major category of Microformat that I’ve been exploring with WebCards is of course, hCalendar. These are indicated by the little red icon:

[Upcoming occasions displayed in the Calendar panel]

As with the other format panels, the Application icon lets you export the event to Outlook or Google Calendar applications; Related will search Upcoming or Google for the event:

[Add an event to my GoogleCalendar with the Applications i
con]

Summing Up
So far, I’ve seen several iterations of this extension, and Andy has always welcomed feedback on the app. I like it a lot better than Tails for Firefox, it just seems to do more and looks much nicer - don’t accuse me of being shallow, it just adds up to a nicer user experience! Anyway, I’d recommend it to anyone who is looking to get the most out of Microformats in the wild.

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.