HTML5 Video Player II
JOHN DYER’S MediaElement.js bills itself as “HTML5
<audio> made easy”—and that’s truly what it is:
- HTML5 audio and video players in pure HTML and CSS.
- Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers.
- Accessibility standards including WebVTT.
- Plugins for WordPress, Drupal, Joomla, jQuery, BlogEngine.NET, ruby gem, and plone.
For complete information, visit mediaelementjs.com.
Hat tip: Roland Dubois.
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:
- An Event Apart Atlanta three-day schedule
- A Feed Apart – live tweeting, Monday through Wednesday
- AEA Atlanta Flickr Group
- An Event Apart Facebook page
Filed under: 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
Jeffrey Zeldman signs a contract the modern way.
2010: The Year in Web Standards
WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.
It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.
Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.
Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator,
open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.
Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.
Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.
Zeldman.com: The Year in Review
A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:
- iPad as the New Flash 17 October 2010
- Masturbatory novelty is not a business strategy.
- Flash, iPad, and Standards 1 February 2010
- Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
- An InDesign for HTML and CSS? 5 July 2010
- Stop Chasing Followers 21 April 2010
- The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
- Crowdsourcing Dickens 23 March 2010
- Like it says.
- My Love/Hate Affair with Typekit 22 March 2010
- Like it says.
- You Cannot Copyright A Tweet 25 February 2010
- Like it says.
- Free Advice: Show Up Early 5 February 2010
- Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.
A few things I wrote elsewhere might repay your interest as well:
- The Future of Web Standards 26 September, for .net Magazine
- Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?
- Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
- When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.
Happy New Year, all!
iPad as the new Flash
iPad. Never have so many embraced a great product for exactly the wrong reasons.
Too many designers and publishers see the iPad as an opportunity to do all the wrong things—things they once did in Flash—without the taint of Flash.
In the minds of many, the iPad is like Flash that pays. You can cram traditional publishing content into an overwrought, novelty Flash interface as The New York Times once did with its T magazine. You may win a design award but nobody will pay you for that content. Ah, but do the same thing on the iPad instead, and subscribers will pay—maybe not enough to save publishing, but enough to keep the content coming and at least some journalists, editors, and art directors employed.
It’s hard to argue with money and jobs, and I wouldn’t dream of doing so.
Alas, the early success of a few publications—publications so good they would doubtless survive with or without iPad—is creating a stampede that will not help most magazines and interfaces that will not please most readers.
Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.
Luke Wroblewski’s Touch Gesture Reference Guide gives designers plenty of ammunition to create dynamic user experiences that work on a wide variety of mobile phones and devices (including iPad) while these same sites can use traditional desktop browser effects like hover to offer equally rich experiences on non-touch-enabled browsers. Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”
I’m not against the iPad. I love my iPad. It’s great for storing and reading books, for browsing websites, for listening to music and watching films, for editing texts, presentations, and spreadsheets, for displaying family photos, and on and on. It’s nearly all the stuff I love about my Mac plus a great ePub reader slipped into a little glass notebook I play like a Theremin.
I’m not against iPad apps. Twitterific for iPad is by far the best way to use Twitter. After all, Twitter is really an internet service, not a website; Twitter’s own site, while leaps ahead of where it used to be, is hardly the most useful or delightful way to access its service. Gowalla for iPad is my constant companion. I dread the idea of traveling without it. And there are plenty of other great iPad apps I love, from Bloom, an “endless music machine” by Brian Eno and Peter Chilvers, to Articles, which turns Wikipedia into an elegant reading experience, to Mellotronics for iPad, an uncannily accurate Mellotron simulator packed with 13 authentic voices—“the same production tapes featured on Strawberry Fields Forever” and other classic tracks (not to mention tracks by nouveau retro bands like Eels).
There are apps that need to be apps, demand to be apps, and I admire and learn from them like every other designer who’s alive at this moment.
I’m just not sold on what the magazines are doing. Masturbatory novelty is not a business strategy.
Filed under: Accessibility, Adobe, Advocacy, Apple, Applications, apps, architecture, art direction, Authoring, Best practices, business, development, E-Books, editorial, Flash, Formats, Free Advice, glamorous, HTML, HTML5, industry, ipad, iphone, Publications, Publishing, Responsibility, Standards, State of the Web, The Essentials, W3C, Web Design, Web Design History, Web Standards
My other iPad is a Kindle
The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.
The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).
I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:
meta name="viewport" content="width=770"
(Obviously, the value of “width” should be adjusted to match your site’s layout.)
I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.
Filed under: A List Apart, Accessibility, Amazon, Apple, art direction, Authoring, Best practices, books, Browsers, Code, Compatibility, Design, E-Books, Formats, HTML, industry, Layout, Site Optimization, The Essentials, Touchscreen, Web Design, Web Design History, Web Standards, webkit, zeldman.com
HTML5 Pour Les Web Designers
Sacrebleu! The French edition of the ebook of Monsieur Jeremy Keith’s HTML5 For Web Designers is in the top five sellers in the iTunes Store Français.
To answer your other questions: an eBook version in English is coming to books.alistapart.com next week, will soon thereafter also be sold via the iTunes Store, and will be followed by a PDF version. Get those downloading fingers in shape now!
Design Apps for Fun and Profit
Josh Williams, founder of Gowalla, is our guest at 1:00 PM ET today, July 29, in Episode 14 of The Big Web Show. Whether you’re a social media user/creator, an entrepreneur, an application developer, an iconist or illustrator, a freelancer with big dreams, an API wizard, a devotee of marketing 2.0, a web designer, a Gowalla fan, or what, you won’t want to miss this episode.
The Big Web Show is taped in front of a live internet audience, and you can be part of it. Join co-host Dan Benjamin and me at 1:00 PM ET today to participate in the live taping of Episode 14.
If you miss the live taping, you can watch the show on our website or via iTunes later tonight.
The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards (often within hours of taping) via iTunes (audio feed | video feed) and the web.
Photo: Keegan Jones.
Via yfrog.com/83n4fp. See also:
- TechCrunch: Adobe, You Brought An Advertisement To A Gun Fight, by MG Siegler, 13 May 2010
- Apple.com: Thoughts on Flash, Steve Jobs, April 2010
- The Big Web Show Episode 2: HTML5 For Web Designers
- HTML5 For Web Designers by Jeremy Keith (A Book Apart, June, 2010)
- Zeldman.com: Flash, iPad, and Standards, 1 February 2010
- Zeldman.com: Steve Jobs and Me on Flash, 29 April 2010
Should Publishers Attend SXSW?
In Should Publishers Attend SXSW?, Lorraine Shanley of Publishing Trends answers her own question this way:
Yes, because sxsw offers a chance to see options for the future—amazing gaming, interactive software, inventive marketing, creative content development and deployment. But as Will Schwalbe … said, “If publishers come to sxsw to create their own sessions track, they’ll learn nothing. If they come to attend panels on subjects about which they know nothing, they’ll learn an enormous amount.”
The PDF version of the April issue includes additional SXSW coverage (with nice things said about our panel and A Book Apart), data on how different generations find books, search engine conversion strategies, and more.