Web Design Should Be Flexibility, to achieve this, you should:
1. Think from function
Design from the services which you will provide to the users
2. Separate the content and its appearance
· If the italic is for emphasis, using <em> instead of <i>
· Don’t use HTML for presentation
That is: do not use <font> <i> <b> (Where HTML provides an appropriate element, use it. Where it doesn’t, use classes.)
· Using style sheet for presentational information
3. Use style sheet properly
Style sheet is to suggest the appearance of a page, not to control the appearance of a page, and don't rely on style sheet to convey information. Then your pages will “work” fine in any browser, past or future. Browsers which don’t support style sheets simply present pages that look a little on the plain side.
Above all, don’t rely on any aspect of style sheets to work in order for a page to be accessible. Absolute units, like pixels and points are to be avoided, and colour needs to be used carefully, and never relied on.
4. Some pros and cons in style sheet to achieve adaptability:
· Fonts
For font-family, suggest a number of fonts, and cover as many bases as possible. But don’t rely on a font being available regardless of how common it is. In case different systems or devices have different default fonts and few of them overlap.
For font-size, avoid absolute unit, for instead, use relative units like if the body size use em, headings or other things can use proportional sizes like 30% bigger than the body size. In case different systems and devices have different screen resolutions.
· Layout
Margin, page width, indentation etc. should use proportional sizes too. For example: margin can be percentage of the element width which contains them or base on user's font size. E.g. p{ margin: 1.5em;}
· Colour
Use style sheet and avoid convey meanings by only using colour in case people who are red or green blindness.
Original article: http://alistapart.com/article/dao