Main Super Tables Resources Puzzles

13 Web Development Tips You Should Know

Posted on January 23, 2008 07:53:14 PM --- 3450 Views --- 7 Comments

Web developer? Smart thinkin'. Here are some tips you should know if you don't already:

If your site's content can be turned into a widget somehow, such as with an RSS feed or just a mini version of your site (ex. the puzzles widget on this site) - do so - and then submit your widget to all the major widget-oriented websites such as iGoogle, Netvibes, Pageflakes, Facebook, Live, Widgetbox and Widgipedia - it will help drive a LOT of traffic to your site - think of it as a great form of content syndication.
Do NOT: have a public link exchange on your site, sign your site up on link farms or on SEO directories - this will lower your rankings on Google a lot - take it from experience.
Though CSS can replicate the styling brought from these tags, search bots love them - so they're worth using for SEO purposes: <h1> - <h5>, <strong>, <em>.
Make sure your site supports the big four: Internet Explorer 6+, Firefox 1.5+, Opera, and Safari.
Make sure your site fits down to a 1024 x 768 monitor resolution.
Use the color wheel when creating layout themes. Try to keep your site layout down to three distinct colors.
Create a website shell (a.k.a. template), so that if you decide to make another website down the road, it will be a lot quicker to make because you'll already have a framework set up.
Create a to-do list for your site so you don't forget anything as it grows bigger - I like to jot sudden ideas I get down on it too.
A successful website provides a service to its users - such as teaching (Wikipedia) and/or social networking (Facebook).
Whenever possible, use onmousedown instead of onclick - it's ~100ms faster.
Use file compression for your javascript and web page files so that your pages load faster - also if you can, put the script include tags at the bottom of your page - this will give the illusion that your site loads faster because browsers usually comb through an entire js file before continuing on with loading the rest of your page.
If you have a rails site, I suggest checking out Mongrel and Monit for Mongrel (or God) if you are currently using Apache with FastCGI. You may notice your app is a lot faster with Mongrel clustering than on FastCGI.
This one is more of a for-your-health point, but our eyes naturally look slightly downwards - so if your computer screen is straight in front of you at eye level or higher, trying moving it down to neck or chest level - you may notice that your eyes feel more relaxed -- (I learned this last point from an eye doctor and feel that it helps me.)

Well that's it - a quick read - hopefully you've learned something new!

Also, if you think I'm missing a good tip, please let me and everyone else know and comment below (and hey - it''ll be some good free SEO if you have a web development website.)

Comments

eluttner Posted on January 24, 2008 06:53:14 AM

join at server side css and scripts dinamically into a single file, so that the browser makes one request for each (2 total), instead o one for each script/css

James Posted on January 24, 2008 01:59:16 PM

If you have a .NET site, don't neglect Themes. They are amazing tools for creating multiple versions of one site (say, different color scheme). Maybe you have a news site and want to differentiate visually between "old" news and "new" news. You can create two themes and use the same exact .aspx/.cs files, just switching out the images and content.

Makes things 100x easier!

Rob W Posted on March 15, 2008 07:00:27 PM

A lot of good ones!  Thoughts on a few of them:

#5: Also, don't forget the higher resolutions, unless you're already way up there... make sure your don't have backgrounds that will wrap in an ugly way at the next resolution up, etc.

#6: Only 3 colors?  Might need to define that; this site is pretty simple color-wise, but I see 8 colors already, counting borders, backgrounds, & font colors.

#10: I disagree with this one....  People are accustomed to actions on a webpage being activated by a click, not a mousedown -- think about how normal anchors and buttons function.  You can mousedown on a button and change your mind (drag the cursor off to the side).  I have a fairly sensitive mouse, so I'm actually doing this all the time -- and pages trapping the simple mousedown are frustrating.

kenman Posted on March 16, 2008 04:33:55 AM

I kind of agree with Rob on #10, however, I believe its all in the purpose of the application. If you're using universal, traditional UI elements such as hyperlinks, buttons, etc. then I would not suggest onmousedown, because as Rob points out you're replacing functionality users have already become accustomed to. On the other hand, if your UI is atypical and/or experimental or radical, then it may be useful. Just look for unintneded side-effects, like the loss of 3d-effects on buttons. 

The main point I think is too just realize that onclick and onmousedown are 2 different events for a reason; blindly replacing one with the other is not recommended. Instead, evaluate each situation and then consider its ramifications before applying.

Josh Posted on March 16, 2008 05:24:12 AM

Just a few comments:

#2: I strongly agree. It never ceases to amaze me the number of webmasters who feel the first step in site promotion is to submit their link to hundreds of link directories.

#3: I agree, but I think this tip misses the point of CSS just a little. h1-5, strong, em tags - they all have semantic meaning. Sure, they come with visuals, but mainly they add semantic meaning to information, and search engines love them because of this semantic meaning. They should never be substituted with CSS in the first place -- the point of CSS is merely to add presentation information, not to create semantic meaning.

#7: To be honest, I think most people who would find value in this tip shouldn't be making their own "shell" in the first place, but rather using an existing template/framework that implements accepted HTML/CSS techniques, as they could run into all sorts of problems trying to build their own. On the other side of the fence are the people who've already built their own frameworks, had them peer reviewed and released them to the public. CSS layout techniques are tricky business, and table layout techniques when used by a beginner can ruin a project; reinventing the wheel isn't a good idea either. Just search for "css framework" or "css layout template".

#11: Yahoo's checklist -- http://developer.yahoo.com/performance/index.html#rules -- expands on this area in detail and is definitely worth a read.

Anyway, some great tips there.

BTM Posted on March 16, 2008 05:40:40 AM

"use onmousedown instead of on click" - sorry, but that's the point where I've found your article to be just plain wrong.

Try this: make a webpage with 2 links: one with onclick and one with onmousedown. Click them. Both work? Yes. Now, navigate to them using only keyboard. Click Enter on both. Only the one with onclick will work. Bu using the onsmouseodwn method your cutting all the people that aren't using their mouse (maybe they're under a text console? Maybe they can't use their hands due to some disabilities).

Matt M Posted on March 19, 2008 07:16:34 PM

I suppose I should have been clearer on that onmousedown tip. While there are certainly many cases where onmousedown would be better/faster than onclick (like unique buttons) -- replacing standard web behaviors is usually not a good idea - and link clicking would be one good example of something you shouldn't touch.