Die my darling!

Hot on the heels of my anti-Internet Explorer rants comes the news:

http://windowsteamblog.com/ie/b/ie/archive/2011/12/15/ie-to-start-automatic-upgrades-across-windows-xp-windows-vista-and-windows-7.aspx

It seems that Microsoft finally smells the coffee and has taken a cue from browsers such as Firefox and Google. And only a few several years late. I’m glad they have wised up.

Unfortunately, it seems these changes won’t be forced if the end user has automatic updates turned off, which is a real shame. Microsoft has the power to fix something once and for all, and it should just pull the trigger already. They should put their money where their mouth is and pull the band-aid off in one quick motion, expose the wound and let it heal.

So what does this mean? It will certainly make life easier for developers across the globe, but I wonder what the adjustment period will be, if one at all. Will some major system break in Sydney and trash productivity? Will it be Y2K all over again?

Hopefully, thankfully, not.

A real world usability example

I give you the penny. This video is totally worth the time; I will get back to the article in a second… er, a few minutes:
Disclaimer: I am not affiliated with this video in any way

The problem

Pennies cost 1.8 cents to make, yet are only ‘worth’ 1 cent. They have no buying power. People hate them. The system does not work. So how do we fix this?

A solution

Many say remove them from circulation, as other countries have done, which is a definite solution (good luck on that).  Let me offer a second one: stamp out the middle. In turn use the extra material for more coins, and viola! Fixed. Sure, the initial purchase of the machine will cost money, but would pay for itself in no time.

But what does it mean?
(Insert double rainbow reference here)

Most of us use coins everyday. Considering popular opinion that pennies are a nuisance means we, as ‘users of the penny’ are frustrated. Daily. We need to change the system. If we don’t eliminate them altogether, stamping out the center will allow people to not only easily identify pennies against the other coins in your pocket, but we won’t go into the red creating them. While we are at it, we could put holes in other coins to differentiate them as well. Ever have a dollar coin and quarter in your pocket at the same time?

Wait, am I still reading a blog about web usability?

Still with me? Now think of a website. If it, like the penny, is considered a nuisance, no one will use it. If it isn’t easily identified as having value, no one will use it. If it is frustrating, no one will use it. You need to identify site pitfalls and shortcomings and analyze how you can change what doesn’t work. This involves monitoring user habits and determining what users want. After this is identified, offer it! Focus groups and Google Analytics will help here. There are also low cost solutions that will film a first time user exploring your site, thinking out loud to offer an insight into user habits. Keep in mind, as with the penny example above, problems often have more than one solution. It is important to weigh the pros and cons of each to determine maximum effectiveness – Read ROI.

This harkens back to the simplest, and sadly, most forgotten rule:
If something isn’t working, change it.  (before your numbers dip!)

Did that explode? (part 2: wave goodbye)

On Focus.com, I discussed that burying IE 6 is not only a matter of technology, but also one of reputation:

http://www.focus.com/questions/do-you-use-internet-explorer-6-why/#comment38064

We have the power

I still maintain these opinions, and ultimately, we as an Internet community must move forward by eliminating support of old browsers such as IE 6 and 7. While supporting four versions of Internet Explorer can be a (albeit, rare) necessity, let’s face it: it’s a pain in the ass. If IE 6 and IE 7 are ever going to be put in the grave once in for all, it  is us as developers who have to do it. We have to stand up and say ‘fuck it’. We have the power.

Ultimately, this shouldn’t be a hard thing.  Any developer worth their weight should be well versed in the ways of IE. When I style my pages, I make sure to code my pages with a bit of wiggle room so they won’t break.

It’s getting gotten kinda hectic

At my last position, my first task was to clean up the site’s existing quagmire of CSS files. The first thing I did was hunt down all the IE conditionals and made those styles universal. This subsequently led to the deletion of IE specific files, leading to a faster site, less styles to maintain, and less files in the code base.

No more should we have the following:

<!--[if IE]>
...
<![endif]-->
<!--[if IE 6]>
...
<![endif]-->
<!--[if IE 7]>
...
<![endif]-->
<!--[if IE 8]>
...
<![endif]-->
<!--[if IE 9]>
...
<![endif]-->
<!--[if gte IE 8]>
...
<![endif]-->
<!--[if lt IE 9]>
...
<![endif]-->
<!--[if lte IE 7]>
...
<![endif]-->
<!--[if gt IE 6]>
...
<![endif]-->
<!--[if !IE]> -->
...
<!-- <![endif]-->

If I was interviewing a candidate who relied on  the above methods I would pass. This is an antiquated methodology that ultimately makes for more overhead to maintenance and load times, but more importantly speaks to a lack of skills. The developer can’t make it work the first time around, so they have to program the same layout three or more times.

The future

Even Microsoft is sick of the beast it created:

http://www.ie6countdown.com/

Let’s join them and wave goodbye to an old friend.

Do you still support IE 6 or 7?  How much longer do you think it will stick around?

Seven mistakes that are easy to avoid…

…as they are to fix:

1. Flash intros/lame ‘splash’ pages (along with long load times)

1990 called: it wants it’s internet back. Seriously, all a long intro does is eat bandwidth and prolong a user from accessing content. This applies to static splash pages as well: I don’t need to click on a huge graphic to ‘enter’ the site. While on the net today, if a user doesn’t have quick access to content, they will find another site that does. If you have an entire Flash site, have at least an HTML option with minimal functionality.

2. Music (along with talking ads)

Another bandwidth gobbler. I don’t even like the music you chose. And forget about me visiting your site while at work or another sensitive situation (after all, when do you think the peak surfing hours are?) Sound effects? Talking advertisements? Even worse.

3. A web within the web

Ever been to a corporate site (this is usually where the issue manifests) where it is obvious they just tacked on pages to existing pages with no solid plan of navigation? You click all over the site to find something, and when you think you found it, it returns a page totally unlike the existing site… or even worse, a 404. Even worse still: through some asinine implementation, the page (404?) you end up on was loaded via a server command which effectively disables the back button.

4. “Under Construction” pages

Another convention from the beginnings of the popular Internet. Do or do not; I will not check back “soon”.

5. Broken sites due to browser choice

While it can be a tall task at times, make your site function in IE, FF, Chrome, and Safari without gross discrepancies. At the very least, it should ‘fail gracefully’. If you are programming for the net, take an extra few minutes and check your site in these four browsers, and hopefully on a smartphone or two. If you don’t have access to multiple platforms, find it – or don’t code. It can be as easy as buying someone a latte in a coffee shop to pull up your site on their laptop. Also note different resolutions and how they affect your site.

6. Extremely outdated/erroneous information

This can be a tough one. With information flowing so fast on what makes the Internet the Internet, it can be hard to stay on top of things, let alone update every piece of content. A lot of this is the nature of the beast: most content is, by definition, an archive of sorts. Still, there are times when you come across blatant outdated or wrong information. Let’s say you reference the ‘new’ iphone 3 or the Sistine Chapel and the wonderful job Da Vinci did painting it.  Even if these errors are due to a momentary brain fart, it is going to cost you loyalty. If you can’t get an obvious fact right, what else are you wrong about?

7. AND THE WORST…

Ads that expand and take over the page on ROLLOVER. I’m sure you’ve seen these – often for a movie or the car of the day, disguised as a small banner/box ad until your mouse comes in contact with it – often accidentally – and WHOOSH! CHECK OUT THIS CAR! Note these ads usually are video based, adding more bandwidth consumption and even more distraction. If you collect revenue though ads, this will not help. After a user encounters a few of these, you won’t have to worry about revenue, but rather a new business – your site won’t be visited again.

A bonus tip:

Grammar. Spelling. Even I fail at this from time to time, everyone does. But at least make an effort. One or two errors is forgivable, three or more is just lazy.

So, are you guilty?

Fixed headers (and footers)

As a web developer I am conscious of not only what I deliver to the end user, but also in the method I do so. Personally, I have a strong aversion to anything in my browser window that I do not have control over. Although I understand the need, at times, to have static content on a website, this shouldn’t be at the cost of irritation to the end user or sacrifice valuable site real estate.

The two most popular sites (those of course being Facebook and Twitter) have fixed headers. So if they are doing it, it must be a great idea that works well for all sites, right?

Wrong.

While employing a fixed header has some definite advantages, it is extremely important to understand the disadvantages as well.

ADVANTAGES

Status messages – Alerting the user of important changes or issues, such as site downtime or that you no longer support IE6 (granted, you shouldn’t be supporting IE6 – yeah, I said it – more on that in a future post).

Navigation – quick access to navigation is important so the user can get around. The more functional a site, the better.

DISADVANTAGES

Toolbars – It  is important to note that several users these days end up with a lot of toolbars on the browser window. This is fixed content on the browser window that will further reduce the real estate available to a website. This in turn leads not only to less of your site being viewable, but an extra degree of frustration to the end user. While it is an easy task, many do not know how to disable (let alone fully remove) extra toolbars.

most toolbars today have their own dropdown menu to disable/remove them. If not, you should be able to do so via the following:

  • IE – click on tools -> manage add ons -> Toolbars and Extensions
  • FF – click on Friefox drop down -> add-ons -> extensions
  • Chrome – click on wrench -> tools -> extensions
  • Safari – preferences -> extensions

Flash – Yes, the big evil flash that not only Apple doesn’t like, but most people don’t care for either. You will notice a lot of fun things happening if you happen to have flash content on your site and a fixed header or footer div. Sometimes the flash content doesn’t want to scroll under. Sometimes it will scroll under but cause weird ripple effect in the content above. What happens when Flash content collides with fixed content is, unfortunately, unpredictable.

Design – If your site has very strong colors or graphics, take a moment to think about how this affects the end user. For instance, if your header is a neon green (not only do you need a new design), how long do you think someone is going to tolerate it staring back at them? Remember your goal is to keep people on your site.

If you decide on a static header for your site, take some time to really think about if the information within it and if it is absolutely necessary to be  persistent. And most important:

  1. Give the end user an option to close it (provided it isn’t your main navigation). The ubiquitous little ‘x’ in the upper right corner has now all but become convention, and is an excellent implementation.
  2. Keep it minimal! Note that, at the time of this writing, Facebook’s header is only 38 pixels high; Twitter’s is 40 pixels.
  3. All of the above applies to fixed content in general. Sometimes sites have fixed footers. While theses scenarios are not nearly as common, it is important to keep the above in mind for those as well.

Do you have a static header on your site? Thoughts?

Hello world!

Every programmer writes their first program – one that prints “Hello World”.  Being that this blog is about code, design, and development, it only seems right I keep this default post :).