Here’s a few examples I’ve come across recently but I’m sure there’s plenty of you with more to share.

Using forms as links


<form action="link" method="post">
<input type="submit" value="link text">
</form>


This is a weird one I’ve encounted where a form is used as a link to another page, it’s not passing any post variables or anything it is just has the page set as the target and a submit button. All the function of a link, in a form! I can only assume the developer wanted to have browser styled buttons instead of text links?

Using the class “header”

This one really bugs me but I’ve often seen <p class=”mainHeader”></p>, this is what a heading tags are for!

In line styling

Ok more of a legacy thing, it used to be acceptable until people realised that it was much better to code semantically and keep your content and styling seperate. But it gets me nearly every time when I’m debugging trying to work out why a style won’t change something, after lots of messing round I eventually notice the style= in the element.

Not using lists

This I guess is just a personal bug bear but if you have a list of things, stick them in a bloody list! You don’t have to do it for everything, for instance menu items as lists I guess are more of a personal preference (although it could be argued otherwise!)

Tables

Again this is a legacy thing but I’m amazed that people are still turning out design in tables there is quite simply no excuse for it!

JavaScript as navigation

I’ve seen some strange things done with JavaScipt but this is a gem, http://www.kingstriangle.com/ tweeted by @rachelandew, all seems normal when you visit the site, but just view source on those top menu items. You will get the quite mind boggling coding of this.

<div id="nNews" onclick="document.location.href='news.php'">News</div>

It looks like a link and it works like a link but it is the strangest implementation ever, surely as a developer somebody would be familiar with an <a> tag?

If I encounter more I will add to the list but please feel free to contribute in the comments.

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!

This was requested on the original CSS hover tabs post and as usual it has taken me ages to get around to doing it.

Anyway it is just the previous version realigned and also with an added tab to show you how easy it is to customise and add extra tabs.

You can view the demo here, it’s pretty straight forward and I won’t go into detail as it is all worked using the same principles as the original post so read that first and then take a look at the source of this one. It’ll do you good to do some thinking and look at what’s changed!

<input type="email" placeholder="example@kamikazemusic.com" />

So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.

To use this make sure you’ve included the jQuery and Modernizr files and then pop in the bit of code below or download and include the file.
(This is only tested so far with Modernizr v1.1 and jQuery v1.4.2)


$(document).ready(function() {

if(!Modernizr.input.placeholder){

});


Being rather busy I completely forgot to post the link to this last week, but I wrote an article for the great tutorial site NetTuts about CSS3 transitions.

It is a introduction for those who haven’t used the transitions before and goes on to a little more advanced usage within CSS3 animations – so go check it out at http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

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!

I happen to spend a bit of time doing online surveys, whether they’re for website feedback or market research or, well, anything else.
Whilst I haven’t done any in depth research I’ve certainly noticed a lot of basic mistakes that are really annoying! So here’s a few that you should avoid and you should make your surveys easier for people to fill in and that in turn should improve the quality of your results.

1. Don’t be too repetitive

Sure you’ll need to repeat some things just to cross check them and a lot of the time surveys make use of subtle repetition to check people are giving honest answers. But if people are faced with the same questions over and over again, they get bored, they don’t read the questions properly and they start skimming and just clicking through to get to the end of the survey and some people leave altogether.

As an example I was filling in a market research survey about drinking habits and, well, I drink a lot of tea – seriously – a lot! So in this survey it had noted that I had drank about 9 cups of tea in the past 24 hours and it then went into.

Q: Think about your first cup of tea, what kind of tea was it?

A: Normal Tea *click*

Q: What did you put in it?

A: Milk and sugar *click*

Q: Was it caffeinated of de-caffeinated?

A: Caffeinated *click*

Q: What did you drink it from?

A: A mug *click*

Q: How much of the mug did you drink?

A: All of it *click*

Q: Think about you second cup of tea, what kind of tea was it?

A: Normal Tea *click*

Q: What did you put in it?

A: Milk and sugar *click*
….

I think you can see where this is going, I had already answered two questions about the glasses of water I’d had (tap water, from a tall glass, room temperature, drank all of it) and I got as far as “Think about your third cup of tea” before I thought bugger this and left.

So think about what you’re asking, is it really needed? Can you make it quicker and easier for the user? For the example above change it to how do you normally drink your tea? and then did you drink any differently in the past 24 hours? Or a table where I could have answered each question at once for all cups of tea.

2. Don’t ask unnecessary questions

Similar to the tea example above but for this is more about using the information you’ve already been given.

For example, from a mobile phone usage survey

Q: What is the make and model of your phone?

A: Apple IPhone

Q: Does your phone have Internet browsing capabilities?

A: Erm, yes, it’s an iPhone

Q: Can you play music on your phone?

A: Well yes, it’s like an iPod as well

Whilst I appreciate that some survey software won’t allow you to structure your questions this way just try to remove as much of it as possible if you can.

It’s well known best practice that people are less likely to fill in a sign up form if there are lots of fields, so use that same principle on your surveys and remove what you don’t need.

3. Make sure your options are sensible

How many times have you looked at a multi choice question and thought none of the answers fit.

Q: What do you think of first thing in the morning?

1 – Murdering children

2 – Murdering old people

3 – Murdering pets

You should really have a none of these/other type option all the time with a little box to write in an explanation. Yes it makes it harder to go through the results but it will make your results more accurate.
And none of this closest answer stuff either as a get out, you may think you’ve covered all angles and people couldn’t think of something else, but believe me, someone will.

4. Be clear in what you want

Ok this one came from another drinking survey, this time about alcohol. Now initially it referred to beer which for me is well, bitter and the like, lager is different. But they classed a few lagers in their example so I thought “oh they mean a more general term for beer”. Then a few questions on  ”now thinking about Lager as opposed to Beer” and I thought well I’ll be damned if I’m off to change all my previous answers because you weren’t clear and I was thinking about Carlsberg and not John Smiths and so I left the survey unfinished.

As a basic rule if something can be misunderstood, it’s probably going to be so try to be as obvious and straight forward as possible.

5. Check the capabilities of the computer at the start

I got 90% through a survey once, I was using Firefox and the next question popped up and said please watch this video. Firefox had a moan about some windows media player plugin being needed and I couldn’t watch it, I couldn’t complete the survey and it wouldn’t let me restart it.

I should never have gotten 90% in, one of the first screens should have said “you will have to watch a video in this questionairre, is this one here working?”  and I would have sorted it out there and then before wasting half an hour on a survey I couldn’t complete.

6. Have a honest progress bar

I don’t know, I guess Microsoft are to blame for this one. For years we’ve had download progress bars that have seemingly done nothing other than print a random number on the screen.

“90 minutes to go”

“84 minutes to go”

“5 years to go”

“106 minutes to go”

So some people thought they didn’t have to make their progress bar accurate on their surveys.

Partly the problem comes from the fact that the progress bar is often based on how many pages of the survey you’ve completed. So an 8 page survey, you’ve done 4, you’ve completed 50%.

The only thing is pages 1-6 have 2 questions per page and pages 7 and 8 have 100 each! So the easiest way to fix it is to space out the questions as evenly as possible.

Hopefully these are errors which you’ll avoid in the future, feel free to add your own tips in the comments below!

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.

I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

Click here to view the demo

So lets have a look

The HTML

<div id="csstabs">

<div id="tab1">
<h3>Most Recent Posts</h3>

<ul class="tabcontent">
<!-- tabcontent //-->
</ul>
</div><!--end #tab1//-->

<div id="tab2">

<h3>Most Popular Posts</h3>
<ul class="tabcontent">
<!-- tabcontent //-->
</ul>

</div><!--end #tab2//-->

<br class="clearboth"/><!--stops things going funny in IE7//-->

</div><!--end #csstabs//-->

We have:

• one containing div that has all the content in – #csstabs
• two divs containing tab content and title – #tab1 #tab2
• h3 tags for headings (can be changed to span or other heading tags)
• tabcontent lists (these can be divs if you wanted)

The CSS

#csstabs{
position:relative;
width:300px;
height:290px;
}
#csstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
}

We give the CSS tabs a relative positioning so we can position things absolutely inside and then add a width and height to it. We then add to the h3 a height and borders on 3 sides and we give the tab content some padding and a background and border.

#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:42px;
background:#fff;
height:230px;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
background:#fff;
}

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:40px;
height:230px;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
}

We then assign values to the individual tabs.

.tabcontent gets a z-index with the higher number going to the tab that will be shown on the front in this case #tab1. They are then both given the same absolute positioning with the top value, placing the .tabcontent box just under the h3 tags so that on hover they cover a bit of the .tabcontent border.

They then get a background color and a height.

The h3 tags get a z-index of 3 to make sure they’re always on top, they get position absolutley to the top of the tabs with an appropriate left indent and are given a fixed width.

Then comes the hover bits

#csstabs:hover h3,
#csstabs:focus h3,
#csstabs:active h3{
background:none;
}

#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:#fff;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
}

#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:#fff;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
}

Firstly when we hover over the containing div all h3 tags lose their background, that ensures the border line shows up underneath.
Then for tab1 and tab2 depending on which heading we’re hovering on the h3 get’s a z-index of 4 and a background color. The tabcontent gets the same but a z-index of 3. So both elements are brought to the front with the h3 further forward.
Because the h3 overlaps the tabcontent box by 1px you can move seemlessly from the h3 element into the tabcontent without losing the focus, it also means that the current header will cover the border of the tabcontent box making it look connected.

CSS3
But wait, what’s that? You have a webkit browser? Well how about some CSS3 tricks. It’s not much but a little fade between the tabs? Oh ok then.

So first things first add opacity:0 to any .tabcontent boxes that aren’t shown intially.

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}

Then under your #csstabs:hover h3 declaration add this.

#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}

That will fade out the .tabcontent areas in 0.75 seconds easing into the animation, pretty self explanitory really!

Finally for the .tabcontent hover classes we need to add a fade in.

#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

So that will fade in the .tabcontent that is being hovered over in 2 seconds again easing in.

So there you go you’re now using CSS3, exciting isn’t it!

Drawbacks
Whilst at first glance it all works nicely there are two main drawbacks of the technique. It requires a fixed height and width, although giving the tabcontent box an overflow:scroll can help if you can live with the scrollbars. Which is great for plenty of situations but not necessarily for dynamically generated content.

The other is that so far I haven’t got it working for tabbing through the page so there are issues regarding the accessibility of the links.

Want to do something with CSS? HTML? JavaScript? Want to see more tutorials? Let me know what you’d like to see via the contact page – I’m happy to take on a challenge!

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.