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?
  

I Have A Canvas And A JavaScript Paintbrush

One of the biggest problems of the Internet today is an over-reliance on proprietary plugins. Mac users will be especially familiar with the feelings of abject rage as a Flash game bogs down their system, takes over a chunk of memory, and causes the fans in their laptop to whir consistently, due to the lack of hardware acceleration in the Mac version of Flash Player (which was only recently remedied). There's Flash, Silverlight, Java, and whatever proprietary single-use plugin TV networks' websites make you install to watch their shows.

"So what?" you say. "I just install the plugins when I need them. No big deal." Yeah...except each one requires a download, an installation, and a browser restart. It's a hassle. (And we won't get into cross-platform issues.)

Better than that, each plugin introduces its own set of security holes. Flash is notorious for this, but it is not alone in that regard.

Plugins used to be the only way to provide interactivity to a website. Something better is looming on the horizon, though: HTML5, and with it, <canvas>, <video>, and <audio>.

The video and audio tags are fairly self-explanatory. As long as the browser properly implements them, they provide plugin-free playback for videos and sound, respectively. Canvas is an HTML tag that essentially gives you a blank area that you draw on using JavaScript. The code required is fairly similar to creating graphics in a Java applet, for those of you who are familiar with that.

Java Applet Code:
g.setColor(new Color(0x5E, 0x2F, 0x00));
g.fillRect(0, 180, 200, 50);

JavaScript Canvas Code:
ctx.fillStyle = "#5E2F00";
ctx.fillRect(0, 180, 200, 50);

Canvas/JavaScript provides no easy way, however, to draw ovals or rounded shapes. Compare the two methods for drawing a rectangle with rounded corners:

Java Applet Code:
g.setColor(Color.white);
g.fillRoundRect(45, 35, 50, 35, 10, 10);
g.setColor(Color.black);
g.drawRoundRect(45, 35, 50, 35, 10, 10);

JavaScript Canvas Code:
ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(45, 45);
ctx.quadraticCurveTo(45, 35, 55, 35);
ctx.lineTo(85, 35);
ctx.quadraticCurveTo(95, 35, 95, 45);
ctx.lineTo(95, 60);
ctx.quadraticCurveTo(95, 70, 85, 70);
ctx.lineTo(55, 70);
ctx.quadraticCurveTo(45, 70, 45, 60);
ctx.lineTo(45, 45);
ctx.fill();
ctx.stroke();
ctx.closePath();

Even with that convoluted code, I still saved approximately 60 lines of code generating this image in JavaScript with canvas than it took to do the same thing in a Java applet. Most of this savings probably came from the fact that JavaScript has both a fillStyle and a strokeStyle, while Java uses setColor() for everything, necessitating more color changes. Plus, the user doesn't have to install a plugin to make it work, it renders pretty much instantaneously in the browser window, and you could copy the generated image and save it if you wanted to, which would be useful if you wanted to code a drawing web app of some sort.

Want to learn more about drawing with <canvas>?

• HTML 5 canvas - the basics
• Canvas tutorial - MDC
• W3Schools HTML5 tutorial (for HTML5 in general, not canvas specifically)
  

The Standards Are There, So Use Them

Imagine a scenario.

Kate has just been hired by Widgets Ltd., a start-up company that is being run in a garage outside Madison, Wisconsin, to create a website for their products. She has no web design experience outside of Comp Sci 101, back in the bad old days of freshman year. "No problem," she thinks to herself. "I've got an old copy of Microsoft FrontPage here. I'll just draw some tables and drop the content in. Easiest money I ever made."

Of course, we, as web developers ourselves, can imagine the hideous code that will result from this misguided approach:

<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome to Widgets, Ltd.!</title>
</head>

<body bgcolor="#00FFFF" link="#00FFFF" vlink="#00FFFF">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="59">

So much for separating organizational and display functions. Kate's work failed to adhere to (or even consider, for that matter) web standards. Without boring you with the details, the above code snippet contains four errors when run through the W3C HTML Validator — and we haven't even made it to any of the actual content yet.

What are web standards, you may be asking? They are a set of guidelines codified by the World Wide Web Consortium (and Ecma International, which standardizes ECMAScript/JavaScript). They define the elements, the syntax, the attributes, the doctypes, everything. Browser developers then take these standards and program their browsers to properly render web pages based on these standards. Opera generally leads the pack as far as standards compliance, with Firefox and Safari following and Internet Explorer trailing in a distant fourth.

Now, designing with web standards does not mean making your website look exactly the same across all browsers. Someone looking at it in Firefox on Windows XP is going to get a slightly different look than someone looking at it in Safari on Snow Leopard. Is that wrong? Is that bad? Not at all. Very few people will even notice without you pointing it out to them. They're different, not wrong — if you coded the site correctly, that is.

So, in summary, my argument for designing to web standards is this. Internet Explorer 6 (and prior versions) didn't care about abiding by web standards, and complications stemming from that caused much wailing and gnashing of teeth. Why would you want your website to even have a possibility of inspiring a response like that? Design to the standards. It will cause many fewer problems.

*The problems described herein are not unique to Microsoft products by any means. However, every time I bash Microsoft, Canonical and Red Hat send me a tenth of a penny. I look forward to being able to afford a gumball.

Architecture, Latches, and Taxes

Information architecture is the confluence of context, content, and users. What does that mean? It means you design your website around your content, while keeping in mind usability, the perspective from which your audience is coming, and any relevant "stuff" (for lack of a better term) from your business.

Richard Saul Wurman first coined the term information architect in the mid-1970s. He explains his choice of words as the following:

Unfortunately, design, which used to be a perfectly good word, means to make something look better for most people....The designer is called in to make a magazine article look better, or an illustrator is asked to make a picture look arresting, or a photographer is asked to take an interesting view of an author or a subject. Nowhere are any of these designers used in the fundamental sense of creating meaning or understanding.

That's why I've chosen to call myself an Information Architect....I mean architect as in the creating of systemic, structural, and orderly principles to make something work--the thoughtful making of either artifact, or idea, or policy that informs because it is clear. I use the word information in its truest sense. Most of the word information contains the word inform, so I call things information only if they inform me, not if they are just collections of data, of stuff (qtd. in Wyllys, 2000).

So an information architect's job is pretty much all-encompassing: figure out what you're displaying, and present it in the best manner possible. Organizing the information is a big part of that. Wurman lays out the five LATCH methods of organizing:

• Location
• Alphabet
• Time
• Category
• Hierarchy
  

An example of information arranged by category and hierarchy is Jess Bachman's Death and Taxes poster, which divides the federal budget by department and uses a proportionally-sized icon to indicate the relative size of that department's chunk of the budget. (As a side note, it should come as no surprise to anyone that the Office of Governmental Ethics' icon is visible only with a microscope.)

Web designers should be concerned with information architecture. Website content is divided into multiple pages, of course. How do you organize them? This is where the context comes in. Is this a large e-commerce site? Organize by product type. Is this a site dedicated to the history of Elbonian widgets? Organize by year. What are your users going to be looking for? Figure out how to get them to what they need, as effortlessly as possible. You are an architect. Construct your virtual building.

Web Writers: "You Have A Short Attention Span"

My conclusion is this. Write short, grammatical sentences and have other people edit them.

I probably should have broken that into more sentences. Let's review what isn't acceptable in web writing:

• Semicolons
• Long paragraphs
• Long headers
  
• Complex sentences
• Sentences that aren't stuffed with keywords
• Formal writing style
• Exclamation points
• Excessive bold and italics
• "To be"
  

Some of this is common sense, carried over from print writing. Others were developed to work within the constraints of screen real estate. (Remember 640x480? Those were the days.) Killing semicolons, however, is advice I find odd. How else would you punctuate a list that has items requiring commas? "Mr. John Doe, Esq., Dr. Ibee Grumpy, MD, and Mrs. Jane Smith" is not as readable as "Mr. John Doe, Esq.; Dr. Ibee Grumpy, MD; and Mrs. Jane Smith".

Whoops, I exceeded the sixty-word-per-paragraph guideline. Take a deep breath.

How many words should there be in a paragraph? Let's take a look. Ask a Manager's most recent post will serve as an example. Excluding the introductory "A reader writes" paragraph, she averages 77 words per paragraph. Even a web writer's blog occasionally exceeds 60 words per paragraph. The paragraphs that don't are often one sentence long or sound choppy. I think paragraph length will follow from your writing style and your topic.

The next web writing tip is a short paragraph. Don't make grammatical mistakes. Proofread your text. Have someone else proofread your text.

Yes, make your content engaging. Yes, remember that websites aren't in order like a book. Yes, make your stuff easy to read and navigate.

The most important point to remember? Good web writing is good writing.

A Library for IT Folks

ITIL is the Information Technology Infrastructure Library, a collection of documents describing IT best practices. ITIL was first developed in the late 1980s by the UK's Central Computer and Telecommunications Agency The ITIL philosophy is centered around a Service Strategy, which supports the areas of Service Design, Service Transition, and Service Operation; these processes are continually being improved (image from SUBnet.192):

ITIL has had 3 versions: v1, encompassing 30 books on various aspects of the IT process; v2, with 8 books; and v3, simplified to 5 books. ITIL is in the process of transitioning from version 2 to version 3, though both versions are still widely used by IT companies.

One of the aspects included in v2 -- specifically, the Service Support category of v2 -- is the Service Desk. It is pretty much what it sounds like: the company's tech support function. There are three descriptors for a Service Desk, each with differing levels of actual tech support provided.

• A Call Center is essentially a relay station for taking customer problems and forwarding them to the appropriate support department. While Call Center employees can solve some basic problems, most of the time they just get information and forward customers to another department that is better equipped to solve their problem.
• A Help Desk solves problems as quickly as possible. They provide support, but don't handle maintenance-type activities.
• A Service Desk handles tech support, maintenance, change requests, etc. Pretty much, if it has to do with their system, they handle it.

The Service Desk activity is categorized under the Service Operation banner in ITIL v3.

There are many software solutions for ITIL, spanning programs that cover the entire breadth of ITIL activities and programs that focus on one aspect of it. One more focused product is ServiceDesk Plus, "a web-based help desk software that...[manages] all your communications from a single point". It takes requests via different methods (phone, email, etc.), applies the necessary rules and/or conditions, and routes them to a technician for fulfillment. (Workflow image from ManageEngine.)

There are also several companies that provide ITIL consulting services. One such company is Enterprise Consulting Services, "a boutique consulting firm specializing in IT Service Management consulting, implementation and outsourcing, using the ITIL framework". ECS focuses on translating ITIL best practices into concrete implementations based on a company's needs.

One such client with whom they have worked is Iberdrola USA (formerly Energy East), a multi-state energy corporation. ECS provided training for employees, allowing them to become certified in ITIL. They also redesigned the support and security systems and upgraded their computers (Windows XP, Office 2003, and McAfee security -- in related news, Iberdrola probably just had svchost.exe disappear for a while). These moves resulted in annual savings for Iberdrola of about $1.4 million. That's what applying optimized practices will do for a company.

Quote of the Day:
The Tech Support Glossary:
ID-Ten-T error: the user has just done something inane, like use their DVD drive tray as a cupholder. (Also known as ID10T.)

PEBKAC error: there is nothing wrong with the computer; the problem exists between keyboard and chair.

Layer 8: in the OSI Model, the user layer above the application. (See also ID-Ten-T.)

(from Wikipedia)

Buildings, Triangles, and Big Balls of Mud

Christopher Alexander had a problem. Actually, all architects had a problem. There they were, being hired to design buildings, and their clients understood the buildings more than they did. The problem, essentially, was translation. How could an architect take what the client described and turn it into what the client wanted?

Simple, Alexander said. Clients want basic variations of a set of buildings. We need a language that describes basic stuff (that's a technical term) in our problem domain, building buildings, that is simple enough to be understood and used by our clients: a pattern language. "The elements of this language are entities called [design] patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice."

Design patterns are not one-size-fits-all, cookie-cutter solutions. Instead, they are skeletons, templates, general descriptions of how one might solve a type of problem. For example, it has been determined that people like rooms where natural light comes in from two directions. That's a design pattern. Notice that the pattern does not say, "Put one 16"x30" window on the north wall, and one 24"x30" window on the west wall." It says, "The optimal room has natural light coming in from two directions."

Alexander came up with this concept in 1977. To this day, it has had a mixed reception in architecture. In 1987, however, Kent Beck and Ward Cunningham got the idea of applying the principles of design patterns to software. The "Gang of Four" (Gamma, Helm, Johnson, and Vlissides) popularized that usage in their 1994 book, Design Patterns: Elements of Reusable Object-Oriented Software (Wikipedia).

Good design patterns, in computer science, are classified in four categories: creational patterns, structural patterns, behavioral patterns, and concurrency patterns. Creational patterns define how an object is created. Structural patterns define relationships between entities. Behavioral patterns define methods and patterns of communication between entities. Concurrency patterns define how to deal with multiple threads in a program. Wikipedia has some good descriptions of software patterns.

An example of a good design pattern is the creational pattern abstract factory. An example of an abstract pattern is the AbstractCollection class in Java. This class provides the basic skeleton required to create a collection of objects. It has methods to add items to the collection, remove items from the collection, get the size of the collection, etc. Individual methods in the class can be overridden in subclasses to provide functionality specific to that implementation. Several classes implement AbstractCollection in a more specific way. ArrayList, by way of AbstractList, implements the methods so that they work with a resizable, sortable list of objects of a specified type. List implements them to work with a list of specifiable, but fixed, size.

To put it in simpler terms, an abstract factory pattern is like the definition of a triangle. The abstract definition of a triangle is that it is a shape with three sides. The abstract methods would be implemented in the classes RightTriangle, ObtuseTriangle, and AcuteTriangle, which would place restrictions on the angles of the triangle, as shown below (Wikipedia).


Bad design patterns are called antipatterns. While good patterns have dry names like "abstract factory", "composite", and "chain of responsibility", antipatterns have been given such monikers as "spaghetti code", "God class", and (my favorite) "big ball of mud". The big ball of mud starts out as a relatively simple piece of software, then through the addition of bits of throwaway code, quick fixes, and piecemeal growth, becomes an unwieldy, mutant program that would take a good deal more time and money to fix than it would have taken to properly maintain it in the first place. By leveraging all of my considerable artistic talent, I leave you with this insightful look into big balls of mud: