I started this series with an article discussing some basic tips to help the casual intertubes surfer. Today let’s talk a little about web design.
1. CSS
One of the more important tools for designing a good website is CSS. Believe it or not people still find this as an optional component. Technically it is, but to put together a website that really pops out to the user its easiest to make use of this. There are certain abilities that CSS grants you that I do not believe can be accomplished with any other method. Overlapping images and absolute positioning of elements being two examples. I think (less of using javascript) there is no other way of accomplishing this. Yes it means you have to learn another “language”, but its really not an entire language. Its mostly an extension to HTML.
2. Validation
One of the important maxims of computer programming is: “Be conservative in what you produce; be liberal in what you accept.”
Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they’re not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash…
That’s quoted directly from the W3D Markup Validation Service help page. The reason why we make validated sites is to ensure our site looks right across all platforms and browsers. Its naive to think you can develop a site on Firefox and assume it will work on all browsers, especially if you have used improper markup.
While you’re at it, you’ll want to validate your CSS too. Checking yourself for errors only helps you get better and learn from your own mistakes. Once you’ve validated your page, they give you some nifty little badges as a reward.
3. Kuler
Adobe makes a great product called Kuler. This can be an invaluable tool when designing a website and inventing a new color scheme for it. There are two versions available: one is an online version and a standalone version (which requires Adobe Air).
4. Web 2.0
The Web 2.0 movement is one of the greatest things to happen to the internet. Its a multifaceted concept; but my favorite part about it is utilizing the internet as a platform, instead of regarding it as a limitation. Prior to this idea, developers focused on the limitations that came with developing applications on the web and trying to find ways around it. Instead, you maximize the services that are only available when developing on the web.
Aside from that, we’ve seen a trend in the overall design (as far as layout and graphics) in modern websites. The sites are designed around the content instead of trying to jam content inside the design. We have brighter colors, flashier graphics, and a prominent KISS ideology.
There really is a lot more to it, which would require an entire blog post if I wanted to go into it in detail, so read that Wikipedia entry if you’re interested.
5. AJAX
Part of the Web 2.0 moment has included a exponential growth in the usage and progressional development of AJAX. This is really neat because it increases your ability to provide dynamic features on your website, but decrease the amount of page refreshing that it requires.
Instead of going to a website to upload an image, press upload, get redirected to another page while it uploads, then finally get redirected to a summary page, everything can happen on the same page. Inline moderation, instant font or color adjustments, and toggling preview captions are just a few examples of what AJAX can do.
AJAX is mostly accomplished with the use of well designed Javascript working with elements inside your site. There are already tons of prebuilt libraries to make many of the AJAX features you may be looking for readily available. One of the more popular being jQuery.
