|
Web Design Tips -
05-31-2008, 07:02 PM
Here is the excerpt of the Twenty Web Design Tips from Professionals
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.
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.
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.
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.
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.
6. Use simple PHP to build sites
There?s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link.
7. Set fonts using ems
Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can?t be resized in Internet Explorer.
8. IE Box Model Hack
Sooner or later you?ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box?s dimensions, rather than adding it outside the box. This can wreck layouts.
9. Space saver
Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason.
10. Test, test and test again
While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.
11. Format fundamentals
In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There?s also an overlooked third format, PNG.
12. The ?title? and ?alt? attributes
Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page
13. The correct format for pseudo classes
For text rollover effects, it?s important that the pseudo classes are in the right order, or they won?t work correctly in all browsers.
14. Use semantic mark-up
The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work.
15. Favicons
Favicons are the little 16?16 pixel icons that appear in your favourites lists and the title bars of web sites. They?re quick and easy to add: save a graphic in .ico format and put it in your site?s root folder. It?s as simple as that.
16. Change capitalisation using CSS
If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work.
17. Wrapping text around images
For a quick and dirty way of wrapping text around images, use the image?s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.
18. Universal character sets
Character sets are an important part of a web page?s definition, but they?re probably the least understood component. Character sets, which are defined in a web page?s invisible head section, tell the browser what method is being used to encode the characters.
19. Print styles
When people print web pages, often they?re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it?s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one.
20. Learn from others
Finally, a quick and simple tip: learn from great sites built by others. Any site?s HTML is easily accessible by viewing a page?s source code. See how others have done things and apply their methods to your own work.
|