Why Web Designers Should Like IE 6

Cascading Style Sheets are what makes the Web not boring. CSS is descended from SGML (Standard Generalized Markup Language), which was created in the 1970s. The first version of the CSS standard was published in 1996, with version 2 being finalized in 1998. Version 3 is still under development.

The first browser to fully support CSS1 was a browser that only one person remembers: Internet Explorer 5 for the Mac. You read that right: The first CSS standards-compliant browser was created by Microsoft. That was in 2000, four years after the standard was first published and two years after CSS2 was released. Other browsers played catch-up in the months following.

The problem with the Internet in the time leading up to the adoption of the CSS standards was that no one had been willing to wait for the standards body to, well, standardize, and so they implemented horrible proprietary things like <blink> and <marquee>. Each new version fought to not only include the newfangled tags that its competitors had introduced, but also to create new features of its own. "Best viewed on <browser x, version y> at <designer's screen resolution>" became all too common.

So who was our knight in shining armor who delivered us from this? Internet Explorer 6.

Indirectly, of course. IE 6 in and of itself was not particularly revolutionary, except for the fact that its Standards Mode hewed more closely to the standards than any other major browser at the time (sorry, Opera, even back then you weren't a major browser). The revolution was its competitors.

See, IE 6 had something called Quirks Mode. Basically, if your HTML document had a certain doctype (or no doctype declared at all), the browser would fall back and render the page like IE 5 would have. This was to keep old pages from breaking. One consequence of this was that the infamous "whitespace bug" was perpetuated. CSS2 support was also not as good as it could have been. Mozilla and others jumped into the fray at this point, reigniting the browser wars. The result? Today, because IE 6 was so bad, we have Firefox, Opera, Chrome, and IE 9 (which will supposedly implement the standards way better than any previous version of IE).

Thank you, IE 6.

Beauty In Type

@font-face {
font-family: "FontinSansRegular";
src: url('fonts/fontinsans.eot');
src: local('?'), url('fonts/fontinsans.woff') format('woff'), url('fonts/fontinsans.ttf') format('truetype'), url('fonts/fontinsans.svg#webfontn8vXGJ0x') format('svg');
font-weight: normal;
font-style: normal;
}

Do you know what this is?

It's the future.

Okay, maybe it's not quite that dramatic. However, it does represent a huge step forward in web design. It's a web font declaration in CSS.

Let's go back to the dark ages, when Internet Explorer and Netscape Navigator ruled the Internet. In those days, text online was rendered in whatever fonts you had on your system. Running Windows 95? You got Arial and Times New Roman. Running a Macintosh? Default fonts were Chicago and New York.

Then came CSS, Internet Explorer 3, and the core fonts for the Web project.

The core fonts project aimed to provide a set of fonts that would be widely downloaded and used, which was supposed to ensure that websites looked the same across platforms. The downside to this was that the fonts had to be present on the user's system, not just on the web server. Granted, due to Windows' near-complete domination of the computer market, the vast majority of people probably did have the fonts installed. With the new (partial) CSS implementation in IE 3, you could specify typefaces. Yes, that's a choir of angels you hear singing "Hallelujah".

It still wasn't perfect, not by a long shot. You were still limited to whatever fonts your users had on their systems. You could be reasonably sure, however, that the fonts included in the core package were going to be present for the vast majority of your users. I mean, I could design a page using Footlight MT Light, but it might fall back to Times New Roman on your system.

With the introduction of the @font-face declaration in CSS 2, you could finally reference fonts that weren't stored on the user's computer! In the example above, I'm telling the browser to grab the Fontin Sans file, which is stored in the subfolder fonts. On my server. Not your computer. As long as you're using a browser that's at least as new as Internet Explorer 4, you'll see Fontin Sans on this webpage.

"Wait!" you say. "It displayed your fancy-schmancy new font after a minute, but when it first loaded, [it was in Times New Roman/I couldn't see any of the text]! What gives?"

Yeah, that's the problem with using @font-face. Pingdom says that fontinsans.ttf is one of the last things to load, and it takes a comparatively long time to load on top of that. Until it loads, the page is in limbo. Different browsers handle this limbo time in different ways. Firefox and Opera temporarily fall back to the next font in the font stack. Safari completely hides the text (though not the underline on hyperlinks, interestingly enough; if you load that page in Safari, you can see random lines going across the screen). Internet Explorer, for me at least, takes so long to load the entire page that it renders in Fontin Sans when it finally displays.

When the page is finished loading, though, the typeface is so beautiful that it makes Michelangelo weep.

(Again, maybe not quite that dramatic.)

Want to learn more?

• Web Typography
• 50 Useful Design Tools for Beautiful Web Typography
• Web Open Font Format
• Arial or Helvetica?
  

Yay for Holidays...

...when I have way too much time on my hands. Here's some of the stuff I've been doing.

1. Installed Firefox 3.6 beta 4. I can't begin to describe the joy my nerdy little heart felt when I discovered the Zelda persona. Now my browser is complete with the Triforce, Sages' Medallions, and some Rupees thrown in for good measure. (Personas are skins for Firefox. Chrome supports something similar, but none of their themes appeal to me.) The beta has also changed the behavior for opening links in new tabs: instead of opening all the way to the right, like in Firefox 3.5, they open right next to the parent tab. I still cannot stress enough how much I dislike the Awful Bar, but other than that, I can't complain about anything. Firebug and the Web Developer Toolbar still work, so I'm happy.
2. Downloaded the source code for Chrome OS. I successfully followed the instructions to build a working version of the OS, but neither my bootable flash drive nor the .vmdk image would work in VirtualBox. For some reason, the OS refuses to log in with my Gmail account, my other Google account, or the default chronos login. Sigh.
3. Tinkered with some Java. A (non-programming) friend of mine was trying to write a Java program that would display information in some arrays and perform some basic calculations, but didn't know how to get the program to pull individual values out of the array. I helped her figure out how to do that and write a while loop that would perform the calculations on all five sets of values. Yes, perhaps there are greater things to get excited about, but I love the smell of success on a Saturday morning, no matter what form it comes in.
4. Stayed up way too late on Thursday night/Friday morning to snag all those amazing Black Friday deals. </sarcasm> The best deal came today, when I got Firefly: The Complete Series for $10.99.
5. Did some video editing. Nothing like a little editing to tell you that your awesome system that scores 5.2 and above on all aspects of the Windows Experience Index is really just an underpowered piece of junk. But I'm happy with the output...quite happy, in fact.

And in the spirit of Thanksgiving, here are some programs I'm thankful for:

1. Foxit Reader. It does everything Adobe Reader does, only faster and without all the bloat. In addition, Foxit has paid programs for editing and creating PDFs, like Adobe, but their programs are cheaper.
2. Parallels. I've got a WinXP and a Ubuntu Linux VM with this. The sad thing is that some of my older Windows games function better on the VM with a fourth of the memory that's on my Win7 computer. Some things I just don't understand.
3. GoldWave. This is the best audio editing software ever. True, it isn't open-source like Audacity, but it just feels more intuitive to me. Plus, it has a very generous trial period -- you'll have plenty of opportunities to decide whether you like it. The Noise Reduction feature is the best thing since cotton candy.
4. TextWrangler. This far outstrips Notepad. It has (limited) code highlighting, and it preserves indents when you hit Enter.
5. Tap Tap Revenge 2. I can't afford Guitar Hero, so this is the next best thing. I only wish it had more songs that I like.

Well, I mentioned Firefly, so I have to have another quote from there today!

Quote of the Day:

Take my love, take my land,

Take me where I cannot stand;

I don't care, I'm still free,

You can't take the sky from me.

--Firefly theme song

iPhones, the Web, and Dashcode, Oh My!

Scene: A twentysomething plays with his iPhone.

Twentysomething: I love my iPhone! I could spend all day doing stuff on it. (thinks) You know, my personal website doesn't display very well on it, though. Everything's all tiny and jumbled up. I wonder how I could fix that?

And so our hero consults The Google for answers. He's not ready to pay the $99 for the privilege of submitting real native apps to the App Store, so he's settling for a little web app development.

There are two ways to develop for the iPhone. One, you can create a full-blown native app, which you can distribute via the iTunes App Store and possibly make money from. Two, you can create a web-based app, which will display in the iPhone's browser. You can't make money off a web app, but you don't have to pay the $99 fee to be in the iPhone Developer Program, either. On top of that, there are really two options for web development: modify an existing web page so it displays well in Mobile Safari, or use Dashcode to mimic the look and feel of a native app.

First, let's look at modifying an existing web page. Web pages are traditionally designed for full-size computer monitors with resolutions of 800x600, 1280x1024, or something similar. The iPhone is considerably smaller than that at 320x480 pixels. If left to its own devices, the iPhone will assume a page width of 980 pixels and scale that to fit the display. In portrait orientation (home button to the bottom), that means tiny pictures and illegible text, since 980 pixels is being forced into 320. Landscape orientation (home button to left or right) fares a little better, since it's only having to reduce to 480 pixels. Still, it generally ends up being pretty tiny.

So, how do we fix that? Obviously, we could leave it as-is and force the user to manually zoom in by double-tapping elements or pinching, but come on. We're classier than that. We're going to make use of a simple meta tag to change the scale. Drum roll please...

<meta name="viewport" content="width=device-width">

Hallelujah, text that's readable without a microscope!*

"That's great," our hero muses, "but I want something...better. How can I create something that looks more like an app and not a web page?"

Enter Dashcode. This is a free program (Macs only, sorry Windows devs) that includes templates, buttons, and code snippets that allow you to create real web apps that look like native apps. You can't take advantage of as many of the iPhone's built-in features this way, but for someone operating on a budget, it's a pretty good alternative.

When you open Dashcode, you can choose a template for your project: Browser, Utility, RSS, Podcast, or Custom. Browser is pretty much a menu interface: You put in a list of stuff, and when someone taps on an item, they get more information about that item. Utility's default interface is a notepad/text area with customizable settings. RSS lets you specify a Feed URL and displays a list of article headlines from that feed. Podcast functions very similarly, but instead of articles, it displays podcast titles and allows the user to listen to them. Custom presents you with a blank slate that you can customize to your needs. Whichever template you choose, you have to provide it with data sources and whatever functionality you need.

Either way you go, you're well on your way to creating a good web app!

*Obviously, there are more things you can tweak to optimize your web page for the iPhone. This is merely the most obvious and easiest. Seriously, Google is your friend.

Quote of the Day:
I was feeling pretty creaky after hearing the TV reporter say, "To contact me, go to my Facebook page, follow me on Twitter, or try me the old-fashioned way -- e-mail."
--Reader's Digest, November 2009, pg. 210

So, There's This Thing Called Opera...

It takes a lot for me to want to switch browsers. I'm pretty much a diehard Firefox devotee. But every so often, I try out new browsers -- Chrome, Safari, even Flock. So when I heard that Opera had a new version out that has all sorts of nifty features, I had to take a look.

Opera is generally viewed as a "niche" browser, used mainly by a group of hardcore fans. According to StatCounter's global stats, Opera has almost 3% market share, compared with IE at 58% and Firefox at 31%. The buzz seems to be growing, however, since Opera 10 was downloaded 10 million times in the first week after its release. The dynamic is vastly different in the mobile world, however: Opera holds over 25% of that market, above even the iPhone at almost 23% and Nokia at almost 19% (via StatCounter).

Some of Opera's features are not exclusive to it (Sessions, Closed Tabs, Password Manager, Find As You Type, and Fraud Protection all have equivalents in Firefox, for example), but there are some interesting features highlighted in its browser tips.

• Speed Dial shows a page with thumbnails of up to 25 Web pages, fully configurable.
  
• Opera Link allows you to sync your bookmarks with your other Opera-using devices.
  
• Opera Turbo routes Web pages through a proxy server for compression purposes before sending it on to you, reducing load time.
  
• Visual Tabs shows a thumbnail of opened tabs when you hover over them or expand the tabs pane.
  
• Fast Forward and Rewind send you to the latest or first page, respectively, of the site you're currently browsing.
  
• Notes seems to be the equivalent of Notepad or Wordpad, integrated directly into the browser.
  
• Bookmark Nickname allows you to give a bookmark a short name that you can type into the address bar -- for example, "fb" for "http://www.facebook.com".
  
• Search Keywords allows you to specify what site you want to use for a search by using an abbreviation (putting "w" in front of your search searches Wikipedia, or "z" searches Amazon).
  

As a web designer, one aspect that is of particular interest to me is standards compliance. The Web Standards Project has a test (Acid2) to determine if your browser is compliant with the most up-to-date standards in HTML and CSS. If it is, the test will display the words "Hello World!" and a yellow smiley face. If not...well, you'll see.

Opera 10.00 and Firefox 3.5.3 passed this test with flying colors. This is how the smiley is supposed to appear:
Firefox 2.0.0.6 didn't do quite so well:
Of course, Internet Explorer experienced epic fail:
So overall, Opera seems to have been developed by people who paid attention to standards -- always a plus. They're also committed to spreading knowledge of their browser and Web standards in general through the educational resources on their site.

Quote of the Week (Couldn't Resist Edition):
"Let your mind start a journey to a strange new world! Leave all thoughts of the life you knew before! Let your soul take you where you long to be!" --The Phantom, Phantom of the Opera