The browser wars, my two cents (and then some)...

It has been brought to my attention, though indirectly, that I have completely ignored Opera for some time. This is due impart to a bad experience I had some time ago when I was first experimenting with alternative browsers for my Windows Mobile phone. That story can be summed up in by my confusion as to why their mobile browser costs money when their desktop browser is free (the inverse of what I would postulate).

That nonsense aside (and perhaps requiring a post of it's own) I recently downloaded and installed Opera. I was rather impressed.

I will not give it a full review until I have time to properly utilize it and it's various features and compare them with the alternatives (perhaps a full critique of the four major browsers is in order). However having played with it a bit, I will now list my personal, highly opinionated ranking of the four major browsers:
(drum roll)

1. Mozilla Firefox


2. Opera


3. Microsoft Internet Explorer


4. Apple Safari

As I said, this is completely subjective, hopefully I will one day have the time to be objective. If you feel there is another browser out there I should consider/try let me know. I have briefly used various other linux offerings but really don't consider them to be in the same class as these guys. I have installed SeaMonkey in the past, but really have no use for a 'suite' and really didn't find it all that attractive so unless you can convince me otherwise, I shall not try it again.

Readabilty, color choice and the use of fonts.

I honestly don't know what some people out there are thinking. I have been to some websites that are on the verge of impossible to read. I'll be the first to admit that I have always have my resolution cranked way up and everything so small on the screen people constantly ask me, "how can you read that?" The answer is, I don't know. I have horrible vision, but with my contacts in I mange to read minuscule text at reasonable distances. Maybe that makes me more sensitive to some of the issues I'm about to bring up, but I doubt it.


Issue the first, aka #1: Color Choice
I'm not about to ask, or even suggest that every website be black text on a white background, or the inverse there of. Contrast however, is necessary: can you read this? I can, but barely. It hurts my eyes just to look at that, forget about reading several paragraphs on someone's blog. I found myself trying to do exactly that the other day, but instead of reading the page word for word I simply skimmed down the page because I couldn't stand to focus on the text for a significant amount of time. Perhaps there was some really excellent information there, but we'll never know. This is only slightly better.

Now you might be thinking that is bad, and it is. But at least it looks relatively clean, some may say professional. So, I'm no color expert, but some people choose color combinations that are down right offensive. I know a lot of people will shy away from complementary colors, and that's fine, because to me all it does is bring to mind sport uniforms. Perhaps a color triad would be more suiting to them? Personally I'm partial to Monochromatic(ish) color schemes with maybe some off the wall accent color. That being said, I can't find anything good about the following:
Hamburgers Anyone?
How about an ocean voyage?
And what in the world is this?
Is it christmas?


Now this is certainly not the worst of it (ok maybe some are a little extreme), and your mileage will vary depending on your monitor and resolution, but if you are anywhere in that realm, perhaps you should rethink your color scheme.

Issue the second, dba #2: Typography Tags
Is that the proper term for these bad boys? I don't know but I didn't know what else to call them. What I'm talking about here is bold, italics and *cringe* underline. As for the first two, use them, use them so much people are sick of them. Why? to avoid using the latter at all costs. There's a reason the <u> tag is deprecated. IF something is underlined, expect someone to try and click on it, and then expect that someone to get frustrated when they cannot. Furthermore, I know there are a lot of you out there still using old tags. Knock it off. <b>, <i> and <u> have been deprecated for some time and any editor, visual or text, worth it's salt should have a resonable find and replace. Those of you with RegEx/sed experience should be able to update all your code in a matter of minutes.

That being said, their replacements <strong> and <em> have rather specific uses, and I just recently found out that I've been using <em> in instances where I could/should have been using <cite>. For all intents and purposes the end result is the same, but then again I don't have special needs (more on that later).

Issue the third, or #3 the issue formerly known as Font Size.
Again, with screen size and resolution generally on the up and up it's getting easier to cram large amounts of information on the screen. When done properly that's fine, and it's not really the issue here. What is an issue is the size of the fonts some people are using. People want certain things, like the title, on their page to be large and stand out. Unfortunately these people design these large objects on huge monitors. The end result? As soon as I try to view your page on a low resolution workstation, or my trusty old Thinkpad T21 it's scroll city. I don't mind up/down scrolling (except perhaps on the laptop), but left/right should really be avoided. What I'm really asking here is that you take a few minutes and use either one of the browser toolbars, or better yet change your actual resolution and find out how your layout works for those of us without 4 square feet of LCD.

Oh, and don't think you image guys are off the hook either, it's not just huge fonts, but huge image headers that I have a problem with. As I mentioned at the top of the post, I am a resolution whore, so this is a problem I used to be guilty of until I realized how horrible my well thought out layout looked for the rest of the world.

There's very few people guilty of the reverse situation, ridiculously small text. I have a feeling that its because most graphic/web/what have you designers out there gravitate more towards the power user camp and as such require big screens and higher resolutions to get their work done. Any way, I've been yelled at for having things too small on my screen once or twice, but as soon as I show them what things will look like for the average Joe, it works out.

Most of you should know how to resolve the solution, but the best advice I can give is to start using relative font sizes. That would be em, ex and px instead of those old absolute bastards; in, cm, mm, pt, pc.

I guess that's all I have, much more and I'd begin to ramble... OH, What's that?

You have a concern about my mention of special needs? Well guess what, in the end all these changes and best practices come down to accessibility. What does that mean? It means your web page is just as functional for me on my high resolution massive LCD as it is for someone using an alternate output source because they have a physical handicap. It also means it's just as useful for the guy on the old 800x600CRT as it is for the guy hitting your page from his fancy new iPhone.

Fact of the matter is we don't know what browsers people are going to be using down the line, and how those browsers will interpret the different tags we use. The best we can do is stick to the standards and design well laid out pages using the right functions in the right places.

What's the point?

What's the point of allowing me to change the colors of my template if you use little images with static colors? No more rounded corners for me, and I'm even happier!

Don't fear the reaper folder Fold.

I came across this article earlier today: 30 Usability Issues To Be Aware Of

And it's really quite excellent, my good friend actually posted about it over here: Jess Chadwick: Coder

That in turn lead me to this article: Blasting the Myth of the Fold which I also thought was excellent. However she left out one key point, and it's something you may or may not do already, but if you aren't you should be. If you have a link/button/what have you that is used frequently by regular users, make it above the fold. There's little I hate more than having to scroll down to an oft used feature and make sure I hit the right part of the page every time.

To that end, next and previous page links at the top of the page are handy too. Granted placing them at the bottom forces the user to scroll to the bottom of the page past articles or ads that you may want them to see, and I know the 'End' key on the keyboard will get me there in no time, but in the time it took me to move my hand off the mouse, or find the key with my left hand, I could have clicked on next page (commas abound!). And god forbid I have to go back multiple pages.

I don't really have a example handy of the former problem, but a good illustration of the latter is engadget.com Not only do they not have prev/next page links up top, but if you do hit 'End' you're now down in the mire of cross links that take up oodles of space at the bottom of every page. There's a lot that's right with their set up, but there's easily and equal amount that is wrong.