These 50 web development guidelines are important to keep in mind while planning, designing, developing, implementing, and maintaining any web site or blog.
- Use [css] and div's for site layouts rather than tables
- Optimize images to look good, and keep file size small
- Provide enough contrast for text to be easily readable
- Make the site navigation obvious
- No automatic sound or video, ever!
- Develop with maintenance in mind
- Don't place email addresses on any page
- Do not flood a page with ads
- Test the end result in several browsers and operating systems
- Test, test, test! Then test again and once more for good measure.
- Avoid frames whenever possible
- Avoid creating pages that take longer than x to render
- Use consistent headings and sidebars
- Avoid overuse of flashy or moving elements
- Make [rss] Subscription links obvious
- Provide alternative methods to subscribe, like by email
- Use an ALT property on all images
- Follow [html], [css] and [js] standards
- Avoid copyright infringement and give attribution where necessary
- Ensure all page titles are unique and relevant to page content
- Keep the design simple and easy to use
- Use relevant keywords and descriptions for each page
- Keep content fresh and up to date
- Make it easy for others to bookmark the site or a page
- Plan each and every change made to a site, see the path to the end result before coding starts
- Always keep the audience in mind when planning design and content
- Stay legal whenever possible. That's usually helpful.
- Provide copyright, privacy and terms of use policies when necessary
- Provide a way for visitors to contact the site owner
- Avoid using Flash for navigation, or the entire site layout
- Use a stylesheet to encapsulate [css] code whenever possible
- Define a target screen size and color depth to adhere to
- Define the browsers you'll target and test against each
- Ensure [ssl] is used for all private and confidential information transfers
- Include a DOCTYPE declaration on all pages
- Check for broken links regularly and repair as needed
- Check spelling and grammar and correct mistakes as needed
- Use a [css] stylesheet include over inline styling
- Keep [html] readable and organized
- Maintain a clean and organized file system for web asset files
- Define coding conventions to use prior to starting development
- Find solutions to major technical hurdles early in the development lifecycle
- Establish monitoring to catch and help reduce system outages
- Don't change page [url]'s once they are indexed by search engines, or provide a redirect if required
- Create consistency in the code to make it easier to maintain
- Add [js] code to a file that is included only where needed
- Document everything possible and definitely document unique solutions to problems
- Use hexadecimal when describing a color, not system color names
- Maintain transparency as to where links will take a user
- Establish (and thoroughly test) a back up and recovery plan for all file assets
Following these guidelines will help reduce problems, increase your productivity and enhance the end-users experience. Do you have any to add?
You might also enjoy these related posts
- 10 Questions For Your Web Developer Before Starting That Web Development Project You need to question your web developer before starting that development project. Before you hire someone to build your web site, before you lay down any cash or outline your...
- BlogSpot Blog – Free Web Development Tools Doing any level of web development means having a variety of tools that aid your efforts. I have a collection of tools that I’ve either downloaded or paid for that...
- Learning Web Development Through Blogging I have a few minutes right now and I wanted to share a few things I’ve been thinking about. Otherwise however, this month is going to be incredibly busy for...
- Trustworthy Web Development Part of my job as a web developer is to perform acts on your behalf. Imagine that you have paid me to perform some technical service for you, be it...
- 30 Websites to follow if you’re into Web Development Jacob Gube has put together a list of 30 websites he uses to keep up to speed with web development practices, patterns and news. Read more here: 30 Websites to...
Getting started with a website is easy. Simply follow these steps to get started:
BJ@Charleston Sou... (1)
cam @ toy coupons (1)
Dave@Wheeled Holdall (1)
thanks for the tips specially for the [b]ALT[/b] properties in [b]![]()
[/b]tag. most of the time i forget to do this.One more thing is, make the image border zero when it is in an anchor tag.
First time I’ve visited this blog. Great tips. I’ve just started teaching myself html now that I’m working part time for a hotel in Prague and I am a little confused with CSS and normal html. I shall visit this blog more often now.
This is a pretty comprehensive list. Great job. This is a good checklist for any new blogger. Many bloggers that have been around for a little while might find some useful bits here, as well.
@Speaker Wireless,
There are several popular WP Backup Plugins, the most widely used that I have seen is probably WP-DB-Backup, found here http://wordpress.org/extend/plugins/wp-db-backup/
do you now wordpress plugin to backup database ?
excellent, easy to read list of guidelines. i would also add a guideline regarding consistent use of navigation and action buttons. i’ve been on many a website where a graphic or button looks like a link/action but isn’t and vice versa
That’s awesome Holte, I like the dummies series too. Easy to read and absorb. I’ll buy one of those books for technologies that I’m not familiar with. After that, I usually get a reference manual (big book) if I get into the subject.
I ordered the “Dummies” book, I have a few of them and I find them good “aha” books.
Btw, I hand picked those books. I’d be interested in hearing what you think of them. Cheers!
Holte, explore this page a bit: http://www.waynejohn.com/page/the-blog-shop.aspx – Anything you buy will make me a few cents, so thank you in advance if you buy anything from there.
Dummies books are great, and there are a few in my shop.
Which btw, I haven’t announced the shop officially, I just placed a tab on the main menu above to see if anyone would notice. If someone did, they didn’t say anything.
Is there a “dummies” book out there Wayne, that could help me understand the terminology. I would appreciate a recommendation.
Great tip Darran, we think alike on that. Thanks for sharing it!
Great list there, it sums a lot of mistakes today’s web developers make. I got a guideline to add:
Use includes when necessary, that way you won’t need to declare a doctype, a sidebar, a footer in every single page. It might be very simple, but it is a very powerful guideline. Mistakes made are limited too. You never know when you might accidentally have an extra closing div tag.
“They’re more like ‘guidelines’…”
Kristi, I too find that I do that as well. I’ll add to that by saying when you are in build mode, placing css into a file will also (should) force you to consider the design more, so in the end perhaps there will be less style property adjustments on the tags themselves.
I always try my best to keep a clean css file, but the one for my own site is pretty messy, but it works.
Heh, and there is always the pressure of time too.
Zaf, hahahaha you got it!
Lindsay, at one point I read something that changed my mind. I believe it regarded the lack of control over how the table renders in some browser/operating system configurations, compared to divs. I’d have to find it again, and perhaps I should. Ever since then, I’ve left tables behind except for the use of displaying tabular data.
That would be a specific example, but like I said, I’d have to find it.
Holte, you will with time. This list casts a wide net, and certainly isn’t all encompassing either! I think I covered the important points though. Just depends how far you want to take it.
Thanks Eric! I thought I’d play this one more from the hip, and less from the mouth (er…fingers in this case).
Nicely organized; I like the short intro – diving right into the meat of the article helps it flow.
I’m sure they are great tips, I hope to understand what they mean.
GREAT tips!!! The only one that I dont necessarily agree with is using DIVs over tables. DIVS are great, but there is also overuse of divs and tables can be create for a more static and confined structure. I use both divs and tables in layouts and I dont think there is anything inherently wrong with using tables aside from the fact that people feel tables are “passe” but there isnt any SPECIFIC reason that I have read yet..
Great tips Wayne. I see you practice what you preach. Give me “SHOP LIBERTY” or give me death!
Great list. Probably the only little comment I wanted to make was including all styles in the CSS stylesheet. I usually add padding to my images to space them out, and when I added that into the stylesheet instead of doing it manually, my RSS feed had all of the images stuck together. I guess there are certain things you have to include in the post, since the feed can’t pull the stylesheet.
~ Kristi