demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Four Design Principles

design / sites

Estimated reading time: 3 minutes, 34 seconds

As you progress in , there are four important design principles that need to be kept constantly in mind. This succinct design philosophy will influence not only your page design but also the code you write.

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.

This approach, known broadly as or adaptive design means using relative CSS units rather than fixed ones: percentages and ems rather than pixels and centimetres. There will always be exceptions to this: it makes more sense to measure bitmapped images, such as JPEGs, 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, alter the to suit their needs, block images, even turn CSS and / or 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.

This drives many traditional designers crazy: “I want this exactly there. Why can’t I do that?” The answer is that and are not desktop publishing tools, and that web pages are not fixed, static productions, unlike the printed page.

Others, knowing just enough CSS to be dangerous, fall into using position: absolute for everything. In the words of Admiral Akbar: “It’s a trap!” Absolute positioning, while useful in certain limited circumstances, is to be avoided as a general design tool, for reasons discussed earlier.

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.

Meaning: if you use new features of , you are adding a visual aspect or feature that would be nice but not necessary for the user to experience. 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.

This same principle is also applicable to Flash and on the web. 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. (The easiest way to answer this question is to turn off CSS in your browser's Web Developer toolbar and see how your website responds.)

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.