Tips in Modern Web Design
HTML Tables for layout – too old school.
CSS drives websites of today. There are still some sites; however, that use tables for their layout. Tables should only be used for tabular data, and that’s it. No excuses. Tables intervene with your site’s accessibility, flexibility, and functionality.
Background color – declare it.
Declaring the background color will enable users with non-default browser background colors to appreciate your design instead of seeing awkward colors through a transparent body.
Tabbed navigation elements – benefit from it.
Using the tabbed navigation technique will allow you to keep a rather large content in a compact space thus giving you a clean, organized design.
Modal windows – classy.
In the spirit of conserving space, modal windows are exceptional in presenting additional information that has no space in your intended layout. Modal windows are floating windows that allow you to show larger images, extra content, forms, etc.
Links – style them accordingly.
Links should stand out from the rest of the text. They should be distinguishable so that users won’t have to guess whether or not your text is intended to be a link.
Underlining text that is not a link – what are you thinking?
Underlining text that should not be underlined will cause a lot of confusion. Furthermore, clicking underlined text that is not linked gives the user some degree of disappointment. But you could still underline text that is not a link under certain circumstances.
The :active property – use it!
The link property :active is not only used for adding special style to an activated link or element, but it also serves as a feedback or confirmation to the users that the link has been clicked. This way, if there are any delays, the user would know not to click the link again with the presumption that the request is being processed.
ALL-CAPS – avoid.
All-caps is easily translated as shouting. If for artistic reasons you couldn’t do away with an all-caps text, then use CSS to style it. This is what the property “text-transform” was built for.
Clean coding – adhere to this.
Write your codes as clean as you can. Clean coding eliminates confusion and increases maintainability. This will benefit you, your site and others.
Stylesheets – always on top.
Situating your stylesheets inside the document allows the page to render progressively and therefore giving the impression that the page loads considerably faster.
Scripts – always at the bottom.
To the same effect as putting stylesheets on top, placing scripts at the bottom of the page will make it load faster.