As you progress in CSS, there are four important design principles that need to be kept constantly in mind.
Your design should be fluid whenever possible.
If the browser is resized, content should “flow” to fill the space. If your browser view is zoomed in and out, the content should do the same. This enables the widest range of users to enjoy your site, at whatever size, aspect ratio, and resolution they prefer. There will always be exceptions to this: it makes more sense to measure bitmapped images in pixels, and often elements that relate to images need to be measured in pixels to match. But as a general rule, use ems and percentage measurements over static, fixed measurements.“Pixel-perfect” design – trying to set every element to an exact position on a web page – is a mirage.
The browser window is not an A4 sheet of paper. A website user has the ability to scale content up and down, resize their browser,block images, even turn CSS off entirely. A stylesheet is a pragmatic specification of how you would prefer the user to see your content, with the understanding that this is ultimately not under your control.Similarly, having content appear “exactly the same in every browser” is a pipe dream.
Styled content will look different from one browser to the next because of the different technologies and support for standards in each. By all means, you should attempt make your web pages appear approximately the same in most, and support the major browsers that your audience uses, and the recent versions thereof, with the understanding that work, effort and time will increase exponentially the older and more varied the browser support becomes. If a client wants the website to look exactly the same in Netscape 4 as it does in Safari 5, and have the latest bells and whistles, that becomes a real problem.My personal philosophy is, at this time, to support IE10, Firefox 11, Safari 5, Opera 11, Chrome 14, and above. I will, grudgingly, work with IE8, but doing so significantly raises production time for many designs.
You will not always have a call on this. If your client has IE6 and does not wish to upgrade, and you take on the job, that’s what you have to work with. Saying “it looks fine at home” will not be an excuse.
Design with “graceful degradation” in mind.
No visitor to your site should be denied your content because they lack the very latest version of a particular browser or plugin. They may not see it with all the “bells and whistles” added, but they should still see the content. Technologies should be used to enhance content, rather than the website relying on them.This should, at the rational end, be applied to CSS in its entirety: can your website still be used if no CSS is applied at all? That is, after all, how search engines see your site: they index semantic content, not CSS.
No comments:
Post a Comment