Over the past couple of years two new open formats have appeared on the scene and they are causing confusion. OpenDocument also known as ODF or by it’s extension odt and Office Open XML or by it’s extension docx. Now in a perfect world you think one of these standards could have been decided on and transferred to the doc extension to make everyone’s life easier, but it’s not a perfect world.

Microsoft feels that everyone needs a new Word Processor every couple of years, but many people are still using old versions of Word which will not open either of these new formats, and of course the newest versions of MS Office still won’t open OpenDocument files out of the box, although there are add-ons that will do the trick.

The real problem in all of this is that the average users doesn’t care what standards are or even what a format is, they just hit save and that’s the format their documents are in. In the case of Open Office that format is an odt file and in the case of Microsoft, it’s a docx file. The nightmare starts here as co-workers send incompatible files back and forth, students get to school only to find out their Open Office assignment that is due in five minutes will not open to print, and the list of scenarios goes on.

Understand your save dialogue box

When you save your documents remember the format you want them in. Will you be able to open this file when you get to school or work? If you are unsure then select the doc option. Yes it’s an older format, but I think 99% of us have not needed a new word update for about the past 10 years. Can you name a new feature that was added in the past few years that you actually use or need? Unless you like the new UI introduced in 2007, then probably not.

Change the default

If you really can’t remember to save your files in doc format or whatever format you need, then change the default. It’s a one time change and may save you much frustration. In both OpenOffice and MS Word it’s found under the options or settings menu under the save section. You will find something like “Save Word files as:” and a drop down of formats. You will probably want something like “Word 97-2004 Document (.doc)” selected.

Google to the rescue

What if you’ve already got yourself into a pickle or a friend has sent you a document you can’t open? Well the good news is you can convert docx or odt files for free with Google docs, all you need is a Google account.

Log into your gmail account and you should see a “documents” link at the top of the page. Select this and Google Docs will open. Now you should see an “upload” button to the left, here you can upload odt, docx and other document formats. You may lose some formatting, but that’s a small price to pay to get your content when you need it, which is probably NOW! You can always reformat it in Google Docs anyway. Once you have it in Google Docs you can open it and go to “File / Download as” and you will see all the popular formats. Is there anything Google can’t do? What am I thinking right now Google?

If you have been making email newsletters that work in the majority of email clients out there you already know this; if you want your work to display the way you intended in web based and stand alone email clients then you have to use inline styles and tables, and a lot of them. You would also be wise to ignore any modern CSS, because most of it won’t work. Inline styles work well for email clients that strip out all the embedded styles like Hotmail (also a Microsoft product). Hotmail has come a long way over the past 4 years, but unfortunately Outlook took several steps back when someone came up with the brilliant idea of using Word as the email render engine. Previous versions of Outlook are much easier to support. 

I’ve done everything right, why are my links turning purple when clicked!

So you have your inline styles set up everywhere including on your links, but when you send out your deployment the links turn purple when clicked in Outlook 2007. This is Outlook ignoring your inline styles and applying the default link colour for visited links. If you have an embedded style at the top of the page, it will respect those. I had stopped using embedded styles all together since inline styles were much more reliable. The fix for this is to add your link styles back in the embedded style at the top of the page inside the head of your markup.

<style media="all" type="text/css">
a:link, a:visited {
     color:#64698c;
     text-decoration:none;
}
.sideBar a:link, .sideBar a:visited {
     color:#893d00;
     text-decoration:underline;
}
</style>

In this example all link styles are set to a specific colour and the second style sets a different set of colours for links within a sidebar class. All you really need to fix your Outlook link woes is the a:visited declaration, but it can’t hurt to add the links in there too.

Inline styles are still king with email

Remember, dont’ get rid of your inline styles. One of the reasons I got rid of my embedded styles is because I could not tell when I was missing an inline style. This is a real pain for links, because using this fix will show your links as the right colour while working on the email. If you or others use editors to work on your HTML they will not add inline styles, so you must always remember to add them after. Again, the down side with this fix is now you cannot see which links you have missed. At the time of writing Gmail still strips out the embedded link styles and I’m sure a few other clients still do this too.

As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.

Fixing these bugs usually requires a lot of head scratching and pounding of fists and Google searches until I figure out a work around or hack that will fix it. I may not run across said bug for several months or even a year or more and then inevitably I stumble across the same bug and of course not realizing it is one I have dealt in the past. The IE6 redirect bug is one of those nasty ones that has caused me much pain and suffering, and it’s very simple to fix, although sometimes remembering the fix can take precious time, so I thought this time I would write it down and share it with others.

An anchor link, sometimes called a jump link, is pretty straight forward HTML, so you would think IE would have no problems with it. You would be wrong though, very wrong.

<a href="http://www.sitename.com/yourPage.html#AnchorName">Link to anchor on page</a>

Within yourPage.html you have an anchor

<a name="AnchorName"></a>

This is where it all went wrong

Under most circumstances this will work just fine, even in old clunky IE6, but where it won’t work is when there is a redirect involved. My issue started with an anchor link from an email campaign. This link would be clicked from an email client and then sent on to the email deployment platform, where it would then be redirected to the actual page. From here a nasty 404 would pop up. This is what threw me, because usually redirecting an anchor link in IE6 will only result in the anchor not working, but the page still loads fine.

The fix

The fix is quite simple if you can remember it the next time this happens to you.

<a href="http://www.sitename.com/yourPage.html&#AnchorName">Link to anchor on page</a>

See the difference? No? Check out the little ampersand “&” at the end of the html file and before the pound “#”. This will fix your broken anchor links in IE6 and they will now jump to where they are supposed to go.

My issue was a little more dire since the anchor links were actually breaking the page and giving a 404 error. We probably could have just ignored the issue if the jumping was the only thing broken. I think the reason for this is IE6 must parse the URL incorrectly when being redirected and ignore pound sign “#”. My page was a PHP file and contained a query string:

yourPage.php&var1=foo&var2=bar#AnchoreName

The last var2 was interpreted as bar#AnchoreName instead of bar. An ampersand “&” fixed this issue also. IE6 and IE7 never cease to amaze me with how badly they interprets the HTML and CSS specs. This particular bug is only an issue in IE6. I hope this saves some people a bit of sanity.

I think a lot of people want to dislike these ads because it’s Microsoft and of course it is to promote Vista, which I think is a disastrous OS. That said, I really like the second ad, and the first one is growing on me too. It’s also not only Jerry Seinfeld making these ads funny, Bill Gates is pretty cool too. One commenter nailed it, it’s just funny to watch two well known and accomplished people act silly. Will it make Vista any better? Probably not, but that doesn’t make these ads bad.

You can view the high resolution ads on Microsoft’s site, and they are in Flash instead of a windows format… wow!

This is really big news and probably really bad news for Microsoft. Google has already released Gears a browser add-on which allows Google to jump start browsers ahead into more modern standards. Chrome will use webkit, the same engine that Safari uses, but it will not use the webkit Javascript engine. It will use it’s own, which should make apps run much faster and with more features.

Could this really be Google’s entrance into the desktop market? I believe the future of applications is online. Everything is headed in that direction. More and more people are accessing their apps and data in multiple places and on multiple devices, and right now the major player in that space is Google.

Update: Google Chrome – first impressions are the most important

More info at TechCrunch:
Meet Chrome, Google’s Windows Killer
First Images of Google Chrome
No Joke: Google Introduces The Chrome Browser With A Cartoon

The multi-touch move seems to be in line with a lot of what Microsoft is doing lately. Someone else is doing it (Apple), so we have to also, but why? I’m not saying Microsoft should not be doing it, and lots of other companies are jumping on the multi-touch bandwagon too, but are we really going to be smearing our fingers all over laptop screens in the future? As a designer and programmer I am always cringing when people touch my screen. I think the multi-touch works for the iPhone and iTouch because of the target market and type of usage they receive but I still find myself preferring a tactile keyboard. I will be purchasing a smart phone within the next 6 months, and I have yet to decide whether I will go with the slick iPhone, or a more practical Blackberry. Ideally I would like a combo of both a multi-touch and a tactile keypad.

That’s not to say I can’t think of many cool uses for multi-touch technology and I’m sure Windows 7 will help facilitate this eventually. I would love to have an LCD coffee table with a durable high gloss finish where you could spread out digital photos, play with digital liquid lava, or even play some games while friends are over (Think real time strategies). What I think will be marketed first is what we are seeing in this early video, which is probably not really where multi-touch will excel.

Obviously there is huge potential but traditional computing will not need multi-touch and maybe even hinder it. The mouse and electronic pen are still a force to be reckoned with. I think we will use multi-touch in ways we can’t even imagine right now, but I also think the mouse will be around for a long time. Microsoft has to be careful with how they push this. Multi-touch is new and for the most part it is fun and cool, but Microsoft is not known for fun and cool, they are known for getting the job done. Vista tried to be something it wasn’t, and in the end it got a new interface that annoyed people and an OS that didn’t work with a lot of peripherals out there. Multi-touch is a feature I want to see in Windows 7, but it’s not something that I want to be a default design feature of the entire UI and I hope it is not the main focus. I really hope Windows 7 will be a rock solid OS that really does innovate, we don’t want another Vista.

Check out the mult-touch video on Wired.

Let’s talk about web standards, even though most people probably don’t give a damn about them, you should because they affect you and here’s why. Years ago I made a really dumb comment (not the first time, and probably not the last). I remember looking at web pages with malformed tables which Netscape rendered as blank, while IE rendered the content fine. Someone told me that there was an error in the table and this was why Netscape would not render the content properly. I replied by saying this was stupid, and at the end of the day all I or anyone else for that matter cared about was if we could see the content. Netscape later started rendering broken tables like IE, but my comment was very dumb.

If something is broken, it should not work. Making it work is taking a leap of faith and hoping it will display the way the developer / designer intended. If browsers were strict and only rendered proper code then we wouldn’t be in the mess we are today. The developer / designer would immediately see their mistake and fix it, thus avoiding cross platform issues we have today. Now his page should work across the board in any standards compliant browser without further testing, although testing is always recommended.

This is even more important in today’s rapidly changing Internet. We are beginning to access the web in many different ways, and this is only going to accelerate with time. As Wi-Fi signals get stronger, and cell phone bandwidth gets cheaper we will see more and more people accessing the web through hand held devices like the Blackberry and iPhone. We need to conform to web standards more than ever. Do you want your favourite website to work in Internet Explorer at home but not on your iPhone while you ride transit to work, or when sipping coffee at Starbucks? When sites use proprietary non-compliant IE garbage like active x, not only do they close many avenues, but they also leave themselves at the mercy of Microsoft’s security bugs and extremely slow development time. Look at how long it took for Internet Explorer 7 to come out and add features that had already existed in other browsers for years. It took 6 years, that’s an eternity in web years. Microsoft rarely releases updates for IE unless they are major security fixes. Internet Explorer 7 has also brought along a huge list of old bugs and new bugs.

There are so many other reasons why non-standard mark-up and code like ActiveX are bad, but most of them seem like self serving rants to the average Joe. Developers generally have to spend more time, more money, and more effort to get things to work in IE. So what you say, that’s your job. Well, this costs time and money for companies, and most of all it costs innovation. Instead of moving the web forward and adding the newest and greatest technologies, developers are saddled spending their time trying to make things work in IE. There is no doubt in my mind that Internet Explorer has stagnated and held back web innovation and development.

So which browser do you pick? Well, sometimes it’s not a choice as with hand held’s and game consoles, but almost anything is better than Internet Explorer. Firefox is a favourite of developers, and the most used non-Microsoft browser at the time of this writing. Other rising stars are Opera and Safari. Opera has been around for years and many swear by it as their browser of choice. Nintendo’s Wii and DSLite also use Opera. Then there’s Safari, this is a Mac browser, but it is also the browser in the iTouch and iPhone. If the iTouch and iPhone really take off expect to see Safari usage stats go up too. You can also now get Safari for Windows.

In general I don’t really want one browser to ever dominate. That’s what Internet Explorer did for 6 years, and for 6 years the web lurched forward with hacks and tacked on functionality to make IE work. When IE first released Internet Explorer 4 it really was better than Netscape 4, but after they won the browser wars they never seemed to take their browser seriously anymore. Having many browsers to choose from keeps companies and developers on their toes, so pick the browser you like most, even if it is IE, but don’t ever pick IE just because it came with your computer. You will be missing out. Almost everything in Internet Explorer 7 has been around for years in other browsers and is just copied. IE is playing catch-up right now, and it’s still in last place.

• Mozilla Firefox website
• Google Chrome website
• Opera website
• Apple Safari website
• W3Schools web browser statistics

I will start with my Wacom tablet. The first thing I noticed from day one was that it was not working properly. After installing the Wacoms drivers, Vista’s horrible pen drivers took over. Even once I figured out how to disable them, both my work computer and home computer never stopped showing up as a tablet PC. Then their was the issue of Vista ceasing to even recognize my Wacom device after locking the PC or going away for a bit. I would come back only to find that the mouse cursor would not move at all, the solution? Reboot or use the keyboard shortcuts!

Okay, so Wacom i devices are not that common, I should cut Vista some slack, and maybe I would if that wasn’t just the tip of the iceberg. There is the weirdness of logging in one morning watching it take an extremely long time (not unusual for Vista) because it has lost my user settings and is recreating my desktop from scratch! In frustration I powered off only to have it magically work the second time around. I had to use this power off trick several more times when this happened.

The problem I experienced the most of all, both at work and at home would happen my dialogue focus was lost. What do I mean by this? Well, when I clicked an okay, cancel, continue, etc. on whatever dialogue box was on the screen, Vista would lose focus of that window. I could not click on any buttons! The solution? Reboot of course.

These are just some of the major headaches I’ve had, but others have had problems too, just searching Windows Vista will get you page after page of angry users who can’t get printers to work, extremely long boot times, Office crashes and many more, the list goes on and on. Vista is a huge resource hog too, and I have a fairly fast laptop. I feel like I have just upgraded to a super computer. My start menu pops up instantly, browser tabs are instant, I can even multitask with speed again. I don’t get the constantly “Program not responding”. I should have done this a long time ago; the number of hours lost is probably quite high for me. I will never touch Vista again, lets hope the next Microsoft OS is better.

Another interesting stat to watch is the decline of Windows XP users on W3schools browser OS stats. Windows XP over the past two months seems to be gaining users? Maybe it’s just an anomaly.

Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.

As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.

Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.

And here is how it’s supposed to look after the fix. No white border / padding.

And the fix?

table td {
    border-collapse: collapse;
}

I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.

Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Outlook 2007 Test</title>
  <style media="all" type="text/css">
  table td {
    border-collapse: collapse;
  }
  </style>
  </head>
<body>
  <table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
  <tr>
  <td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
  <td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
  plain text.</td>
  </tr>
  </table>
</body>
</html>

You may also want to check out my other entries on this topic.

• Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
• Email html design and deployment quick tips

Overall I think IE7 was pretty disappointing. I still have a lot of problems getting things to work properly, and I usually get things to work in Firefox and Safari long before I get them to work in IE7, not to mention that some sites that work in IE6, break in IE7. Let’s hope 8 will be different, but now web designers and programmers will have three Internet Explorer browsers to support and deal with, at least for awhile.

Interoperability is the future with more and more clients out there. I believe that hand held browsing will become a major part of many people’s lives in the very near future as WiFi becomes more widespread and cell phone bandwidth prices drop. More and more people will be accessing pages on many different platforms, so web standards and interoperability are more important than ever. Microsoft seems to understand this and is listening to the web standards experts more and more and this is good.