Random Web Design Advice and Good Practices

Published in Web Development on Monday, February 6th, 2006

As I hinted at in the previous post here on Fiftyfoureleven, lately I've had the opportunity to work with a couple of folks who are a bit new to the web. It has been a great experience for me, as it has forced me to think about some aspects of how I work and some of the things that I consider "Best Practises".

So here, in no particular order of importance, is a list of dos, donts and best practises that I would pass on to others if they were to ask (a.k.a. brain and link dump). Feel free to add yours on in the comments:

Do your IE Homework: Always check your websites in each version of Internet Explorer (install the standalone versions, tame them). You never know what version your client may have (or your clients boss). I would go so far as to say that you should spend a good part of your day surfing in IE, as it is likely that a good portion of your or your clients' traffic is.
Get a trustworthy host: If you are going to do web design work and offer hosting for your clients, make sure that you have a host that you can trust and that will give you answers when you need them. I've been with Blue Gravity for years and cannot be happier.
Go the extra mile: Whether they ask for it or not, it can be a good idea to back your clients sites up for them. I have a couple of folks that I do bits and pieces of work for at times. When I started with them I set up a local copy of their sites, just in case something happened to their live site. Well, recently, something did to one of the sites, and the owner was very very grateful when I managed to dig up the lost material for him.
Set up a local server for testing: It's not that difficult and there are plenty of packages available, especially if you are running PHP/mySQL.
Newsletters: If you are going to do e-mail newsletters for a client, try out Campaign Monitor, also, subscribe to their blog or newsletter. Some great tips in there.
Flash embed with fallback: If you are using Flash in a website, embed it with something like deconcept's excellent FlashObject script. It is clean and easy and allows for fall backs. From the website: Get your pages working without your Flash movies, then add them in later with little JavaScript snippets that replace your alternate content with the Flash movies. That method has saved my hide on at least one occasion, when it turned out that the computer in the conference room of a major client didn't have flash installed - it was the site launch meeting, and it happened to have a fairly large flash header.
Conditional Comments: The time has come. IE7 means conditional comments. Use files for each version if need be. Dead simple solution for layering your IE hacks.
Syndication is great: easy to read and easy to steal - protect your and your clients websites as duplicate content can be a real bugger in Google, and lets face it, where else does your search engine traffic come from? Copyscape has done the trick for me more than once. Also see IP Attorney Bruce Sunstein Discusses RSS Copyright.
Speeling!! In this day and age there is no reason for spelling mistakes. If you have clients writing blog articles, get them on firefox and install Spellbound or work something like Broken Notebook's spell checker into the CMS they are using.
Validation helps: I have had some weird CSS errors crop up do to stupid coding mistakes - non unique ids or an unclosed tag - when in doubt, validate to make sure your html is correct. The Web Developer Extension for Firefox, Moz and Flock allows you to upload local html from your testing server, as if it was a live site- very handy.
Be inspired: There is a lot of great work out there to learn from - Good Designers Copy, Great Designers Steal, after all, but use your head and don't steal sites... Aaaargh!.
Get in the habit of practising defensive design and contingency design (Google, 5411-1, 5411-2).
Bookmarklet: PHP Function Lookup will lookup the PHP function that you type into the prompt. Handy for when you forget the order of input of a function, for example. Drag to your toolbar and it's yours.
Content is king. Content is king (make the best UI experience you want, if it ain't got the goods...). Content is king.
Best Practises for Declaring Languages in HTML and XHTML.
All images should be jpegs: Maybe it's just me, but I've seen a more sites lately where people are using Jpegs when they should be using Gifs or Pngs. Sitepoint has a great overview of when to gif, when to jpeg, and when to png.
CSS Foundations: Many folks were already doing similar things when the articles came out, but Doug Bowman's Sliding Doors 1 & 2 put these things together and also popularized targeting of ids to hilite navigation. Must reads for those new to CSS.
CSS Bugs: Positioniseverything.net has you covered. Get to know the bugs so that you can code bug-consciously.
Simple Design Tips for Non-Designers: good tips for those of us who fit the bill.
Cloak for a top secret preview: When launching a redesign for a website, using cloaking to run the new site in the same space as the current version allows for in-situ testing. Even better, set up a page for your clients where they can turn a cookie on or off and switch between the new and old site; this affords them a preview and can sometimes catch oversites or mistakes before an official public unveiling.
Bullet proof your scripts: The people you may least expect fall victim to them. Get to know about SQL injection attacks and avoid getting haxored. Same for cross site scripting (victim, homework). Also see Validate Your Input over at Sitepoint.
If you need to decide which version of Flash to export as, head over here for a good start. Google Analytics can also help you out with actual numbers for a site.
Programmers need to know regex: also see regularexpression.info.
Access to mySQL: It is likely that at some point you will have to get data from Microsoft Access into a mySQL database; see Microsoft Access Database using Linux and PHP.
Don't be intrusive: If you are going to use JavaScript, be unobtrusive. If you are using Firefox, try out Firebug for debugging.

Comments and Feedback

Matthew Pennell Mon, 6th of February, 2006

...there is no reason for spelling mistakes...

Like "oversites", you mean? ;)

Just kidding - that's a great list of dos and don'ts.

Bryan Mon, 6th of February, 2006

Regarding the local server setup, Matt from Code and Coffee recommended to me a while back the use of WAMP Server which is a very easy method of setting up a local server with a mysql database, php, etc... You can even install Coldfusion to work with it.

Great list so far.

Blake Scarbrough Mon, 6th of February, 2006

Great advice for those working in small teams. I would add, "know your audience," demographic profiles, etc.

Dustin Diaz Mon, 6th of February, 2006

Hey cool. You should add this to your list of resources. Your typical visitor is most likely to find this post there :p (just givin' ya a hard time).

The deal with IE-homework...I'm afraid I'm just gonna have to be the guy that says "who cares about ie5" - I treat it just like netscape 4...and I'm ok with that. There box model may be simple to fix, but there support for some core DOM is bad.

And the flashobject.js thing I'm sitting on the fence as for its fallback. I love how it works, don't get me wrong about that... but you're essentially downloading both the flash file, and the fallback... It would be nice if there was a way to just get one or the other.

Dale Blank Mon, 6th of February, 2006

In this day and age there is no reason for spelling mistakes.

You may want to "re-devlop" that weblog-content-top.png, too. ;)

Great tips, regardless.

Dale

Mike P. Mon, 6th of February, 2006

Matthew: Yeah, that's one of those country things I think. Some countries are more strict than others? :D

Bryan: thanks, I have that link in the unpublished resources and couldn't find it. Almost 500 of the suckers waiting for me to find five minutes of time...

Dustin: A lot of this is from the resources, and if it's not in there it will be, but adding this post would be a good idea. Not sure if I've ever linked up my own blog in my resources! WRT IE5, depends on, as Blake says, your audience.

And as for Flashobject, it has saved my ass once, so I do like it, but I see your point. I wonder if there could be a workaround for what you mention...?

Dale!! Nice find! Damn, that Fireworks needs a spell checker! * blush * All fixed now.

Jack Mon, 6th of February, 2006

Great article. Insanely important for new-comers to read about.

I can't stress the creation of a local testing server. If you're going to follow the "great designers steal" idea then please please please don't put it on the web until it's not longer a copy-and-paste site. People do not take nicely to piracy of their web sites even if you are only testing/learning.

Douglas Clifton Mon, 6th of February, 2006

How about: don't use target="_blank" to open external links in new windows? (whether you are hiding them with JavaScript or not)

Fennec Tue, 7th of February, 2006

All images should be JPEGs? You've got to be kidding me! The wavelet compression algorithms used by JPEG will make any neat, crisp lines or text UGLY with all sorts of squarish blotches.

Now, you can say that all photographic-type images should be JPEG, and I'll pretty much agree with you- but 'all images' includes neatly designed headers and footers and navigational elements- indeed, on this very page most of those are in PNG.

mike p. Wed, 8th of February, 2006

Yes, I was kidding about that... did you read what I linked to for that point?

Random Web Design Advice and Good Practices

Comments and Feedback

Check out the blog categories for older content