In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.

Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.

You can jump straight to:

• CSS3
• HTML5
• IE Filtering
• Flexible Layouts
• Layout Grids
• Efficient CSS Development Practices
• CSS Performance
• Font Embedding and Replacement

CSS3

CSS3, the newest version of CSS that is now being partially supported by most browsers, is the primary thing you need to know in order to create modern CSS web sites, of course. CSS is a styling language, so it’s no surprise that most of what’s new in CSS3 is all about visual effects. But CSS3 is about more than progressive enhancement and pretty typography. It can also aid usability by making content easier to read, as well as improve efficiency in development and page performance.

There are too many CSS3 techniques to cover in a single article, let alone an article that isn’t just about CSS3! So, we’ll go through the basics of the most important or supported CSS3 techniques and point you to some great resources to learn more in-depth.

CSS3 Visual Effects

Semi-transparent Color
Aids in: progressive enhancement, efficiency

RGBA allows you to specify a color by not only setting the values of red, green, and blue that it’s comprised of, but also the level of opacity it should have. An alternative to RGBA is HSLA, which works the same way, but allows you to set values of hue, saturation, and lightness, instead of values of red, green, and blue. The article Color in Opera 10 — HSL, RGB and Alpha Transparency explains how HSLA can be more intuitive to use than RGBA.

The 24 Ways web site makes extensive use of RGBA to layer semi-transparent boxes and text over each other.

RGBA or HSLA isn’t just about making things look cool; it can also improve your web site’s efficiency. You don’t have to take time to make alpha-transparent PNGs to use as backgrounds, since you can just use a color in the CSS, and the user agent doesn’t have to download those images when loading the site.

For more on how to use RGBA and HSLA, including fallback methods for browsers that don’t support it, see:

• Working With RGBA Colour (24 ways)
• RGBa Browser Support (includes a hack for IE, by CSS-Tricks)
• Flexible Color Schemes in Layouts with RGBa (Build Internet!)
• Is CSS3 RGBa ready to rock? (screencast) (For a Beautiful Web)
• Playing Around with CSS3 Colors (Lateral Code)
• Color in Opera 10 — HSL, RGB and Alpha Transparency (Opera Developer Community)
• CSS3 HSL & HSLA (Zen Elements)

Styling Backgrounds and Borders
Aids in: progressive enhancement, efficiency

CSS3 offers a whole host of new ways to style backgrounds and borders, often without having to use images or add extra divs. Most of these new techniques already have good browser support, and since they’re mainly used for purely cosmetic changes, they’re a good way to get some progressive enhancement goodness going in your sites right away.

Here are some of the new things CSS3 lets you do with backgrounds:

• Multiple backgrounds on a single element: You can now add more than one background image to an element by listing each image, separated by commas, in the background-image property. No more nesting extra divs just to have more elements to attach background images onto!
• More control over where backgrounds are placed: The new background-clip and background-origin properties let you control if backgrounds are displayed under borders, padding, or just content, as well as where the origin point for background-position should be.
• Background sizing: You can scale background images using the new background-size property. While scaling won’t look good on many background images, it could be really handy on abstract, grunge-type backgrounds, where tiling can be difficult and where some image distortion would be unnoticeable.
• Gradients: While just part of a CSS3 draft spec, Safari, Chrome and Firefox support declaring multiple color and placement values in the background-image property to create gradients without images. This allows the gradients to scale with their container — unlike image gradients — and eliminates the need for page users to download yet another image while viewing your site.

CSS3 lets you do the following with borders:

• Rounded corners: Use the border-radius-property to get rounded corners on divs, buttons, and whatever else your heart desires — all without using images or JavaScript.
• Images for borders: With CSS 2.1, the only way to create a graphic border was to fake it with background images, often multiple ones pieced together on multiple divs. You can now add unique borders without having to use background images by adding the images to the borders directly, using the new border-image property, which also allows you to control how the images scale and tile.

The border-radius property can be used to round corners and even create circles out of pure CSS, with no images needed. (Stunning CSS3 web site)

These background and border techniques have already been covered well in a lot of great articles and tutorials, so check these out for the details:

• Backgrounds In CSS: Everything You Need To Know
• Take Your Design To The Next Level With CSS3
• CSS3 borders, backgrounds and box-shadows (Opera Developer Community)
• Background images no longer restricted to original size: explore the space with background-size (Mozilla Developer Center)
• Multiple Backgrounds and CSS Gradients (Snook.ca)
• Quick Tip: Understanding CSS3 Gradients (Nettuts+)
• Using gradients (Mozilla Developer Center)
• Speed Up with CSS3 Gradients (CSS-Tricks)
• Gradient syntax generators are available from westciv.com (linear and radial) and glrzad.com
• The CSS3 border-radius property (Blogging CSS)
• CSS: border-radius and -moz-border-radius (The Art of Web)
• Table of CSS3 border-radius Compliance (Muddled Ramblings and Half-Baked Ideas)
• border-image in Firefox (John Resig)
• Meet a ninja living in browsers (on border-image, from lrbabe.com)
• The New Hotness: Using CSS3 Visual Effects (see third tutorial on border-image)

Drop Shadows
Aids in: progressive enhancement, adaptability, efficiency

Drop shadows can provide some visual polish to your design, and now they’re possible to achieve without images, both on boxes and on text.

The box-shadow property has been temporarily removed from the CSS3 spec, but is supposed to be making its re-appearance soon. In the meantime, it’s still possible to get image-free drop shadows on boxes in Firefox and Safari/Chrome using the -moz-box-shadow and -webkit-box-shadow properties, respectively, and in Opera 10.5 using the regular box-shadow property with no prefix. In the property, you set the the shadow’s horizontal and vertical offsets from the box, color, and can optionally set blur radius and/or spread radius.

The Cherry web site uses drop shadows created with box-shadow on many boxes and buttons.

The text-shadow property adds drop shadows on — you guessed it — text. It’s supported by all the major browsers except — you guessed it — Internet Explorer. This makes it the perfect progressive enhancement candidate — it’s simply a visual effect, with no harm done if some users don’t see it. Similarly to box-shadow, it takes a horizontal offset, vertical offset, blur radius and color.

Using text-shadow keeps you from resorting to Flash or images for your text. This can speed up the time it takes you to develop the site, as well as speed up your pages. Avoiding Flash and image text can also aid accessibility and usability; just make sure your text is still legible with the drop shadow behind it, so you don’t inadvertently hurt usability instead!

For more on box and text drop shadows, see:

• Take Your Design To The Next Level With CSS3
• Shadow boxing with -moz-box-shadow (relevant to non-Mozilla browsers to, from hacks.mozilla.org)
• CSS3 Trials: Box-Shadow And More (Chris Casciano’s Place Name Here)
• CSS3 Box Shadow in Internet Explorer [Blur-Shadow] (Chris Casciano’s Place Name Here)
• Mozilla Developer Center text-shadow (includes browser support chart and notes)
• Text-Shadow Exposed: Make cool and clever text effects with css text-shadow (Kremalicious)
• Using Text Shadow in HTML/CSS (includes a hack for IE, by admixWeb)
• Westciv’s box-shadow and text-shadow generators

Transforms
Aids in: progressive enhancement, adaptability, efficiency

CSS3 makes it possible to do things like rotate, scale, and skew the objects in your pages without resorting to images, Flash, or JavaScript. All of these effects are called “transforms.” They’re supported in Firefox, Safari, Chrome, and Opera 10.5.

You apply a transform using the transform property, naturally (though for now you’ll need to use the browser-specific equivalents: -moz-transform, -webkit-transform, and -o-transform). You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object.

In the transform property, you specify the type of transform (called “transform functions”), and then in parentheses write the measurements needed for that particular transform. For instance, a value of translate(10px, 20px) would move the element 10 pixels to the right and 20 pixels down from its original location in the flow. Other supported transform functions are scale, rotate, and skew.

The BeerCamp SXSW 2010 site scales and rotates the sponsor logos on hover.

For the full syntax on these transform functions, as well as examples of how to use them, see:

• What You Need To Know About Behavioral CSS
• CSS3 transitions and 2D transforms (Opera Developer Community)
• CSS: Animation Using CSS Transforms (The Art of Web)
• Mozilla Developer Center -moz-transform (includes notes and links on using the more complicated matrix function)
• Going Nuts with CSS Transitions (24 Ways)
• Text Rotation with CSS (Snook.ca)
• The New Hotness: Using CSS3 Visual Effects
• 3D Transforms (Surfin’ Safari)
• Westciv’s transforms generator

Animation and Transitions
Aids in: progressive enhancement, efficiency

Animation is now no longer the solely the domain of Flash or JavaScript — you can now create animation in pure HTML and CSS. Unfortunately, CSS3 animation and transitions do not have very good browser support, but as with most of the effects we’ve talked about so far, they’re great for adding a little non-essential flair.

CSS3 transitions are essentially the simplest type of animation. They smoothly ease the change between one CSS value to another over a specified duration of time. They’re triggered by changing element states, such as hovering. They’re supported by Safari, Chrome, and Opera 10.5.

To create a transition, all you have to do is specify which elements you want to apply the transition to and which CSS properties will transition, using the transition-property property. You’ll also need to add a transition-duration value in seconds (“s” is the unit), since the default time a transition takes is 0 seconds. You can add them both in the transition shorthand property. You can also specify a delay or a timing function to more finely tune how the two values switch.

Transitions are easiest to understand with live examples, so check out:

• What You Need To Know About Behavioral CSS
• CSS3 Transitions – Are We There Yet? (hakoniemi)
• CSS3 transitions and 2D transforms (Opera Developer Community)
• CSS Transitions 101 (Webdesigner Depot)
• CSS: Transition Timing Functions (The Art of Web)
• The New Hotness: Using CSS3 Visual Effects

Beyond transitions, full-fledged animations with multiple keyframes are also possible with CSS3 (but currently only supported in Safari/Chrome). First, you give the animation a name and define what the animation will do at different points (keyframes, indicated with percentages) through its duration. Next, you apply this animation to an element using the animation-name, animation-duration, and animation-interation-count properties. You could also set a delay and timing function, just like with transitions. For details, see:

• What You Need To Know About Behavioral CSS
• Pushing Your Buttons With Practical CSS3
• CSS Animations (24 Ways)
• CSS Animation (Surfin’ Safari)
• CSS3 In Transition (a brief article on the usability considerations of animation and transitions, by Trent Walton)
• 50 Awesome Animations made with CSS3 (1stwebdesigner)

CSS3 Usability / Readability Enhancements

Most the CSS3 techniques we’ve gone over so far have been purely cosmetic effects that aid progressive enhancement. But CSS3 can also be used to improve the usability of your pages.

Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability

Some pieces of text are more readable in narrow, side-by-side columns, similar to traditional newspaper layout. You can tell the browser to arrange your text into columns by either defining a width for each column (the column-width property) or by defining a number of columns (the column-count property). Other new properties let you control gutters/gaps, rule lines, breaking between columns and spanning across columns. (For now, you need to use the browser-specific prefixes of -moz and -webkit.) This is another one of those techniques that can harm instead of aid usability if used improperly, as explained in “CSS3 Multi-column layout considered harmful,” so use it judiciously.

For details, see:

• Remembering: The CSS3 Multi-Column Layout Module (Web Designer Notebook)
• Columns (quirksmode)
• Take Your Design To The Next Level With CSS3

Controlling Text Wrapping and Breaking
Aids in: adaptability

CSS3 gives you more control over how blocks of text and individual words break and wrap if they’re too long to fit in their containers. Setting word-wrap to break-word will break a long word and wrap it onto a new line (particularly handy for long URLs in your text). The text-wrap property gives you a number of options for where breaks may and may not occur between words in your text. The CSS2 white-space property has now in CSS3 become a shorthand property for the new white-space-collapse and text-wrap properties, giving you more control over what spaces and line breaks are preserved from your markup to the rendered page. Another property worth mentioning, even though
it’s not currently in the CSS3 specification, is text-overflow, which allows the browser to add an ellipsis character (…) to the end of a long string of text instead of letting it overflow.

For details, see:

• Mozilla Developer Center’s reference on word-wrap and white-space (relevant to non-Mozilla browsers, and includes notes on browser compatibility)
• How to prevent HTML tables from becoming too wide (using word-wrap and overflow for various browsers, from 456 Berea Street)
• Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable)
• The ‘white-space’ Property In CSS (Safalra’s Website)
• CSS text-overflow (css3.com)
• Using ellipsis with HTML and CSS (The Electric Toolbox)
• The Future Of CSS Typography

Media Queries
Aids in: adaptability, efficiency

CSS2 let you apply different styles to different media types — screen, print, and so on. CSS3’s media queries take this a step further by letting you customize styles based on the user’s viewport width, display aspect ratio, whether or not his display shows color, and more. For instance, you could detect the user’s viewport width and change a horizontal nav bar into a vertical menu on wide viewports, where there is room for an extra column. Or you could change the colors of your text and backgrounds on non-color displays.

This demo file from Opera uses media queries to rearrange elements and resize text and images based on viewport size.

Media queries couldn’t come at a better time — there is more variety in the devices and settings people use to browse the web than ever before. You can now optimize your designs more precisely for these variations to provide a more usable and attractive design, but without having to write completely separate style sheets, use JavaScript redirects, and other less efficient development practices.

Media queries are supported to some degree by all the major browsers except IE, and there are lots of great articles and tutorials explaining how to use them right now:

• A short introduction to media queries in Firefox 3.5 (applies to other browsers too, from Mozilla Hacks)
• Safe media queries (Opera Developer Community)
• The bleeding edge of web: media queries (Helephant.com)
• Media Queries and CSS3 Experiments — Varying Columns (Unintentionally Blank)
• CSS3 – a big storm is coming (Reinhold Weber) and Using CSS3 media queries to achieve multiple columns on browser resize (mindgarden) show how to use the new multiple columns technique described above in conjunction with media queries
• Take Your Design To The Next Level With CSS3
• Test your browser’s media queries support at Virtuelvis

Media queries are particularly helpful in serving alternate styles to small-screen mobile devices, as these articles and tutorials explain:

• Return of the Mobile Stylesheet (A List Apart)
• Coding for the mobile web (Think Vitamin)
• How to serve the right content to mobile browsers (Opera Developer Community)
• Optimizing Web Content (on iPhone, from Safari Web Content Guide)
• Mobile optimised websites using CSS3 Media Queries (Alex Gibson)
• Determine iPhone orientation using CSS (The CSS Ninja)

For other options on how to deal with mobile devices, see Mobile Web Design Trends For 2009.

Improving Efficiency Through CSS3

Many of the visual effect properties of CSS3 that we’ve gone over have a great bonus in addition to making your design look great: they can improve efficiency, both in your development process and in the performance of the pages themselves.

Any CSS3 property that keeps you from having to create and add extra images is going to reduce the time it takes you to create new pages as well as re-skin existing ones. Less images also mean less stuff for the server to have to send out and less stuff for the users to download, both of which increase page loading speed.

CSS3 properties that keep you from having to add extra divs or extra classes can also reduce your development time as well as file size. We’ve already gone over some great techniques that help with this, but there are a few more worth mentioning.

The box-sizing Property
Aids in: efficiency

In addition to the div-conserving properties we’ve already talked about, the box-sizing property can also help limit your div use in certain situations.

In the traditional W3C box model of CSS 2.1, the value you declare for a width or height controls the width or height of the content area only, and then the padding and border are added onto it. (This is called the content-box model.) If you’ve worked with CSS for a while, you’re probably used to the content-box box model and don’t really think much about it. But, it can lead you to add extra divs from time to time. For instance, if you want to set a box’s width and padding in different units of measurement from each other, like ems for the width and pixels for the padding, it’s often easiest to nest another div and apply the padding to this instead, to make sure you know how much total space the box will take up. In small doses, nesting additional divs simply to add padding or borders is not a great sin. But in complicated designs, the number of extra divs can really add up, which adds to both your development
time and the file size of the HTML and CSS.

Setting the new box-sizing property to border-box instead of content-box solves this problem so you can get rid of all those extra divs. When a box is using the border-box box model, the browser will subtract the padding and border from the width of the box instead of adding it. You always know that the total space the box takes up equals the width value you’ve declared.

In the traditional box model (bottom image), padding and border are added onto the declared width. By setting box-sizing to border-box (top image), the padding and border are subtracted from the declared width.

The box-sizing property has good browser support, with the exception of IE 6 and IE 7. Unlike the more decorative CSS3 properties, however, lack of support for box-sizing could cause your entire layout to fall apart. You’ll have to determine how serious the problem would be in your particular case, whether it’s worth living with or hacking, or whether you should avoid using box-sizing for now.

For details, see:

• CSS3 box-sizing attribute (Helephant.com)
• CSS3 ‘box-sizing’ concept (James Hopkins)

CSS3 Pseudo-Classes and Attribute Selectors
Aids in: progressive enhancement, efficiency, modularity, rich typography

CSS has several really useful selectors that are only now coming into common use. Many of these are new in CSS3, but others have been around since CSS2, just not supported by all browsers (read: IE) until recently, and thus largely ignored. IE still doesn’t support them all, but they can be used to add non-essential visual effects.

Taking advantage of these newer, more advanced selectors can improve your efficiency and make your pages more modular because they can reduce the need for lots of extra classes, divs, and spans to create the effects you want to see. Some selectors even make certain effects possible that you can’t do with classes, such as styling the first line of a block of text differently. These types of visual effects can improve the typography of your site and aid progressive enhancement.

[IMAGE?]

For details, see:

• Take Your Design To The Next Level With CSS3
• Taming Advanced CSS Selectors
• CSS 3 selectors explained (456 Berea Street)
• Browser support charts from kimblim.dk and l-c-n.com
• Keith Clark’s ie-css3.js emulates support for all CSS3 pseudo selectors to IE, via JavaScript

Read these articles and tutorials for examples of how to put advanced selectors to practical use right now:

• Cleaner Code with CSS3 Selectors (24 Ways)
• A Look at Some of the New Selectors Introduced in CSS3 (Inspect Element)
• Image management, naming and attribute selectors (For a Beautiful Web)
• CSS 3 attribute selectors (Opera Developer Community)
• Styling a Poem with Advanced CSS Selectors (Web Designer Notebook)

HTML5

Although this article is focused on modern CSS techniques, you can’t have great CSS-based web pages without great markup behind them. Although HTML5 is still in development, and although debate continues about its strengths and weaknesses, some web developers are already using it in their web pages. While HTML 4.01 and XHTML 1.0 are still great choices for the markup of your pages, it’s a good idea to start learning what HTML5 has to offer so you can work with it comfortably in the future and perhaps start taking advantage of some of its features now. So, here is a brief overview of how HTML5 can help with our five modern CSS-based web design characteristics (progressive enrichment, adaptive to diverse users, modular, efficient, typographically rich).

Note: Many of these techniques are not supported in enough browsers yet to make their benefits really tangible, so think of this section as, perhaps, “here’s how HTML5 can aid these five characteristics in the future.”

New Structural Markup

Aids: adaptability, modularity, efficiency

HTML5 introduces a number of new semantic elements that can add more structure to your markup to increase modularity. For instance, inside your main content div you can have several article elements, each a standalone chunk of content, and each can have its own header, footer, and heading hierarchy (h1 through h6). You can further divide up an article element with section elements, again with their own headers and footers. Having clearer, more semantic markup makes it easier to shuffle independent chunks of content around your site if needed, or syndicate them through RSS on other sites and blogs.

In the future, as user agents build features to take advantage of HTML5, these new elements could also make pages more adaptable to different user scenarios. For instance, web pages or browsers could generate table of contents based on the richer hierarchy provided by HTML5, to assist navigation within a page or across a site. Assistive technology like screen readers could use the elements to help users jump around the page to get straight to the important content without needing “skip nav” links.

Although many of these benefits won’t be realized until some unforeseen time in the future, you can start adding these new elements now, so that as soon as tools pop up that can take full advantage of them, you’ll be ready. Even if your browser doesn’t recognize an element, you can still style it — that’s standard browser behavior. Well, in every browser but IE. Luckily, you can easily trick IE into styling these elements using a very simple piece of JavaScript, handily provided by Remy Sharp.

Of course, you usually can’t depend on all your users having JavaScript enabled, so the very safest and most conservative option is to not use these new structural elements just yet, but use divs with corresponding class names as if they were these new elements. For instance, where you would use an article element, use a div with a class name of “article.” You can still use the HTML5 doctype — HTML5 pages work fine in IE, as long as you don’t use the new elements. You can then later convert to the new HTML5 elements easily if desired, and in the meantime, you can take advantage of the more detailed HTML5 validators. Also, using these standardized class names can make updating the styles easier for both you and others in your team, and having consistent naming conventions across sites makes it easier for users with special needs to set up user style sheets that
can style certain elements in a needed way.

For more on HTML5 markup, see:

• HTML5 and The Future of the Web
• HTML 5 Cheat Sheet (PDF)
• Coding A HTML 5 Layout From Scratch
• HTML5 id/class name cheatsheet (@boblet)
• HTML 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)
• HTML5 Doctor’s articles on header, section, aside, nav, footer
• @boblet’s articles on div, section, and article; nav, aside, figure, and footer; and header, hgroup, and h1-h6
• Bruce Lawson’s articles on converting his blog to HTML5, part 1 and part 2

Reducing JavaScript and Plug-in Dependence

Aids in: adaptability, efficiency

A number of the new elements and features in HTML5 make effects possible with pure markup that used to be possible only with JavaScript or various third-party plug-ins, like Flash or Java. By removing the need for JavaScript and plug-ins, you can make your pages work on a wider variety of devices and for a wider variety of users. You may also make your development process quicker and more efficient, since you don’t have to take the time to find the right script or plug-in and get it all set up. Finally, these techniques may be able to boost the speed of your pages, since extra files don’t have to be downloaded by the users. (On the other hand, some may decrease performance, if the built-in browser version is slower than a third-party version. We’ll have to wait and see how browsers handle each option now and in the future.)

Some of the features that reduce JavaScript and plug-in dependence are:

• New form elements and attributes. HTML5 offers a bunch of new input types, such as email, url, and date, that come with built-in client-side validation without the need for JavaScript. There are also many new form attributes that can accomplish what JavaScript used to be required for, like placeholder to add suggestive placeholder text to a field or autofocus to make the browser jump to a field. The new input types degrade to regular inputs in browsers that don’t support them, and the new attributes are just ignored, so it doesn’t hurt unsupporting browsers to start using them now.

  Of course, you’ll have to put in fallback JavaScript for unsupporting browsers, negating the “no JavaScript” benefits for the time being. (Or, depend on server-side validation—which you always ought to have in place as a backup behind client-side validation anyway—to catch the submissions from unsupporting browsers.) Still, they offer a nice usability boost for users with the most up to date browsers, so they’re good for progressive enhancement.

• The canvas element. The canvas element creates a blank area of the screen that you can create drawings on with JavaScript. So, it does require the use of JavaScript, but it removes the need for Flash or Java plug-ins. It’s supported in every major browser but IE, but you can make it work in IE easily using the ExplorerCanvas script.
• The video and audio elements. HTML5 can embed video and audio files directly, just as easily as you would add an image to a page, without the need for any additional plug-ins.

Some of the new input types in HTML5 will bring up widgets, such as the calendar date picker seen with the datetime input type in Opera, without needing any JavaScript. (HTML5 input types test page)

For more on these features, see:

• Get Ready for HTML 5 (covers forms and canvas, from A List Apart)
• A Form of Madness (Dive Into HTML5)
• Have a Field Day with HTML5 Forms (24 Ways)
• The webforms2 script adds support for the new form elements and attributes to browsers that don’t currently support them.
• How to Draw with HTML 5 Canvas (Carsonified)
• Canvas tutorial (Mozilla Developer Center)
• HTML 5 canvas – the basics (Opera Developer Community)
• The video element (HTML5 Doctor)
• Introduction to HTML5 video (Opera Developer Community)
• Native audio in the browser (HTML5 Doctor)

IE Filtering

Aids in: progressive enhancement

IE 6 doesn’t seem to be going away anytime soon, so if you want to really make sure your pages are progressively enhanced, you’re going to have to learn how to handle it. Beyond ignoring the problem or blocking IE 6 altogether, there are a number of stances you can take:

• Use conditional comments to fix IE’s bugs: You can create separate style sheets for each version of IE you’re having problems with and make sure only that version sees its sheet. The IE sheets contain only a few rules with hacks and workarounds that the browser needs.
• Hide all main styles from IE and feed it very minimal styles only: This is another conditional comment method, but instead of fixing the bugs, it takes the approach of hiding all the complex CSS from IE 6 to begin with, and only feeding it very simple CSS to style text and the like. Andy Clarke calls this Universal Internet Explorer 6 CSS.
• Use JavaScript to “fix” IE: There are a number of scripts out there that can make IE 6 emulate CSS3, alpha-transparent PNGs, and other things that IE 6 doesn’t support. Some of the most popular are ie7-js, Modernizr, and ie-css3.js.

In addition to the resources linked in the text above, you can learn more about how to handle IE at:

• How To Support Internet Explorer and Still Be Cutting Edge
• CSS3 Solutions for Internet Explorer
• How to Handle IE6: Aggressive Graceful Degradation (Monday by Noon)
• Definitive Guide to Taming the IE6 Beast (Six Revisions)
• Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs (Virtuosi Media)
• Conditional comments (quirksmode)
• Wrapping Your Head around Downlevel Conditional Comments (Perishable Press)

Flexible Layouts

Aids in: adaptability

One of the main ways you can make your sites adaptable to your users’ preferences is to create flexible instead of fixed-width layouts. We’ve already gone over how media queries can make your pages more adaptable to different viewport widths, but creating liquid, elastic, or resolution-dependent layouts can be used instead of or in conjunction with media queries to further optimize the design for as large a segment of your users as possible.

• Liquid layouts: Monitor sizes and screen resolutions cover a much larger range than they used to, and mobile devices like the iPhone and iPad let the user switch between portrait and landscape mode, changing their viewport width on the fly. Liquid layouts, also called fluid, change in width based on the user’s viewport (eg, window) width so that the entire design always fits on the screen without horizontal scrollbars appearing. The min-width and max-width properties and/or media queries can and should be used to keep the design from getting too stretched out or too squished at extreme dimensions.
• Elastic layouts: If you want to optimize for a particular number of text characters per line, you can use an elastic layout, which changes in width based on the user’s text size. Again, you can use min- and max-width and/or media queries to limit the degree of elasticity.
• Resolution-dependent layouts: This type of layout, also called adaptive layout, is similar to media queries, but uses JavaScript to switch between different style sheets and rearrange boxes to accommodate different viewport widths.

For details on creating flexible layouts, see:

• 70+ essential resources for creating liquid and elastic layouts (zomigi.com)
• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
• Adaptive CSS-Layouts: New Era In Fluid Layouts?
• Resolution dependent layout update (The Man in Blue)
• Dynamic Layout (Fortes)
• Create Your Own Sliding Resizable Grid (Hackito Ergo Sum)

Layout Grids

Aids in: modularity, efficiency

Designing on a grid of (usually invisible) consistent horizontal and vertical lines is not new — it goes back for centuries — but its application to web design has gained in popularity in recent years. And for good reason: a layout grid can create visual rhythm to guide the user’s eye, make the design look more clean and ordered, and enforce design consistency.

Grids can also make your designs more modular and your development more efficient because they create a known, consistent structure into which you can easily drop new elements and rearrange existing ones without as much thought and time as it would take in a non-grid layout. For instance, all of your elements must be as wide as your grid’s column measurement, or some multiple of it, so you can easily move an element to another spot on the page or to another page and be assured that it will fit and look consistent with the rest of the design. At worst, you’ll need to adjust the other elements’ widths around it to a different multiple of the column measurements to get the new element to fit, but even this is not too work-intensive, as there is only a handful of pre-determined widths that any element can have.

All of the content of The New York Times site falls into a grid of five columns, plus a thin column on the left for navigation.

To learn how to use grids, see:

• Designing With Grid-Based Approach
• Grid-Based Design: Six Creative Column Techniques
• Grid design basics: Grids for Web page layouts (Opera Developer Community)
• Five simple steps to designing grid systems — Preface (five-part series, with tutorials on how to create fixed-width and fluid grids, by Mark Boulton)
• Fluid Grids (A List Apart)
• Grid-Based Web Design, Simplified (Design Informer)
• The Grid System (portal to articles, tools, templates, forum, and more)
• Ultimate Guide To Grid-Based Web Design: Techniques and Tools (Noupe)
• Roundup of CSS Grid Generators & CSS Grid Layout Generators (also includes list of grid articles, from Web Design Tools)
• Inspiration galleries Design By Grid and Grid Based Designs

Efficient CSS Development Practices

Aids in: modularity, efficiency

Layout grids and many of the CSS3 techniques we’ve gone over have the side benefit of making your CSS more modular and helping you write and maintain CSS more efficiently. There are also a few CSS development practices that you can use with any of the techniques we’ve already covered in order to reduce the time it takes you to write the CSS for those techniques in the first place, as well as save you time reusing components in your pages.

CSS Frameworks

A CSS framework is a library of styles that act as building blocks to create the standard pieces you might need in your site. While CSS frameworks differ greatly in depth and breadth, most popular, publicly-distributed frameworks contain some sort of layout grid, as well as standard styles for text, navigation, forms, images, and more. It’s a good idea to create your own CSS framework, perhaps based on one of the most popular ones; it can be as simple as standardizing the IDs and classes you tend to use on every project and creating a starter style sheet for yourself.

Good CSS frameworks provide you with a solid starting point for your designs, cutting down your time spent developing, testing, tweaking, and updating. They can also reduce the time others (your team members or those who inherit your sites) spend modifying your CSS, as everyone is working from a standard set of conventions. Frameworks can make your designs more modular by giving you a standard set of classes that can be reused from page to page easily, breaking the styles down into separate sheets that can be applied independently to pages on an as-needed basis, or allowing you to plug in various types of content without needing to invent new classes for it.

But, frameworks have their share of problems too. For instance, publicly-distributed (as opposed to your own private) frameworks tend to have large file sizes, as they need to work for any type of site with any type of content; if they’re separated into multiple sheets, they can further damage page speed since every HTTP request takes time. We won’t get into the full list of pros and cons here, but there are ways to work around many of them, so check out the following articles for the details. You’ll also find links to the most popular CSS frameworks.

• CSS Frameworks + CSS Reset: Design From Scratch
• Jump-start Your Development With CSS Frameworks (CSS Newbie)
• What Are The Benefits of Using a CSS Framework? (CSS-Tricks)
• CSS Frameworks (presentation from Web Directions South 2009)
• 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started (Noupe)
• Frameworks for Designers (considerations when making your own framework, from A List Apart)
• Guidelines for Developing Your Own CSS Framework (W3Avenue)
• Creating a Time Saving CSS Template (Arbenting)
• Why I don’t use CSS Frameworks (Warpspire)
• Please do not Use CSS Frameworks (Monday by Noon)
• What’s not to love about CSS frameworks? (JeffCroft.com)
• Making Modular Layout Systems (24 Ways)
• Definitive List of CSS Frameworks – Pick Your Style (W3Avenue)
• Compare CSS frameworks at bestwebframeworks.com

Object-oriented CSS (OOCSS)

Nicole Sullivan coined the term object-oriented CSS (OOCSS) for her method of creating self-contained chunks of HTML (modules) that can be reused anywhere in the page or site and that any class can be applied to. Some of the main principles of OOCSS are:

• using primarily classes instead of IDs
• creating default classes with multiple, more specific classes added on to elements
• avoiding dependent selectors and class names that are location-specific
• leaving dimensions off module styles so the modules can be moved anywhere and fit
• styling containers separately from content

OOCSS aims to make your CSS development more efficient, as well as to make the CSS itself more modular and less redundant, which reduces file sizes and loading speed.

• Object Oriented CSS (the original blog post, presentation, and framework, at stubbornella.com)
• Object Oriented CSS (OOCSS): The Lowdown (TYPESETT)
• Object-Oriented CSS: What, How, and Why (Nettuts)

CSS Generation

When it comes to writing CSS quickly, what could be quicker than having some piece of software write it for you? Now, please don’t think that I’m advocating not learning CSS and having a tool write a complete style sheet for you. That is a bad, bad idea. But, there are some quality tools out there that can give you a headstart with your CSS, just to shave a little time off the front of your CSS development process. M

Web design is a fickle industry. Just like every other form of artistic expression, Web design has undergone a continuous and surprisingly fast evolution. Once a playground for enthusiasts, it has now become a mature rich medium with strong aesthetic and functional appeal. In fact, we are experiencing what could be the golden era of Web design — or at least the best period thus far. We have powerful new tools at our disposal (CSS3, HTML5, font-embedding, etc.), a plethora of freely available resources, a strong design community and also (if you needed any more!) reliable support of Web standards in the major browsers.

We’re seeing better interaction design and more aesthetically pleasing designs. And we’re seeing more personal, engaging and memorable sites, too. But what exactly is making the difference? What new directions is Web design heading in today? What new techniques, concepts and ideas are becoming important? In this article, we present some observations on the current state of Web design. We describe existing and upcoming trends and explain how Web design might evolve in the coming months and years. We’ll also touch on what we as Web designers should be ready for to keep abreast of new challenges and opportunities.

Please note: this article is the first in our series on the current state of web design. To make sure you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

1. Design For Delight

As designers, our job is to communicate ideas effectively. For every particular message, we create a context in which the message would work best, guiding users to achieving their tasks, gaining their trust or convincing them of whatever we’re communicating. Of course, there are endless ways to create this context. One of them is to design for visual aesthetics, surprise, joy, happiness — design for delight; design to be memorable and remarkable.

Attractive things work better and help focus and keep the user’s attention. Memorable design increases excitement for products and brands, leading to increased engagement. In fact, a strong, reliable emotional relationship between your clients and their audience could be the best thing that ever happens to your career.

Brizk design studio has an aesthetically stunning design, with subtle animations, beautiful typography and a clean layout. When you hover over the red bird in the footer, a small Twitter box is revealed. First-class design that is a pure delight.

Although the vast majority of brands are still silent, passive and impersonal, we’ve observed more websites trying hard to engage our senses, whether through a strong aesthetic appeal, through witty animations in the content block or simply through a little extra attention to small design elements on the “About” page. Such designs are beautiful to look at, fun to navigate but, most importantly, memorable — for the simple reason that they are different. By adding delightful personal touches to your designs, you stand out from the crowd and give visitors something to talk about and share with friends and colleagues. And that’s a good start.

You can elicit delight in a variety of settings: on your maintenance mode page, on the 404 error page, in your pre-loader, and everywhere else. The idea is to surprise visitors by giving them something pleasant to talk about.

Bounty Bev
Bounty Bev is a beverage company with a beautiful one-page design. Apart from its subtle hover effects and animations, the website has some nice extras: if you scroll down the page manually with the mouse wheel, a small pop-up appears asking you if you need a lift. The typography is strong and memorable, and the design is playful. Simple, clear and personal, the website leaves a strong positive impression.

Analog.coop
Analog provides a very personal experience to visitors. When you visit the page, it displays where you are located and tells you the members of the team who are closest to you (in our case, Alan and Jon, who are about 500 miles away in Bristol). The website has a couple of nice Easter eggs that are not visible at first glance. You might want to play around with the header and the photos of team. The page is just fun to explore.

Forrst
Beautiful design with attractive visual elements and original navigation — a design that manages to make a good lasting impression. Notice how the background of the upper area of the page changes when the browser window is resized (Parallax-effect). The “log in”-box is quite cool, too. Surprisingly, the form is built with tables for some reason.

Billy Tamplin
On his blog, Billy Tamplin focuses on the small victories in his life. Each post records a personal achievement, displaying a custom-designed merit badge and an explanation of the conquest. Billy uses this metaphor throughout the website, speaking of “super Web abilities” (Agile CSS, PHP-prepared, IE6-reinforced, etc.) and “heroic design strengths” (human-friendly aim, keen creative detail, etc.). He also has a personal portfolio on the website. Notice how well the color scheme fits the theme. The design is simple and beautiful, and the “achievement” twist is unusual and memorable.

MIX
MIX labs, a community blog for designers and Web developers, doesn’t have hidden features, appealing animations or striking hover effects. Instead, it has a consistent, visually appealing design: can you spot where and how often colorful circles are repeated throughout the website? The design emphasizes the content and has a personal touch. Simply beautiful.

Blue Sky Resumes
This website of a small team of resume writers has a couple of nice unusual extras in the design: the header contains a Flash-based cloud animation that perfectly fits the branding of the company. The website also has subtle animations and soft hover effects. And the “About” page introduces each co-worker in a quite original and memorable way.

Mailchimp
MailChimp heavily incorporates the monkey metaphor in all aspects of its design. To inform customers of recent updates, Mailchimp present an ASCII animation that tells the user something is happening in the background; this nice detail is surprising yet unobtrusive. The company also uses personal, friendly and perhaps occasionally geeky language when addressing user needs. This is the part of the image that MailChimp thoughtfully preserves in its Web application.

Large version

Further Reading

• 52 Weeks of UX: Design for Delight
  This article explains the importance of designing for delight and features some websites that try to engage the user’s senses.
• In Defense of Eye Candy
  Research proves that attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client or co-worker scoffs at the notion that beauty is important to interface design, point their peepers here.
• Looks Matter Because We All Have Feelings
  Discusses the importance of emotions and aesthetics in design.

2. Keypress Navigation

As designers try to make their designs more intuitive, it is no surprise that websites are becoming more responsive. Not only does this apply to user interfaces in modern Web applications (which are becoming as robust as desktop applications — and often smarter), but with the wide adoption of JavaScript libraries, “classic” websites are becoming more robust and interactive, too. One way to make websites more responsive is through “keypress navigation,” which hasn’t been widely adopted so far. But lately we’ve observed more designs implementing this effectively. The most popular setting for such navigation is on photo websites such as Flickr or FFFFound.

The general idea is to give users keyboard shortcuts that help them perform tedious tasks, such as navigating between blog posts, moving through images in a slideshow, changing the current view (e.g. from a horizontal to vertical grid), liking articles and navigating between sections of a website. Keypress navigation is common in Flash-based designs, but we are now seeing it applied to CSS-based designs, too. Google Reader is a prime example of advanced keypress navigation, but other websites have good implementations, too.

They Make Apps
A couple of months ago, They Make Apps began offering users smooth and advanced keyboard navigation as an alternative to classic scrolling. Users could switch between both modes using a drop-down menu in the main navigation of the page. In “keyboard navigation mode,” users used the arrow keys to navigate between content blocks; the “Return” key triggered the detailed view and “Escape” returned to the main page. For some reason, this navigation isn’t available any longer.

Image source

Mad-ar.ch
Marc Anton Dahmen’s website is Flash-based, and its navigation is quite advanced: users can jump to the contact form with “c,” scale images with “-” and “+,” and then navigate and sort images and scroll through text with the vertical arrow keys.

Image source

9GAG
9GAG is a social image bookmarking website. Users can navigate to the next and previous image using “j” and “k,” respectively. The current image can be voted up using “l” (for love): no mouse scrolling necessary. In this case, a shortcut to the grid view would be useful, too.

FFFFound!
One of the first social image bookmarking websites, FFFFound offers shortcuts to jump to the top of the page (“h”), change the view of the images (“v”), browse images (“k” and “j”) and skip to the next page (“l”).

Feta
Yet another Flash-based website that lets you use the left and right arrow keys to browse items of a section, the down key to select and the up key to go back.

NY Times: Times Skimmer
The New York Times’ quick overview page has very advanced keypress navigation. Users can use the arrows to navigate sections, zoom in using “Shift,” return to the top with “t,” refresh the current section with “r” and select article using “a” and the arrows. Learning the keys is a bit time-consuming, but once you’ve got them, navigating the page is much easier.

Pictory
PictoryMag, a magazine dedicated to photo stories, also has “j” and “k” navigation to browse images.

CrushLovely
CrushLovely, a single-page portfolio, lets you use the arrow keys to navigate sections of the page.

Thinking for a Living
Thinking for a Living lets users use the left and right arrows to navigate between featured quotes.

Picnic Extraterrestre
Aside from being one of the most unusual designs we’ve seen so far, Iván Ferreiro’s Picnic Extraterrestre has quite advanced keypress navigation. The design imitates Teletext and does a pretty good job. All navigation items can be loaded using the digits shortcuts. Now that’s fun!

Coding Techniques and Tutorials

Note that when implementing keypress navigation in your design, make sure that the shortcuts you define do not conflict with common browser shortcuts, OS shortcuts, screen-reader shortcuts or user-defined shortcuts. This may sound simpler than it is. As usual, extensive testing (with savvy and novice users) before implementation will help you find issues with your shortcuts. It’s safe to assume that the arrow keys, the “j” and “k” combination and the “Escape” key are safe. On the other hand, using the “Control,” “Alt” and “Shift” keys is not recommended.

Also, regard keypress navigation as an additional (and therefore optional) feature that will not be available to users who have disabled JavaScript in their browsers. Therefore, it is highly recommended that you offer keyboard navigation as a secondary, not primary, layer of navigation. Below, you’ll find some helpful techniques, tutorials and references for implementing keypress navigation in your designs.

• Adding Keyboard Navigation with jQuery
  This screencast describes how to implement keyboard navigation to move a slider backwards and forwards. The demo and code are available as well.
• How to Create Keypress Navigation Using jQuery
  This tutorial describes how to implement keypress navigation to browse sections of the website.
• Advanced Keypress Navigation with jQuery
  You could use your mouse to select links, but you can also use the arrow keys (i.e. up and down) to navigate the list. This script is a bit advanced because of the extra functionality when the user combines the mouse hover and key presses.
• Using Keyboard Shortcuts in JavaScript
  In this article, you’ll learn how to use JavaScript keyboard shortcuts, with and without the JQuery framework.
• How to Build a Site With Keyboard Navigation: PSD to HTML
  This article looks at how to add keyboard navigation to a website using a few simple lines of JavaScript. First, you’ll create a simple theme in Photoshop and then transform it into a working website that offers keyboard functions to jump pages.

Plug-Ins and Useful Resources

• js-hotkeys: Cross-Browser Javascript jQuery Plug-In for Hooking Keyboard Events
  The jQuery.Hotkeys plug-in lets you easily add and remove handlers for keyboard events anywhere in your code, and it supports almost any key combination. Binding and unbinding a hot-key combination takes one line of code.
• jQuery Keyboard Navigation Plug-In
  The jQuery Keyboard Navigation plug-in provides the capability for page elements to be navigated and activated via the keyboard’s arrow keys.
• HotKey: Programmable Keyboard Shortcuts with Prototype JS Library
  HotKey provides functionality similar to that of the access key attribute but has many enhancements that allow for more granular control of keyboard-driven interfaces.
• Detecting Key Strokes: Reference Table
  Detecting the user’s key strokes turns out to be a specialized branch of event handling. This page details some of the more annoying problems and includes the obligatory compatibility table.

3. Print Design Influence

While designing for delight is primarily about impressing visitors with unexpected and pleasing touches to a design, modern Web designers often go one step further and experiment with the underlying details of their work, producing more creative and unique layouts. In fact, one doesn’t have to be an expert to see the growing influence of traditional print design techniques on the Web. They are often manifested in so-called “art-directed” blog posts (or “blogazines”), whereby every blog post has a unique and carefully crafted design.

The layouts of these websites often resemble those of print magazines or posters, with striking headlines, multi-column text, highlighted quotations, indented text, supporting imagery, sidenotes and footnotes. The designs usually adhere to grids and have strong, vivid typography.

Design Informer: Grid-Based Web Design, Simplified has a simple clean two-column layout that clearly separates text from illustrations. Notice the capital letters in the author’s name under the header, also visible in the quote design on the page. The content here dictates the layout.

In most cases, art-directed designs are fueled purely by the ambition and determination of their creators. Such designs are predominantly found on freelance websites (being the fruit of personal projects) and rarely found in corporate settings. The main obstacle to wider adoption of these techniques is that the creation of such designs (or rather their implementation with (X)HTML and CSS) is time-consuming. Art-directed layouts are quite difficult to code and maintain, and they often require inline CSS styling, or else designers would end up with dozens of un-semantic classes in their style sheets. Also, integrating advertisements on these pages is difficult because they put constraints on the designer’s layout. So, at the moment, these designs are more appropriate for less frequently updated websites because of the overhead.

If you decide to experiment with art-directed design, be aware that the layout of an article should be secondary and always support the content itself, not dominate it. The problem is that once you start designing a blog post, it’s easy to overdesign page elements just because you can, not because the content dictates it. In fact, the design community is having an ongoing debate on whether art-directed designs are merely “over-Photoshopped articles,” designed purely for the sake of design.

Good design is about effective communication, not decoration at the expense of legibility. As Francisco Inchauste puts it, “I think it’s a ‘pick two’ sort of scenario. The choices are: great content, great art direction and regular schedule. If you try to hit all three, one of those will begin to fall short.” Bottom line: Web designs that are heavily influenced by print design are beautiful, but only when the techniques support your article.

A Lesson on How to Be a Villain
A colorful and nicely illustrated article in a unique layout. Notice something unusual? The design has a table-based layout. The design has a CSS-layout with tabular data for the actual info-graphic bits. Sometimes that’s necessary for art-directed designs.

Evan Dinsmore: 21
A poster design for the Web. This blog post is simple, and it replaces tired plain text with vivid images. But that can be a disadvantage, too: a text-based version would be more user-friendly here.

The Bold Italic: Dr. Feel Good
A very impressive magazine-like layout, with multiple columns, imagery, headlines and a sidebar. If you had only seen this page printed out, you wouldn’t have recognized it as a Web design. The page has 40 div containers.

A Way Back: Revised Font Stack
A very long, detailed and elaborate design. In art-directed designs, including this one, large images are often used to push the boundaries of the layout. Such images are often 800 to 1000 pixels wide, filling the width of the entire layout.

Chris Coyier: The Safari Challenge
Here is a subtler design, with big margins, multiple columns of text, footnotes and indented headings. From an aesthetic point of view, it could be a page from a book.

Kyle Fielder: Keeping Curious
A classic. Do you remember those old magazines that used big quotes and visuals to create text flow? Notice how well this headline and colophone are positioned in the question mark. A nice, simple, original design.

Sleepover: A Critical Analysis of my Shoes
A simple grid-based design with justified text, serif typography and nice shoe illustrations. Unfortunately, justified text still doesn’t look very good on the Web.

Yaron Schoen: Too Many Buttons
Sometimes art-directed blog posts require something slightly more: like a background image and bakground color, as well as a bit of CSS styling. This examples demonstrates exactly that.

The Bold Italic: Keep Off the Grass
Another remarkable example of multi-column-layouts…

The Bold Italic: Cinderella Story
… and another one. Print-design inspiration at its best.

Travis Neilson: Default Switch
A calm, simple, clean design with custom headings.

Further Reading

• The Super Freaking Amazing Future Trend of Blogs
• The Death of the Boring Blog Post?
  An article about art-directed designs from here on Smashing Magazine.
• Jason Santa Maria Talks About His Rethinking
• WordPress Art Direction Plug-In
• WordPress Post Styling Plug-In
• WordPress Designate Plug-in
• Jason Santa Maria: The Influence of Print Design
• HeartDirected
  A gallery of art-directed designs.
• Unique Article Designs
  Another gallery of art-directed designs.

4. Horizontalism

Over the last year, we’ve observed a slow transformation in the orientation of text-heavy Web designs. Not only are designs gaining depth and realism, but navigation is changing as well. Some designers are augmenting traditional vertical scrolling with sliding navigation (like here), which usually scrolls in both a vertical and horizontal direction, or even pure horizontal scrolling. This is called “horizontalism.”

Websites with horizontal scroll bars have been more difficult to navigate because the mouse was designed for vertical scrolling. But the emergence of multi-touch devices forces us to rethink the usability concerns of such designs. After all, whether the user browses vertically or horizontally on such a device doesn’t really make a difference. And some plug-ins (like Scrollable and jScrollHorizontalPane) simplify the action by enabling users to navigate horizontally by using the standard vertical scroll wheel on the mouse, thus shrinking the learning curve.

Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience. Such designs are usually carefully crafted and found primarily on portfolio websites and elaborate e-commmerce websites. Whether horizontalism will expand to more types of websites remains to be seen in the months to come.

Thinking for a Living
Not only does this article discuss the advantages and disadvantages of horizontalism with regard to readability, but it also has a nice horizontal layout itself, with multiple text columns. While the orientation is unusual at the first sight, reading the post is quite pleasing and comfortable.

OurType
A belgian type foundry with horizontal Flash-based navigation. Content blocks slide horizontally.

Jung v. Matt
This website has a horizontal timeline for navigation. Notice that there is no horizontal scroll bar; visitors use the vertical scroll wheel to navigate horizontally.

Your Auxillary
One of many so-called “single-page layouts.” The full content of these websites is on a single page, which is navigated using either the keyboard, the mouse or a menu (this website uses the third option). Here we have a good (and common) combination of vertical and horizontal navigation (showing the jQuery ScrollTo plug-in in action).

One Twenty Six
This portfolio has a different kind of horizontal navigation. Apart from “Previous” and “Next” buttons, the user also gets an overview of selected content in a drop-down menu. Once they select an option, the page scrolls horizontally. Horizontal navigation with the mouse wheel would probably improve this design’s usability.

Jax Vineyards
This wine store website has interesting and unique horizontal navigation, which is triggered when you browse the wine catalogue. Both the background image and description of the wine slide horizontally. Simple CSS and JavaScript are used. A beautiful and impressive design.

C. L. Holloway
Candice Holloway’s portfolio has a nice take of horizontal layout. Her artwork is placed on a “wall”; horizontal navigation is used as a metaphor for strolling an art gallery. Also interesting: scrolling is triggered when your mouse hovers over the horizontal arrows; no clicking necessary.

Yamaha Ginza
You’ll find that designers experiment with perspective. Sometimes the orientation is diagonal…

Edpeixoto
… and sometimes the layout just hangs in the air…

ASOS
… and sometimes it’s slanted. Notice how none of the elements have perpendicular lines.

Further Reading

• Horizontalism and Readability
• Friday Focus: Slanted Web Design
  A showcase of designs that tilt to one side and avoid perpendicular lines.
• Horizontally Scrolling Websites: Showcase and Tutorials
• jQuery ScrollTo Plug-In
  This plug-in lets users scroll through overflowing elements and the screen itself. You get many different customization options and various ways to specify the direction in which to scroll.

5. Rich, Strong Typography

Typography has played a major role in Web design for years now. Bold, strong, heavy headlines can effectively convey the purpose of an e-commerce website or portfolio, while subtler headings help structure content and improve legibility. Obviously, the big change we’re seeing today is richer, more versatile typography, partly made possible by the @font-face attribute and the emergence of font-embedding services such as TypeKit. Rich typographic elements can now be selected and copied from the browser, which wasn’t that easy a couple of years ago.

The future is big, bold and typographic. Rich font families will be used not only for headlines but for body copy, bringing typographic practices from print over to the Web. Also, designers will experiment more with rich, sophisticated serif fonts and bold, imposing slab fonts, supported by subtle imagery. Web designers are also adding more depth to typography with the text-shadow attribute in CSS3. Naturally, such subtleties are closely tied to the choice of layout. These typographic designs are often grid-based and borrow techniqes from print design, such as sidenotes and footnotes.

We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation.

Kilian Muster
Kilian Muster uses quite an extended serif font stack for his design: font-family: Palatino, "Palatino Linotype", "Book Antiqua", Constantia, Times, "Times New Roman", serif;. The posts in Kilian’s blog also have sidenotes.

extrapolish
Notice that the text on this website of a Polish Web design agency is set mostly in capitals: the navigation menu, introductory text and even contact address are in full capitals. Yet the design is calm, clean and polished.

DNA to Darwin
This website has only serif fonts throughout its design: font-family: "skolar-1","skolar-2", Georgia, Times, serif;. Notice that the text is split into columns; we didn’t see this last year.

COG’AOKE
Again, huge, bold slab typography that makes a strong impression and engages the audience.

TRÜF
This design agency combines a bold color choice with concise, equally bold sans-serif typography.

Pioneers
This website combines vivid imagery and playful typography. The design looks more like a brochure or poster than a “classic” Web page.

Colly
Simon Collison’s subtle attention to the tiniest details make the typography literally stand out. No bold, screaming typography here; just legible, aesthetically pleasing design.

The Saint John’s Bible
This website shows serif fonts at their best. The fonts complement the theme and fit the layout perfectly. Notice how well a beautiful visual design and classic typography can work together.

Brewhouse
A nice combination of type and visuals make this page remarkable. But it’s not clear why the page has three different typefaces for the headings; two would be enough.

Tick Talk
Can this get any bolder? Big bold typography, with capital letters spread across the whole page. When scrolling the page, notice the nice background effect. A very simple and strong design.

The Sew Weekly
This blog has very playful, inviting typography (Proxima Nova for the body copy and Coquette for headlines), and all of it can be easily selected and copied. This is the power of embedded fonts (TypeKit is used here). Only serif fonts are used: font-family: "skolar-1","skolar-2", Georgia, Times, serif;. Notice the text is split into columns — again, a trend we’ve seen only this year.

Neiman Group
The Neiman Group incorporates its brand colors into the navigation and headline of the front page. The typography is light and classic and gives the page a certain atmosphere.

Conclusion

Modern Web design is better, richer and more user-friendly. We’re seeing better use of visual design for the sake of aesthetics and a pleasing user experience. Traditional techniques from print design are increasingly being applied to the Web, be they layout techniques or rich versatile typography. Horizontal and even diagonal orientations bring a fresh perspective to the flat 2-D designs we’ve seen for years (with their text-heavy, Flash-based pages).

These developments are a sign of the upcoming era of Web design, in which designers can use new tools and techniques to their fullest potential. Web designers should look forward to the exciting and promising years to come.

Stay Tuned!

This article is the first in our series on the current state of web design. Next time, we’ll discuss other developments, such as adaptive and interactive layouts, CSS3 adoption, beauty in chaos, subtle interactivity, context-sensitive navigation and over-designed design. To make sure that you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.

(al)

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 106 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: 2010, trends

Open-source content management systems (CMS) are a large family of Web applications, but if we’re looking for stability, performance and average technical requirements, we’ll come up with a handful of options. In the past, choosing the “right” CMS was a matter of the project’s requirements, but now this is not completely valid because the paradigm of extensibility had driven the development of major CMS’ towards a model of core features that are extensible with plug-ins that fill virtually any requirement.

Picking the right CMS is then a matter of “mental models”: choosing the one that best fits our vision of how a Web application should work and what it should provide to users and administrators. In this article, we’ll explore the main difference in the mental models: of WordPress and Joomla for theming and extending their core.

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

Background Thoughts

WordPress and Joomla are two of the most popular open-source CMS’ around. They offer large and active developer communities and excellent documentation.

WordPress is the first choice among the designer community mostly because of its well-designed back end and wide availability of excellent themes.

Joomla, meanwhile, suffers from Mambo’s legacy, which was notorious for low performance and semantically incorrect output (such as nested tables for layout). But since the release of version 1.5, Joomla has a completely rewritten core, with improved extensibility and better HTML output.

One difference between WordPress and Joomla is their theming model. A website developer migrating from Joomla to WordPress might feel that the latter requires too much theme coding, while a developer moving the other way might feel that Joomla is less flexible and customizable. The reason for this is the different models on which the themes of these CMS’ are based.

WordPress’ Theming Model

WordPress’ theming model is based on a per-view structure. This means that in each theme, you could have individual view files for the post list, the single post and the archive pages. These files are independent of each other, allowing the developer to customize each view but requiring them to duplicate many parts of the code. The only common parts in a theme are the header and footer, which can be coded directly in the individual view anyway.

The main drawback of this model is that different views will not always require a different presentation (for example, the archive, category list and tag list are just lists). To overcome this problem, a theme is organized in a hierarchical structure, in which more generic views are used as fallbacks for specific ones. The common fallback for a WordPress theme is the index.php file, which is actually the only required file (along with a style sheet) in a theme. A complete reference and visual diagram of the hierarchical structure of a WordPress theme are available here.

The Loop and Template Tags

To better understand how a WordPress theme works, we need to look more closely at the “loop” and template tags.

All data for a post or a list of posts is extracted through a loop. A loop is basically a while construct that begins with this declaration:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

// post output here 

<?php endif; endwhile; ?>

The most important part of this code is the_post(), which initializes a global $post PHP object containing all of the page data. The loop construct is also required for single post view, because all functions for presentation of data rely on the presence of the $post object. These functions are called template tags, and their main purpose is to output formatted data. Usually, they do not output HTML tags so that they can be used in different scenarios.

A complete guide to theme development is available here.

Joomla’s Content-Based Model

Joomla has a completely different theming approach. Joomla’s templates are built on a common structure defined in an index.php file.

This file contains both static content (i.e. content that is common throughout the website) and template tags, which serve as content place-holders and are replaced by HTML output during the page-rendering phase.

A common form for a template tag is:

<jdoc:include type="modules" name="right" style="xhtml" />

Template tags differ in the type of content they provide: component, message, module, head.

This structural backbone implies that each view in the CMS outputs not a complete page but just what’s needed to present content. At first glance, a developer used to the theming model of WordPress might think that there’s no way to customize this content block. In fact, Joomla relies on the MVC architectural pattern, meaning that data extraction and presentation are separated, the latter being rendered by the view part of the application.

Template Customization

To customize the default view, Joomla has a pattern called template override, through which the system scans the template folder for a custom view file to use in place of the default one. The image below shows the folder structure and naming convention of a default view and its override.

An example of the folder and file structure of a Joomla template override (from the “ja_purity” template).

Joomla overrides are an excellent way to customize a website template without hacks. Still, they are often overlooked, and Joomla’s support of legacy extensions make this pattern unusable, even for popular packages such as Virtuemart (which uses its built-in template system).

A complete reference for Joomla’s template system is available here.

Beyond Core

(Image by jared)

In the last few years, plug-ins have made a big difference in the software industry, one of the most notable examples being Mozilla Firefox.

As we noted, modern CMS’ are developed to be extensible, allowing us to use the core as a backbone and build specialized parts on top of it. This resulting modular design is an effective development model for many reasons:

• Better maintainability
  Developers don’t need to modify the core in order to add or customize functionality.
• Lightweight and safer
  Only features that are needed are included, resulting in less memory consumption, a smaller code base and fewer vulnerabilities.
• Separate development cycles for core and features
  By offering an extensions API, third-party developers can add new features while the core team focuses on the reliability and performance of the system.

With open-source projects, this last point is both a blessing and a curse. It benefits from shared development effort but leads to unverified work and a less organized workflow.

Joomla and WordPress have tried to overcome this curse by providing coding guidelines. Still, little effort is spent documenting the back-end and front-end UI design.

Aside from their different naming conventions, the extensions models of WordPress and Joomla differ in how third-party code interacts with the core by mean of the extensions API.

The key point to understand is that while Joomla is based on MVC pattern, WordPress relies on an event-like system to which extensions can be hooked. Let’s look at some details.

WordPress’ Hook Method

WordPress’ extensions model is based on the execution of a set of functions attached to the system flow by mean of “hooks.”

Hooks contain a list of functions that are triggered at various points as WordPress is running. They manipulate (in the case of filter hooks) and output (in the case of action hooks) database data and can be accessed from within the theme itself and from a specialized plug-in package.

WordPress lacks comprehensive documentation for hooks, but a list of hooks is available here.

To understand the mental model behind WordPress’ hook system, we can compare it to the sequence of actions in baking a cake. In the beginning, we have an idea of what kind of cake we want to bake, so we get our ingredients. We cannot just throw everything together and bake it. So, we execute an ordered list of actions, such as “filtering” egg shells and mixing the eggs in with flour and sugar. As we’re doing that, we might want to customize the recipe. So, we “plug in” some chocolate and perhaps reduce the quantity of another ingredient by half. The result is a proper cake, created from discrete ingredients and a touch of creativity.

WordPress bakes its pages the same way.

Sidebars and Widgets

While plug-ins are broadly related to hooks, a widget is a special type of plug-in. It provides a means of showing information in a theme’s sidebar. The main advantage of widgets is that they are configurable in the back-end interface, allowing quick customization even for novice users.

All available widgets are listed in an administration panel.

In terms of theme development, the sidebar is similar in its mental model to Joomla’s template tags. It is a placeholder for something. The misleading bit is that a sidebar doesn’t have to be placed in the actual sidebar of a layout. It could go in the footer, navigation, header or elsewhere.

To learn more about the new API for widget development, have a look at the official documentation.

Adding Functionality

Until now, the problem with WordPress’ extension API was that it gave you no simple way to add complex functionality, such as e-commerce carts and event listings. Most developers excused this shortcoming by pointing out that WordPress is a blog engine. This will hopefully be resolved with the release of WordPress 3.0 and its system for “post types,” which makes it possible to use the “post” and “page” interfaces for different types of content.

As for other popular CMS’ (such as Drupal), post types function as a kind of “Content Construction Kit,” giving you the ability to smartly add, manage and present specialized content. If you’re interested in trying this new feature, here is a good tutorial.

Other than post types (and until major plug-ins update support for this feature), the only feasible way to add complex functionality is to use already existing pages as containers, placing in the body a place-holder (called a “shortcode“) that is replaced with HTML output by specific filter hooks.

This approach is used by plug-ins such as Buddypress and WP e-Commerce, which extend the blog engine with social network and shopping-cart capabilities.

Another great example of shortcode implementation is Contact Form 7, a fully featured contact-form management plug-in.

Extending Joomla

An often overlooked aspect of Joomla is that it is built on the solid MVC framework. So, extending its core is really much like working with products such as Zend Framework and CodeIgniter, which give you an already designed back-end interface upon which to integrate your own extensions. This approach also gives designers the ability to use template overrides, even for third-party extensions.

A diagram depicting Joomla’s Model View Controller system flow.

To better understand MVC and how it works in Joomla, here is a complete reference.

Joomla’s Extension Types

Joomla’s extension model comes in three flavors, each with different tasks: components, modules and plug-ins.

Components extend the core by adding specific functionality, such as e-commerce carts, event listings and forums. From the user’s point of view, we can think of components as discrete sections of a website, not connected to other content. A popular example is JEvents, an events calendar.

In the theme system, a component’s output replaces the component placeholder in the template’s index.php file:

<jdoc:include type="component" />

Modules are like widgets in WordPress: they show a component’s information, which is extracted from the database. They are “attachable” to module positions and can be put on every page of a website.

Modules are primarily intended to be teaser blocks, but they can incorporate full text and image galleries, which makes them handy for static parts of a layout, such as footer notes. They are also useful for showing related content on a page. For example, you could highlight interesting products for Web developers as they’re browsing a list of barcamp events.

The template tag, which serves as module place-holder, looks like this:

<jdoc:include type="modules" name="right" style="xhtml" />

Plug-ins work similar to WordPress’ hook system, because they bind to specific system events to format, manipulate and replace HTML output. Possible fields of action range from content for articles (such as video embedding tools—AllVideos is a popular one) to HTML filtering and user-profile extension. Commonly used Joomla plug-ins include URL rewriting filters, which come bundled with administrative components such as Sh404SEF.

Compatibility Issues

One thing every developer should be aware of is that, despite efforts to provide a great extension API, Joomla 1.5 still suffers in its support of legacy extensions (built for v1.0), which do not have an MVC structure and which are sometimes hardly customizable. Furthermore, they break the API mental model.

The Joomla extensions library has a clear mark for 1.0 or 1.5 native extensions. But faking 1.5 native compatibility is easy, which would leave developers with nothing but legacy code. This method is followed even by big well-known projects like Virtuemart.

Hopefully, once Joomla 1.6 is released and legacy support is dropped, every developer will rework their code to fit the CMS’ specifications.

What’s Next

While the best way to choose a CMS is by trying it out on a real project, understanding its underlying mental model can make developers feel less lost in code and more aware of the design patterns they need to follow.

If you want to develop themes and extensions for Joomla and WordPress, here are some resources.

WordPress:

• How to Create a WordPress Theme from Scratch
• How to Write a WordPress Plugin: a complete reference on WordPress plugins development.
• Top 10 Most Common Coding Mistakes in WordPress Plugins: a must read for WordPress developers.
• WordPress 3.0 new features
• 8 Useful Code Snippets To Get Started With WordPress 3.0

Joomla:

• Joomla Developer’s Toolbox: a collection of resources for Joomla users and developers by Smashing Magazine.
• Creating a Basic Joomla! Template
• Developing a Model-View-Controller Component: a step-by-step tutorial on components development in Joomla.
• Creating a Hello World Module for Joomla 1.5: official documentation on Joomla modules development.
• Joomla Component Creator: a smart wizard for creating a “starter” component structure.
• Joomla 1.6 Updates: this article explains the primary objectives of the upcoming Joomla 1.6.

(al)

© Marco Solazzi for Smashing Magazine, 2010. | Permalink | 113 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/05/03/joomla-and-wordpress-a-matter-of-mental-models/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: joomla, wordpress

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 40 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

• all images can be clicked and lead to the preview of the wallpaper;
• you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

So what wallpapers have we received for May 2010?

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

The End of Explorer Calendar

"For friends of MSIE, here is “The End Of Explorer” may 2010 desktop wallaper calendar, in a Variety of resolutions from 320?480 (iPhone) to 2560?1600 ! Hope you’ll find some size here to fit with your desktop " Designed by Benoit Chartron from France.

• preview
• with calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1600
• without calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1600

A Designer’s Life

"That is what a designer sees on his real desktop, now you can see it on your computer." Designed by Mladen Milinovic from Germany.

• preview
• with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Focus on work

"This wallpaper design is supposed not to distract your attention, but to make you focus on work. This might work if you keep your desktop clean enough " Designed by Andrei Verner from Russia.

• preview
• with calendar: 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1440
• without calendar: 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1440

Play With Me

"One of my latest photographs taken on a beautiful summery day in the “golden hours” — I was lucky enough to capture our puppy and my sister, Sasha Bell playing on the lawn. I thought this would be a lovely wallpaper with a hint of the lovely summer we all deserver in the UK! No rain! Happy May everybody!" Designed by Olivia Bell from England, UK.

• preview
• with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600
• without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600

Moto

Designed by Björn Leek from Germany.

• preview
• with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

May Happen, May Be

"”May Happen, May Be” is all about possibilities… we can all get out of our cages, maybe in may!" Designed by Thais Trizoli from Brazil.

• preview
• with calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Rapunzel

"A grunge take on Rapunzel!" Designed by Cindy Zhang from USA.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Birdhouses

Designed by Pietje Precies from The Netherlands.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

May Flowers

"The flowers are blooming and it’s time to celebrate spring with this whimsical wallpaper!" Designed by thunder::tech from USA.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050

Matilda’s Backyard

"It was May day Eve. The clock strikes twelve. The cat was asleep, the ladder cast aside and the book with a giant red apple opens." Designed by April Joy E. Jasmin from Philippines.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

May in Warsaw

Designed by Berenika Kołaczyńska from Poland.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Bubble Bath Delight

"A little blissful paradise desktop from me this month – bubble bath’s are yummy and I thought I would take this to an entire new level. Happy May!" Designed by Sasha Bell from England, UK.

• preview
• with calendar: 1024×640, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×640, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Chocolate Strawberries

"I always see a lot of photography featuring random fruit and lemons (a lot of lemons!) falling/splashing into water, and thought it would be cool to turn a photography “idea” into a vector looking design, but with chocolate and strawberries! Happy May " Designed by Rosanna Bell from England, UK.

• preview
• with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Oasis

"I’m hoping for a bold and beautiful summer." Designed by Marc Allcock from England.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Todo Sobre mi Madre

"With Mother’s Day looming in, I decided to make a tribute to a great film “All About my Mother”. For the Spanish version, please visit my DeviantArt." Designed by Ale Ibarra from México.

• preview
• with calendar: 320×480, 1280×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1280×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Starbucks Coffee

"Everybody I know loves coffee… and for that matter, starbucks! Happy May!" Designed by Sasha Bell from England, UK.

• preview
• with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Mamayo

"This is a mother’s wallpaper theme." Designed by Ricardo Delgado from México.

• preview
• with calendar: 1440×900, 1680×1050, 1920×1200
• without calendar: 1440×900, 1680×1050, 1920×1200

Curly Forest

"Catch a firefly in the twisty, curly forest." Designed by Chris Alexander (Yipori) from England.

• preview
• with calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440
• without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440

May be something else

"Thinking about May…" Designed by Fabio Toscani from Italy.

• preview
• with calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200
• without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200

Flower Field

"The U.S. National Archives has a photo stream on Flickr of images free for unrestricted use. This wallpaper was made from photographs taken for the Documerica project by the EPA in 1972. The flowers were from a field in Kerr County, Texas and Inks Lake, Texas. I wanted it to look like a painting. Link to original photographs" Designed by Laura Sylvest from Washington, D.C., USA.

• preview
• with calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200

Thailand Kopipi

"May is when spring usually starts. May is also when we are all starting to think about a summer vacation.I would personally recommend going to Thailand Kopipi, it’s amazing and it’s also where this picture was taken." Designed by Liad Guez from Israel.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1600×1200, 1920×1080, 1920×1200
• without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1600×1200, 1920×1080, 1920×1200

Birds of Spring

"May’s a month of happy sounds,
The hum of buzzing bees,
The chirp of little baby birds
And the song of a gentle breeze."
Designed by Manish Jinwal from India.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1200

Mother’s day

"”My mother said to me, “If you become a soldier you’ll be a general; if you become a monk you’ll end up as the pope.” Instead, I became a designer and now this wallpaper is heartly dedicated to my Mother.”I Love U MOM…" Designed by Manish Jinwal from India.

• preview
• with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 1280×800, 1280×1024, 1440×900,

CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3.

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

Opacity / Transparency

I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. It’s been around so long, that we often forget that it’s actually a CSS3 property. Although IE doesn’t offer support for the opacity property, it does offer similar transparency settings via the proprietary filter property:

The Syntax

#myElement {
	opacity: .4; /* other browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

You really only need the second line, which works in all three versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the third line, which the older versions don’t recognize.

The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

The Demonstration

The Drawbacks

• The filter property is a Microsoft-only property, so your CSS won’t validate
• As is the case for the opacity property, the IE filter causes all child elements to inherit the opacity

Rounded Corners (border-radius)

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property.

Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google Code.

The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property.

The Syntax

Here’s what your code might look like:

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

The way it works is pretty straightforward, as shown above. Ideally, however, you would apply the behavior property in an IE-only stylesheet, using the same selector in your CSS, so the code knows where to get the radius value from.

The Demonstration

Because this technique requires use of an external HTC file, you can view the demo at this location.

The Drawbacks

• The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat)
• The behavior property will make your CSS invalid
• Your server needs to be able to load HTC files for this technique to work
• IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

Box Shadow

The box-shadow property is another useful CSS3 feature that will even add a curved box shadow naturally to an element that uses the border-radius property. IE doesn’t support box-shadow, but a filter is available that offers a close replication.

It should be noted that the box-shadow property has been removed from the CSS3 Backgrounds and Borders Module, so its future in CSS3 seems to be a little uncertain right now.

The Syntax

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

As shown above, in addition to the proprietary WebKit and Mozilla properties, you can add a shadow filter that works in all versions of Internet Explorer.

The Demonstration

The Drawbacks

• The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches
• The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

Text Shadow

Adding drop shadows to text elements has been practiced in both print and web design for years. On the web, this is normally done with images and occasionally with text duplication combined with positioning. CSS3 allows developers to easily add shadows to text using a simple and flexible text-shadow property.

Unfortunately, there doesn’t seem to be an easy way to add a text shadow in Internet Explorer — even with the use of proprietary filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof has written a jQuery plugin that implements text shadows in Internet Explorer.

The Syntax

First, in your CSS, you would set the text-shadow property:

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;
}

The values specify the shadow color, position on the horizontal axis, position on the vertical axis, and the amount of blur.

After including the jQuery library and the plugin in your document, you can call the plugin with jQuery:

// include jQuery library in your page
// include link to plugin in your page

$(document).ready(function(){
	$(".text-shadow").textShadow();
});

The plugin also allows the use of parameters to override the CSS. See the plugin author’s original web page for more details on the parameters.

Although there is a cross-browser jQuery plugin that applies drop shadows, the one I’m demonstrating above actually utilizes the CSS3 value that’s already set in your CSS, so it has the advantage of working along with the standard CSS setting for text shadows, whereas the other plugin needs to be set independently.

The Demonstration

Because this technique requires use of the jQuery library and an external plugin file, you can view the demo at this location.

The Drawbacks

There are some significant drawbacks to this method that make it very unlikely to ever be practical. You’re probably better off creating an image to replace the text for IE instead.

• In order to make the shadow look almost the same in IE, you need to use different settings in an IE-only stylesheet, adding to development and maintenance time
• Requires that you add the jQuery library, in addition to a 61-line plugin file (GZipping or minifying would help)
• The IE version of the shadow never looks exactly the same as the other browsers
• When using the overriding parameters, the plugin seems to be rendered somewhat useless, displaying a big ugly shadow that won’t change with new values
• Unlike the CSS3 version, the plugin doesn’t support multiple shadows
• For some reason, in order to get it to work in IE8, you need to give the element a z-index value

Gradients

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax.

The Syntax

To declare a gradient that looks the same in all browsers, including all versions of Internet Explorer, use the CSS shown below (the last two lines are for IE):

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

For the IE filters, the GradientType can be set to “1″ (horizontal) or “0″ (vertical).

The Demonstration

The Drawbacks

Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems.

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values
• Different code is needed for IE8, adding to maintenance time
• The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility
• IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support
• For a gradient to be visible in IE, the element with the gradient must have layout

Transparent Background Colors (RGBA)

CSS3 offers another method to implement transparency, doing so through an alpha channel that’s specified on a background color. Internet Explorer offers no support for this, but this can be worked around.

The Syntax

For the CSS3-compliant browsers, here’s the syntax to set an alpha channel on the background of an element:

#rgba p {
	background: rgba(98, 135, 167, .4);
}

With the above CSS, the background color will be set to the RGB values shown, plus the optional “alpha” value of “.4″. To mimic this in Internet Explorer, you can use the proprietary filter property to create a gradient with the same start and end color, along with an alpha transparency value. This would be included in an IE-only stylesheet, which would override the previous setting.

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

The “gradient” will look exactly the same in IE as in other browsers, duplicating the RGBA transparency effect.

The Demonstration

This first example below will work in browsers that support RGBA colors. The second example will only work in Internet Explorer.

The Drawbacks

• The filter property is not valid CSS
• Requires an extra line of CSS in an IE-only stylesheet
• The element needs to have layout

Note: Initially, I had used a PNG image method to achieve this effect, but apparently it was working only partially in IE7 and IE8, and required a PNG-hack for IE6, so I tried the method given by Liam and Matias in the comments and this seems to work better. The PNG method is another option, but seems to be more troublesome, and has more drawbacks.

Multiple Backgrounds

This is another CSS3 technique that, when widely supported, could prove to be a very practical addition to CSS development. Currently, IE and Opera are the only browsers that don’t support this feature. But interestingly, IE as far back as version 5.5 has allowed the ability to implement multiple backgrounds on the same element using a filter.

The Syntax

You might recall trying to hack a PNG in IE6 and noticing the image you were trying to hack appearing twice, which you had to remove by adding background: none, then applying the filter. Well, using the same principle, IE allows two background images to be declared on the same element.

To use multiple backgrounds in Firefox, Safari, and Chrome, here’s the CSS:

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

To apply two backgrounds to the same element in IE, use the following in an IE-only stylesheet:

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

The Demonstration

The box below shows multiple backgrounds in Chrome, Firefox, and Safari (you won’t see anything in IE):

The next box shows multiple backgrounds in Internet Explorer 6-8 (you’ll only see a single background in other browsers):

The Drawbacks

• Your CSS will be invalid
• The second background image applied using the filter property will always be in the top left, and cannot repeat, so this method is extremely inflexible and can probably only be used in a limited number of circumstances
• In order to get the element to center (as in other browsers), you have to create an image with the exact amount of whitespace around it, to mimic the centering, as I’ve done in the demonstration above

Element Rotation (CSS Tranformations)

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place in CSS. Nonetheless, there is a way to mimic element rotation in Internet Explorer, albeit in a limited fashion.

The Syntax

To rotate an element 180 degrees (that is, to flip it vertically), here is the CSS3 syntax:

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

To create the exact same rotation in Internet Explorer, you use a proprietary filter:

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

The Demonstration

The element below should appear upside down in Internet Explorer, having a rotation of 180 degrees set via the filter property. To demonstrate this more emphatically, I’ve applied a 3px solid gray “bottom” border, which should appear at the top of the element.

The Drawbacks

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla code
• While the Mozilla and WebKit code allows for rotation changes to increment by a single degree, the IE filter only permits 4 stages of rotation, minimizing its flexibility

Update: As pointed out in the comments, IE does allow the ability to rotate objects with the same flexibility as the CSS3 methods. To explain the method here is too complex, but the CSS3, please project by Paul Irish has implemented this method into its code generator, so you can use that to create the IE-compatible code for CSS3 rotations.

Conclusion

Developers might hate me for compiling this list, seeing as any client could search for “CSS3 in Internet Explorer” and stumble across this page. So be careful what you tell your clients; although IE does not support these things natively, that doesn’t mean they’re impossible to implement.

And remember that anytime you need to override the initial CSS settings for IE, or if you have to use JavaScript, jQuery, or an HTC file, make sure the calls to the external resources are made using IE conditional comments. This will ensure the other browsers aren’t making unnecessary HTTP requests.

In many cases, the best solution for dealing with Internet Explorer is to let it display a less-enhanced experience. I hope, however, the above solutions provide some options for working with CSS3 when a client wants a more accurate cross-browser experience.

Related Posts

You may be interested in the following related posts:

• CSS Differences in Internet Explorer 6, 7 and 8
• How To Support Internet Explorer and Still Be Cutting Edge
• The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 138 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS