My own reading vision is fine. The only time I ever increase the text size is to test my layouts to make sure they don’t break for people like my mom.

Until recently, that is.

No, it’s not because I’m past forty. It’s because I have a new computer. And although the old computer had a physically larger screen it had a lower resolution. Consequently, everthing is much smaller now, and I find myself hitting Command + a lot! Don’t get me wrong: I love my new MacBook Pro — but its high resolution (1680 x 1050) has required more of an adjustment than I expected.

So far I’ve been quite impressed with how well that Command + function works. Most of the sites I frequent don’t break, at least not significantly. However, it really bugs me that Firefox doesn’t remember your settings when you open a new tab. I know I could change my default font size in the Preferences pane, but I prefer not to do that. I want to see what the average user sees (is there such thing as an “average” user?), and most people don’t realize that you can change their browser’s default font size. I’m sure many people don’t know about Command + either.

I knew that my new computer would improve my work process in a lot of ways. It’s bigger, faster, and better than anything I’ve had before. But I didn’t expect that it would actually improve my product, by giving me better understanding of the needs of people with visual impairments — and new realization that the demographic is much larger than I’d realized, since even those with otherwise-normal vision may find themselves having difficulties as technology improves and screen resolutions increase.

I hugged her.

Like all typography nuts, I firmly believe that the details matter. That proper use of em- and en-dashes, hanging punctuation, leading & kerning, and all that good stuff, make a page look polished and beautiful. That even those who have neither the eye nor the vocabulary for those details will respond more favorably to a well-designed page than a poorly-designed one.

What’s hard is explaining this to people who are not typography nuts. When I gently suggest that proper italics might look better than underlining for emphasis, when I point out that most fonts include special characters so that typing 1/2 or (c) may not be necessary, and yes, when I explain the difference between hyphens and em- and en-dashes, I am likely to be met with glazed expressions, if not eye-rolling or outright laughter, because there she goes again and who cares about punctuation anyway.

I don’t think I’m being particularly overbearing or pedantic when I talk about this with clients. I think it’s simply that the average joe just does not realize how important these details are in creating an overall effect.

It’s more than just a compendium, though, because Vince, who coined the term “mystery meat navigation,” actually analyzes what makes each site so bad. Using real live websites as examples he points out myriad ways that navigation, accessibility, and overall design can be improved.

Some of the sites he highlights make better (or should I say worse?) examples than others. As a designer myself, I am not so interested in the mom-and-pop shops with ten-year-old homemade websites. But I find it absolutely fascinating that many of the “daily suckers” are websites from large companies who must have spent thousands of dollars on supposedly cutting-edge flash sites that turn out to be nightmares of accessibility.

1. An editor with all the bells and whistles

One of the most popular is the utterly charming picnik.com — I have yet to see a friendlier interface on any online application. Picnik gives you almost as many options as Photoshop, plus you can save your images directly to flickr, Facebook, and so forth. You can add a text layer, you can add a cute frame, you can convert your photo to sepia tones… you name it! Picnik is perfect for scrapbooking, making cards, family photo albums, all that good stuff.

2. An editor with no bells or whistles

What if you don’t want all the good stuff picnik has to offer? Maybe you don’t have hours to waste experimenting with all those options and filters. Maybe you don’t want to know what an “unsharp mask” is. Maybe you just want to optimize your photos with the absolute minimum fuss and hassle.

If that’s the case, try webresizer.com. This is a neat little application that does it all for you. Just upload a photo and it automatically resizes and sharpens it for you. You can change the settings if you want — it does all the basics like cropping, rotating, adjusting color — but even if you don’t change a single setting you’ll still end up with a nicely optimized photo.

So I went to law school. And to my amazement, I loved it. I loved law school for many reasons, but the main reason was that I found it very easy to “think like a lawyer.” I never found it easy to think like an undergraduate liberal arts major, but thinking like a lawyer not only felt as natural as breathing, but was also supremely satisfying.

Think like a lawyer? What does that mean?

Well, at least in theory, law is about math, logic, and flow charts. It’s binary. Rational. Reproducible. More than one of my law professors joked that the reason we chose law instead of medicine was because we were bad at math. That never made sense to me because so much of law is mathematical. Take, for example, the rules of intestate succession: it’s a giant flow chart. If the spouse is still alive, do this. If not, do that. Thinking like a lawyer means (in part) being able to follow a flow chart.

At the same time, the law is all about persuading others to your point of view, whether you’re a student writing a law review article, a trial lawyer writing a pleading, or a judge writing an opinion. And what are the tools of persuasion? Surely not math and logic. No, persuasion is all about the art of rhetoric, language, sending a message, telling a story. And there is nothing on earth I love as much as a good story.

The problem is, the story has to be told within the confines of the flow chart. Sure, you can argue about interpretation, you can cast the facts in this or that light, but the statute is a given, and (unless you’re a legislator) you have to accept it.

And that’s the crux of it. Thinking like a lawyer, to me, means having to go back and forth between two sides of your brain. Between the rules and the story. Between the “code” and the “art.” In fact, it’s not simply going back and forth: each side informs and is guided by the other. You have to have your feet in both camps simultaneously.

I’m sure you can see where this is headed. Graphic design, of course, also exists at the intersection of code and art. Like lawyers, graphic designers have a message to convey, a story to tell. And like lawyers, designers never start with a blank slate. There are always rules, client specifications, standards, limitations, and code that must be adhered to. Says Andy Rutledge in his recent article at A List Apart:

No component fuels creativity more than constraint. Indeed, without constraint, creativity (and design) is irrelevant. The discovery process is mostly about finding constraints, which is why we must do such a thorough job of it.

Constraints are a designer’s best friend. They’re signposts, not shackles. In a sense, constraints amount to the solution half-built. It is merely up to us to then realize the other half according to what these signposts indicate is appropriate.

He is so right. In fact, when I look back at my own work, I realize that the projects I’m proudest of started with the most constraints, and the ones that now make me cringe are those where I started with a nearly-blank slate.

The path I followed from law school to graphic design was not a straight line. There were plenty of twists and turns and even some back-tracking. In retrospect, though, it feels like a natural progression from the one to the other.

Postscript: Although I did get my degree, I’ve never actually practiced law. I’m sure no real lawyer worth her salt would agree with my blithe statement that law is just a bunch of flow charts.

I think this is such a good thing.

Wordpress.com beats Blogger hands-down on a number of fronts. WP generates much cleaner code. WP sites load faster. WP allows you to create multiple — infinite! — pages on your site. WP’s text editor gives you many options, including one-click insertion of weird symbols (like oh for example pilcrows ) and proper headings. Even better, WP’s text editor is typographically correct, creating em- and en-dashes and curly quotes to your heart’s content.

Even if Wordpress.com did none of the above, however, it would still beat Blogger hands-down.* And that’s because of the way WP handles spam. Both WP and Blogger do an excellent job of preventing spam comments from showing up on your blog. But they do it in very different ways.

Blogger uses something called a CAPTCHA, which stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” I’m sure you’ve seen these. The way it works is, you are given a challenge that is supposed to be easy for humans but impossible for computers to answer. If you respond correctly, you are assumed to be human, and your comment will be posted. If you don’t respond correctly, you are assumed to be a “spambot” and you comment is assumed to be spam. On Blogger, like many other sites, the challenge is to type in the random distorted letters shown in an image:

And yes, challenge is the operative word here. Personally, I am rarely able to type in the letters correctly the first time. Sometimes I misread the letters (is that a g or a q? an l or an I?). Other times I mistype the unfamiliar combination of key strokes. Very annoying.

Worse than the annoyance, though, is the attitude it implies. It doesn’t seem fair that the burden is on us to prove that we are human! As if the spammers, phishers, and hackers haven’t caused us enough trouble already! Not to mention the accessibility problems it causes for the visually-impaired. Grrrr!

Wordpress, on the other hand, uses a completely different model. Nobody has to prove anything. Instead, every comment is run through a service called Akismet, which checks to see if the comment meets any of a number of criteria that are suggestive of spam (e.g. multiple links, certain keywords which I’m not going to type here, particular IP’s, etc.). If the comment meets the spam criteria it gets placed in a “holding tank.” You can check the holding tank to make sure no legitimate comments slipped in, and after a while the spam is deleted. And if a spam comment happens to slip through, you simply tag it as spam and Akismet learns from the mistake.

Akismet is extremely effective. In the two or three years that I’ve used it I have never had a legitimate comment get trapped. Occasionally I’ve had spam comments come through, and while that is unpleasant, if you’re paying attention to your blog you’ll catch the error quickly. And if you’ve enabled comment moderation the spam won’t appear on your blog, anyway. In my opinion, the simple courtesy of assuming your commenters (commentators?) are human and not making them have to prove it is well worth the unpleasantness of the occasional error.

So, if you’re contemplating switching from Blogger to Wordpress.com… I say go for it!

* * *

*In fairness I must mention three areas in which Blogger may, arguably, have an advantage over WP.

First, Blogger allows you to make whatever changes you want to your theme. You can get your hands delightfully dirty in the HTML and CSS. Some may not see this as an advantage, though, because it allows people to create some pretty crappy designs. Wordpress.com, on the other hand, makes you pay $15 per year for the privilege of touching the CSS, and you are not under any circumstances given access to the HTML/PHP files that make up your theme. However, this is why all WP blogs look so nice.

Second, Blogger’s ridiculous practice of enclosing the entire post in a single <p> tag and making you create “paragraphs” with forced line breaks means that it’s much easier to post poetry.

And third, WP doesn’t allow any advertising — not one tiny GoogleAd — on its blogs. Which, again, is why they all look so nice.

If any of Wordpress.com’s limitations bother you, remember too, you can always host your own. In which case, the sky’s the limit.

In essence, the goal is to set up your HTML — your content — so that it is purely semantic. Your content is composed of words which are arranged in outline format. You use HTML to organize that content into headings, paragraphs, lists, blockquotes, tables, and so forth, according to the meaning of the text.

Your presentation, which includes the basic page layout (e.g. sidebar on the left) as well as colors, fonts, and background images, is the icing on the cake. Like actual icing, you put it on at the end, after the HTML is coded. Because the presentation layer is hidden away in a separate style sheet, it doesn’t get in the way of search engines. Access for the visually-impaired is much improved. And your site is very easy to update. If you change your mind about the color of the text in your blockquotes, you only have to edit one or two lines of code, and voilà!

In the early days of the internet it wasn’t like this. Presentation and content were all mixed in together. If you wanted a pretty layout you had to make a table and fill it with sliced-up images. If you wanted to change the color of the text in your blockquotes, you had to go in and find each blockquote and modify the HTML with font tags. This code “bloat” results in web pages that are slow to load, a huge hassle to update, and not search-engine friendly.

Whew! Thank goodness for separation of form and content.

Except that sometimes the two can’t be separated so easily. Sometimes form is content.

For example, not too long ago I did a website that included a restaurant menu. I thought a lot about how to code the information in a semantically-appropriate way, asking myself what would make the most sense if I was hearing it on a screen reader. After much deliberation I finally decided that the menu consisted of tabular data (menu items, descriptions and prices). Others have argued that restaurant menus are unordered lists or definition lists or a series of headings followed by paragraphs. But I think they are truly tabular data.

The format of a table shows the relationships between data. If you’d be equally likely to scan down the columns as across the rows, it’s a table. Generally, when you look at a new restaurant menu, you probably would read row by row, to get an idea of the range of food and prices. But if you’re in the mood for pork, you might start by scanning straight down the left-hand column looking for pork dishes. And if price is your main concern, you’re not going to bother with the left column; you’re going to start on the right. The point is, the physical arrangement of the data — the format — conveys the meaning.

Here’s another example where the physical arrangment conveys meaning: poetry. This is one that puzzles me no end. Are the stanzas of a poem paragraphs? Or is each separate line a paragraph? If one stanza is a paragraph then I will need to use the dreaded <br /> tag (mixing “presentation” into the HTML) to force line breaks. But if each line is its own paragraph then I will need to do something to create the larger gaps between verses — use <div>s, I suppose. Again, mixing presentation into the HTML.

Hmmm…

Luckily, there are oodles of web design galleries out there that have already compiled links & screenshots of interesting websites. These can be great starting points for your quest for inspiration. Here are a few of my favorite compilations:

• Design Meltdown: I love this site because it uses so many different categories. You can check out a gallery of, for example, sites that make use of drips, sprays and splatters. Or — my personal favorite — tiny sites.
• Smashing Magazine: You are absolutely guaranteed to find interesting stuff here. You could start with their list of 45 Fresh, Clean and Impressive Designs.
• Web Creme: This site gets extra points for credibility because it, itself, is so beautifully designed. Neat color categories, too.
• StyletheWeb.com: I like this one because it offers categories based on content, such as education or technology, as well as design-based categories. However, I wish they provided larger screenshots.
• CSS Zen Garden: This isn’t a compilation of sites; rather, it’s a single site with multiple themes created by different designers. So cool!
• Nerd Business’ Top 100 CSS Designs of 2007: A very interesting list with a few surprises.

Do you have a favorite web design gallery? Let me know, and I’ll add it to the list.

• an evil-looking “congratulations, you’ve been hacked” message complete with scary pictures and spooky music
• an “internal server error” message
• an “account suspended” message
• a “server not found” message
• a “please enter userid and password” message

If you sent me an email on Sunday or Monday it may have simply bounced back with no explanation.

You can see where this is headed…

It turns out that it wasn’t just my site. Multiple servers were hacked into over the weekend, causing much damage. My account was so badly corrupted that most of it had to be wiped clean. Fortunately, the important stuff was all backed up. Even so, I’ve had to spend the last few days working nonstop to clean the mess. I very much appreciate the support and patience I’ve received from my family, friends & clients — thank you, all!

And I am waiting for an official explanation from my hosting company.

[Update -- 3/6/08: I've got everything up and running again. Although I was a bit disturbed by the apparently conflicting explanations I received at different times from my hosting company I am now pretty sure it was an isolated, freak event. I hope.]

Pilcrow 1

The first version of this site was extremely plain and simple. It was my first attempt at a standards-compliant site. I had just read Jeffrey Zeldman’s Designing with Web Standards and my sole concern was learning this thing called XHTML. I didn’t care too much what the site looked like. I just wanted the code to be valid. Thankfully, not even a screenshot exists any more.

Pilcrow 2

Pilcrow 2 was much prettier. I found a lovely photo of an inkwell at iStockphoto, and I had learned enough CSS tricks that I could incorporate image replacement techniques and fancy hover effects on the navigation links:

In fact, there was nothing wrong with the site at all. It did a perfectly adequate job of displaying my wares. And I still like the way the background color changed on each page.

However, I didn’t use any content management system. I simply typed up the code in plain text and uploaded the pages to my server. This was fine — I like typing code! — except that it made for a very static site. Before long I found myself wanting something more dynamic, a place to post articles and resources, a place to write about my work and become a more active participant in the web design community. I toyed with the idea of starting a separate blog, but finally decided just to do it right here.

Pilcrow 3

Three things inspired the design of Pilcrow 3. The first was this website, which I believe I stumbled upon via Smashing Magazine:

I think this site is absolutely stunning. I love its vertical lines, its bright colors, and all the whitespace. Most of all, I love the combination of fixed-width main column and liquid sidebar, which I will write about in more detail in a future post. As you can see, though, Pilcrow 3 has a similar layout. If you resize your browser window, the sidebar, but not the main column, will expand or contract to fill the space.

My second source of inspiration was this font. I’m not a big impulse-buyer in general, but the moment I saw this one, I bought it. Because I just knew it would make the perfect logo for me:

The only thing not perfect? Ha ha, wouldn’t ya know, its pilcrow:

Not that there’s anything wrong with it — but it wasn’t exactly what I had in mind for my logo. So I had to fire up Illustrator and see what I could do to manipulate the capital P…

Last but not least, my third source of inspiration was a color palette I found over at ColorSchemer. I think it was called Autumn Harvest. Anyway, it included the shades of orange and olive you see here, which I adore.

In conclusion…

I’m very excited about my new site! I look forward to taking my blogging in a new direction, and I would greatly appreciate your feedback, if you made it this far.