Online tools offer help for Web page designers


Most of us who have never had the opportunity to delve in multimedia design — either for the Web or for print — have never had to worry about fonts, margins, “Web-safe” color palettes and Cascading Style Sheets (CSS).

Today, however, an increasing number of professionals in journalism are being called on to develop and maintain a much broader set of skills, not the least of which is the ability to readily publish content for a quickly expanding and more visually driven Web.

Take infographics as an example. Any content worthy of a user’s time begins as a concept or an idea and numerous sites present hundreds of examples of cutting-edge infographics that are both informative and visually captivating.

FlowingData, a blog about data visualization mentioned several weeks ago, is one such site. There are others, however, that deserve a closer look. Information is Beautiful, a blog with a concept similar to that of FlowingData, features infographics on everything from the “varieties of intimate relationships” to the correlation between terrorism alerts and major elections. TNS Digital Life‘s area of expertise is producing self-contained PDF “reports” driven purely by visuals, such as that titled “Activating social media.” And Richworks is a blog of a more editorial nature, covering a broad range of topics that designers are sure to take an interest in.

Once one moves past the initial inspiration and brainstorming stages, however, he or she is sure to run into a dilemma about a certain aspect of design sooner or later: fonts. Fonts and the typefaces they fall within are often particular to certain operating system (OS) families, versions, and even individual computers. Specifying a certain font in the HTML or CSS code when designing a Web page, or even setting a typeface in an application like Dreamweaver or Flash, does not guarantee in the least that that computer the end-user is viewing the page from will have that same font and display the page correctly. Studies show that even recent fonts we might assume are common, for example, like Cambria and Calibri, are installed on fewer than 70 percent of Windows computers.

The CSS font sampler and survey page at Code Style goes a long way towards alleviating the headaches felt by Web designers dealing with font-related problems. It provides comprehensive rankings of the most common fonts for Windows, Mac, and even Linux/Unix by percentage of computers a font is installed on (complete with images of each font), meaning the higher a font is ranked, the “safer” it is to use it on a Web page. It even has an innovative “font stack builder” for configuring style sheets that allows one to mix and match similar fonts and calculate the total probability that a user’s computer will be able to render the content correctly.

Assuming we eventually solve the issue of fonts, however, there is still no assurance that all browsers will render a given page exactly the way we want. The back-end “engines” that browsers use to render pages differ greatly in the ways they interpret HTML, CSS, JavaScript and other Web languages, meaning that while some browsers may load a page correctly, others may display awkward margins, misaligned tables, strange-looking borders — or worse.

Short of installing every variety of browsers out there or testing the same Web page on scores of different computers, how do we test how Web pages will look in different browsers? Browsershots has just the answer. Users can type in any Web address and choose any combination of browsers, and the service sends that URL to an array of distributed computers that generate screenshots of how the Web page looks in those browsers. While results often take several minutes because each address is added to a queue, it’s a free and easy way to test compatibility across different browsers. If you find it fascinating how older browsers generate Web pages (no, that’s not nerdy at all), you might even have some fun typing in addresses of random Web sites and seeing how those browsers render them.

This entry was posted in Iku Kawachi and tagged , , , , , . Bookmark the permalink.

Leave a Reply