- Free & Open Source
- Lightweight. NO IMAGES USED
- 100% skinnable using CSS
- Library independent
- Easy to use
- Easy to understand & extend
- Consistent look between browsers
- Full Screen & Full Window Modes
- Volume Control
- Forced fallback to Flash (even when there is an unsupported source)
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:
THE SHOW IS OVER, but the memories, write-ups, demos, and links remain. Enjoy!
Speakers, attendees, parties, and the wonders of Boston, captured by those who were there.
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.
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.
“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.
“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.
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’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.”
“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’s amazing talk—a key aspect of design in 2011 and AEA session of note—as captured by the great Luke Wroblewski.
“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.
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.
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.”
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!
“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.
The “Mad Men” opening titles re-created entirely in CSS3 animation. (Currently requires Webkit browser, e.g. Safari, Chrome.)
Anthony Calzadilla, a key collaborator on the Mad Men CSS3 animation, showcases his works.
Pure CSS3 box-shadow page curl effect. Mentioned during Ethan Marcotte’s Day 3 session on exploring CSS3.
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!”)
Ethan Marcotte: “Hello. I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.”
Like it says.
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!
BABY GOT FRONT-END! Tim Murtaugh, Dan Benjamin and I discuss “mobile” versus “small screen,” HTML5 and HTML5 Reset, Science Blogs, the Edible City beta, and more. The Big Web Show #45: Tim Murtaugh.
Are Doctypes the New Lunch Tables? – Cognition: The blog of web design & development firm Happy Cog.
HTML5 RESET DEVELOPER TIM MURTAUGH (@murtaugh, timmurtaugh.com) is our guest on The Big Web Show Episode 45, to be recorded in front of a live internet audience on Thursday, April 14, at 3:00 PM Eastern via 5by5.tv/live.
Tim is the creator of the open-source HTML5 Reset, a set of baseline HTML and CSS templates to get your new web project off on the right foot, and the co-founder of MonkeyDo, a two-person web design and development shop in New York City.
Tim has been building websites since 1997 and specializes in creating standards-based HTML/CSS templates. His eye for design and serious affinity for clean code allow him to painlessly integrate his templates into larger systems without sacrificing user experience or aesthetics.
Recent work includes World Science Festival, Seed Magazine, Scientific American (with Roger Black Studio and Happy Cog), and ScienceBlogs.com. He is also the developer/curator for the online art gallery Cloud King, which won an award for Best CSS-Based Website at the South by Southwest Interactive Festival.
The Big Web Show (“Everything Web That Matters”) records live every Thursday at 3:00 PM Eastern. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!
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.
I’m enjoying An Event Apart Seattle 2011 and you’re not. Despair not, help is available:
HEY, YOU WITH THE STARS in your eyes. Yes, you, the all too necessary SXSW Interactive attendee. Got questions about the present and future of web design and publishing for me or the illustrious panelists on Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW Interactive 2011? You do? Bravo! Post them on Twitter using hashtag #jzsxsw and we’ll answer the good ones at 5:00 PM in Big Ballroom D of the Austin Convention Center.
Topics include platform wars (native, web, and hybrid, or welcome back to 1999), web fonts, mobile is the new widescreen, how to succeed in the new publishing, responsive design, HTML5, Flash, East Coast West Coast beefs, whatever happened to…?, and many, many more.
Comments are off here so you’ll post your questions on Twitter.
The panel will be live sketched and live recorded for later partial or full broadcast via sxsw.com. In-person attendees, arrive early for best seats. Don’t eat the brown acid.
Hence the HTML5 logo effort, intended as an identity system for all the hot new standards technologies—and initially bogged down by a controversy in our circle about theW3C muddying the waters. The actual muddying began when Steve Jobs announced Apple’s support for HTML5 by pointing to web stuff created with CSS3. In other words, the inaccurate use of “HTML5” to cover HTML and non-HTML technologies coincided with the surge of interest in those technologies under that inaccurate label. Which is why some thought leaders in our community have reckoned that the business community’s confusion about what HTML5 actually means doesn’t matter so much, as long as they are clamoring for great sites, accessibly designed with web standards—and as long as developers know the difference between HTML5 and, say, CSS3.
In any case, soon after the standards digerati declared the HTML5 banner launch a communications fiasco, it emerged that the launch was actually merely a communications snafu.
An updated FAQ makes it clear that HTML5 means HTML5, that CSS3 is not part of the HTML5 specification, and so on. The W3C’s clarification allows the standards organization to have it both ways in a fashion acceptable to all. In times past, the W3C argued passionately within its own walls during the creation of web standards, only to passively release them as “recommendations” to a world that often ignored them—the development of XHTML 2 in the pure absence of worldly interest was probably the culmination of that phase. But today’s W3C has learned better. It has learned to engage its constituents and to seek approval beyond its immediate constituents—i.e. to reach out to the business community, not just to the authors of O’Reilly and Peachpit books. Its “HTML5” identity effort represents a reasonable and meritorious effort to cash in on, prolong, and extend the world’s already keen interest in HTML5 and related technologies and practices. Meantime, the little FAQ page and other minor editorial clarifications allow the W3C to pacify its knowledgeable critics and duck the charge that it is blurring the lines between HTML, CSS, and other technologies.
Now that the story appears to be heading purposefully in a single direction, a kink in the works was inevitable.
That kink is also not surprising and not entirely unanticipated. Just when the W3C figures out that HTML5 is hot, the WHAT Working Group (the splinter group that created the actual HTML5 specification in the first place) has decided that HTML is the new HTML5:
- The HTML specification will henceforth just be known as “HTML”, with the URL
http://whatwg.org/html. (We will also continue to maintain the Web Applications 1.0 specification that contains HTML and a number of related APIs like Web Storage, Web Workers, and Server-Sent Events.)
- The WHATWG HTML spec can now be considered a “living standard”. It’s more mature than any version of the HTML specification to date, so it made no sense for us to keep referring to it as merely a draft. We will no longer be following the “snapshot” model of spec development, with the occasional “call for comments”, “call for implementations”, and so forth.
Those who are surprised should remember that the HTML5
doctype references “HTML” with no version number. In the thinking of its creators, HTML5 was always just HTML. It looked backward (the first web page ever written would be valid HTML5 with the addition of a doctype) and forward. It would continue to evolve. The WHAT WG gave itself the job of steering and updating HTML, while the W3C took on the task of maintaining milestones (a task it will continue to perform).
In practice, the WHATWG has basically been operating like this for years, and indeed we were going to change the name last year but ended up deciding to wait a bit since people still used the term “HTML5” a lot. However, the term is now basically being used to mean anything Web-standards-related, so it’s time to move on!
To those inside the circle of trust, there is no contradiction here. The W3C will doubtless continue to market HTML5, and, for a time, design technologists will continue to write HTML5 books and teach HTML5 classes, if only to acknowledge HTML’s new capabilities and to clearly mark the break from the technologies and practices of the past. Eventually, quite probably, the WHAT WG’s view will take hold, and we will view HTML as a living specification.
Meantime, we’ll take 5.
Thanks to J. David Eisenberg for the nudge.
CRAIG MOD is our guest today January 13, 2011 in Episode No. 34 of The Big Web Show (“Everything Web That Matters”), co-hosted by Dan Benjamin and recorded at 12:00 PM Eastern (new time!) before a live internet audience.
Mod (craigmod.com, @craigmod) is a writer, designer, publisher, and developer concerned with the future of publishing and storytelling. Based in Tokyo for a decade, he is co-author and designer of Art Space Tokyo, an intimate guide to the Tokyo art world. Since October 2010 Craig has been working in the California Bay Area helping sculpt the future of digital publishing with Flipboard.
Craig speaks frequently on the future of books, publishing, and digital content design. In this week’s A List Apart he presents the initial release of Bibliotype, an HTML baseline typography library for tablet reading released under the MIT License.
The Big Web Show records live every Thursday at 12:00 PM Eastern (new time).
“It’s been a great year for web design books; the best we can remember for a while, in fact!” So begins Goburo’s review of the Top Web Books of 2010. The list is extremely selective, containing only four books. But what books! They are: Andy Clarke’s Hardboiled Web Design (Five Simple Steps); Jeremy Keith’s HTML5 For Web Designers (A Book Apart); Dan Cederholm’s CSS3 For Web Designers (A Book Apart); and Eric Meyer’s Smashing CSS (Wiley and Sons).
I’m thrilled to have had a hand in three of the books, and to be a friend and business partner to the author of the fourth. It may also be worth noting that three of the four books were published by scrappy, indie startup publishing houses.
Congratulations, all. And to you, good reading (and holiday nerd gifting).
The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? … A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern [web] standards.
Read about the winning entries: 10K Apart – IEBlog.