It’s what happens when conference organizers look beyond logistics and put love into every component. Simon & Greg’s careful consideration & ordering of speaker topics combined with their overwhelming hospitality set a great tone that seemed to be amplified by all who partook in the week’s activities. On a personal note, I loved introducing my wife and son to industry comrades and dear friends. Seeing little Henry passed around Simon’s house was pure magic. So was watching him flirt with Aymie, Denise, and Naomi. I’ll be sure to have a sit-down with him about not laying it on too thick one of these days.

Along with speaking, I had the privilege of guiding a workshop. We looked into the basics of setting type (responsively), some of my favorite CSS properties for type, and of course Lettering.js and FitText. During the last hour of the workshop, participants were let loose to build their own stuff. I provided a handful of screenshots from The Movie Title Stills Collection, curated lovingly by Christian Annyas, and challenged everyone to recreate them with HTML, CSS, and Lettering.js. I was amazed to see what people came up with. Here are some samples of their work. I’ll be updating this post as more come in. Also, I’ll post links to video & slides from my talk as they make their way online.

By @supereight

By @mickykelleher

By @richardwiggins

By @drbparsons

By @jokedewinter

By @MaraidDesign

By @martuishere

By @martuishere

By @lewisnyman

By @jameslindeman

media screen and (min-width: 1234px) and (min-height:700px) {
body {font-size: 137.5%;}
}

This bumps body copy up to 22px for those bold enough to view the site at least 1234px wide. Why 1234px? Just because that’s where, with all % values for widths & container padding, my site hits its max-width.

What’s with the vertical media query? I used min-height to target screens that are wide enough to trigger the change, but not tall enough for it to make sense. As an example, my wife has an 11” MacBook Air that has a screen resolution of 1366px X 768px. With the menu bar & browser window, the screen is not tall enough to trigger that final bump up in font-size unless you enter into full screen browsing, which to me is a good thing.

But maybe vertical media queries could do much more than this. For projects where the fold *gasp* is a concern, perhaps setting min/max-height could be a new way to control how content is served up to screen widths and heights of any size. If you just have to get that sign up button in view without a scroll, you could trigger a smaller banner image or nav bar to make room when necessary on shorter screens.

For what it’s worth, it’s stuff like this that gets me excited about the future of web design. We’re leaping past any point where the word webpage makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

For those planning to attend, please feel free to comment below with anything in particular you’d like to cover. There’ll be plenty of resources at your disposal as well as time for discussion and collaboration. Also, please bring your computer and be ready to do some light coding. See you in just over a week!

Fine control remains elusive – kerning, character spacing – controlling these aspects are both difficult to specify for numerous reasons. This is frustrating to designers who love typography and want to have that finer control.

Huzzah! I couldn’t agree more. As web designers, now that our type options have drastically expanded, we want the same level of control over them that print designers do. That includes kerning as well as more interesting & intricate typographic arrangements. The key here is specificity. If we can target letters and words with CSS the sky is the limit. For further reading here are some posts that my friends and I have written on the topic:

• Controlling Web Typography: An older post I wrote summing up Lettering.js and explaining why we hope CSS makes it obsolete
• A Call for ::nth-Everything: This is Chris Coyier’s take, but much more comprehensive and clearly reasoned than mine.
• Lettering.js: I like to think of the gallery as a series of case studies for how enhanced selectors would be useful.
• Dave Rupert’s original Lettering.js post: A great introduction to how Lettering.js came about and how to implement it.

One interesting potential issue with finer control could be what happens if we target specific letters or words on a multi-lingual site. Something as detailed as this might make no sense, or break visually in another language. This was a point Christian Heilmann raised last summer at ConvergeSE, and something I don’t yet have a good answer for.

Overall, I think that the fewer situations where web designers have to resort to image replacement for text the better.

I’m honored to have been a part of this Issue alongside, Alex, Mark, Karen, Cennydd, and Josh. Also, it was thrilling to see something I’d written elevated by the illustration work of Paul Blow.

Gosh, what an across-the-board privilege. Thank you to Andy, Carolyn, and Jez for the opportunity. Be sure to visit alwaysreadthemanual.com and snag yourself an annual subscription.

Another amazing release today that deserves your attention: Embedded Tweets!dev.twitter.com/docs/embedded-…Put Twitter EVERYWHERE!!!

— Josh Brewer (@jbrewer) December8, 2011

This is why, typographically speaking, fluid layouts fail without the power of media queries. Increasing your font-size as a column widens can keep you within that safe 45 to 75 characters per line range, and keep readers happy.

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

It’s clear that Mark has gotten his hands dirty working on a solution, and I like his idea for selling slot packages rather than single spaces. I could even see that instead of sending out the typical PDF diagram of ad slots and sizes, sales teams could point people to an actual responsive layout/template so they could see how their ad resizes and relocates within the site hierarchy at various widths.

What happens if ads become fluid and text is designed into the images or movies? Readability will certainly suffer, as will clicks. I wonder if advocating a similar image + HTML text approach much like The Deck or Fusion Ads would be a possibility. That may be a lot to ask, but if things need to be redefined, let us not be short-sighted.