I’d like to offer an alternative view.

Perhaps it has something to do with the way my brain works but I find I work best when I’m not putting myself under pressure to avoid distractions, when I can quickly deal with something and get back to work, or when I can step away from my desk for a while for a physical and/or mental break.

Here are some ways in which distractions or breaks may actually aid your productivity:

• Pauses to take care of small errands, send quick email replies or pay bills give you a mental break and also change your eye focus
• Getting up from your chair to get the mail, stack the dishwasher, or change a lightbulb gives you a physical break from sitting on the chair but also gives you something menial that you can easily do while focussing your thoughts on your work.  Pulling away from what you’re doing and thinking of it from a different angle can be refreshing.  It can also remind you to eat and drink – something that can be overlooked when concentrating hard.
• Taking care of chores and errands throughout the day prevents a long list building for the end of the day, which you can begin to dread.  I find that I sometimes waste more time thinking about the little things I need to do, while trying to concentrate, than actually doing them – quickly getting them done frees up my mental burden
• If you are continually finding ways to be distracted and put off doing the work, perhaps this is something you need to think about – why are you avoiding it? What are you afraid of?
• Going out to have lunch or coffee with friends is not only a physical and mental break but it also breaks up the monotony and loneliness of working from home.  You would do this if you worked in an office, so what’s wrong with doing it when you work from home?

I no longer feel guilty when I succumb to distractions.  If I feel that I have had a productive day, and haven’t stressed out getting things done, then the distractions were worth it.  After all, if I wanted a slave driver, I wouldn’t be working for myself, right?

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.