This is unlikely to change soon but the differences are becoming fewer and fewer. To make the most of this you need to choose a browser in which to make your design / functionality work the way you want it to and then compromise fix it in Internet Explorer other browsers.

Let there be light!

The main thing to realise is that all browsers are not created equal. Older browsers lack support for new technologies (CSS3 / HTML5) and render pages in sometimes odd ways. They also tend to be less forgiving with various structural models and dynamic scripting languages like JavaScript. Something often forgotten is that some users may decide to turn off features in browsers or may be impaired in a manner which affects their browsing habits.

Examples include:

• disabling JavaScript
• disabling images
• not using a mouse
• using a screen reader
• using a text-to-speech device

Now while it is near impossible to include in a design every aspect that could affect the way someone experiences a website, there are things that can be done to improve the experience where possible.

Graceful degradation

“Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.”

– Fluid Thinking, by Peter-Paul Koch

Graceful degradation is finally being addressed as the wrong way to approach the problem – design utilising the most advanced features of a browser and where a browser is not capable of implementing those features, a compromise needs to be made. The testing of older browsers is often done towards the end of the development cycle. More often than not this results in a less pleasing site for those using older browsers. This mainly affects IE6 which is still widely adopted throughout the corporate world. Using this approach focuses on using the latest technologies and not considering the experience for people with older browsers, disabilities or with certain functionalities disabled.

So how do you add bells and whistles to a site while maintaining  focus on usability and experience? The answer is in the design process. By first focusing on what ‘everyone’ will see and use, you can address the broadest issues. Bear in mind that a good experience with a site does NOT mean pretty pictures (although they can help) and a person can have a good experience on a simple site, for no other reason than being able to do what they want to do with ease and no interference.

Progressive enhancement

Leading on from core usability is the inclusionof  features to improve the experience for those people who are able to experience them – this is known as ‘layering’, starting with semantic  (X)HTML, wrapped in some CSS and finally some JavaScript on top.

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

– Wikipedia

There is a far more tasty explaination using an M&M that defines the same point:

“Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).”

– Aaron Gustafson

Good for SEO too?

When you write rich, semantic (X)HTML you are making life easier for search engines to index your site. It is written in a predictable, organised fashion and as such means the search-bots are more likely to pick up on any extra information as well as index it in the way it is intended. If you think about a search-bot ‘seeing’ in a similar way to a screen-reader, they generally only read text and links and with progressive enhancement you have given them both the best opportunity to get the most out of your site.

In practice…

It’s difficult to keep this in mind when you want to use newer technologies to make your life easier. CSS3’s rounded corner declaration or shadow facility would be great, but what happens when you meet a browser that doesn’t support it? As long as the contrast of text to background is suitable and the corners are not an integral part of the design then they will just have square boxes and normal text – something that doesn’t affect their experience too much and won’t affect the usability in any way.

This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

1. TimThumb.php
2. Get the Image script (includes a TimThumb.php in a package file)
3. jQuery
4. WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image()  gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.

Topics covered are things such as graceful enhancement and graceful failure, designing specifically to allow access on various mobile browsers and adding enhancements to the site to improve user experience on the desktop browser or to allow them to fail gracefully so as still accessible on the mobile platform.

Doing this has inspired me to design a mobile specific version of my own website. Now while I would (ideally) like to create a version that is designed for all mobile platforms, I think I will start with just the iPhone.

Step one is already complete! Which is to say I have set up craigmdennis.com/iPhone/. Really tricky stuff…

The next step is to set up some kind of automatic detection and redirection to make sure if people using an iPhone access my site, they get taken to the iPhone specific version.

There are several tricks and treats (pardon the Halloween pun) available when designing a site for the iPhone that allows for the use of certain javascript functions to make use of the touch screen and the orientation detection. Something that means you can even show completely different content when the orientation of the iPhone changes. A great tutorial from Engage Interactive shows what is needed to do just that.

So I am designing a basic UI to navigate to the various sections of my site: Portfolio, Blog, Photography & CV. I want to make sure of the iPhone style photo navigation but that will be a little later on. I can’t decide what to do for the blog section and whether to have a list of titles, titles and descriptions or just the most recent post.

I also have to figure out how to turn off the iPhone redirection when linking to the ‘normal’ version of the site.

The only problem so far is that the [GL] object library has an issue with the nVidia geforce 7600 and so the only option is to use a Mac to complete the tweaking and get started with some Javascript particle generation.

The script also has some useful insight into collision detection as the balls move when the mouse object (also a ball) moves around. This would be ueful to adapt and add some movement to the balls to get them to float around, then they would react to each other and allow a ‘contact point’ in which to play the sounds back.