I had a chance to check out my website on a Mac today, only to find that Safari is having trouble displaying the PNG images that I use around my site.
PNG is a great choice for the simple images used for casual decoration as the compression is efficient and lossless; making the images small but perfect. The common alternative is to use JPEG, which has a very good compression but is lossy, causing ghastly artefacts to appear on simple images (it works very well on rich images such as photos).
I knew Internet Explorer has trouble with transparency in PNG images, but there is some magic that all browsers do (or don’t do) to make PNG files look correct. Safari doesn’t make the necessary calculations meaning that the images won’t match the background colours you set in your CSS.
The solution is quite simple; remove the extra colour information from the file so nobody gets confused:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
Ubuntu users can install pngcrush via aptitude. Thanks to Trevor Morris for providing the solution. (His site has further technical details too).
The first design for this website was simple, a little stylish but pretty boring overall and few colours in sight. We know that we shouldn’t use colours excessively, but it is an important component of your site’s brand and can liven up the page, making the content more appealing to read.
The new updates give this site a lovely blue surround and a clearer menu system, with some novelty decoration to add to the style. Personally, I’m happy to build a style over time rather than making a huge time commitment upfront; meaning the cloud that you see on the left (if your browser window is wide enough) is just the beginning of an art theme I’ll developer in the future.
A cloud may seem like an odd addition, given the domain name and content of the site but it is simple and matches the colour scheme. Crucially, it does not distract the user too much; it does not flash, it is light in colour and it does not intrude on then main content area.
Upgrade to HTML 5
In addition to the splash of colour, I upgraded the site to HTML 5. This is currently just a work in progress, represented by a long draft, but the latest versions of Firefox, Opera and Safari have very good support already, allowing the brave amongst us to upgrade.
HTML 5 adds many semantic elements to the selection that exist in HTML 4 (as well as removing some others), including section, article and nav. By using these elements, we allow screen readers to understand the different sections of the document better and allow the generation of a table of contents; an outline of what is on the page.
First steps
To upgrade your site to HTML 5, change your doctype to:
<!DOCTYPE html>
And you’re done! There are a few tags that have been removed from the HTML 4 specification but everything else is still valid!
Whilst HTML 5 a new thing, some older browsers can recognise the existence of tags even if they don’t know what to do with them. You can use the open source HTML 5 reset css file to instruct browsers on the basics whilst ensuring the modern ones know what to do as well.
Internet Explorer has terrible support for HTML 5, but some clever fellow made a JavaScript file to help it learn. Add this to your HTML and you’re done:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
What now?
The Web community is buzzing with several great blogs featuring HTML 5 topics, most of which can be found via search engines. HTML 5 Doctor contains a collection of articles from a number of important people, making it a great place to start.
In the near future I will write a detailed article about HTML 5 and how to use it, for now consider the code below, which is perfectly valid HTML 5:
<!DOCTYPE html>
<title>My First HTML 5</title>
<header>
<h1>Welcome to my world!</h1>
<nav>
<h1>Continents:</h1>
<ul>
<li>Europe</li>
<li>Asia</li>
<li>Americas</li>
</ul>
</nav>
</header>
<article>
<h1>A brief history</h2>
<section>
<h2>1990s</h2>
...
</section>
<section>
<h2>2000s</h2>
...
</section>
</article>
The first thing to notice is that you don’t need html, body or head elements (although the latter may help you find your way around your code). The new nav has no content itself but informs the user agent of navigation, allowing the user to jump straight to it.
Sectioning elements such as header, article and section break up the document into logical sections, replacing the div elements you would use before. HTML 5 is defined around the notion of sectioning content, flow content, heading content and some others; defining how an outline of your Web page could be produced.
I recommend reading the extensive documentation (936 pages in PDF format), looking on other blogs or waiting for me to read the document for you and report back here!
What else?
I cover only the semantic issues here, but HTML 5 has huge developments on how video and audio content can be embedded into your website in an accessible fashion. You can also use the canvas element in conjunction with JavaScript to produce charts, games or anything visual.
HTML 5 is not yet complete but it is fast approaching. By implementing it into your websites you encourage browsers to build support and can help pass information back the HTML 5 developers. Remember, a simple change of doctype is enough to turn most websites into HTML 5 and you can slowly convert your site from that point onwards.
The downside to HTML 5 is that old browsers will have trouble working with all these new elements. For this reason, I can only fully support new versions of Opera, Firefox and Safari, as these are the only browsers I have access to. Since you guys are Web designers, I hope you have already upgraded to one of these browsers and the rest of the population will enjoy all the same textual content with only some minor style problems.
This website and blog represents a side project of mine, aiming to share some of the knowledge about Web usability that I have gained over the past few users.
The articles section contains a number of topics that affect the usability of your website. Much of it may be common knowledge to you (and that’s fine!) but to new Web developers/designers, it should provide an insight into the challenges to be faced and they kind of things we can do.
I’ll be using this blog to report about the awesome things that I encounter on the internet that can help you in your website building activites, starting with an article on balsamiq, the user interface mockup tool.
Have fun and please let me know what you think! 