A big chunk of my weekend was devoted to Mac360. First, I worked to clean up the XHTML and CSS code.
Second, I installed a new font from Google’s new Font Directory. When those efforts were completed I modified Mac360’s page width from the old 760 pixels to a more modern 960 pixels. Along the way, Mac360 got a new logo with a new font, courtesy of Apple’s newest enemy, Google.
It’s All In The Browser
Amazingly, the web pages you view on the internet are not rendered the same in all browsers. In fact, most browsers render web pages rather poorly—because most browsers come from Microsoft.
To view a modern web site accurately you need a modern web browser.
Fortunately, Mac and Windows users have multiple choices among a variety of excellent browsers—the kind that display a web page close to what the original designer had in mind.
Apple gives us Safari, which displays web pages on a Mac, a Windows PC, even an iPhone. Safari’s engine comes from WebKit, an open source project which also supplies the engine for Google’s new Chrome browser, and other browsers.
Most Windows PC users in the US use one of a number of Microsoft’s Internet Explorer browsers; usually IE 7.x or IE 8 (Microsoft’s most improved browser ever). Prior to this weekend, the Mac360 web site looked crummy in Internet Explorer (versions 6.x, 7.x, or 8), OK in Firefox (Mac or Windows), yet very good in Safari and Chrome.
After the changes to code and installation of Google’s free fonts, Mac360 looks decent even in Internet Explorer. How a web page looks (and how it differs from the original design) depends mostly upon the browser.
Google’s Font Directory
For most of us, regardless of the browser we prefer, the number of fonts that can be used in a web page has always been limited—mostly to a dozen or so fonts common to both Macs and Windows.
Google’s Font Directory aims to change that by nearly doubling the number of so-called safe web fonts available to web sites (yes, there are other ways to embed fonts into web pages, though most are cumbersome).
Google provides the fonts under an open source license, and the fonts are served from Google’s servers. The Mac360 logo and title fonts were changed to the Droid Sans font, which should render nearly the same on most modern browsers.
Implementing the code was a breeze and took just a few minutes. First, there’s a link to the Droid Sans font on Google’s servers. Second, the font is embedded in Mac360’s CSS file. For the few browsers that don’t support the Google fonts, the CSS fall back font is used instead. Google provides a Quick Start Guide with example code, and a FAQ page.
Why is this a big deal? More fonts. And more to come.
And fonts that will display nearly the same on all modern browsers. For Mac360, the layout and design changes I made needed to pay homage to the site’s original multi-column home page, yet bring the code into almost modern compliance (HTML5 is one of our goals).
The way Mac360’s home page is laid out in columns places limits on the title length for each article, which means the font used for titles is very important. Google’s Font Directory fonts made the layout more consistent and it renders better, even in Microsoft’s older browsers (including IE versions 6.x and 7.x).
Along the way to the 960 pixel page width we managed to open up more space in the layout, and reduce the number of advertisements displayed on each page by half (and we always appreciate your support).
The result is a more accessible, more modern look; another step on the road to HTML5 and a completely new design later this year. Thank you, Google, for more fonts.