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.

More examples and related articles:

• The Opera logo created in CSS3
• 5 CSS3 Design Enhancements that You can use Today
• Practical Uses of CSS3
• A toolkit for testing new features
• Google and site speed

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:

• Html 5 and CSS3: The Techniques You’ll Soon be Using
• CSS3 Selectors Explained

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

• Read about CSS Transitions.
• If you have a webkit browser (Safari or Chrome), be sure to check out these CSS3 animation demos.

Text Rendering: SEO vs. Design

An area of uncertainty that I would like to focus on is the rendering of text, since text is also an important contributor to a page’s search rankings. It is important to try to keep page content coded in HTML with the appropriate tags (h1, p, etc) for search engine and accessibility purposes. How might this limit a designer, when text is coded in HTML and styled with CSS?  As with the range of available operating systems, browsers, screens, and settings, all of which can alter the way a web page is displayed, there is variation in the fonts that viewers have installed on their computers. Consequently, choosing a particular font does not guarantee that your text will actually display in this font to all of your users.

Why does it matter if text shows up in Times New Roman instead of Papyrus? Well, it doesn’t necessarily, but if you’re at all concerned with the user experience (And why wouldn’t you be?) then it certainly does. The fonts you use can, for example, emphasize important text, establish your site’s branding, or make content more or less readable, affecting how long a viewer stays on your site and what they decide to do. What, then, is the best way to display the fonts you want while maintaining compatibility with multiple systems and staying search engine friendly?

CSS

First of all, CSS does have a catch if there is a font you wish to use that a user does not have. You can list the name of the desired font, alternative fonts, and even a font family that you want applied to the text if your first choice is not available.  However, if your ideal font is not the one that ends up being displayed, layout issues can arise due to variations in font spacing and sizes.

Image Replacement

Another way web designers cope is through image replacement. You can create an image of the text in the font you wish to use and this image will display the content instead of coded text.  Problem solved, right? Not necessarily. Using images with “alt” tags will make that text less relevant to search engines than if it were coded and tagged appropriately.  There are some work-around techniques for coping with this issue, including placing images in the background and indenting coded text off of the page and out of view, setting the display of the coded text to “none”, or using the CSS layout to hide coded text behind images.  However, Google does warn that “Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors.” It is therefore possible that even these adapted techniques can negatively affect your search rankings, as well as interfering with screen reader accessibility.

FLIR

FLIR (Face Lift Image Replacement) plays off of the concept of image replacement, but does so dynamically using PHP. Text can still be coded appropriately in HTML for search engines even though it is being swapped out with an image for the viewer. Possible downsides of this method include its reliance on PHP, and the fact that text cannot be selected, which decreases site usability.

sIFR

Another method is to use Scalable Inman Flash Replacement (sIFR). This method combines Flash, Javascript, and CSS to do dynamic text replacement as well.  Like FLIR, text remains SEO friendly but the text is replaced with a Flash file instead of an image. This technique, like the others, is not without its drawbacks which include increased loading time and a reliance on the viewer having a Flash Player installed.

Cufon

Cufon is another popular method which can render fonts using Javascript. This technique allows for faster load times, but uses embedded fonts, which can cause copyright issues with certain font license agreements.  Also, unlike sIFR, the text will not be selectable.

CSS3 and Embedded Fonts

Browsers are beginning to support the next version of CSS (level 3), which also allows for fonts to be downloaded from the web.  Copyright violations are also a concern here as well as possible security issues.

Conclusion

Although none of these methods are perfect, new technologies and techniques come closer every day to addressing the need for both good design and searchable content. At this point it is up to the designer to navigate these options and adapt their design based on the requirements of the project.

Read more about these web typography techniques here:

http://thinkclay.com/technology/cufon-sifr-flir

http://www.webdesignerwall.com/general/fonts-and-the-web/