I’ve had a good solid day of coding, probably my first in quite a while. Whilst I was playing round some JQuery I came across a quirk I’ve never noticed before. I call it a quick because it’s certainly not behaviour I’d expect.

When working with some HTML form elements I used the JQuery method val() to set the value of a select box. So as an example here’s a select box and the JQuery to set it.


<select name="DavesSelectBox" id="DavesSelectBox">
<option value="0">Zero</option>
<option value="1">One</option>
</select<


$(DavesSelectBox).val(1);


Now the problem arises when the form is submitted using a normal submit button and post method. I noticed whilst it visually seemed the select box was being set to the value, the posted value didn’t reflect this and posted the original value.

So after some looking around it turns out that if the element has the same name and id then .val() can sometimes be a little problematic. So the quick fix to change the name and id to different values. Strange!

I nearly forgot about linking to this, my first article for a while.

For those who may have noticed I’ve been doing a few Google Analytics articles for Six Revisions and the latest published a few weeks ago looks at the basics of tracking searches on your site and what you can start to glean from the information available in Google Analytics. Click on the image to go and read the article.

Well I started this post knowing full well there’d be plenty of resolution posts around as we enter this new year, and having not got this finished quickly, there are plenty around. You can’t really make anyone follow a resolution and you should all take up your own but here’s five suggestions from me, if you have room in your life for 12 then head over to Six Revisions and have a read of A Designer’s List of New Year’s Resolutions.

Learn a new language
Lets start with learning a new language. Sure you can go ahead and learn Spanish or French or Japanese and good luck to you, I’ve been trying to learn French for years! But I’m sure you’ve guessed that’s not what I’m on about. I’m saying learn a new web language. If you’re a PHP expert why not learn some JavaScript, if you’re brilliant at both then why not learn a bit of ActionScript. Adding new skills and finding out the capabilities of other technologies will only be beneficial. If you’re not wanting to push yourself too far then why not learn to use a different framework within the languages you already use or even just use a different CMS for a project.

You don’t have to be a coder either, if you’re a designer then why don’t you learn HTML and CSS – it can only help with your design and your knowledge of the medium you’re designing for.

Work with something different
Are you a web designer? then go and design for print. A web programmer? why not try some Java programming or even some design!
Working with a different medium can help to keep your eyes open to different possibilities and avoid the tunnel vision that can come from constantly churning out the same type of project.

Read a book
Turn off the computer – really – it’ll only help you, and whilst you’re away from the computer get your head in a book especially since you’re spoilt for choice at the moment.

• The Smashing Book
• Designing with CSS for a Beautiful Web
• Digging into WordPress
• Sexy Web Design
• Website owners manual

That’s just for starters, there are plenty more great books out there depending on your speciality.

Write some articles
Do some writing, it’ll help you to think about things in more detail. To write confidently about something you need to know it well and look at it in more detail and it’ll really help you to get to grips with the subject.
Personally since writing on here I’ve found that I learn just as much from researching and writing articles as I do from actually coding and trying things out although often the two go hand in hand.
You don’t have to start your own blog, write for other blogs, you’ll get to know other designers as well and connect with more people.

Do something for yourself
You know that project you’ve been meaning to do? That redesign that you’ve been too busy for? Stop putting it off! Look at your diary and pencil it in. Give yourself a free reign away from clients to go and play and get something done for yourself.
I’m currently looking to fit in a revision of this and a few side projects as well. It’ll be a busy year!

So there are my five resolutions, I’m not saying you should do them all, I’m not even saying I will, but if you’ve thought about doing anything new this year then feel free to share it in the comments.

We always seem to leave browser testing till the end, open up Internet Explorer and within about 10 seconds of page load there’s a variety of swear words and we go off to hack our CSS or put in IE only style sheets. God help you if you go crazy and open up IE6, you’re sure to find some form of mess awaiting you.

Recently though my work habits have changed and I’ve decided to stop leaving it until the end, this has been prompted by a few things such as approaching the end of a project having not checked in IE7 and sending a colleague off to show the site to a client who, you guessed it uses IE7. (Sorry Andrew!)

Coupled with that I’ve started to develop sites in Google Chrome. I was impressed with Google Chrome when it first came out and apart from a few too many crashes with flash content it was pretty slick. However the lack of developer tools left me developing in Firefox and using two different browsers seemed a bit impractical.

Recently though I made the decision to switch to Chrome as my primary browser as Firefox has become, well a bit slow and I’ve also started to use more CSS3 which gets more support in webkit based browsers so I’ve been developing and building in Google Chrome.

Now I have of course lost access to all those lovely tools provided by the Firefox web developer toolbar as there doesn’t appear to be an alternative in Chrome yet, although I imagine it won’t be long until one is released.
So as my makeshift solution I’ve worked on the site in Chrome and had it open in Firefox and just pop in when I need to use some of the developer tools. OK having two browsers open all the time isn’t brilliant but it means as I’m working I’m constantly seeing the site in two different browsers and as soon as a problem arises I can sort it out. It also means I’m aware of the browsers all the time and prompt myself to have a quick check in IE every so often.

Generally I’m just keeping on top of cross browser issues, not having to rush in at the end and drag together browser specific style sheets or making changes that may have an effect on other areas of the site.

Whilst some won’t agree and keeping two browsers open isn’t ideal, it is certainly worth keeping tabs on how your development is going in more than one browser rather than one big headache of sorting it all out at the end.

My second post on Six Revisions and as we approach 2010 I take a look at what is behind the emerging web trends.
So head on over to Six Revisions and have a read of the article.
It must be worth a read as it’s made the front page of digg and been tweeted around a bit!

*Now updated with jquery 1.4.2 and removed supersleight as usage of IE6 only stylesheet removes most of the need for it*

Merry Christmas Twitters and RSS subscribers and all those who have found their way here via some other route.

Having started to get into using HTML5 and CSS3 in quite a big way recently I’ve put together a base package that I’ve been using to start projects off. (I’ll hopefully have some of them finished for you to see in the new year).

I was thinking to myself what better way to encourage people to start using all this new stuff than sharing the package with everyone. Now it’s not up to much but it will give you a basis to customize and start from for HTML5 and CSS3.

There’s a good chance my coding may not even be to your liking but that doesn’t matter, I’m making this available so you can download it and change it into your own starting point.

You can download it right here.

What’s in the package?

Well it honestly isn’t a lot but once you’ve unwrapped your little present what are you faced with? Four folders and 3 files.

The 3 files in the main folder are

• The site index file
• a .htaccess file
• x.gif which is used for supersleight, an IE6 PNG transparency plugin (http://24ways.org/2007/supersleight-transparent-png-in-ie6)

The first of the folders is the CSS folder, in here you have your CSS files

• layout.css is the main CSS file
• print.css is a basic print stylesheet
• reset.css, a standard reset stylesheet
• text_replace.css, if you fancy doing some old image style text replacements
• typography.css for all your type styles

The next folder is an images folder, erm, to stick all your images in, then we have an includes folder which has in it

• head.php and footer.php which are reusable scripts for site header and footer. Incidentally JavaScript is called in the head but you can move it to the footer if you want to for better loading.
• menu.php for the main site navigation
• funcs.php which includes some basic PHP functions but I encourage you to add your own

The PHP include path is set in the .htaccess file so be sure to make sure it is set correctly so that the files can be included with no problems.

Lastly we have the scripts folder with some nice JavaScript.

• Supersleight, as mentioned above for IE6 PNG transparency (http://24ways.org/2007/supersleight-transparent-png-in-ie6)
• init.js, for declaring and initiating all of your JavaScript
• a copy of jquery (1.3.2) (http://jquery.com/)
• Modernizr for your CSS3 and HTML5 needs (http://www.modernizr.com/)

The best thing to do is go is unpack it and have a good poke around and then change it to suit your own personal work flow and your needs.

Hope it comes in handy!

Well I’ve been doing this web design blogging for a month now. Sure I’ve been working in web design and development for years and I’ve blogged before occasionally keeping fifthandlast.com updated but this is my first time blogging about web related topics. So what have a learnt? A few things actually but here’s 5, mostly learnt from buggering something up.

1. Practice what you preach

It’s very easy to get on the high horse whilst you’re writing a blog and evangelising about topics so it helps if you carry out what you’re writing about. For instance don’t tell everyone they should still be making stuff useable in IE6 when your blog has a dud link to an IE6 stylesheet.

2. Check things before you publish them

It doesn’t really matter if it was working this morning make sure it’s working now, before you click publish, just check. Again I learnt this by messing something up and publishing the CSS Hover tabs tutorial but before I put it online I changed a few things on the demo and forget to check it over in IE.

3. Don’t click publish straight away

This is one thing that’s quite often easy to do, finish your article give it a quick read over and then click publish. Personally I’ve found it’s better to write something and leave it, at least a few hours, then re-read it. You’ll no doubt have a different view and maybe change a few things, notice some stuff that doesn’t read so well.

I think this is true of most work, not just blogging, I now always make sure especially when designing, that I leave something overnight or at least a few hours before sending it to a client for example.

4. Take the time to prepare

Good preparation can lead to much better articles. I’ve started to carry around a little notebook and jot down ideas and keep brainstorming around them, all the time keeping an eye out for examples that will help reinforce my articles. Taking time and putting in preparation leads to a much more satisfying and higher quality article.

5. Enjoy it

I have, thankfully! It’s been great fun writing and getting comments and seeing retweets of my content, hugely satisfying. I’m sure there’ll come a point where I get a bit fed up of it, but for now it’s enjoyable. I’ll bring you a nice article about getting over a slump if I ever get there!

But for now thanks to all those who have visited the blog, left comments, tweeted content or linked to here. I hope to continue writing on here and growing the readership and I’m sure I’ll have another 5 things to tell you next month.

Having attended the “For a beautiful web” workshop in Newcastle I was very impressed with Andy Clarke and as such there’ll probably be a few more posts on here related to the stuff I picked up from the day and I would highly recommend anyone who can to attend a workshop or see Andy speaking if they get chance.

For those who don’t know, the workshop was all about using new technologies such as CSS3 and central to everything was the fact that websites don’t have to look the same in every browser. (Check out http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/)

I was convinced, the arguments for progressing and using this new stuff are great but I left and my first thought was “well it’s all right for Andy he gets good clients, but I couldn’t start doing that with our clients”. Which I’m sure is what a lot of other people think straight off, and then I did a bit more thinking and realised that was the stupidest thing I’ve possibly ever thought to myself.

You don’t need to be some huge company

As I was mulling over my assertion that “our clients” wouldn’t be happy with us not making the designs the same in every browser I thought about Andy’s company Stuff & Nonsense, they’re run from Andy’s house in North Wales and it’s pretty much just him. It’s not some massive company so if he’s doing it why can’t we all?

Good practice is good practice anywhere

So there’s no reason why we shouldn’t all be doing it. Why we shouldn’t be embracing CSS3 and HTML5 and getting our clients on board for the ride. At the end of the day it’s just a matter of explaining everything properly, I think sometimes we forget that we’re the experts here! We don’t have to be some big well known agency to be doing new things, we can all do it now ourselves.

It should help us move forward

Which gives me the final thought that came straight from the workshop on Friday. The best way for us to move forward with CSS3 and keep improving  browsers and the web is by using the technologies, it’s by trying things and giving the feedback on how they work, how they don’t work, how we were expecting them to work. So we should all get involved, we should all be forward thinkers and we can all pave the way for the future of the web.

If you want to read more about moving forward with web design and designing in the browser and not showing clients static visuals then head over to All the Malarkey Andy Clarkes blog and read “Time to stop showing clients static designs”

Another Trading Eye hack for today. Very nicely the guys at DPI Vision have spent plenty of time making the URL’s search engine friendly. They’ve also done it with the site search however and if you want to track your search in Google Analytics (and you should do!) then you need to reverse that change.

But fear not it’s pretty straightforward! – Read on.

First thing as always it to back up your files – you’re looking for your .htaccess in the site route and modules/default/admin/templates/main/leftMenu.tpl.htm and anywhere else your search form is.

Once you’ve done that open your .htaccess in a text editor and look for somewhere around line 15 the following. (In some .htaccess files this is around line 24)


RewriteCond %{SERVER_PORT} 80
RewriteRule ^eaction/([^/]*)/([^/]*)(/)?$                       ecom/index.php?action=$1&mode=$2 [nc]

And change that to

RewriteCond %{SERVER_PORT} 80
RewriteRule ^eaction/([^/]*)/([^/]*)(/)?$                       ecom/index.php?action=$1&mode=$2 [nc,qsa]

The qsa means that any htaccess changes will amend the current query string rather than overwriting it.

Now you need to find your search form, for most installations I think it should be on the sidebar, in this instance,

modules/default/admin/templates/main/leftMenu.tpl.htm

Open up the template and find the starting tag for the search, it should look similar to the following.

<form id="search" method="post" name="search" action="{TPL_VAR_SEARCHURL}">

All you need to do is change method=”post” to method=”get”. Simple as that.

Adding it to analytics

That’ll put the query string in your URL, now we just need to sign into analytics and start tracking searches.

So sign in to analytics and before delving into the details of the account click the edit profile link and on the next page click to edit the main profile.

Now click on “Do track site search” and set the query parameter as mode.

After that once you’ve logged into your analytics, head to the content section and there is a sub section for search and you can see all your site search stats in there.

They’re becoming ever more popular as a form of cheap, affordable and effective marketing but HTML emails can still be a pain in the arse mainly due to the dated rendering by most email clients. They’re something I’ve found myself doing ever more frequently recently (even getting an inclusion on the Beautiful Email Newsletters Gallery) so here’s my 10 basic tips for putting together your own HTML email newsletters.

1. Forget how to code HTML properly

Remember when you were told that tables were evil and not to be used for layout? When you finally took that on board and starting floating things around the page and banished your tables for good? Well that’s about to change, welcome back your friendly layout based on, yes, tables!

To be honest it’s not too difficult and I’m sure for most it’s tucked away in the back of your mind just cringe as you write it and remember background images are out.

2. Indent your code

All those nested tables can get quite hard to track so it’s pretty useful to make sure your HTML code is indented and neatly organised otherwise you can soon get lost in there.

3. Style inline

For most email clients this isn’t a problem anymore but you still get the odd few that won’t read external style sheets so stick a copy in the body of your HTML just to be safe.

4. Alt tag your images

HTML emails rely heavily on images to constitute a large amount of the content and nowadays most email clients don’t download images automatically. So as well as slicing your images up sensibly make sure you have alt tags that include any text that appears on the image.

5. Don’t stress about the details

There are that many email clients that it is very difficult to make sure that your email will appear 100% correctly in each one. The only real way to do so would be to just include one image for the entire email and you’re risking falling foul of a lot of spam filters by doing that.

So don’t stress if you’re emails aren’t pixel perfect in Lotus Notes or there’s a little extra padding when Hotmail users view it. As a general rule I’d suggest making sure your email can be read in Outlook and Hotmail and then keep an eye on your stats to see what client most of your readers are using and fix for that in future mailings.

The only place to make sure your email is pixel perfect is your web version (a hosted version of the email that people can view). At the end of the day there aren’t any excuses for that one not looking right!

6. Get a good mass mail client

Don’t send to 100′s of emails using the copy to field in Outlook! I’ve seen it done and apart from being unprofessional it lacks any form of feedback facility. Being able to view stats on bounce rates, opens and click throughs is invaluable to your email marketing strategy.

There is a great variety of email marketing software out there and if I detailed them all I’d need a whole other post! What to pick will depend on your available budget and the amount of emails you’ll expect to send. Personally I use Campaign monitor alot but there are plenty of others, a few I’ve used or looked at in detail are Mail Chimp, Interspire, Vertical Response and DotMailer, but that isn’t even scratching the surface of what’s available out there!

7. Test

Test the email, not just for appearance but for tell tale signs of spam. Most spam filter providers will have available rules for how they filter out emails such as Spam Assasin’s tips. Also make sure you’re adhereing to the rules regarding who you can send to and keep within the bounds of the law, a good starting point is CAN-SPAM.

This will also be helped by following tip number 6 as a good mailer will have inbuilt apperance and spam tests.

8. Make sure your links are in

Make sure you have unsubscribe links in for a start, a lot of spam filters will check for them and some readers may well mark your email as spam if they aren’t there.

Also include a “view web version” link, and make sure it’s at the top of the email before any content. If your email doesn’t look right users aren’t going to scroll through looking for the link, quite often they’ll only use the a preview pane, so put it where they can see it right away.

Apart from that a forward to a friend link and plenty of calls to action linking to relevant parts of your website are a must.

9. Text version

Again for most spam filters this is essential but also for mobile readers and some other email clients. Make sure all of your text is included in the text version, importing it from your HTML can easily miss out any text included on an image.

10. Read it again!

Send it to yourself and read it, and get someone else too, there’s nothing more embarrassing than rushing an email only to realise it’s full of typos, or repetitive phrasing or something similar. I’ve recieved an “Octomner” newsletter before today!

So there you go, your basics for HTML emails, I’ll be putting together a more thorough guide to designing and coding an email and the differences from normal website coding so anything you’d like to be included leave a comment below.