IN HIS TALK at An Event Apart in Atlanta, GA 2011, Jason Santa Maria outlined the current state of web fonts and how to approach typography online. Here’s my notes from his talk: LukeW | An Event Apart: On Web Typography.
Category: Web Design History
Categories
An Event Apart Announcements Appearances apps Atlanta Authoring Best practices business cities client services clients Code Community Compatibility conferences content content strategy creativity CSS CSS3 Design Designers development editorial Education eric meyer events Fonts Formats glamorous Happy Cog™ HTML HTML5 Ideas industry Information architecture interface IXD Jeremy Keith Platforms Real type on the web Redesigns Responsive Web Design Scripting speaking spec Standards State of the Web The Profession Usability User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit webtype work Working Zeldman
An Event Apart Atlanta 2011
YOU FIND ME ENSCONCED in the fabulous Buckhead, Atlanta Intercontinental Hotel, preparing to unleash An Event Apart Atlanta 2011, three days of design, code, and content strategy for people who make websites. Eric Meyer and I co-founded our traveling web conference in December, 2005; in 2006 we chose Atlanta for our second event, and it was the worst show we’ve ever done. We hosted at Turner Field, not realizing that half the audience would be forced to crane their necks around pillars if they wanted to see our speakers or the screen on which slides were projected.
Also not realizing that Turner Field’s promised contractual ability to deliver Wi-Fi was more theoretical than factual: the venue’s A/V guy spent the entire show trying to get an internet connection going. You could watch audience members twitchily check their laptops for email every fourteen seconds, then make the “no internet” face that is not unlike the face addicts make when the crack dealer is late, then check their laptops again.
The food was good, our speakers (including local hero Todd Dominey) had wise lessons to impart, and most attendees had a pretty good time, but Eric and I still shudder to remember everything that went wrong with that gig.
Not to jinx anything, but times have changed. We are now a major three-day event, thanks to a kick-ass staff and the wonderful community that has made this show its home. We thank you from the bottoms of our big grateful hearts.
I will see several hundred of you for the next three days. Those not attending may follow along:
“CASCADING STYLE SHEETS Level 2 Revision 1 (CSS 2.1) Specification (or CSS 2.1 to its friends) has become a real boy, with W3C stamping its seal of approval and making the spec a W3C Recommendation. But in an age of rapidly iterating browsers that are already working hard to win the race regarding CSS3 compatibility, is the W3C now an anachronism? Standard[s] advocates don’t seem to think so.”
—Craig Grannell, .net magazine, 9 June 2011 It’s official: W3C finalises CSS 2.1
SOME IDEAS SEEM inevitable once they arrive. It’s impossible for me to conceive of the universe before rock and roll or to envision Christmas without Mr Dickens’s Carol, and it’s as tough for my kid to picture life before iPads. So too will the internet users and designers who come after us find it hard to believe we once served web content in boxy little hardwired layouts left over from the magical but inflexible world of print.
I remember when the change came. We were putting on An Event Apart, our design conference for people who make websites, and half the speakers at our 2009 Seattle show had tumbled to the magic of media queries. One after another, CSS wizards including Eric Meyer and Dan Cederholm presented the beginnings of an approach to designing content for a world where people were just as likely to be using smart, small-screen devices like iPhone and Android as they were traditional desktop browsers.
Toward the end of the second day, Ethan Marcotte took what the other speakers had shared and amped it to 11. Suddenly, we had moved from maybe to for sure, from possible to inevitable. Ethan even gave us a name for his new approach to web design.
That name appears on the cover of this book, and this book represents the culmination of two years of design research and application by Ethan and leading-edge design practitioners around the world. Armed with this brief book, you will have everything you need to re-imagine your web design universe and boldly go where none have gone before. Happy reading and designing!
Jeffrey Zeldman,
Publisher,
Responsive Web Design
O’REILLY AUTHOR, INTERVIEWER OF ROCK STARS, and longtime web and UX designer Jen Robbins (jenville.com, @jenville) is our guest in Episode No. 50 of The Big Web Show, to be recorded in front of a live internet audience on Thursday, June 2, at 12:30 PM Eastern via 5by5.tv/live.
Jen began designing for the web in May 1993 as the designer of O’Reilly Media’s “Global Network Navigator.” Since then, she’s written several books about web design, including Web Design in a Nutshell and Learning Web Design. She recently made the switch to mobile as the Senior Designer for O’Reilly Media’s new mobile publishing department. Her first app, “HTML 4 & 5 Complete Reference,” an adaptation of her HTML Pocket Reference book, is available in the App Store now.
The Big Web Show (“Everything Web That Matters”) records live every Thursday. Edited episodes can be watched afterwards, often within hours of recording, via iTunes and the web. Subscribe and enjoy!
Note that, for the time being, the shows are audio only. If you subscribed to the video feed in iTunes, you’ll need to switch to audio. Sorry about that!
Categories
An Event Apart Archiving Boston Career cities Code Community conferences content creativity CSS CSS3 Design Designers development Education events Fonts glamorous Happy Cog™ HTML HTML5 Ideas industry Information architecture IXD Layout Marketing Markup people photography Real type on the web The Profession This never happens to Gruber Typekit Usability User Experience UX W3C Web Design Web Design History Web Standards webfonts Websites webtype Zeldman
HTML5, CSS3, UX, Design: Links from An Event Apart Boston 2011
Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.
THE SHOW IS OVER, but the memories, write-ups, demos, and links remain. Enjoy!
An Event Apart Boston 2011 group photo pool
Speakers, attendees, parties, and the wonders of Boston, captured by those who were there.
What Every Designer Should Know (a)
Jeremy Keith quite effectively live-blogs my opening keynote on the particular opportunities of Now in the field of web design, and the skills every designer needs to capitalize on the moment and make great things.
The Password Anti-Pattern
Related to my talk: Jeremy Keith’s original write-up on a notorious but all-too-common practice. If your boss or client tells you to design this pattern, just say no. Design that does not serve users does not serve business.
What Every Designer Should Know (b)
“In his opening keynote … Jeffrey Zeldman talked about the skills and opportunities that should be top of mind for everyone designing on the Web today.” Luke Wroblewski’s write-up.
Whitney Hess: Design Principles — The Philosophy of UX
“As a consultant, [Whitney] spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.” In this talk, Whitney proposed a set of 10 principles for UX design.
Veerle Pieters: The Experimental Zone
Live blogging by Jeremy Keith. Veerle, a noted graphic and interaction designer from Belgium, shared her process for discovering design through iteration and experimentation.
Luke Wroblewski: Mobile Web Design Moves
Luke’s live awesomeness cannot be captured in dead written words, but Mr Keith does a splendid job of quickly sketching many of the leading ideas in this key AEA 2011 talk.
See also: funky dance moves with Luke Wroblewski, a very short video I captured as Luke led the crowd in the opening moves of Michael Jackson’s “Thriller.”
Ethan Marcotte: The Responsive Designer’s Workflow (a)
“The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte.”
Ethan Marcotte: The Responsive Designer’s Workflow (b)
Ethan’s amazing talk—a key aspect of design in 2011 and AEA session of note—as captured by the great Luke Wroblewski.
An Event Apart: The Secret Lives of Links—Jared Spool
“In his presentation at An Event Apart in Boston, MA 2011 Jared Spool detailed the importance and role of links on Web pages.” No writer can capture Jared Spool’s engaging personality or the quips that produce raucous laughter throughout his sessions, but Luke does an outstanding job of noting the primary ideas Jared shares in this riveting and highly useful UX session.
An Event Apart: All Our Yesterdays—Jeremy Keith
Luke W: “In his All Our Yesterdays presentation at An Event Apart in Boston, MA 2011 Jeremy Keith outlined the problem of digital preservation on the Web and provided some strategies for taking a long term view of our Web pages.”
Although it is hard to pick highlights among such great speakers and topics, this talk was a highlight for me. As in, it blew my mind. Several people said it should be a TED talk.
An Event Apart: From Idea to Interface—Aarron Walter
Luke: “In his Idea to Interface presentation at An Event Apart in Boston, MA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk.”
Links and Resources from “From Idea to Interface”
Compiled by the speaker, links include Design Personas Template and Example, the story behind the illustrations in the presentation created by Mike Rhode, Dribble, Huffduffer, Sketchboards, Mustache for inserting data into your prototypes, Keynote Kung Fu, Mocking Bird, Yahoo Design Patterns, MailChimp Design Pattern Library, Object Oriented CSS by Nicole Sullivan and more!
An Event Apart: CSS3 Animations—Andy Clarke
“In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser.” Write-up by the legendary Luke Wroblewski.
Madmanimation
The “Mad Men” opening titles re-created entirely in CSS3 animation. (Currently requires Webkit browser, e.g. Safari, Chrome.)
CSS3 Animation List
Anthony Calzadilla, a key collaborator on the Mad Men CSS3 animation, showcases his works.
Box Shadow Curl
Pure CSS3 box-shadow page curl effect. Mentioned during Ethan Marcotte’s Day 3 session on exploring CSS3.
Multiple CSS Transition Durations
Fascinating article by Anton Peck (who attended the show). Proposed: a solution to a key problem with CSS transitions. (“Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!”)
Everything You Wanted to Know About CSS3 Gradients
Ethan Marcotte: “Hello. I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.”
Ultimate CSS3 Gradient Generator
Like it says.
Linear Gradients Generator
By the incomparable John Allsopp.
These sessions were not captured
Some of our best talks were not captured by note-takers, at least not to my knowledge. They include:
- Eric Meyer: CSS Anarchist’s Cookbook
- Mark Boulton: Outing the Mind: Designing Layouts That Think for You
- Jeff Veen: Disaster, DNA, and the Fathomless Depth of the Web
It’s possible that the special nature of these presentations made them impossible to capture in session notes. (You had to be there.)
There are also no notes on the two half-day workshop sessions, “Understand HTML5 With Jeremy Keith,” and “Explore CSS3 With Ethan Marcotte.”
What have I missed?
Attendees and followers, below please add the URLs of related educational links, write-ups, and tools I’ve missed here. Thanks!
SUGGEST YOUR FAVORITE sites, apps and people and celebrate the best of the web.
Nominations for the 13th .net Awards are now open at http://www.thenetawards.com. We want you to help us find 2011’s best of the web and there are 16 categories to choose from. This year there’s a renewed focus on emerging talent with new Awards including the Young Designer, Young Developer and Brilliant Newcomer Awards – presented in association with Happy Cog.
Last year the Awards clocked up more than 95,000 votes, and winners included Ravelry (beating Facebook and Twitter as Best Community Site!), Modernizr (Open Source App of the Year) and Typekit (Web Application of the Year). The mighty Jeffrey Zeldman, meanwhile, scored a hat-trick, bagging awards as Standards Champion and for Design Agency of the Year and Video Podcast of the Year (for The Big Web Show, co-hosted with Dan Benjamin).
As we try to become more responsive with our designs, a lot of attention has been focused on providing “mobile” styles. We’ve all been adding viewport meta tags to our templates and @media screen and (max-device-width: 480px) to our stylesheets.
It’s very tempting (and scope-friendly) to tell a client that we can adjust their site for mobile users, when much of the time what we’re actually doing is simply adjusting a design for small screens.
…Simply adjusting a design for a smaller screen and calling it “mobile” does a disservice to both mobile users and developers. Making link targets bigger and image sizes smaller does help the mobile user, but it only addresses the surface issues of usability and readability. It doesn’t address their need to do things easily and quickly.
via It’s the Little Things – “Mobile” versus “Small Screen”.
There’s a general agreement that the “mobile” user is not to be trifled with; give them the content they want as quickly as possible ‘cause they’re in a hurry. But the corollary does not hold true. Why do we think that the “desktop” user is more willing to put up with having unnecessary crap thrown at them?
Unnecessary page cruft is being interpreted as damage and routed around with tools like the Readability bookmarklet, Safari’s Reader functionality, and Instapaper. These services exist partly to free up content from having a single endpoint but they also serve to break content free from the shackles of stifling overwrought containers. This isn’t anything new, of course; we’ve been here before with RSS. But the existence of these new reader-empowering tools should be taken as a warning …and a challenge—how can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper?
RICHARD RUTTER, designer, technologist, information architect, writer, and co-founder of Fontdeck and Clearleft, joins Dan Benjamin and me to discuss the technical, aesthetic, and business aspects of putting real type on the web in Big Web Show Episode No. 44, now at 5by5.tv and iTunes for your listening pleasure.
“320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. … Inspired by Using Media Queries in the Real World by Peter Gasston, ‘320 and Up’ is a device agnostic, one web boilerplate.”
—320 and up by Malarkey
Categories
A Book Apart A List Apart An Event Apart better-know-a-speaker Code Community conferences content strategy Design Designers DWWS Happy Cog™ HTML HTML5 industry Interviews ipad iphone IXD Standards State of the Web The Essentials The Profession type Typekit UX W3C Web Design Web Design History Web Standards Zeldman zeldman.com
Webvanta Video: Jeffrey Zeldman on the State of Web Design
From the floor of An Event Apart Seattle 2011:
“Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.”
Video interview, plus transcript: Interview with Jeffrey Zeldman on the State of Web Design. Thank you, Michael Slater.
“In his opening keynote at An Event Apart in Seattle, WA 2011 Jeffrey Zeldman provided a historic perspective on the development of the Internet, Web, and Web standards culminating in today’s exciting opportunities for Web designers and developers.”
I’m enjoying An Event Apart Seattle 2011 and you’re not. Despair not, help is available:
- For real-time Twitter aggragation, watch afeedapart.com.
- Enjoy AEA Seattle photos in our Flickr group.
- Watch Luke Wroblewski dance.
- Watch An Event Apart dance for Luke Wroblewski.
- Nod along to the interstitial audio playlist.
I WISH I had written Adactio: Journal—Sea change. I advise every web designer who hasn’t yet done so to read it.