IE9 public beta is here, and I’ve had the fair fortune to be recruited by The Friends of Mighty to showcase its support for the Web Open Font Format (WOFF).

A while back, Jason Santa Maria called to see if I’d be interested in joining him on a team with Frank Chimero & Naz Hamid.  After confirming my participation, as well as the fact that this wasn’t a practical joke, I learned that our mission was to create 3 web poster sites that showcase WOFF and how well IE9 supports it.  After a couple of team Skype meetings we decided to follow a Lost World’s Fairs theme, which was an appropriate match for the adventurous nature of the project as well as the team.  My primary role being CSS & HTML code-out, I knew I had to start by doing two things: bring Dave Rupert in for additional dev support, and learn all I could about IE9.

IE9 Preview

Building for an unreleased browser with a subject-to-change property support list was equal parts daunting and exciting. I knew the stakes were high.  I’ve built plenty of websites where the layout depended on one or two properties to really sing, so I had to be 100% sure I was giving the team accurate information.  I began experimenting by coding a series of sandbox pages where I’d test IE9’s support for CSS properties listed in the developer guide.  I was glad to see support for many of the properties I hoped we could lean on heavily during the design & code-out:

Not only were many of the CSS3 staples supported, but when compared to Webkit & Mozilla engines, IE9 actually out-performed in a few cases.  For example, a border-radius & box-shadow combo actually looks better in IE9.  Eventually, I’d like to one day see text-shadow, CSS transforms and maybe even animations supported to the same high standard as the modules for backgrounds, borders, color and fonts.

Lettering.JS

Early on we realized that because these poster-style layouts were going to be tuned to the letter, we’d need to find a way to match that attention to detail while keeping the markup manageable & agile. This problem of avoiding <span> heavy markup facilitated Dave’s creation of Lettering.js.  Dave has provided an introductory write-up & GitHub download here.  On projects like this, where large-format type is front and center, this jQuery plugin saved the day.

Lettering.js
Lettering.js

Tandem Dev via Dropbox

Dave and I were able to code-out different aspects of the site by setting up our own localhosts & working from the same folder we share via Dropbox.  He’d position elements on the page in a structural CSS file while I’d finesse the lettering in a type CSS file until each page was pixel perfect.  It took steady communication, but once we ironed out the kinks we were able to have the initial code finished for each of the 3 poster sites in 3 days.

El Dorado

The Hatch Show Print take on a 1924 fair in El Dorado by Naz was fueled by his interest in experimenting with rgba/hsla color and opacity.  Because tweaking hue, saturation & lightness is so intuitive with hsla, we were able to adjust the tones for each individual letter, blending them into the textures and colors underneath.  We used CSS-pseudo elements to double up on lettering, giving the poster an authentic, rough-around-the-edges look.  During an impromptu screen-sharing design session, Naz and I used Jon Raasch’s Scrolling Parallax jQuery plugin to finish the page by floating Zeppelins across the skyline.

El Dorado
El Dorado

Atlantis

Frank’s 18,123 pixel (or 20,000 league) journey into Atlantis is the reason multi-touch / smooth scrolling was invented.  Above water, the horizontal, percentage-based background tracking shifts the ocean-scape as you resize your browser window. Below water, you’ve got a fixed-positioned sea elevator and a depth tracker (built with javascript by Dave) that accompanies you as you scroll through various layers of aquatic life.  The 10 year old me loved building this page.  If there were a Journey to Atlantis lunchbox, I would buy it and carry my iPhone around in it.

Atlantis
Atlantis

The Moon

Jason created a look ahead to 2040 with a Worlds’ Fair that considers the possibility of humans settling on the Earth’s Moon.  The celestial interplay of the Earth and Moon on the page was achieved through percentage-based fixed positioning.  The same was done for the poor unfortunate spaceman (if your browser window is wide enough to find him). The Worlds’ Fair logo was done with 100% CSS, using border radius to create both the containing circle and the top-right orbital sphere.

The Moon
The Moon

The Landing Page

My design contribution to the Lost World’s Fairs was the landing page.  I thought a colorful, travel poster inspired approach would serve as a great introduction for each fair.  My type lineup consists of League Gothic for all the heading fonts, FF Market Web for the script and my favorite serif, FF Meta Serif Web Pro for the body text.  It was extremely humbling to be trusted to take on this leg of the project, and I had a great time doing it.

Landing
Landing
Operation Condor

Operation Condor: Complete

Praise be to Nishant Kothary and the MIX Online team at Microsoft for giving us complete freedom to create and for getting behind the vision. Congratulations on the new browser and the huge leap forward.

The only downside to our project (dubbed internally as Operation Condor) is that we’re finished. Being able to team up with such talented people as Jason, Frank, Naz and Dave, has been an honor and a privilege to say the least.  I felt like Louis Tully, suiting up as a Ghostbuster and running around the streets of New York for the first time. “Stay fit. Keep sharp. Make good decisions.”  It’s good to be a Friend Of Mighty.

Ads by Fusion

46 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Phil Coffman

    A deserving “well done” on this Trent, for both you and Dave! The finished project looks absolutely stellar and I’m a proud Austinite!

  • Chris Gillis

    Great job all around, seeing the teasers on Dribbble was fantastik as well.

  • Matthew Smith

    Wonderful work as always Trent.

  • Elliot Jay Stocks

    Goodness me. This is quite an achievement. Congrats, mate! You should all be immensely proud of this.

  • Brendan Falkowski

    Didn’t realize some of the teasers on Dribbble were connected, but today was a great surprise. Pulling apart the code will be an eye-opener. Congrats!

  • Spencer Tweedy

    So freaking awesome! Great job.

  • jpk

    Really cool! This is why I ❤ webdesign/-development.

  • Thorsten

    Great job. This project looks fantastic.

  • Marc Hemeon

    Great job Trent, love the typesetting and variation of the pieces, well done. Sometimes in these kind of projects all the examples tend to blur into each other, kudos for delivering 4 unique looks. I can’t help but hope we see a surge of well typeset sites. Instead of wood or metal blocks of old we get to use css and lettering.js magic. I have to say, this project just makes me love design and typography more, not necessarily IE9.

  • Jeffrey

    Amazing! I stand in awe of great design and designers.

  • Angie Obermier

    Obtaining a compelling vision for our lives is what gives us a sense of total pleasure and joy

  • Trent

    Wow, thanks! Glad you guys enjoy the project.

    @Marc Hemeon:

    I can’t help but hope we see a surge of well typeset sites. Instead of wood or metal blocks of old we get to use css and lettering.js magic.

    I hope so too... A very bright future ahead of us indeed!

  • Elliott

    Lovely stuff

    Why the decision to create a faux text shadow using pseudo-elements (#header h1:after) instead of the css text-shadow property?

  • Trent

    @Elliott: Good question... I don’t believe text-shadow is supported in IE9 at the moment, though I’d love to see that included. It’s a real time saver!

  • Jorge

    Congratulations for all of you guys! This posters are amazing. Matter of fact, I’ve never thought “web poster” was a typology. I just saw this as “experiments” (although I didn’t get the chance of seeing many of them), but it’s a great format actually.
    It’s inspiring to see this kind of work with that excellent quality.

    Also, I’m glad IE is improving, it’s such good news for all the webdevs.

    Congrats again!

  • Jorge

    BTW... how was the creative process for achieving this pieces? I mean, for the graphic / conceptual / illustrative aspect.
    Did you make some illustrations and parted from that, adaptating it to html/css? Maybe sketches?
    Or was it built from zero, illustrations and code side by side?

    For all you say about how communicated you had to be, I find this very interesting from the creative process point of view.

  • Trent

    @Jorge: I think you’ll find the write-ups from Jason, Frank, and Naz lend a fair amount of insight into our creative process. After determining which CSS properties we had at our disposal, the team had a few brainstorming Skype calls where we came up with the Lost World’s Fairs concept. From there, we all took to Photoshop with a general idea for how these would be coded. The rest was just improve and collaboration:)

  • Andi

    This is outstanding and a real inspiration to me...love it!

  • Octavio Corral

    Beautiful.

  • christopher scott

    This is just, like the coolest thing ever. Never underestimate those designer/developer types from the central Texas area ;)

    Beautiful work!

  • Jonathan

    Bravo dudes! Special nod to Frank. I felt childish scrolling down to Atlantis and enjoyed every league.

    What’s next?

  • Dan Rubin

    I’ve tweeted about this and Lettering.js already, but wanted to leave a more permanent-feeling note here: You and the other Friends of Mighty have done an outstanding job, and made designing for the web feel like the good old fashioned fun it used to be.

  • Josh Davenport

    Just wanted to put in my two cents about how great this really is. Chocked full of inspirational ideas and uses of typography on the web. And lettering.js looks brilliant, I’ll definately be using it very soon!

  • Zach

    Not only do these sites look fantastic but the simple subtle affects of the scrolling parallax and the organization of fonts layerd on top of one another is totally a win.

    Good Work Ya’ll!

  • Auré

    You’ve done a fantastic job, the result is absolutely beautiful...
    The typographic work on each page makes me dreamin’
    Congrats, really.

  • John

    Wow congrats Trent! I’ve always been a fan of your work. And I like the fact that you remain humble and reply to everyone’s comments. If it were another “famous” designer writing this post, he would only reply to @elliot jay stock’s comment (or other members of his elitist designer clan) and leave out the rest. Keep it up, man!

  • Trent

    Thanks All!

    @christopher scott: Deep in the heart of Texas, my man!

    @Dan Rubin:

    designing for the web feel like the good old fashioned fun it used to be.

    Oh, I hope so. We have fun jobs... they should be fun!

    @John: Thanks! Sadly, you’re wrong about the humble thing. They had to hire a crane to help get my head into the office today ;)

  • Allen Gingrich

    Awesome to see so many great companies working together. Even more awesome to find out about Dropbox.com.

  • John

    @Trent: Well, at least you still reply. Anyone would have a better chance to having dinner with President Obama rather than getting a reply from these “elitists.” And no, that’s not a good thing. It’s just gross. Period.

  • Evan

    Amazing result, inspiring for sure.

  • Vasjen Katro

    This is amazing well done man!

  • Sean McCambridge

    I remember the days of designing for IE6 -- well, I remember the days of table-based layouts, too. Wait, you mean the client still wants us to cater to IE6? C’mon, it’s 2010! Ugh.

    These are beautiful. I’m jealous of all of your design skill (not just some :) ). Some great CSS tricks happening here that I hope I can work into some of my own projects.

  • boo

    it’s really cool mate... great works..!!!

  • Hamish Taplin

    Does anyone know if there are known issue with typekit and certain network configurations? None of the embedding fonts on this site show up in my browser (on winXP) on my corporate network. The don’t work on my colleagues machines either.

    I also have problems with webfonts.com.

    It doesn’t work on my iPhone either.. weird.

  • Trent

    @Hamish Taplin: No idea about your network, but I do know that Typekit offers iPhone and iPad support as experimental features. You can activate them within your kit settings... read more here, here and here.

  • Norik Davtian

    It really turned out nice, just curious how long the whole process took to finish?

  • Trent

    @Norik Davtian: We began late July / early August with the planning, then moved into a couple weeks of design, and a couple more on the code-out. I’d like to think we were pretty efficient and will try to write a bit more about the tandem build process with Dave Rupert in the next few weeks.

  • Hamish Taplin

    @Trent:

    I really want to use TypeKit/WebFont but this sort of thing puts me off - everything looks worse when the embedding fails and I’d hate to think my carefully-crafted designs are going to fail on certain machines.

  • Trent

    @Hamish Taplin: You raise a fair point, but I think the same is true for any developing web technology. For example, if I want to implement the border-radius property, I’ve got to test how it renders on various machines and browsers. Granted, the web font game can be even trickier. Fonts optimized for print won’t always render well in a browser, but I think we’re in a transition period. Foundries are working to release more and more fonts that perform well on the web. I’ve also found Typekit’s “browser samples” tab to be really useful.

  • Zach Woomer

    You guys continue to push the boundaries of the web and creativity. Every one of the sites for this “Lost Fairs” collection are amazing, as is a lot of your sites. From ‘Paravel’ to ‘The Many Faces Of...’, it’s all great! I’m really looking forward to the next ‘Many Faces’ installment. As a fellow movie lover, I’m completely amused by that site.

    But ‘The Lost Fairs’ sites are great, and such a great way to illustrate the Web Open Font Format.

  • Trent

    @Zach Woomer: Thanks for the kind words. Get ready! A brand new The Many Faces of is coming soon. Also, I just checked out your site and got quite a kick out of the anatomy of a web designer. Great work :)

  • Zach Woomer

    @Trent: You’re very welcome.

    And thank you! You and Frank Chimero are without a doubt my favorite designers. So, your compliment is greatly appreciated!

    And as I said before, I’ve been anticipating the next ‘The Many Faces Of’ since immediately after I was finished reading the ‘Goonies’ one. So, the sooner the better!

  • Joshua Chase

    Great write up Trent! Saw the dribble teasers, looking forward to seeing how this plays out. Keep up the great work!

  • John

    @Joshua Chase: Its true its great !

  • Martin Varesio

    Every one of the sites for this “Lost Fairs” collection are amazing, as is a lot of your sites!!

  • Ashish

    Great Job! hats off :)

Leave a Reply