The Erudite 2.5 Released

January 30, 2010 – 10:18 pm

The Erudite 2.5 has been released, with a couple of really nice new features. I had a request to include epigraphs in the theme, which perfectly matches The Erudite’s emphasis on typography and content. Have a look at the image or check the demo site:

I also learned this month from WP core team member Andrew Ozz that it’s possible to style the visual editor. Now you’ll have a much better idea of how your prose will look before you press Publish:

You’ll also note above how easy it is to add an epigraph to your posts.

Finally, thanks to Dennis Meulensteen for providing a Dutch translation. If you have a translation you’d like to contribute back to The Erudite, let me know in the comments or get in touch.

To download, go to the WP Themes Directory or, if 2.5 isn’t available there yet, to the project page.

By Matt | Posted in WordPress | Comments (3)

On the iPad and Web Design

January 29, 2010 – 10:33 am

As usual, Apple’s newest creation has produced opinions. The rhetoric of those for and against it is predictably strong and, occasionally, ridiculous. I don’t care to add my voice to the din. My attention is more fixated on the fact that if the iPad is successful, we’ll have to say goodbye to a whole host of assumptions as we say “hello” to a new era of touch computing. What does this mean for web designers?

Goodbye Mouse, Hello Hands

How much of your site depends on mouse hover states? Hopefully none, if you’re committed to accessibility. But, chances are there are parts that labour under the assumption that everyone is—and always will be—using a mouse. If touch computing replaces the mouse + keyboard paradigm that’s dominant today, there’s going to be a lot of scurrying to retrofit websites to be usable by folks getting their hands on your site. I know that I’m not going to make anything rely on mouse hover states from here on out.

But that’s merely a technical hurdle. There’s a fundamental difference between an interaction with your screen mediated by a mouse and reaching out and touching something. Your website will no longer have clicks; it will have users touching, pinching, swiping, rotating. In short, the touch experience is flush with potential for a richer, more textured interaction paradigm in our websites. Touch might be as large a paradigm shift beyond today’s web as the web has been over print.

Goodbye Landscape, Hello Portrait

Gruber viewing Daring Fireball in the iPadComputer monitors have always had a landscape orientation. This has only become more prominent in recent years as we moved from ubiquitous 4:3 ratios to various widescreen formats. In short, we’ve had ample width and short heights. (Thus the religious wars over “the fold.”)

But here we have a 3:4 orientation. Portrait. Does portrait encourage vertical scanning instead of horizontal? What does it mean to relax about how high on the page our central content is? How many assumptions about how the web works do we have that are based on the landscape orientation?

You might wish to inform me that the screen can just as easily be used in landscape, but my money’s on people using it in portrait more often than not. But even that ability to choose has big implications for our assumptions about designing for the web.

Goodbye Flash, Hello Web Standards

Virtual ink is being spilled with abandon over the iPad and Flash support. Flash gained traction because web standards were deficient in 2 core areas: video and animation. HTML5 has the video element, and animation via canvas, SVG, CSS animations, and plain ol’ JavaScript can do 98% of the things that Flash is currently used for.

More importantly, web standards can do 100% of the desirable things that Flash can do. Those technologies aren’t yet supported by every browser, but they are supported by Safari, and that’s all that matters here. And are you really going to miss those punch a monkey banner ads?

The two things preventing Flash’s demise are 1) momentum and 2) authoring tools. The former is shifting thanks to the iPhone and iPad, and the latter is bound to change.

Goodbye Fringe, Hello Mainstream

Browsing on the iPhone can be frustrating when the content you’re looking for is all Flash. Other times the site has simply been overly optimized for the desktop and/or Internet Explorer. Some may blame the device, but as the iPhone continues to grow and the iPad emerges, it’ll be business suicide to have a poor experience in the mobile sector. Let’s face it - users with enough money to spend on an iPhone and/or an iPad are exactly the types of people that most businesses want to appeal to.

In short, web designers who understand how to design good web experiences for these platforms will only become more sought after. And this just might allow me to justify an iPad as a business expense.

Tagged , , , , , , , | By Matt | Posted in Design | Comments (13)

Quix Bookmarklet

January 26, 2010 – 3:01 pm

Here’s something pretty cool - a meta-bookmarklet called Quix.app by Joost de Valk. It gives you access to dozens of functions and bookmarklets in one container. Invoke the bookmarklet and type, for instance, “gs where do babies come from” to run a Google search on the current site you’re viewing.

There are oodles of goodies in there for web developers, and WordPress folks. And I might commend Joost’s good taste in including FontFriend in Quix - just type “font” and you’re off.

Tagged , , , | By Matt | Posted in Tips | Comments (0)

Subsetted Fallback Fonts

November 12, 2009 – 9:18 am

I recently launched thatwasnotok.com, a humourous take on how to handle social un-graces. One of the fun parts of designing and building the site was the freedom to work with a font like Chunk without resorting to embedding it in images or using sIFR or Cufon. I showed it to Tim Brown from Nice Web Type, prompting a dialogue about some decisions I made in working with Chunk, which Tim later published. (Incidentally, if you’re curious about how to embed fonts in a web page, Tim’s How to use CSS @font-face is your best starting point.)

But what I really want to talk about was one of the questions Tim asked me but chose not to publish on his site, which was:

So about the missing characters in Chunk. What if you didn’t have an alternative (like if you needed an ampersand)? Would you substitute one from another typeface? Which typeface?

After mentioning that I didn’t much care about the missing glyphs for such a small site as mine, I went on to say:

For a font with glyphs missing, you fall back in your CSS stack to the next font that has the glyph. This is the premise that Typekit works on when it splits fonts into two pieces and then puts something like font-family: skolar-1, skolar-2, serif; in its CSS rules. If I had found a complimentary typeface (with appropriate licensing) and wanted it just for the glyphs that Chunk was missing, I could make a small, subsetted version of it (remove all the glyphs that Chunk already has), embed it as well with @font-face and put it after Chunk in the font stack.

After my chat with Tim, I became a little fixated on trying to find just such a suitable subsetted fallback. I went over to Font Squirrel and came up with two possible free replacements: CollegiateFLF Black and Bender Black. After downloading, I re-uploaded them through Font Squirrel’s marvelous @font-face Generator in order to subset the fonts down to only glyphs that aren’t already in Chunk (more or less). Subsetting only the glyphs you need can create dramatically smaller font files, speeding up your site. I chose to only include Punctuation and Alt Punctuation, as shown in the image below (click for larger):

subsetting

So, what did it look like? Not that great unfortunately. Chunk is just far too unique to play well with (freely available) others. I tried three different stacks, falling back to either 1) Impact, 2) Collegiate Black and 3) Bender Black. Have a look: MIA Glyphs, or just see the image below.

stack-experiments

I think that Collegiate Black comes the closest, but its dollar sign and ampersand are a terrible match for Chunk. Bender is entirely ill-suited, and Impact isn’t much better. None of the apostrophes look similar to Chunk’s comma, which is what I would hope to see in a well-suited fallback.

The closest I came to being happy was with Impact as a fallback for apostrophes (the only glyph I needed that Chunk lacked). I created a version of thatwasnotok.com that used a pseudo-bold Impact for apostrophes where they were called for: Impact apostrophes. I also had to surround the apostrophes in a span element to nudge them into place.

I hope that this somewhat fruitless exercise was of interest to people trying to make  fonts work on the web. Many of the free fonts that allow @font-face embedding suffer from absent glyphs, so using a subsetted fallback may be a lifesaver for you. As for me, I’m still not sure if I’ll push the Impact apostrophe’d version live or keep the version with primes. Anyone have an opinion?

Tagged , , , , , | By Matt | Posted in Design | Comments (3)

That Was Not OK

October 21, 2009 – 1:39 pm

The Idea

Have you ever found yourself in a social setting where someone’s inadequate social skills cause consternation to everyone around them? Of course you have. Have you ever wished there was a way to discreetly tell them that their behaviour is not OK?

Now you can. That Was Not OK is here to help. Print the cards, and keep them in your wallet for just just such situations.

The Design

For the web nerds out there, this turned out to be a fun showcase for what can be done with native font embedding via @font-face. Thanks to Jonathan Snook, Paul Irish and Font Squirrel for their terrific work in taking font embedding from a new and untested technology to an increasingly viable tool in the web design toolbelt.

For the embedded font, I turned to The League of Moveable Type’s brash Chunk, an ultra-bold slab serif that helped the typography shout at you. (If the font were less intimidating, I’d ask it why it’s missing an ampersand and smart quotes.) I found that the all-caps main title needed some serious kerning, but I’m really happy with the end product.

Tagged , , , , , , , | By Matt | Posted in Design | Comments (4)