We’re going looking for Yogi

We just can’t stay off the road. Two years since our last road trip when we drove an RV from Phoenix to Minneapolis, we’re again heading back West and this time we’re Looking for Yogi.

On Wednesday we arrive in Boise Idaho, the capital city of the state of “Famous Potatoes” From there we’re taking in 3000 miles across six states (Idaho, Utah, Wyoming, Montana, Washington, Oregon and back to Idaho) taking in some of the most stunning scenery in the United States, if not the world.

Along the way we’ll be blogging, uploading photos to Flickr, videos to Vimeo and of course checking into Gowalla — all the while, looking for Yogi.

Why Looking for Yogi?

Along route we’ll be spending time in the world famous JellyYellowstone National Park, the home (I’m reliably informed) of the bear I remember so fondly from my childhood. I know we’ll find him somewhere along the route and we’ve packed a pic-a-nic basket for the occasion.

Some words about the site


Looking for Yogi

As you may have read on the internets, I do love me some HTML5 and CSS3 and the site has been made from a ton of it. The HTML is as hardboiled as I could make it, chock full of microformats and WAI-ARIA roles in place of presentational id and class attributes. Dig deep into the source and you’ll be hard-pressed to find something that doesn’t belong.

As for CSS3, what are you looking for?

CSS transitions? Got them. Watch the navigation icons at the top of each page fade between two different states of opacity.

CSS3 animations in Webkit? Got them too on the 404 page.

What about CSS3 transforms? Yup. Click or tap on the globe icon on any of the internal pages and the off-beat navigation is skewed using CSS3 matrix transforms.

Multiple background images? Check.

RGBa? Check.

CSS3 Media Queries for proportional leading and for optimising the design for both portrait and landscape orientations on the iPad? Oh yes! Got those as well. Don’t worry though campers, the site looks just great in Internet Explorer 8 and 9.

Speaking of iPad, while we’re away I’ll be using mine as often as possible and not just to watch cartoons. That’s why it was important to optimise this design as much as possible for that device. More than that though, I designed this site first for the iPad and only checked the design in a desktop browser after my work on the iPad was complete. This was a revelation and how I intend to design every site from now on.

Feed the bears

So here we go, Looking for Yogi. Keep in touch and if you find yourself anywhere close to where you see us popping up, give us a holla @malarkey.

Andy Clarke 11/07/10 | Tweet this | Short URL: http://stuffandnonsense.co.uk/s/1333

There have been 4 replies

  1. 1

    Blake Watson

    I’ll ask here too. What did you learn by designing for the iPad first?

    11th Jul 2010
  2. 2

    Calliope

    I am interested in that statement too. ok you were experimenting. would you please like to share with us what app. you used on the iPad, how you went about it and why? Also,I remember you felt reluctant using html5 late in 2009: I couldn’t care less about HTML5 at this point in time, as per your blog post:

    What changed for you?

    (This comment was left on For A Beautiful Web)

    12th Jul 2010
  3. 3

    aarontgrogg

    Hey, Andy, first of all, I love the microsite!  As a code-head, I do find simple, clean, concise HTML to be poetry, and the site is gorgeous.I love that the “multifaceted” approach, including HTML5 & CSS3 (both of which degrade nicely), MFs, ARIA, IE conditionals, and even the iThing stuff! The source is something I would recommend starters use to learn what TO do, and also anyone else use as a starting template.

    Couple quick bits, if you have the time:

    1. The URL for this in the HEAD comes back 404:
    <link rel=“apple-touch-startup-image” href=”/assets/css/default.png” />

    2. Why the choice to put the contact info in the HEAD as an HTML Comment block instead of META tags of even in a vCard elsewhere in the page?

    3. And I love the challenge to find ANYTHING that doesn’t need to be there!  Indeed, I was hard-pressed, but, on the category pages, you have the comment about Add class=“current” for current states… in there twice (this being all I could find, I HAD to say it didn’t I?? :-)

    Congrats on yet another site and good luck on the trip!

    Atg

    (This comment was left on For A Beautiful Web)

    12th Jul 2010
  4. 4

    Andy Clarke

    @aarontgrogg: Thanks for that. Missing off the AppleTouch icon was an oversight. I’ll get right on it.

    The contact info in the header is part of my default template and you know what? I never even considered making it meta information or a vcard. I must do that (vcard) too.

    As for the comment about current states in the category pages? That’s there to remind me to change the classes on the states as we move along our journey.

    @Calliope: I became convinced about HTML a while after making that comment in 2009. Things have moved on a lot and there really are no reasons not to be using HTML5 today.

    @Calliope @blakewatson: I’ll write an article about designing for the iPad first when I get back from my trip. There’s a bit too much to cover in a short comment.

    12th Jul 2010
Commenting is not available in this weblog entry.

From the archives

An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.