It’s not the only problem they have

I received an email at work yesterday regarding disruptions to Perth’s rail system.

Well, from the look of the email the trains weren’t the only thing not working for Transperth — the file links (highlighted in yellow in the screen shot below) in the email aren’t working either!

My guess is that these missing ‘filenames’ point to locations on an internal–not public–server.

Never a good idea…

Browser support for HTML5 and CSS3

As HTML5 and CSS3 support grows, you might need to know which browsers support the various new features.

While there are many tables that give this information in text form (see http://caniuse.com/ for an example), some of you might find that a graphic explains it better.

The screen shot below is from http://html5readiness.com/ — when you go to that website, hover over the radiating points to see which feature is support by the various browsers; the screen shot shows that none of the Internet Explorer (IE) versions support HTML5 Forms:

See also:

• Infographic on WTF is HTML5 and why we should all care: http://www.focus.com/images/view/11905/ (unfortunately, this graphic isn’t dated, so the HTML5 readiness percentages for browser support may be out of date)
• HTML5 tutorials: http://www.1stwebdesigner.com/resources/the-ultimate-roundup-of-indispensable-and-helpful-html5-tutorials/
• List of all CSS properties and whether they are supported in CSS1, CSS2 or CSS3: http://css-infos.net/
• HTML5 test: http://html5test.com/ (please wait a minute when you get to this page while the browser you used to access the site is analyzed — when the analysis is finished, you’ll get your score and a breakdown of what HTML 5 features are and aren’t supported by the version of your browser)
• W3C’s HTML5 specification: http://www.w3.org/TR/html5/
• Gallery of sites using HTML5: http://html5gallery.com/
• Help for HTML5: http://html5doctor.com/
• Apple iPad-ready HTML5 sites: http://www.apple.com/ipad/ready-for-ipad/
• Net Kit’s June 2010 best resources for CSS3: http://www.net-kit.com/junes-best-resources-for-css3/
• HTML5 periodic table: http://joshduck.com/periodic-table.html
• HTML5 features, tips and tricks: http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

[Links last checked June 2010]

Opera Web Standards Curriculum

Over the past couple of years, the Opera browser people have created a course in HTML, CSS and web standards. All 40+ ‘lessons’ are freely available online from: http://www.opera.com/company/education/curriculum/

(On a personal note, two of the articles were written by my friend and fellow technical writer, Frank Palinkas, who now resides in Norway where he works for Opera.)

[Link last checked March 2010]

Internet Explorer 8: Changing the text editor

In previous versions of Internet Explorer (IE), you could right click on a web page, select View Source and the HTML code etc. would open in Notepad. Not in IE8. The source code opens in a different viewer and you can’t edit the text.

However, you can change that!

1. Press F12 to open IE8’s Developer Tools (or Tools > Developer Tools).
2. On the File menu, select Customize Internet Explorer View Source, then select Notepad (or select Other to choose your preferred text editor).
3. Close the Developer Tools window.

The next time you View Source on an IE8 page, Notepad (or your preferred text editor) will open.

Pre-populating email links

A client wanted to have an email link, which would open Outlook and populate some of the email with boilerplate text. This was for an intranet, so email address security wasn’t an issue — I knew I could use a simple mailto link. Easy.

Except that I wanted some line breaks between parts of the message body. A bit of Googling and I found a solution that works! Here’s the syntax…

• Link to email address: mailto:name@company.com (where you substitute ‘name@company.com’ with the real email address)
• Subject line: ?subject=Subject line (substitute ‘Subject line’ with the real subject)
• Message: &body=Message (substitute ‘Message’ with the real message)
• Line breaks in the message body: %0A (that’s a zero, not an ‘O for orange’); use %0A%0A for two line breaks, %0A%0A%0A for three line breaks etc.)

Here’s an example:

Mailto syntax example

And here’s how it looks in Outlook:

How it looks in Outlook

Please note: You can only have one ? in the string, so if you need to pre-populate the CC field, the Subject field, and the message body then do it like this:

mailto:name@company.com?cc=another.name@company.com&subject=Subject line&body=Message

Also, populating the Message Body will overwrite any automatic signature you have in Outlook. You will have to re-insert your signature manually.

HTML tooltips: The easy way

Dave Gash, a great friend of mine and a terrific conference presenter on user assistance, has written an article on how to add fading tooltips to HTML links — the sort of thing that’s ideal for presenting little snippets of help (aka user assistance) to users as they are filling in a web form, for example.

His step-by-step article is here: http://www.writersua.com/articles/fadingtooltips/index.html.

[Dave has been a technical writer and online Help author for years, but originally comes from the world of programming (though we don’t that against him!). So he’s really good on all the ‘techie’ stuff and has a knack for explaining it to novices so they understand. Dave’s currently available for hire — you can contact him at dgash@hypertrain.com.]

[Links last checked September 2009]

Everything you need to know to make accessible documents

I came across a great site the other day: WebAIM (Web Accessibility In Mind). They have all sorts of goodies available in the Articles and Resources sections of their website, like checklists for Section 508 compliance etc. And everything I’ve looked at so far on this site is written clearly and laid out in a way that makes the pertinent content easy to find.

I found out about this site because someone mentioned that it had some good stuff on creating accessible PDFs: http://www.webaim.org/techniques/acrobat/

There are also great articles on making accessible Word and PowerPoint documents, and documents and files in other common formats including OpenOffice.

This is a site well worth checking out and bookmarking!

Update 23 July 2009: SitePoint also have an article titled 12 tools to check your site’s accessibility.

[Links last checked July 2009]

Creating a non-scrolling title for a webpage

Mike Hamilton, head honcho at Madcap Software, recently shared how to create a non-scrolling region on a web page. For those who remember the old WinHelp days, this was something that happened automatically. Not so in web-based Help.

Mike’s blog post gives instructions on how to do this with a Heading 1 (H1) style in Madcap Flare, but the basics of the settings apply to any HTML/CSS.

You can get the full details here:
http://madcapsoftware2.wordpress.com/2009/04/20/adding-non-scrolling-regions-to-flare-topics/

[Links last checked April 2009]

For the geek girl

These made me laugh ;-) You have to be a bit of geek to ‘get it’, but for those of us who are, these are hilarious!

HTML tag earrings

Unfortunately they’d sold out last time I looked, but if you ask nicely maybe the people who made them could make you a pair:
http://www.etsy.com/view_listing.php?listing_id=7363642

[Links last checked January 2009]

HTML email newsletters

On occasion, I’ve been asked about creating email newsletters. My investigations to date have lead me down the path of “It’s not worth it”, or “Use one of these paid services”. If asked why I believe it’s not worth it, I usually come up with reasons such as having to hand code the HTML, cannot use CSS etc. Now, while that’s not an issue for me, it is for those who think you can just bung something up in Word and send it out.

Now Mathew Paterson has written a great article on this, and in it he talks about going “back to 1999” with respect to the coding etc. But he has lots of other interesting things to say in his three page article: http://www.sitepoint.com/article/principles-beautiful-html-email

It’s well worth a read if you’re thinking of going down the ’email newsletter’ path.