The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Here are 20 top tips and tricks you should be using to give your work that all-important professional edge.
1. Planning: When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.
2. Do it by hand: Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.
There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.
Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.
3. Stylesheets: importing vs linking: There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.
Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:
4. Smarter gradient backgrounds: CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.
Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.
Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.
body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }
5. Commenting: When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.
Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view. Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.
/* CSS comments are enclosed by a forward slash and an asterisk. */
Yes you can brag about your mad design skills and your flashy site effects, but are people actually visiting your site? No matter how amazing you site looks like but if nobody even know about it and you are the only one visiting your site, it'll just be like a Mosa Lisa inside your room.More...
What Will My Site Do?
by Richard F. Hill
Copyright 2005 - Richard F. Hill - All Rights reserved
This is the first of eight articles about website design. Our discussion will deal with some of the issues which need to be considered when developing a new online... More...
The Internet has opened a new world to anyone who wants to own and operate a business. The Internet allows someone to work at home, perhaps out of a garage, and still have customers in all corners of the globe. Wherever the business exists, there is the center of the Internet market. Denver... More...