Next Steps

HTML5 amazingness

September 24, 2010 @ 12:11pm

by Jeff Byrnes

So Microsoft has turned the publicity machine up to 11 for the IE9 beta release, and there’s some truly impressive pieces that have come out of it. Most notably, the Lost World’s Fairs! These are three graphically and programmatically impressive pieces, using all manner of techniques. The two most impressive to me, however, are the Atlantis World’s Fair and the El Dorado World’s Fair.

Both sites are long, vertical layouts, taking advantage of absolute, relative, and fixed positioning, Typekit for rich typography, Modernizr to make sure things play somewhat nicely in less capable browsers (IE7 & IE8, for example), and jQuery as their JavaScript library. Both also utilize Lettering.JS, a rather interesting piece of JavaScript they developed to enable, as they call it, “radical Web Typography.”

Lettering.JS takes whatever element you hand it, parses through it, and provides you with a series of individual <span> tags for each of the letters in your element. So, using their example, you can provide it with this:

<h1 class="fancy_title">Some Title</h1>

And you’ll receive this:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Seems like it just makes span-itis, right? Think again. Each of those spans can now be individually styled, which, when you look at their examples, suddenly grants you the ability to do some very impressive pieces of work. Yet, it leaves your markup nice, clean, and easy to maintain.

Lettering.JS goes two steps beyond just the letter-wrapping, offering the ability to create <span> tags that wrap whole words or even whole lines. The line wrapping takes its cues from <br /> tags, so this:

<p class="line_split">
    Line 1<br />
    Line 2<br />
    Line 3
</p>

Becomes this:

<p class="line_split">
  <span class="line1">Line 1</span>
  <span class="line2">Line 2</span>
  <span class="line3">Line 3</span>
</p>

Taking a look at Atlantis World’s Fair and El Dorado World’s Fair, you can see just how impressive this technique can truly be. The markup is super clean & relatively lightweight. To avoid a FOUT (Flash of Unstyled Text), they do have their JavaScript loading in the <head>, but even with that, things still load quite rapidly.

Seeing as IE9 can handle pages like these just as well as Firefox 3.6+ and Safari 5+, it seems like the web is about to get a whole lot nicer.

Comments

View & Post Comments

Facing the (Font) Future

August 6, 2010 @ 4:14pm

Updated — August 16, 2010 @ 8:37am

by Jeff Byrnes

It seems as though the technology for representing fonts on the web are finally coming to fruition. With the W3C’s near-adoption of the WOFF format (it has remarked that “…it expects WOFF to soon become the ‘single, interoperable format’ supported by all browsers.”), @font-face seems poised to become the firm technology for embedding fonts in a site.

Previously, techniques like cufón & sIFR were the best way to deploy a font not commonly installed across all systems, or to guarantee a particular font is used. These required JavaScript alone at best, or a combination of JavaScript & Flash.

So with that, I give you the most bulletproof, known as the smiley variation, way to deploy @font-face to your site (courtesy of Paul Irish):

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('☺'),
         url('GraublauWeb.otf') format('opentype');
}

It’s always good to know how it all works, so definitely head over to Paul Irish’s article, but you can use Font Squirrel’s @font-face generator to simplify your life.

Now, however, the biggest hurdle is the licensing. Since we are basically allowing for the downloading of the font files, things can get a bit sticky. Thankfully, many of the font foundries are coming around and crafting new licensing, and even creating web versions of their typefaces. At the very least, they’re joining forces with other JavaScript-based solutions like Typekit and Fontdeck. We’ll see how it all turns out.

Comments

View & Post Comments

Resolution Dependence, or why it’s ok to have different layouts

July 30, 2010 @ 4:38pm

by Jeff Byrnes

Recently, I came across a really brilliant technique, resolution dependent layout. I’ve been exploring this technique a little bit, and definitely want to discuss & highlight some awesome uses of it.

This is especially useful for tailoring a site to a mobile device, and since all of them run on a WebKit-based browser, they can all understand @media queries, which is the crux of this particular way to accomplish this.

With that said, there’s two ways to do this:

Using @media queries in a <link> for a resolution-specific CSS file
Using @media queries inside a single CSS file.

I prefer the second method, but others who prefer multiple files vs. a single file for CSS can use the other. And we can do anything based on different devices, not just change widths, layout, etc. As another note, you can do checks for device-width or width (i.e., viewport width). Both will be useful, as we can use device-width queries to check for a particular device or class of devices.

As an example of a site that has a different layout based on the viewport width, check out Simon Collison’s website, Colly. If your viewport is set to ~950px wide or greater, we have the default layout: full-width, four-columns. However, as your shrink your viewport down width-wise, the layout changes to a two-column display, then finally to a one-column display where the single item is slightly larger in width than the single items are in the two- or four-column views. All-in-all, a rather lovely design to my eyes, but I’m sure my colleague Kyung could offer a more thorough critique in that arena. It’s a fascinating aesthetic, the whole “Celebrated Miscellany” idea. It reminds me of an old science journal, like something Darwin or Audubon might have drawn.

So how does he do it? Well, in this case, “Colly” has a series of @media rules at the very end of his stylesheet. Here’s one of the bits we’re talking about (edited for brevity):

@media (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
             (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
    div#page { width:468px; }
    .home ul#navigation_pri, .home ul#subnav-b { padding-bottom:30px; }
    …
        div#siteinfo p { font-size:14px; }
}

First off, to have this work at all, all of the CSS rules that would apply for this particular @media query need to be encapsulated between the brackets for the query, as if it were regular CSS rule itself. As for the query, it’s asking a number of different questions to cover quite a few bases; this particular piece of CSS covers the “less than ~950px viewport” eventuality. On a mobile device, this view comes into play if an iPhone is in landscape mode, or if an iPad is in portrait mode. The other, single-column view comes to pass if an iPhone is in portrait mode (and it fits just right), or if you shrink the viewport of your browser down far enough.

The second @media query looks like this:

@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
    div#page { padding:30px 0px 10px 0px; width:306px; }
    …
}

It’s considerably simpler, as it doesn’t have to ask as many questions about your viewport or device width, since it’s really only going to activate on either an iPhone or other mobile phone, or if you shrink the viewport on a desktop browser; the iPad can’t change it’s viewport size, so it will never be presented this view. With that in mind, the first part of the query takes care of desktops, while the second handles the smaller display devices.

So there you have it folks, the ability to craft resolution dependent layouts and styles. Pretty spiffy stuff.