SlideShowPro adds HTML5

Todd Dominey at Happy Cog.

Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.

Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)

Finally, Todd was one of the first—along with 37signals and Coudal Partners—to abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.

A personal project that became an empire

In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.

SlideShowPro

But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as 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”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.

Mr Dominey has now solved that problem:

SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right.

The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, you’ll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices — which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.

A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:

Why mobile? Why not desktop?

We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, we’ll continue to look into alternate presentation options.

Into the future!

Whitney Hess, Ethan Marcotte, and Jason Fried on The Big Web Show

Update! Episode 8, featuring Whitney Hess, is now available for your listening and viewing pleasure at 5by5.tv.

Whitney Hess

This Thursday 17 June at 1:00 PM EDT, join Dan Benjamin and me live on The Big Web Show as we interview Whitney Hess (bio | blog | Twitter) on on the ins and outs of user experience design—from research to wireframes to testing and beyond. Just what goes into making stuff online easier and more pleasurable to use? What kinds of projects (and clients) enable great user experiences, and which have bad UI written all over them? If a tree falls in the forest, will Whitney tweet about it? Join us for these topics and more.

24 June: Ethan Marcotte

Then on Thursday 24 June at 1:00 PM EDT, join us live as we interview Ethan Marcotte (bio | blog | Twitter), co-author of Designing With Web Standards 3rd Edition with me and Handcrafted CSS: More Bulletproof Web Design with Dan Cederholm. We’ll talk about designing and coding for the likes of the Sundance Film Festival and New York Magazine, and the joys of responsive web design, working remotely, and swearing profusely on Twitter.

1 July: Jason Fried

And then on Thursday, 1 July, join us as we coax 37signals CEO Jason Fried (tiny bio | book | book | book | blog | Twitter) into telling us how he really feels about bells and whistles, contracts, meetings, buzzwords, software that requires training, and startups that need investors. The controversial Mr Fried is a true rebel and innovator and one of our favorite people on the internet. Tune in and find out why.

Turn on, Tune in

The Big Web Show is taped live in front of an internet audience Thursdays at live.5by5.tv and can be watched afterwards via iTunes (audio feed | video feed) and the web.


Episode 2: HTML5 For Designers

Zeldman, Dan Benjamin, and Jeremy Keith discuss HTML5 on The Big Web Show.

Now online for your listening and viewing pleasure: in Episode 2 of The Big Web Show, Dan and I chat with Jeremy Keith—designer, developer, content creator, agency co-founder, speaker extraordinaire, and author of HTML5 for Web Designers (A Book Apart, 2010). In this hour-long video podcast, we explore the goals, process, and inspiration behind the book, and discuss what HTML5 means for web creators and consumers—from semantics to strategy, accessibility to implementation.


AEA Minneapolis

An Event Apart Minneapolis 2010.

An Event Apart, the design conference for people who make websites, has posted its Minneapolis 2010 schedule. Join Eric Meyer and me and ten amazing guest speakers on July 26-27, 2010 for two great days of design, code, and content:

Monday, July 26

9:00am–10:00am

Put Your Worst Foot Forward

Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

Nothing teaches like failure. Web standards godfather and An Event Apart cofounder Jeffrey Zeldman shares some of his biggest blunders as a designer, entrepreneur, and creative director, and how each mistake taught him to be better at what he does. Study what the problem was and why the mistake seemed like the right answer at the time; see why it turned out to be a really bad idea after all; and learn the great positive lesson each mistake taught.

10:15am–11:15am

DIY UX: Give Your Users an Upgrade

Whitney Hess, Strategic Partner, Happy Cog

Have you fallen in love with your solution and forgotten the original problem? Are you certain that your product actually makes people’s lives better? Not every company can hire someone like me to help you listen to your users, so you’re gonna have to learn how to do some of this stuff yourself. I’ll show you techniques to find out who your users are, what they really need and how to go about giving it to them in an easy to use and pleasurable way. And it doesn’t have to bankrupt you or kill your release date.

11:30am–12:30pm

The CSS3 Experience

Dan Cederholm, author, Bulletproof Web Design and Handcrafted CSS

In a fast-paced hour of design ideas and techniques, learn how advanced CSS and CSS3 can add richness to your site’s experience layer, and discover the role CSS3 can play in enhancing interactivity.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Mobile First!

Luke Wroblewski, author, Web Form Design

More often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities.

3:15pm–4:15pm

Learning To Love Humans—Emotional Interface Design

Aarron Walter, author, Building Findable Websites

Humans, though cute and cuddly, are not without their flaws, which makes it a challenge to design for them. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. Aarron will introduce you to the emotional usability principle—a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your sites and applications more engaging to the humans they serve.

4:30pm–5:30pm

Anatomy of a Design Decision

Jared Spool, Founder, User Interface Engineering

What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research.

7:00pm??pm

Opening Night Party

Sponsored by (mt) Media Temple

Media Temple’s opening night parties for An Event Apart are legendary. Join the speakers and hundreds of fellow attendees for great conversation, lively debate, loud music, hot snacks, and a seemingly endless stream of grown-up beverages. Venue details will be announced soon.

Tuesday, July 27

9:00am–10:00am

Everything Old Is New Again

Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.

10:15am–11:15am

Paranormal Interactivity

Jeremy Keith,
author, DOM Scripting

Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.

11:30am–12:30pm

Patterns, Components, and Code, Oh My!

Erin Malone, co-author, Designing Social Interfaces

Designing with patterns sounds like a great idea on the surface. But what does it really take to identify and write patterns? And just what do you do with them once they are created? Rounding out the pattern library with components and code can help prototyping and design move faster, leaving time to solve more challenging problems. This session will discuss the benefits of and issues that arise from designing with patterns, and show how to stay creative while doing so.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Message and Medium: Better Content by Design

Kristina Halvorson, author, Content Strategy for the Web

Designing for multichannel content delivery (mobile, anyone?) means an entirely new set of considerations and challenges for web professionals everywhere. Unfortunately for content creators, it’s nearly impossible to predict whether their writing will maintain impact and readability across each and every platform. But forget about the medium for a minute; it’s the message that matters most. We’ll learn how to identify your key business messages, how they inform your content strategy, and how they impact multi-channel content development and design.

3:15pm–4:15pm

A Dao of Flexibility

Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition

“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.

4:30pm–5:30pm

How the Web Works

Jeff Veen, author, Art & Science of Web Design

Turns out that the fundamental principles that led to the success of the web will lead you there, too. Drawing on 15 years of web design and development experience, Jeff will take you on a guided tour of what makes things work on this amazing platform we’re all building together. You’ll learn how to stop selling ice, why web browsers work the way they do, and where Rupert Murdoch can put his business model.


Register through June 28 and save $100 off your conference pass. Hurry: tickets are first-come, first-served, and seating is limited.


HTML5 For Web Designers

HTML5 For Web Designers, by Jeremy Keith.

WHEN MANDY BROWN, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for
the job.

Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.

HTML5 For Web Designers

Win free copies of HTML5 For Web Designers on Gowalla!

Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.

The Big Web Show

Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.

There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.

But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.


4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog

The present-day content producer refuses to die.

And don’t miss…

Big Web Show No. 1 up!

Jeffrey Zeldman

FOR YOUR viewing and listening pleasure, The Big Web Show’s Episode 1: Web Fonts is now online.

Jeffrey Zeldman and Dan Benjamin grill Ethan Dunham of Fontspring and Font Squirrel and Jeffrey Veen of Typekit (and other sites, too numerous to name) about one of your favorite subjects, “real fonts on your website” in this, our inaugural episode.

Enjoy!

More Mod on the Digital Book

Embracing the Digital Book by Craig Mod.

A Reading Heatmap: Key passages illuminated by layering all readers’ highlights for the same text.

LAST MONTH, he wowed us with Books in the Age of the iPad, a call to make digital books as beautiful as printed ones. This month, Craig Mod is back with Embracing the Digital Book, an article (or blog post if you must) that begins as a critique of iBooks and Kindle and moves on to discuss the e-reader of our dreams, complete with reasoned social features:

I’m excited about digital books for a number of reasons. Their proclivity towards multimedia is not one of them. I’m excited about digital books for their meta potential. The illumination of, in the words of Richard Nash, that commonality between two people who have read the same book.

We need to step back for a moment and stop acting purely on style. There is no style store. Retire those half-realized metaphors while they’re still young.

Instead, let’s focus on the fundamentals. Improve e-reader typography and page balance. Integrate well considered networked (social) features. Respect the rights of the reader and then — only then — will we be in a position to further explore our new canvas.

Embracing the digital book — Craig Mod


An Event Apart Seattle

Above: Part of my deck for “Put Your Worst Foot Forward,” a talk on learning from mistakes at An Event Apart Seattle 2010.

Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.

The all-star cast includes …

… And that’s just the first day.

There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.

If you can’t be with us, follow the Twitter stream live on A Feed Apart.

Ahem

The first part of my post of 1 February was not an attack on Flash. It described a way of working with Flash that also supports users who don’t have access to Flash. I’ve followed and advocated that approach for 10 years. It has nothing to do with Apple’s recent decisions and everything to do with making content available to people and search engines.

It’s how our agency and others use Flash; we’ve published articles on the subject in our magazine, notably Semantic Flash: Slippery When Wet by Daniel Mall.

We do the same thing with JavaScript—make sure the site works for users who don’t have JavaScript. It’s called web development. It’s what all of us should do.

My point was simply that if you’re an all-Flash shop that never creates a semantic HTML underpinning, it’s time to start creating HTML first—because an ever-larger number of your users are going to be accessing your site via devices that do not support Flash.

That’s not Apple “zealotry.” It’s not Flash hate. It’s a recommendation to my fellow professionals who aren’t already on the accessible, standards-based design train.


THE SECOND PART OF MY POST wasn’t Flash hate. It was a prediction based on the way computing is changing as more people at varying skill levels use computers and the internet, and as the nature of the computer changes.

There will probably always be “expert” computer systems for people like you and me who like to tinker and customize, just as there are still hundreds of thousands of people who hand-code their websites even though there are dozens of dead-simple web content publishing platforms out there these days.

But an increasing number of people will use simpler computers (just as we’ve seen millions of people blog who never wrote a line of HTML).


THE THIRD PART OF MY POST wasn’t Flash hate. It was an observation that Google and Apple, as companies, have more to gain from betting on HTML5 than from pinning their hopes to Adobe. That’s not a deep insight, it’s a statement of the obvious, and making the statement doesn’t equate to hating Adobe or swearing allegiance to Google and Apple—any more than stating that we’re having a cold winter makes me Al Gore’s best friend.

(Although I like Gore, don’t get me wrong. I also like Apple, Google, and Adobe. My admiration for these companies, however, does not impede my ability to make observations about them.)


THE THIRD PART OF MY POST ALSO WASN’T a blind assertion that HTML5, with VIDEO and CANVAS, is ready to replace Flash today, or more adept than Flash, or more accessible than Flash. Flash is currently more capable and it is far more accessible than CANVAS.

We have previously commented on HTML5’s strengths and weaknesses (Exhibit A, Exhibit B, Exhibit C) and are about to publish a book about HTML5 for web designers. HTML5 is rich with potential; Flash is rich with capability and can be made highly accessible.

That it is unstable on Mac and Linux is one reason Apple chose not to include it in its devices; that this omission will change the way some developers create web content is certain. If the first thing it does is encourage them to develop semantic HTML first, that’s a win for everyone who uses the web.

Carry on.


SVG: A Second Look

A List Apart 299

In a special double issue of A List Apart, for people who make websites, Shelley Powers takes a second look at SVG and likes what she sees. You may, too.

Many of us think of Scalable Vector Graphics (SVG) as an also-ran: fine for charts and tables, but not much else. Yet SVG can actually enhance a site’s overall design, and can be made to work in even the most stubborn browser.

In Part I, Shelley covers important basics of working with SVG, including browser support and accessibility.

In Part II, dig deeper into the technology behind using SVG for your site design. Explore how to incorporate SVG in a cross-browser friendly manner, including using SVGWeb to ensure that the SVG shows in Internet Explorer. And discover the unique characteristic that makes SVG ideal for page backgrounds: scalability.


Illustration: Kevin Cornell for A List Apart