CSS of the Future: How CSS3 can Optimize Design

The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.

Replace images with code

CSS3 will allow for common design elements such as rounded corners, shadows, gradients, and transparency to be rendered by the browser. This will reduce the number of additional files that need to be loaded and make site maintenance easier by keeping more design information in one place. Fewer files will allow for faster site speeds, improving the user experience and consequently conversion rates. Decreased load times will also help with search rankings as speed becomes a more important factor to search engines. Fewer images also means that more content can be kept in html, making it more accessible to search engines.

See the example below for new code that can replace what is currently being done with images.

CSS3_example

More examples and related articles:

Reduce code

CSS3 can take the same designs that are currently being done with extensive or roundabout methods in CSS2 and create them with fewer lines and more efficient code. This will help make your files smaller for better site speed and will reduce your code-to-content ratio to make your site easier for search engines to crawl. For example, the background-image property will be enhanced to allow you to add more than one image to the same element. You can also make use of template elements to display content in a table format without needing html table tags or CSS2 faux column tricks. In addition, new selectors take advantage of design patterns for reducing code.

Read about some of these feature in more detail:

Use dynamic styles

CSS3 will add dynamic styles that will allow for animated effects, creating an alternative to Flash and JavaScript. As David Scoville pointed out recently, using Flash is not always the most SEO friendly technique, so being able to do more with CSS will minimize conflict between design and SEO. CSS3 will add transitions that can take a CSS property (such as color or size) and allow timing to be added so changes that occur on a page can flow more gradually and less abruptly. These transitions can be used in conjunction with transform functions (such as the rotate function I used in the example above) to create advanced animation effects.

Examples and information

Get Internet Marketing Insight For Your Company - SEO.com

Leave a Reply