And this week, the makers of WordPress finally have recognition for their great work – they have won the Overall Best Open Source CMS Award at the 2009 Open Source CMS Awards. Congratulations WordPress, I will continue to use and recommend your CMS!

My markup is far from perfect but I strive to create HTML & CSS that:

• passes validation (using the Strict DOCTYPE whenever possible);
• completely separates markup from styling;
• Is table-free (except for proper tables of data)
• reuses styles as much as possible;
• gracefully degrades in older browsers / without a stylesheet / without images;
• matches the graphic design as closely as possible (I’ve had some very fussy clients!)
• works in all modern browsers

Here’s what you need to learn:

• HTML 4.0 markup – the best place to start is W3Schools. Make sure you learn what conforms to the Strict (or at least the Transitional) DOCTYPE
• CSS – again, start with W3Schools
• Once you know the syntax of HTML and CSS, learn how to apply them to modern designs – read Bulletproof Web Design, The Zen of CSS Design and The Principles of Beautiful Web Design for starters
• Learn about the browser bugs and deficiencies you will have to work around and the standard work-arounds for these – start with Position is Everything and A List Apart
• Learn how to use Photoshop or similar graphical tool (though it is expensive, Photoshop is the best and most widely-used design tool) – in particular turning layers on and off, cutting out certain areas, exporting images for the web
• Learn how to “debug” your design. I use Firebug, which is a Firefox plugin, to see why things are going wrong, which styles are being applied, etc.
• If you want to learn Javascript for interactivity, again begin with the W3Schools but also check out Javascript libraries such as Prototype, JQuery, and MooTools. DynamicDrive has some handy scripts you can learn from.

Forget using Frontpage or any other such tool; good, clean markup can only be written by hand. Software that allows you to write code by hand but gives you handy tools like auto-completion, built-in browser, extended search and replace and file management is ideal. Graphical tools will only destroy your carefully crafted markup. I use Coda, which is perfect for my needs.

You may like to explore using a reset stylesheet. These provide a neutral base for all browsers for all the styles by removing annoying default styles such as borders, padding and margin. There are a number of reset.css files available online for free download.

Here is a rough order in which I begin building a site:

• I start with my own template – which already has header markup, basic css files (reset.css, styles.css and iebugfix.css), and a basic structure – and open it up in Coda
• Then I open the design in Photoshop (usually provided to me by designers, sometimes created by me) and decide on how I am going to structure the page, what I need to cut out as backgrounds, what can be done with CSS, etc.
• I move back to Coda and start marking up the page, starting with the basic structure and then moving from top to bottom, cutting out images and styling the CSS as I go. I frequently check how I’m going using Coda’s built-in browser and if something isn’t going right, I then move to Firefox and use Firebug to help me fix it.
• Once the HTML and CSS (and often, Javascript) are completed, I then check the page in Internet Explorer 7. IE7 is less forgiving than Firefox so anything you fix here (except for known bugs) will help with other browsers.
• When the site works in Safari, Firefox and Internet Explorer 7, I then move to testing it in Internet Explorer 6 (if I’ve been asked to support IE6, which is not always). Usually this is a matter of addressing which IE6 bug I’ve triggered and then applying the known fix to the ie6bugfix.css file. Sometimes, unfortunately, it’s much harder than this.
• If I then need to create additional pages in the same style, I take a copy of the first page and reuse whatever styles I can, creating new styles where necessary, and occasionally checking back that I haven’t broken anything in the first page. And so on…
• As a final check on pages, I run them through the W3C validators. This usually picks up semantic typos.

What then happens depends on who or what I’m creating the markup for. Sometimes I add SEO (Search Engine Optimisation) and publish the site, other times I turn it into a Wordpress template, still other I send to developers to have programming code inserted into them.

I keep as up-to-date as I can with new browsers, changes to standards, new methods and bugfixes by reading a variety of blogs and e-zines. Here is a small sample of these:

• meyerweb.com
• NetTuts
• Smashing Magazine
• SimpleBits

If you’re a budding young web developer, I hope this post is of help. Feel free to post questions as comments.

However, (thankfully) this doesn’t guarantee a good result because while these practices continue to evolve, search engines continue to evolve also.  They are continually tweaking their algorithms so that their search results award higher rankings to sites that actually deserve them – sites that have built a good reputation, that are competing with similar businesses and are not trying to quickly boost their results by cheating.  They now take into account the freshness of content, the accuracy and volume of keywords, and the ranking of inward and outward linked sites.

So, why should we avoid black hat SEO practices?

• They’re immoral, it’s cheating – if you wouldn’t do it in the real world, don’t do it in the online world
• Search engines catch on to immoral practices and penalise sites for it so your site may not rank as highly as you’d expect
• Not only will you get a more accurate and deserved ranking but you’ll get more respect from your readers because the site is targeted at them and not written for search engines
• Mileage varies – some industries have highly competitive search results (e.g. “web designer” as opposed to “plumber”)
• As search engines get smarter, you will keep paying more for smarter black hat practices, whereas white hat practices will change much more slowly
• You can sleep better at night knowing that you’re making the Internet a better place

Here are some do’s and dont’s to consider if you want to avoid unethical SEO practices and still build a good ranking.

Don’t

• Pay for links or reviews – it’s cheating, don’t do it
• Duplicate content or sites – Fresh, original content ranks higher than duplicate content
• Spam keywords – consider carefully the most accurate keywords and then select the best places to include them. Don’t overuse them.
• Steal content
• Optimise pages for unrelated searches

Do

• Follow search engine guidelines to make your site indexable – use “meta” tags, include a sitemap.xml, ensure that the code is standards-compliant and valid
• Use your carefully selected keywords in relevant places – e.g. page URL, title tag, heading tags, content, “meta” tags
• Add fresh content written for people, not search engines
• Seek backlinks from relevant, reputable websites only
• Optimise your site for relevant queries only (e.g. if your site is about cake decorating, ensure it doesn’t appear for interior decorating)
• Have patience, it takes time to earn a decent ranking, just as it takes time to earn a good reputation in the real world

This YUI Theater entry captures one of the courses Nate has taught at Yahoo, “Professional Frontend Engineering.” It covers the foundations of the discipline, some of its core ideas, and some of of its best practices. If you are looking to reset your own assumptions about “web development” or “frontend work”, I know of no better place to start. If you have friends who are new to the discipline, or backend engineers transitioning to the frontend, this is also a fantastic resource to which you can point them.

Now, however, I’ve changed my ways. I know how important it is these days for a website to be findable, and once found, to make a good first impression, otherwise the cost of building the website in the first place is wasted. I’m no longer satisfied with creating a professional-looking website only to let it disappear like a grain of sand in a windstorm or to see it degrade with sloppy copy written by the client. I have taught myself SEO and I have a business relationship with a friend who is very adept at writing for the web.

Here’s why you should sell SEO and copywriting with every website proposal:

• No matter how good the design is, bad copy will make a bad impression which will reflect badly on you, the designer
• Good copy that incorporates the site’s optimal keywords will enhance its SEO
• The more “white hat” SEO out there, the more search engines will begin to ignore black hat practices such as link farming
• A site that ranks well in search engines, which attracts more visitors, can only be good for your reputation as the designer
• If all professional web designers suggest and offer SEO and copywriting/editing to their clients, it will help broaden the distinction between professional web designers and bosses’ nephews who know how to use Dreamweaver and that can only be good for all web designers
• It will make the Internet a more pleasurable place to be!

Talkr takes a little bit of setting up but all you need to do then is offer a link to the feed on your blog and it will be updated whenever you publish a post. Talkr also offers many other text-to-speech and chat services. Check them out.

Tools and Services

• Mail Chimp: For beautiful, easy email campaigns. Alternative to Campaign Monitor.
• File Juicer: As mentioned in a previous post – extracts images and text from almost any file
• Flock: Web browsing, social networking, RSS feeds, email, searching – all in one Application
• Blogo: Great little Mac App for posting to Wordpress – I’m using it now
• Veer Marketplace: Move over iStockphoto – Veer is doing stock photography
• Billings 3: I assessed Billings 2 a couple of years ago, for managing timesheets and invoices, and found it wanting. Billings 3, however, impressed me and I’ve been using it without much complaint for the last couple of months (it’s on sale right now, as well).
• Survey Monkey: simple online surveys
• Browser Shots: Free Cross Platform Browser Testing
• Jumpcut:  Provides “clipboard buffering” -  access to text that you’ve cut or copied, even if you’ve subsequently cut or copied something else.

Articles

• 11 Absolutely Necessary Web-Based Tools for a Freelance Web Designer by Chromatic
• 25 Free Mac Apps for freelancers by Design daily news
• Stop Developing for Internet Explorer 6 by Robert Nyman
• Bring Down IE6 – is it finally time to take IE6 behind the shed and shoot it?
• The Ultimate Guide to Everything Twitter at Webdesigner Depot
• 30 Useful Web Design Books for 2009 at Webdesigner Depot
• Essential Guide to Creating SEO Friendly Website Design by Chromatic

1. Be concise: The point of a newsletter is to give your client short teasers whether they be articles, promotions or news. Keep each section short and sweet and if there is more to tell, link to a website with the deeper information.
2. Give your readers something: Avoid sending out a newsletter that simply gives them an update on your business; give them reason to click through to your website – whether to find out more information, view more specials, or download a coupon.
3. Use a mixture of images and text: Plain text newsletters can be dry (though you should allow them as an alternative), whereas image-heavy newsletters (or image-only newsletters) can be hard to read and do not allow for obvious hyperlinks. Keep information in text with images for illustration and use hyperlinks to take take your readers to your website.
4. Give a summary of the newsletter: Some campaign software allows you to generate a list of links that click through to the different paragraphs within your newsletter, giving a clear summary of its contents – for readers who want to know what your pushing, and fast.
5. Include a link to view the newsletter online: Just in case they can’t or choose not to view it in their email client. Many campaign tools allow this automatically.
6. Use software which provides tracking: Knowing who viewed your newsletter, who clicked links (and which ones) and which emails bounced can be valuable information for drawing conclusions about the success of your campaigns
7. Always include a working unsubscribe link: otherwise you are sending SPAM and that’s BAD.
8. Consider adding a “Forward to a friend” link – it may be easy for readers to forward an email but this prompts them to do so and it may end up generating you more sales.
9. Proof-read: proof-read, proof-read and get a friend to proof-read again. It can’t hurt your credibility.
10. Test: Make sure your email newsletter works in the majority of email clients including MS Outlook, Outlook Express, Thunderbird, Apple Mail. Hotmail, Gmail, iPhone.

Also, a reminder: you must have permission from your recipients to send them mass communications and the content must be relevant to them – consider setting up multiple subscriber lists for different kinds of communications.

In case you’re wondering which software I use or where you can find something that meets all of these suggestions, I highly recommend Campaign Monitor. It has a sensible pricing system, great features (templates with rich-text editing, fantastic reporting), a range of payment options and is easy to use. An alternative that looks just as good, with different pricing options is MailChimp.

File Juicer will search just about any file format and extract whatever images (and text in some cases) it can find.  It cost me around $AUD26 and within 5 minutes I had extracted all of the photos from 6 Flash photo galleries.  That was well worth the money, I think.  With a list of capabilities as long as my arm, I won’t insert them here; I’ll just say if you ever need to extract something from something – try File Juicer.

Keep text readable – don’t say “click here”

If a link is removed from text, the text should still be legible; the hyperlink shouldn’t be extra text (such as “click here”) nor should it distract from the flow of the text.  For example, consider these two sentences:

An article in the paper today suggests that one out of ten people…

An article in the paper today (click here to read) suggests that one out of ten people…

See how the first sentence flows nicely?  The reader is not distracted with words by the fact that there is a hyperlink?  And if the hyperlink is removed, the sentence still makes sense. Also, if you have a lot of text with many hyperlinks, the page is easier to skim without being cluttered with “click here” links.  On a similar note, keep the hyperlink to a short phrase of words (I would recommend one to three words); this will avoid a paragraph looking like it has more linked text than unlinked.

There are other reasons for not indicating links with “click here”:

• Text like “click here” looks silly on paper, when the page is printed
• Readers with visibility problems, using screen readers need information about what a link is and where it’s going
• Using descriptive text for links will aid with search engine indexing

Keep link text for a particular page consistent

Have you ever been to a website and clicked on different internal links, only to find that they lead to the same page?  That’s what I’m talking about.  Keep the message consistent.  If you are linking to a photo gallery page and use the text “photo gallery” as the link, keep on using “photo gallery” – don’t link “slideshow”, “my work”,  or “portfolio” to link to the same page, even if they mean the same thing.  Also, try and keep the text consistent with the menu text.  This will aid in giving the visitor an idea of the size and scope of the site.  It can be very irritating to see lots of internal links, only to find that the site has only three pages.

Use consistent link decoration

Use a consistent style and colour for all links within text blocks (I think it’s ok to decorate them differently in menus but consistency is good). Underline is still the most understood style for a hyperlink but if you don’t use an underline, consider at least using an underline in the hover state. Try and keep the links as obvious as possible – a specific colour and bold style or a colour with an underline hover.

Don’t ignore link states

Back in the ol’ nineties when web developers were taught HTML, one of the first things they were taught was the difference between a normal link, a hovered link, an active link and a visited link. We were encouraged to use different colours for each of these states. Let’s break them down:

• A link (a) – a normal link that is not in any of the other states
• A hover link (a:hover) – when the mouse cursor is hovering over the link (here you can add an extra hint that the text is a link, but that should already be obvious)
• Active link (a:active) – a link that points to the current page
• Visited link (a:visited) – a link to a page in the user’s browser history – one they have already visited

The most important state here is “visited” – it tells the user which links they’ve already visited, giving them a sense of location and relationship of their current position within the site to the rest of the site.  There doesn’t need to be a big difference between normal links and visited links, a hint of colour difference is enough, but they still need to look like clickable links.

Give links a title

The title property of a hyperlink is not only a handy way of giving readers an idea of what you are linking to (particularly if you are linking from an image) via a tooltip, it also helps search engine results by adding more context and more keywords to your page.  You should use the title to give the name of the site that you are linking to.  For example:
At 4.30pm today, residents of Melbourne experienced their <a title="The Age website" href="http://www.theage.com.au/national/melbourne-hit-by-tremor-20090318-91w6.html?page=3">second earthquake in a month</a>
which results in:
At 4.30pm today, residents of Melbourne experienced their second earthquake in a month

If you hover over the above link, you’ll see that the tooltip shows that I have linked to The Age website. You now know what to expect when you click on the very readable link.  However, the title attribute should never contain any important information because many users will not see it for various reasons (including differences in implementation by browsers, text being too small and unable to increase, users not noticing).

Lists of links

The same rules above apply to lists of links, only here you can actually link the name of the site you are linking to as it is not contained within a sentence and hence won’t effect readability.  See the list of links below.

If you have a small list of links, for example in a sidebar, consider using padded blocks for increasing the clickable area around a link, especially when the link text is wrapped over a couple of lines.

Further reading

• Don’t say “click here”; not everyone will be clicking – Quality Web Tips (from W3C)
• Disabled Users and the Web (Alertbox) by Jakob Nielsen
• Usability Tip: Turn Inline Links Into Padded Blocks for Larger Clickable Areas « Usability Post
• Coding Horror: Don’t Click Here: The Art of Hyperlinking