On-page Question..

Q: How does browser compatibility affect the design?

A: Very little. All recent versions of browsers (including IE 6) support web fonts, so design is only compromised by browser CSS compatibility. For example, some versions of IE won’t allow text to be displayed on an angle. In these scenarios, the browser will ignore the CSS entry, and then results in layout issues that we would have to fix by creating a separate CSS for the offending browser. In most circumstances, it is possible to make design exceptions for incompatible browsers without compromising the design.

Q: Are there any good tools for creating “live text” graphics? 

A: In truth, I haven’t come across any great tools yet. Tools like Adobe Edge do show some potential, although at the moment the file sizes of the elements it generates are too large, and it is heavily tied into its own webfont library Typekit. We tend to create our own elements as in their basic form these are just classic HTML and CSS which incorporate webfonts and these can be created with any standard web development tools.

Q: Is there a good resource for using “live text” within web pages?

A: Again, there isn’t an all-encompassing resource that caters for webfonts, HTML, CSS, and SEO. There is, however, a lot of resources that deal with these items individually. The best advice I can give is to utilise the work that other people have created and borrow that. The example site shown above shows some great examples of common elements, so please feel free to use the code from there. I am planning to create code snippets for the various elements of the demo site so they can be more easily used. Please drop me a tweet or an email if you would like me to notify you as they become available.

Q: Do webfonts slow down page load?

A: Each webfont is around 50k in size, so overuse of webfonts can affect page load. As webfonts are often used to replace graphics, the end result can be that webfonts could easily decrease page size. My advice is to evaluate the file size during the development process and keep to your existing page size thresholds. Obviously it makes no difference if bandwidth is used downloading a graphic or a webfont.

Q: What about roll-overs and mobile viewing? Do they work on touch screens?

A: Roll overs (or mouse overs) don’t work on touch devices, there are two solutions to this, either remove the mouse over event for touch devices so that the panel just acts a button, or change the mouse-over event to an on-click event to show the text behind the rollover. Either scenario is fine as the text hidden behind the mouse over event will still be visible to search bots.