Thursday, September 16, 2010

Why Google Analytics and Google Adwords have different conversion rates

So here I am in the midst of a new job learning a new industry with all of its jargon and definitions. Amongst the very important things I have been learning about are goals and conversions. A goal is something you want a visitor to your site to do, be it fill in a form, or make a purchase. A conversion occurs when the visitor completes that goal. Simple, right?

So how come both Google Analytics, which monitors traffic flow to and through your site, and Google Adwords, which directs traffic into your site, both have the concept of conversions and how do they relate to one another? More importantly, how come they're sometimes different?

Well, as the Javascript for Google Analytics is on every page of your website it knows exactly where a visitor is and has been. That much makes sense. How does Adwords know? You help it by setting up conversion tracking. This places a cookie on the user's machine when they click on an Adword. When they finally get to a conversion page the cookie is picked up and Adwords registers the conversion as attributable to the source ad. What Adwords doesn't know, however, is which goal has been converted; that information comes from Analytics. Meanwhile, Google Analytics, also registers that the conversion has been made by virtue of the fact that traffic from a particular source has reached a conversion page.

So, you'd think that the conversion rates would be the same, wouldn't you? Well, more than likely, they aren't. Once you've clicked on an Adword and obtained the cookie, it sits on your machine for 30 days. This allows you to go away and think about whether you really want to make the purchase. In an Adwords report, your click has been registered but it hasn't led to a conversion. A few days later you return to complete the transaction and a conversion is registered, with the start date of the cookie as the date of the conversion. Viewing an Adwords report for the same time period will now show a different conversion rate. However, Analytics will always give you the same information for a given time period and won't count a conversion until it is completed.

For example, if I click on an Adword in August, but fail to complete the transaction until September, an Adwords report for August will count the conversion but an Analytics report won't. But the figures should ultimately end up the same right? Well, no, because come September my Analytics report has counted the conversion started in August, but Adwords won't count it for that time period because it already counted it in August.

Basically there is constant flux between these two figures and they are very rarely exactly the same.

Thursday, July 22, 2010

Blogging is about communicating, sharing and marketing

I have just finished reading quite an interesting blog post, all about asking the right questions. It talks about using focused, situation-specific questions to get to the crux of the matter, rather than the usual big picture questions we tend to ask. I won't go into any more detail on that. You can read the post yourself if you're interested.

What I wanted to talk about was a comment posted in response to the article. The author relates the point he's trying to make back to a web project that he is working on, providing a link to the website in question. The project was funded by Xerox, for whom the author and developer works. There is a passing comment (but no link) to Xerox in the post. At the very end of the article, as a sidenote, he references a book he is writing, a chapter of which is based upon the same concept. He provides a link allowing readers to be notified when the book is published. This all seems fairly reasonable to me but one of the commenters took exception to this, saying:

You completely lost my respect when you mentioned your website.

I’ve noticed a trend in the last 6 months to a year where smart people write really smart articles, which I really enjoy reading, then make a really dumb mistake by tying what they’ve been talking about into their website / business / startup. It just seems really f**king lazy to me. You basically invalidate everything you’ve said previously by throwing in an advertisement for your website toward the end of your article. You (and I mean blog writers in general, I don’t mean to attack you directly) lull the reader into a sense of trust with your excellently written article (and yours is a very excellently written article, make no mistake) then drop an advertisement casually into the story, hoping readers will go to your website based solely on the quality of your writing only it now has had the opposite effect.

As I was reading, I had decided that I was going to bookmark this story and share it with my good friend (yes, I only have one. So what?) when I was finished with it, except now I won’t be bookmarking it and I won’t be sharing it with anyone. I certainly won’t be visiting your website, that’s for sure. Instead, I write this comment, in the vain hope that you will make a blog post about it and tell other bloggers so that you (again, all blog writers) will stop advertising your damn websites in your blogs.

Again, thank you for the article. It was enlightening and interesting, and I wish I could’ve enjoyed it more.

Frankly, I'm not surprised this fella has only one good friend. What a rude sod. I'm not sure what sort of a world he lives in but I thought this was the point of blogging. Experts freely share information that they find interesting/useful etc. but in turn they are advertising either themselves or their business. If I'm going to read a blog post I want to know a little bit about the author. "What makes him such an expert? What does he do? Oh! He wrote Trailmeme. Well, what's that then? Let's click on this link. Well, would you look at that. That is cool." Or, "hey! I liked that. What else has he written? Oh he's writing a whole book. That could be worth a read."

Some of the best things I've found on the internet have been stumbled across in this way. The blogging community survives by sharing, commenting, linking and it's a bit naive to think that everyone else is like me, typing away for the sake of it without much thought or care as to who is reading it or why I'm doing it. (And frankly, I only started doing this in order to advertise my professional services and expertise sometime in the future, should it become necessary.) Providing links between blogs and sites, talking about our work and advertising products we love is what blogging is all about.

What I do take exception to, however, is underhand or blatent advertising. Comments suggesting I sign up for online dating, which clearly has nothing to do with the article being commented on. Commercial links within posts just for the sake of it. Or false reviews of sites, products, services. That sort of thing gives blogging and the world of Web 2.0 a bad name and makes people mistrust what they read online.

Incidentally, I (not the commenter) asterisked out the f-word, which was a totally unnecessary addition. I think Mike, who provided no link back to his own website, has serious anger issues, expects way too much of the world and probably misses out on a lot of good things because of his negative attitude. Poor Mike.

Wednesday, May 12, 2010

Building optimum font stacks

Those of us with a development background, as opposed to design, often don't give typography much thought. We're most likely to pick a common font stack, say "Arial, Helvetica, sans-serif" and use it to death.

But typography is really important. It's only when you go to a website with clearly thought out fonts that aren't overused all over the web that you realise just how much difference they can make.

The problem for developers is that it's difficult to devise your own font stack without really understanding the attributes of the different fonts. Some are wider than others (x-width), others taller (x-height), some heavier, others look different on Windows and Mac. If you don't match them up well it can throw your design off balance.

This post on A Way Back talks about optimum font stacks. It includes a useful table that looks at the percentage of Macs and PCs with certain fonts loaded. It then takes a handful of websites as examples and makes suggestions as to the optimum font stacks for them. Less common fonts are moved up the stack so they're more likely to be used. Mac fonts are matched with similar Windows fonts. Fonts that are wider than the desired font are removed or replaced. And so on.

This is a useful resource for web developers, giving you much of the information you may require to design your own font stacks. Better than that, it gives some marvellous suggestions of font stacks that you can re-use on your own site.

Tuesday, May 4, 2010

Notepad++ Tips and Tricks

As regular readers will know, I'm a great fan of free software. I use Notepad++ for most of my code editing. Here are a few useful tips and tricks I've picked up along the way. Much of this stuff is standard for a text editor but not necessarily that easy to find in Notepad++.

  1. View in browser: You can easily view your open HTML file in a browser by clicking on Run. Choose from IE, Firefox, Chrome and Safari. Or select Run... and browse to another executable. You can also update the shortcuts.xml file to add another browser, or change the location of a browser executable.
  2. Basic version control: By turning on Verbose backup (Settings > Backup/Auto-Completion) you can set up Notepad++ to implement very basic revision control. Every time you save a file, Notepad++ will save a "clean" version in a backup sub-folder called nppBackup. That is, the version that you last saved, with none of your recent changes. The backup filename is appended with a date and timestamp so you end up with a new backup for every change. It probably goes without saying that it's a good idea to periodically delete the ones you don't want. Even if you're using some kind of version control this can be useful between check-ins.
  3. Auto-completion: Whilst you're in the Backup/Auto-Completion screen set it to auto-complete functions.
  4. Create templates: Notepad++ doesn't have the concepts of templates but I decided to set up my own. I created a templates folder and saved a few varieties of basic HTML files, including DOCTYPE, external CSS and JS calls, and an empty body tag. I did this for XHTML Strict and HTML4 Strict, with variations for JQuery and CSS 960grid. I open the relevant template and then Save As... to create my new file.
  5. Close tags: You can use TextFX to automatically close any XHTML tags. Go to TextFX > TextFX > Settings > Autoclose XHTML/XML . There are a whole host of other useful TextFX features, such as converting case and quotes, escaping and unescaping characters, submitting to W3 validators, running HTMLTidy and a whole host of other features I haven't yet found a need for.
  6. Create new tab group: Similar to Visual Studio's New Vertical Tab Group, you can view documents (or tabbed groups of documents) side-by-side using View > Move/Clone Current Document > Move to Other View. F8 then toggles between these views. Choosing to Clone effectively implements split screen and any changes made to one view of the document will be replicated in the other.
  7. Use bookmarks to navigate large documents: When reading through large code files I often spend much of my time scrolling between two or more parts of the file. Clicking between the line number and the line adds a bookmark. I can then easily navigate from one bookmark to the next using F2 (down) and Shift+F2 (up).

Sunday, April 25, 2010

SEO: Infographic of important concepts

Infographic. Now there's a cool word. Information in a graphic. It really is a picture telling a story. This is a great infographic from Datadial all about search engine optimisation. It seems like it would be a useful at-a-glance reference for anyone trying to promote a website and improve its search ranking.



For a more detailed description of what is being depicted you can check out HostWisely's Infographic Important Aspects of SEO. But I think the infographic pretty much says it all.

Sunday, April 18, 2010

lindseybuckle.com redesign

Regular visitors may have noticed some recent changes to this blog.

Firstly, my byline has evolved over the last few weeks and, having shed a few words is now looking a lot trimmer and to the point.

Secondly, the name has changed. The Journey of the Buckle was one of those off-the-cuff, "let's just get this thing going without much real thought to the name" sort of things. It resulted in some really strange Adwords being placed upon the page. The title of the blog is placed into the "title" tag of the site and Google obviously places a lot of importance upon these words. So I was getting ads for saddleries, belts, leather, you name it, all thanks to the word "Buckle" in the title. I figured the same thing would happen with search engine rankings once I get into the whole SEO thing. Changing the title to lindseybuckle.com obviously made it clear to Google that this is a name, not the subject of the site.

Finally, I have been redesigning the site using Inkscape. This is a whole new skill set for me. I don't usually give a lot of thought to design, other than to pick out what is wrong with someone else's design. Designing something from scratch is a scary process for me. Being a programmer, I tend to muck around with HTML and CSS straight up rather than lay out the page in a graphical editor first. So, as well as focusing on the aesthetics, I have been learning how to use Inkscape, an open source free alternative to Adobe Illustrator.

The current design is another element that was just knocked out quickly for the purposes of getting the site up and running. I created the header graphic myself in GIMP, using one of my own photographs, but it isn't something I spent much time over. The template is a modified standard Blogger template.

The process of designing the site has been a good one for teaching me how to use the software. I have learned some useful keyboard shortcuts, and general vector principles. I used the Inkscape templates delivered as part of the 960-grid package. I kept the designs fairly simple and typically blogger-esque but got a bit bolder with colours as the process developed. Hopefully I will soon have this built and implemented, but until then, here are some of the designs I came up with.















Tuesday, April 13, 2010

Convert IE6 users to the latest IE browser with IE6 Update

This is brilliant.

IE6 Update provides any IE6 visitors to your site with an information bar, similar to that which they're used to seeing for sites with ActiveX controls. Instead of downloading an ActiveX plugin it sends the user to a website where they can download the latest version of IE.

Simply follow this link, copy and paste the code into your website and away you go. So simple, yet ingenious.

[Credit where credit is due: thanks to Jez Watts for sending me the link.]

Sunday, April 11, 2010

11 steps to writing a resume

It stands to reason that someone who loves writing and dreams of making a career of it would be able to sit down and knock out a resume in a few short hours, right?
Wrong! No matter who you are, or how kick-ass you believe yourself to be, writing about your achievements is incredibly hard. Self-doubt creeps in: "I think I was completely awesome in that situation but what if that is normal for other people?" And even when it doesn't it's often difficult to put into words exactly what it was that you did that was so damn good.
And then there's the issue of brevity. How much does an employer actually want to read? How can I make the good stuff stand out? What if I leave out some important detail? What information should I put in my CV and what can I leave for my cover letter?
And what about visual layout and design. Is plain and simple good enough or do I need to jazz it up somehow? My husband works in mapping and he just produced what I consider to be a radical CV. It was more like an essay illustrated with brightly coloured pictures of various maps he'd produced. I'm more of a conformist and just want to get the job done.
Some even question whether a resume is necessary in the first place. A compelling and insightful blog is enough, they say. (Well, that's me sorted then.) Others disagree. A blog can only enhance a resume but can't replace it. So long as the resume is well written, that is.
So here I am rewriting my CV for the first time in over six years. Yes, that's how long I've been with my employer doing what I do. Even I'm surprised. It's the longest I've worked anywhere. Apart from school. Another 4 ½ years and I'm eligible for long service leave.
I've kept my resume up to date during that time by going to the top section once a year and adding my latest projects. There is now a lot of useless information on there. Projects that I worked on twelve years ago on outdated technologies doing things that bear no relevance to what I want to do next. Sure, six years ago they seemed important. They were valuable experiences that contributed to my skill level. But I've done enough in the last six years to be able to reduce these older achievements to one line summaries.
So, here is my guide to writing a great resume, based upon the research I am currently doing and the feedback that I'm getting from reviewers and industry contacts.
  1. Tailor your CV for the work you want to do.
    This is an obvious one but it's so easy to leave irrelevant stuff in there. Or to fail to see the relevance. For example, I don't feel it particularly necessary to say much about my experience programming a bank security system in C on a Vax VMS platform back in 1997. But it probably is important that I mention the change management, release procedure and screen design practices that were used there and that I learnt how they contribute to a good development process.
  2. Don't delete anything.
    Yes, I am totally contradicting the last point but you don't have to delete the information altogether in order to remove it from your resume. It's a good idea to always have a full, detailed copy of your resume. A master resume, if you wish. Then, you can tailor the CV that you submit for a particular industry, employer or project. If they want to see more detailed information on past projects that you have skimmed over then you can quickly and easily whip out your full copy.
  3. Have multiple versions.
    Tying in with the previous two points, keep multiple versions of your resume. For example, I might use my master copy to write a CV tailored to web development, focusing on all of the technical aspects of my career. I might also have a version of my resume which highlights my writing and communication skills and how I have applied these throughout my career. Or, I might have one which looks at aspects of both skill sets. I can then submit whichever one is most relevant to the position I am applying for. This is not deception or dishonesty. It's just filtering out the irrelevant stuff on behalf of that poor person who has to sift through hundreds of resumes.
  4. Don't procrastinate. Just do it.
    Again, an obvious one but advice I find very difficult to follow. I seem to be spending more time researching resume advice online, writing this post, or wondering how I can improve my LinkedIn profile than I am actually editing my CV.
  5. Say what you mean.
    Use plain language. Don't dumb down technical jargon if you are applying for a position with an employer who will understand that jargon. Likewise, don't use long sparsely-used words where short common ones will do. Don't use two words where one will suffice. My husband has very generously been providing useful comment on my resume but there was one point he made that I'm not sure I would agree with. I said that I "wrote the User Guide for the Blackboard Community System, and distributed it to IT Services and Administration areas throughout the organisation." He suggested that I "Authored, Published and Distributed the ‘User Guide’...etc." I don't think Authored, Published and Distributed warrant capitals (they're not names) and I'm not entirely sure why I would benefit by saying all of that over "I wrote". It feels like I'm just using big words out of context to make me sound clever.
  6. Don't be bland. Be bold. or Ditch the buzzwords and be unique
    You won't stand out if you write the same mindless babble that everyone else writes. So, you're "highly motivated"? Would you tell a potential employer if you weren't? Pick an example that demonstrates your motivation and use that instead. Tell stories and make it personal.
  7. Focus on achievements.
    Don't talk about responsibilities. Talk about achievements. Everyone has responsibilities. That's the point of a job. They're outlined in your position description for all to see. What matters is what you do to fulfil your responsibilities. If you're going to mention skills, give examples of when you used them and what you achieved with them. Enhance your achievements with results: what were the measurable benefits for your organisation? Consider emphasising results by stating them before explaining what actions you took to achieve them.
  8. Be brief and add summaries
    According to The Careerhub Guide to Resume Writing, the average manager spends less than 30 seconds reviewing a resume. They will spend most of this time looking at the top third of the first page of your document. As such, it's a good idea to add a couple of summaries to draw attention to your core areas of expertise. Add a career profile, and a skills/experience summary. Create a brand using keywords in a byline (e.g. web developer, client-focused, standards-driven, usability, accessibility); or a list of high-profile employers, or even different kinds of working environments (e.g. small start-up, technology enterprise, large multinational, public sector, higher education, software house, financial institution). Add testimonials if you have them (trawl through old emails and performance reviews).
  9. Send it early and send it often
    Your resume is useless if you don't send it to a potential employer. This is courtesy of my husband. I suspect it's his way of saying "stop writing your blog, Lindsey and send off your resume."
  10. Seek feedback.
    Another of my husband's. Once you have sent your resume off, seek feedback. If the person you have sent it to isn't interested then find out why. Could you have written or styled your resume differently in order to get the position?
  11. Add a photograph
    It may be true that not everyone would benefit from the addition of a photograph. But if you're reasonably young, or look it (or use an old photograph) and fairly pleasant looking then this can only be a benefit. It adds a human element to a boring old pile of words. And it's harder to say "no" to a face than a disembodied name.
Resources
Careerhub Guide to Resume Writing (PDF)
Penelope Trunk's Brazen Careerist: Resumes
My husband

Wednesday, March 17, 2010

The importance of client interaction

Every analyst knows that communication within a project team is paramount to successful delivery of a product or service. Understanding the client's needs, their business processes and their paradigm are all essential aspects of a project, that can generally only be garnered through thorough communication.

In this age of internet telecommunications, much of our business communication is done over geographically disperse locations via email and telephone. For the more technically savvy there are collaboration and web conferencing tools. But nothing beats a face to face meeting, with all participants present in the same room. And when it comes to reassuring a client that you can and will meet their requirements and deliver a high quality piece of work it is essential.

Face to face meetings bring a real dimension to a team of people who may otherwise be working in a virtual or online environment. As soon as a face can be put to a name and a voice, a relationship is developed. Whereas conference calls specifically focus on the task in hand, a physical meeting allows time for a little small talk, which is, of course, where you get to know the real person, as opposed to the role of that person within a team. Clients are more likely to trust a vendor; consultants are more likely to feel a sense of responsibility towards meeting the client's needs.

In a project I am currently working on a lack of decent communication has resulted in the client's increasing concern and failing confidence in the vendor's ability to deliver a high quality product on time. I can imagine that the vendor has similar concerns as time and again they realise that their understanding of what they are to deliver is quite different to the client's expectations.

Most of the communication has been done via conference call and there have been associated difficulties. Each party uses different terminology, works from different paradigms. Participants even have different accents and ways of speaking that can lead to long pauses and repetition as those on the end of the line try to figure out what was said. A discovery session was conducted at the start of the project but none of the vendor's current team members were participants, no notes were made and no documentation was delivered as a result. A quick email from the vendor confirming what he thought were the issues discussed, the outcomes of the meeting and what the next steps were, would have done wonders for the client's confidence and comfort.

Last year a Forbes study found that 87% of executives prefer face to face meetings citing the following benefits:

  • building stronger, more meaningful relationships;
  • the ability to "read" another person;
  • greater social interaction.
In today's busy world, with tight time scales and even tighter budgets, there is definitely a place for conferencing and collaboration technologies. But these must go hand in hand with the more traditional methods of communication. Where a face to face meeting isn't possible, video conferencing is a great alternative. In the case of my current project, it was less the lack of face to face meetings that was an issue than the lack of good, frequent and thorough communication.

Thankfully, after a few frustrating conference calls a face-to-face meeting was arranged and since then communication has improved considerably. Meetings are now being followed up with notes, although there seem to be two sets of notes: one from the client and one from the vendor, rather than one set of signed off minutes. A sense of trust and working together as a team is in place and most importantly, each party understands where the other is coming from. If only we'd had a week together, rather than a day...

Resources

Freelance Switch: 10 reasons why your last collaboration did not work
Forbes: Executives Prefer Face-to-Face Meetings Over Virtual Contact
Forbes: The Case for Face-to-Face
Why Face-to-Face Business Meetings Matter

Tuesday, March 16, 2010

Why you should use a change log in your documentation

There has been a functional specification document going to and fro between us, the clients, and them, the vendor/consultants, for a few weeks now. Version 6 was released this morning. Including the files that have been submitted with annotations by our marketing team that makes 10 versions to review altogether.

The annotated responses are fairly easy to review as the annotations (marked comments) stand out from the document text. So, I just flick forward to a comment, read it and move on to the next one.

However, the official versions which are then submitted in response by the consultants, are not annotated and do not include a change log.

We're talking about a 53 page document. I don't have time to read the same 53 pages six times.

When I produce such documentation I always include a Document or Revision History table at the start. It looks a bit like this:


Version
Date
Author(s)
Notes
0
12/03/2010
Lindsey Buckle
Initial Version
1
15/03/2010
Lindsey Buckle 
Draft following technical discussion. 
Updated table p8: added 'File' column


This way, whoever is reviewing the document knows that the only thing that has changed is on page 8 and they're directed to it. They can flick forward to page 8, check the table with its new column and decide whether to approve the document. Much quicker than scanning every page of a 53 page document trying to figure out what has and hasn't changed.

What do you do? Do you include a change log? If so, what details do you add? Let me know in the comments.

Friday, March 12, 2010

CSS: How to fix IE6 bugs

Praj sent me this link to an excellent tutorial, which I'm hoping will relieve some of my IE6 headaches.

I am so busy at work that I'm yet to find out. But if not now, maybe in future, when another client insists that I don't discriminate against curazy IE6 users.

[I notice he hasn't blogged this. Perhaps because he isn't insane enough to try to mess with IE6.]

Tuesday, March 9, 2010

Design: Colour scheme definitions

I found the following definitions of different colour schemes, adapted from this tutorial, really useful and wanted to note it here for future use.

Monochromatic - uses multiple shades of one colour. Shades of gray are considered achromatic as they don't actually contain colour. It's pretty much the same thing though.

Analogous - uses colours adjacent to one another on the colour wheel. Apparently this can be tricky: choosing colours further apart than 1/3 of the wheel can result in less appealing combinations.

Complementary - uses colours on opposite sides of the colour wheel. Something to watch for here is simultaneous contrast, where the colours enhance one another to the extent that they become difficult to look at and possibly even illegible.

Split Complementary - uses two colours adjacent to the complimentary colour of your base colour. Or something.

Triadic  - uses three colours 1/3 of the colour wheel apart from one another.

Tetradic - uses four colours made up of two complimentary pairs.

To see some of these schemes in action, check out the Color Scheme Designer.

Design: Colour profiles in GIMP

I am not a designer. Although I did do pretty well in GCSE Design and Communications; an A if I remember correctly, because I was a right girly swot, and this was before the days of A++ or A* or whatever nonsense you can get now.

I have decided to teach myself a few key techniques to extend my web development skill set. This means going right back to basics. I'm not made of money so I'm working with GIMP.

This week I learnt about colour profiles. A colour profile is a set of data that characterizes a colour input or output device. Different devices and browsers have different colour profiles, which basically means they display colours in different ways. A profile is a look-up table which maps the properties of a colour space to a device-independent working space.

Therefore, you need to use colour management policies in your editing software to ensure that what you see whilst editing an image is how it will look when rendered. Colour management policies add a description of the colour characteristic to the image, i.e. they add a colour profile.

Most devices (cameras and scanners) will embed a colour profile on creation of the image. When opening such images, GIMP will offer to convert the file to the RGB working space (sRGB), which is recommended and is fine for web-based images. However, it is possible to add other ICC profiles to your image in GIMP, if required.

For the best results you can add a colour profile for your monitor. However, this is way beyond my beginner capabilities, and probably beyond my needs for now. You can also add a colour profile for your printer in order to view on screen how your image may look when printed.

See this tutorial for how to set up colour management in Photoshop.

Tuesday, March 2, 2010

Why we should stop developing for IE6

This is not the first time I have said this but I really truly hope it's the last: developing for IE6 sucks.

Since Google announced its decision in January to stop supporting IE6 (as of yesterday), there has been much online discussion as to whether or not sites should continue to be developed for IE6. In developer communities this has been a hot topic for some time now.

Web developers hate IE6. Aside from the much-publicised security issues, IE6 is notoriously non-compliant when it comes to W3 web standards and has shocking CSS support. Developers spend a significant proportion of their time getting a site to work in IE6. Just to test the current website redesign entailed installing VMWare Player and running an old, tediously slow virtual machine. And woe betide the developer who starts off with IE6 and then tests in other browsers. In short it's a complete pain in the short and curlies.

So what's the big deal? Why not just stop developing for IE6? The problem lies in the fact that a significant proportion of website visitors still use it. Statistics range from 10% to 20% of the global browser market share, although, as the graph below (from StatCounter) shows, this is falling. These figures are not evenly dispersed. Only 6% of Australian web users browse with IE6, whereas 25% of Asian and African users do. In these regions it is the number one browser, presumably due to the higher concentration of developing nations and subsequent lack of infrastructure.



Of course, what is really important is that you understand the statistics for your target audience. My organisation's stats are similar to those above from StatCounter and we have very little traffic from Asia and Africa. In discussions with the Web Coordinator (who is also Project Manager for our web redesign) I have tried to persuade him to forget about IE6. My argument is that our target audience is largely young (generation Y school-leavers) and tech-savvy. As such, they are more likely to adopt modern browsers. Only 5% of our traffic comes from IE6 browsers: not a large proportion and one that will only decline.


However, he has made the call to at least attempt to support IE6, arguing that other universities still support it. This seems like a lame argument until you consider that a potential student using IE6 might end up at another university because they couldn't find the information they needed on our site.

I had a ponder about who on earth these people still using this outdated browser could possibly be. Due to Australia's vast size there are a few remote properties and townships that don't have good broadband connectivity. Downloading the later versions of IE would not be an option for this demographic (although they could ask Microsoft to send them a free CD if they thought of it and had the patience to find and load the web page).

Additionally, there are still workplaces which continue to use IE6 due to the reliance of internal applications. Not updating is often cheaper and easier than rewriting those old systems. And then there are those people, perhaps the older generation and those infrequent surfers, who simply don't know or care that they should update. However, I do wonder how many people in this category intentionally visit our site.

We try to develop a site that is accessible to all, including those with disabilities. We currently have no statistics on what percentage of our visitors are in this category. As such it seems fair that we shouldn't discriminate against IE6 users. (Although, it could be argued that they have a choice as to which browser to use.)

My personal feeling is that the difficulties surrounding the development of a website for IE6 far outweigh any perceived benefits. It is time-consuming, does not comply with web standards, is old and outdated, and its user-base is low and falling. I think developers should ensure that users of IE6 (who, it is worth noting, probably don't know how to turn off CSS in their browser) can get to all the information that any other user can access without a major visual assault on their eyes. That is, that information should be readable, accessible and navigable. Develop for IE7, IE8, and the latest versions of Firefox, Safari and Chrome and then create a separate stylesheet for IE6, stripping all but the most necessary styles. If you can get your valid, standards-compliant website to look cool and groovy in IE6 then fantastic. But if it doesn't, don't redesign your website. It's simply not worth it.

My current challenge is to get our site looking worthwhile (and as close to the original design as possible as per my colleague's request) without changing the HTML, which has already been sent off to the CMS consultants. I think ripping out my own hair strand-by-strand would be easier, quicker and less painful. I am considering the addition of a disclaimer stating that the site is optimised for IE7 and above. Although I have to do some work persuading the project manager to let me yet.

Resources
Google drops IE6:
http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html
http://mashable.com/2010/01/29/google-ie6/

Discussions and articles on supporting IE6:
http://www.webmasterworld.com/html/3935529.htm
http://robertnyman.com/2009/02/09/stop-developing-for-internet-explorer-6/

IE6 security issues:
http://en.wikipedia.org/wiki/Internet_Explorer_6#Security_issues

Web statistics:
http://www.w3counter.com/globalstats.php
http://mashable.com/2010/02/01/browser-stats-chrome/
http://gs.statcounter.com/
http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx#ordercd

CSS: > notation doesn't work in IE6

I can't believe I'm actually writing CSS tips for IE6. (More on this in a subsequent post). I wonder if anyone will ever actually want to read this? And I hope that I won't ever have to refer to this again. But here I am.

So, against my better judgement I am prettifying some HTML for IE6 and I have just discovered that it doesn't like the following notation:

#name > ul

To be fair to IE6, I didn't know what this did until I few days ago. For anyone reading this who doesn't know, it means that you apply the following attributes to a unordered list sitting directly within an element with an id of "name". That means that the ul in question can't be inside any other element. To apply attributes to any and all uls within name use the following notation:

#name ul

I spent days trying to fix up some tabbed menus in IE6 and all I had to do was delete the > selector.

For more on CSS selectors and what they do see selectoracle, an awesome website that takes CSS notation as input and outputs the meaning (along with any potential problems). I'll be adding this to my list of Very Useful Tools.


UPDATE: I have found a website which lists CSS selectors and the browsers that support them. I feel quite sick at the thought of the task ahead after seeing the long list of red "NO"s under IE6.

Sunday, February 14, 2010

How to fix a sticky caps lock

Something has been bothering me lately. Every now and then my caps lock sticks on. No matter how many times I hit it, it stays on. I then generally press buttons quite randomly until somehow, eventually, it switches off again. Last time it happened I tried desperately to remember the combination of buttons that fixed it but either missed it entirely or subsequently forgot.

Today, however, I am proud to announce that should you ever find yourself in a similarly sticky situation you should try the following combination to fix it:

Alt + Shift

Of course, having no idea how on earth the caps lock sticks in the first place, I have no way of testing this. Any ideas, anyone?

Friday, February 12, 2010

CSS: Negative vertical margins can be unpredictable

Here's the scenario:

We have a header image that goes across the page. It has our logo on it, plus some nice curvy lines at the top and the bottom.

When we print the page, however, we don't want the bottom line to appear so there's a second image that should print.

I placed the second image into the HTML with an alt tag of the organisation name. The first image is a background image. In the CSS for the page (screen) I could either use display: none or negative margins to hide the second image.

I figured that non-visual users would need to know it is there. (However, I will review the code to see whether it is actually adding anything. I think we have our name in a hidden h1 tag so we can probably just use display: none.) display: none hides elements from many screen readers as well as browsers.

The commonly used alternative is a negative margin. As the image I was hiding went across the top of the page I thought margin-top: -9999px; should do it. It worked in IE but in Firefox and Chrome the bottom of the image peeped down over the top of the background image. I tried ex instead of pixels but the result was pretty much the same.

In the end I used margin-left: -9999em (em measures width; ex measures height) which worked in all browsers.

Another alternative, as recommended by 456 Berea Street is to use

position: absolute; 
left: -9999px; 

I'm not sure whether this is better than my solution. I suppose it's probably safer as it uses absolute positioning. But as the measurements (9999ems) are so massive I can't see how there is any danger of the image somehow ending up on screen if other elements move around. As it works, and is one line of code smaller, I think I'll stick with margin-left: -9999em  for now.

CSS: Declaring font-size for print

I love the fact that I can still learn something new everyday. It's often the smallest piece of information that makes me think "wow, I never knew that".

As a web developer I shudder when I receive CSS from a designer and everything is specified in pixels and points. The only thing that makes my eyes cross more is using positioning instead of floats, especially when that positioning is absolute.

However, I have just read that apparently in a print stylesheet font size is better defined in points. It makes sense when you think about it. Ems are great on screen because they facilitate text resizing. But as soon as you print, you are moving out of the screen world and back into the print world. Therefore, all of the original rules of design come back into play.

Resources

You may find the following resources useful for creating print CSS.

BuilderAU: Tips for Creating CSS Styles for Print by Michael Meadhra
A List Apart: Going to Print by Eric Meyer
Max Design: Building Full CSS Layouts by Russ Weakly

Thursday, February 11, 2010

CSS: Using font shorthand

Using CSS shorthand simplifies your code, produces smaller, more efficient documents and can save time. 

I often use shorthand for margin, background, border and padding elements. I tend not to use it for font because it can be a bit tricky and I'm generally only changing one or two attributes at a time.

Today I was reviewing someone else's HTML/CSS and I noticed that the main body of text didn't look quite right in Chrome and Firefox. Instead of Verdana, which displayed correctly in IE, it seemed to be rendering as a generic serif-based font.

After a bit of investigating and head-scratching it transpired that this line was the culprit:

font: { 0.8em lighter; }

The problem is the placement of the word "lighter", in this case used to set the font-weight.

The following attributes can be used to style fonts, using the font shorthand:


The first three of these are optional and can be placed in any order. Line-height is also optional and is appended to font-size with a separating '/'.

Font-size and font-family are not optional. Actually, I thought that font-size was optional but when I removed it the font declaration disappeared from my debugger.

So, in the example above, "lighter" is being taken as the font-family. As this is not a recognised family, the text default was being used.

The correct version of the above declaration is

font: { lighter 0.8em Verdana, Geneva sans-serif; }

or whichever font stack you'd prefer to use.

In the event, it transpired that this declaration was not required. A font-weight of normal achieved the same as lighter in this case. Removing font-weight from the declaration forces the default, which is normal, leaving:


font: { 0.8em Verdana, Geneva sans-serif; }


Additionally, font-family was already being set in the body style and wasn't being redefined anywhere. Then there was a global p declaration, which was only setting color. I added the font-size attribute to this element and it all worked in every browser. 

Of course, the actual solution will depend upon the individual CSS and inheritance but the basic principle is this: 

if using font shorthand, always include font-size and font-family respectively.

If you don't wish to define either of these elements then style your attributes individually rather than using shorthand.

Wednesday, February 10, 2010

I don't Twitter

I have a confession to make.

I don't Twitter. There I said it.

I'm not even sure if Twitter in this context (i.e. as a verb) should have a capital T but my iPhone spell check keeps changing it and I can't be bothered to argue.

I know you're probably aghast at that. I mean I practically live in the blogosphere. Have for years. (Apart from last year when I took a year off everything that wasn't baby-related. Apart from one of my own blogs. Which was baby-related.)

I'm a self-confessed Web 2.0 fan. Have been since it started. I just love the concept of social networking and the way the Internet brings people together who would otherwise never meet.

I use LinkedIn for work contacts and Facebook for social contacts. My family and many of my friends live overseas and I keep in touch with lots of them through Facebook. I think I've had more contact with my cousins in the past 18 months than I did for the previous 10 years thanks to Facebook.

But I don't Twitter.

Oh I've thought about it. When it first came out I thought "that's stupid and pointless. Why do I need that?" And it probably was stupid and pointless back then. Then I kept seeing references to it scattered about the Internet and I thought "two social networks is enough". I'd avoided mySpace. (I'm GenX. Tail end. The Y tail.) So surely I could avoid Twitter too.

Then I started seeing it mentioned on Facebook and wondered if maybe the two could complement one another. I asked my Facebook friends what they thought. Answers were mixed and I concluded I didn't need to Twitter. Or tweet.

So I left it again for a while. But then I started thinking about promoting this blog and whether to get it up there on Facebook and LinkedIn. And again Twitter entered my consciousness. And today I read a post from Penelope Trunk titled "Twitter can save your life".

Usually I would provide a link but I can't seem to find the original post. It's appearing in my Google Reader but the link back to her site doesn't work and I can't find it from her homepage. You'll just have to take my word for it. She talks about how Twitter isn't really all that stupid. She says that it helps you find like-minded people, gets you answers and information fast, and a few other things that sound a bit like she's scraping the barrel. (Perhaps she realised she was scraping the barrel and deleted the post from her site.)

Like-minded people and fast answers sound pretty good though. So I thought I might just check it out. Follow my favourite bloggers and give it a go for a while. Then I'll let you know whether it was worth it.

So I will. I'll Twitter. Soon.

Written with BlogPress Lite for iPhone.

Monday, February 8, 2010

How the blog community can help you become an expert

One of my current favourite blogs is Penelope Trump's Brazen Careerist. I discovered this site just a few days ago and I'm having great fun trawling through her archives for useful information. In fact it was Penelope's Guide to Blogging that inspired me to start this blog.

One of her recent posts talks about the importance of investing time in becoming an expert. The popular belief is that it takes 10,000 hours of doing something before you are an expert. I'm no mathematician but that sounds like a lot. I'm not sure I've done 10,000 hours of anything other than breathe. Is there any hope for me?

Apparently so.

This AssociatedContent article debunks what it calls the 10,000 hour lie, stating that there is no magic number, you just have to work hard. What is most important, according to Penelope's post, is that you have a good teacher. And that you work hard at your chosen skill every single day. Gulp.

Well, here I am writing, again. I wrote 3 posts yesterday, and now this one today. It's still not quite up to the minimum of 4 that Angela Booth suggests are necessary for making money from your blog but, given that I have a teething 1 year-old pulling the keyboard tray in and out as I type, so far, so good.

One thing I have felt lacking over the last few years, however, is a mentor in the world of writing. I have even considered some post-graduate study, partly to fill that gap. (This is still a possibility for me for many reasons, which I will outline in a subsequent post.)

Thankfully, Penelope points out that the community and following surrounding your blog can become your teachers by providing immediate and helpful feedback. My hope for this blog is that some day I will have that community and get the help that I need.

Please feel free to comment on anything you have seen so far.

Sunday, February 7, 2010

Test your site's readability using Juicy Studio's Readability Test

Wow! If I'm going to get a job as a copywriter I need to work on simplifying my writing style, especially considering my ethos is pure and simple (which applies to code, copy and visual layout).

After my first post I performed the Juicy Studio Readability Test and discovered that the readability of my site is akin to UK's The Times and The Guardian newspapers. Perhaps I should pursue a career in journalism after all. Ultimately this means that it would take approximately 14 years of schooling to understand the content of this site. A further test indicates that 9 years of schooling would be required.

Additionally, on a 100 point scale of readability, where a high score indicates a highly readable document and authors are encouraged to aim for 60-70 points, my content scored 33.

Obviously these tests need to be taken in context and with a pinch of salt. They are mathematical formulas based upon such things as number of syllables per word and number of words per sentence. They favour short sentences with short words. They include non-content aspects of a site, such as headings and navigation. They don't take into consideration visual layout and formatting, semantic content or whether the written style is conversational, interesting or informative.

However, assuming that you have done all that you can to write an interesting and relevant document, which makes sense, this could be an extremely useful tool. I have learnt that I need to write shorter sentences and use shorter words.

Further advice given along with the test results are to keep the writing style clear and simple. Use language which is logical, unambiguous and direct. Avoid redundant words.

I hope I have managed to follow at least some of those guidelines.

Use JuicyStudio Colour Contrast Analyser to design visually accessible sites

I loved the old JuicyStudio colour contrast and brightness tools and now they've been replaced by the Luminosity Colour Contrast Ratio Analyser.

If you can look beyond the tongue-twisting name, you'll find the new tool is based upon Web Content Accessibility Guidelines (WCAG) 2.0's algorithm and will tell you what level of WCAG compliance the tested section of your site has reached.

I have just discovered that the contrast ratio for visited links on the background of this site passes Level AA for large text only (at least 18 point or 14 point bold). This is not good news as the text is small. The good news is that this is a really simple online tool to use, and now that I know the contrast isn't sufficient (as I suspected), I can do something about it.

Welcome to the Journey

I am about to take you on a journey.

I don't know how long it will take us to get there, or what we will see along the way, or even whether the final destination will turn out to be where I think it is going to be. But I can tell you one thing: it will be fun, informative and life-changing.

Although I have been blogging since 2005, this is the first time I am really putting it out there, casting my net beyond the calm waters of friends and family. The aim of this blog is to document my journey from a full-time employee, via a slight detour on maternity leave, to a part-time freelancer and mother.

There are many reasons for my decision to go on this journey, most notably that my current occupation no longer fits into the lifestyle that accompanies my new role as mother of a one year old. I am lucky to have discovered what my passions and interests are and be in a position whereby I can finally pursue them.

So what exactly will this blog be about?

According to Penelope Trump,

A blog is a great way to figure out what you want to do with yourself because writing regularly is a path to self-discovery.

That is exactly the point of this blog. It's a journey of self-discovery for me, and hopefully for my readers. As such, I can't say exactly what this blog will be about but I can tell you what my passions and interests are.

From a professional perspective I have over a decade's experience as a web developer and business systems analyst. I am passionate about producing simple, usable websites, with structure, presentation and content separated from one another, written in mark-up and code as pure as the driven snow. I am one of those geeky people who became incredibly excited a few years ago by the Web 2.0 evolution (although I still think it's a stupid name). I spend a lot of time reading blogs and I love writing, which I do both for work and, in my spare time for enjoyment. I have had a lot of experience working closely with marketing teams to improve usability, acessibility and search engine rankings of websites. I put all of these things together and realised I had a set of skills and passions perfect for web marketing: development, copy writing and search engine optimisation. I have never worked for myself before and I will probably make mistakes and learn some valuable lessons along the way.

That is the essence of what I think this blog will be about.

On a more personal level, I have enjoyed every moment of being a parent and love finding the humour in every day situations and then writing about it. I hope to get something published one day soon but until then I will keep up my blog about my little Miss Chief and no doubt blog about my efforts to get published on this site. (Please note, I haven't provided a link here for the sake of my daughter's privacy.) Away from the family my interests lie in the environment, climate change, evolution and atheism. I'm not sure to what extent these topics will be blogged about here. I suppose that depends upon whether I use this blog to showcase my talents as a writer.

I have added a blog roll to this blog, consisting of both technical/professional blogs and my more personal interests and no doubt there's a future post in highlighting some of my favourites. I intend to be much more active within the blogging community than I have been before, commenting on, and providing links to other blogs, and hopefully receiving my own trackbacks courtesy of other bloggers.

I have also added Google AdSense to this blog, which is something I've never done before so we'll see where that takes me. I intend to provide useful tagging on a limited number of relevant topics and I invite comments and feedback on all of my posts.

So now all I have to do is get the blog out there and noticed and commence my journey.