Beautiful HTML5 slides on Web design

My friend Matthew Richmond from Chopping Block has posted a beautifully designed slide deck on “Web Design Concepts for Non-Web Designers.”*

In this case the medium is much of the message: the slides demonstrate what can be done with the (relatively) rich typography, positioning, and transitions supported in modern browsers. It’s great to see custom fonts, rotated type, and more getting used for real, but I want to see Adobe tools enable much easier, higher fidelity support for these standards. The print designers who approached Matthew after his talk reinforced this point: We know how to design, they said, and we like our tools–but how do we transition those designs to clean Web output?

There are plenty of interesting challenges here. Translating between formats and rendering models is tricky, and much more so when the destination format is human readable/editable. Almost no one would look inside, say, an EPS file and harrumph, “Well, that’s not how I’d write PostScript”–but they absolutely do that with HTML. Even if apps generate the code well, it’s hard to know how to blend it with the coding styles of each user. But hey, no one ever said progress was gonna be easy.

* “There’s nothing more magical than a robot riding a unicorn.” — Quote o’ the week

12 thoughts on “Beautiful HTML5 slides on Web design

  1. john, you’re kind of missing the point. adobe will always seek to place something proprietary between the designer/developer and their output.
    [What are you talking about? –J.]
    pixel blender anyone?
    [Pixel Bender (note the correct name) is a mechanism for running whatever filter you’d like inside Flash Player, Photoshop, etc. I suppose you’d have us sit on our thumbs for the next 5-10 years, waiting for Apple & Google to determine what’s permissible in Web apps, and then waiting for that support to slowly reach ubiquity. –J.]
    c’mon. chopping block get it right.

  2. I really liked that set of slides. He makes a good point that programs such as Indesign and Dreamweaver can’t teach one how to design, but once one has the basic concepts, they are very helpful as tools, and can even assist in increasing your knowledge. And of course, that’s really what Adobe is about, producing tools that assist the designer in getting his ideas onto paper/digital media.
    I’m happy when I see people at Adobe (like you, John) taking an all-of-the-above approach to your work. People can argue until they’re blue in the face about the benefits of this or that format or standard, but when it comes down to it, the reason that Adobe is where it is is that they make some pretty dang useful tools. I won’t be surprised when we see Adobe at the forefront of HTML5 tools in the next one or two years.

  3. Slightly off topic…
    I just got an Android phone, and while it does have PS Mobile and Adobe Reader, what I really need for it is Bridge. That would make a great companion for designers.
    Who’s in charge of that, since you are just iPad now, right? I’d like them to get the suggestion.
    [I’m not just doing iPads, and I welcome the suggestion. –J.]

  4. That’s great! As a new EVO user, I really like the phone’s ability to act as a portable drive, and have a desktop class folder structure, but.. none of the file browsers I’ve tried do thumbnails well, support Adobe filetypes (PSDs, AI, etc.), or handle Quicktime video files.
    I think a bridge-like app for Android would be a big deal for designers on the platform.
    Thanks!

  5. Very nice slide deck. Funny, I clicked the link first, went through all the slides and thought “excellent, the only problem was that his message was affected by the medium”.
    Seriously, though, the slides are very well done!

  6. The message was spoilt a bit for me, for as I clicked through the slides, they became more and more out of whack, so you couldn’t actually read them.

  7. Something I still find a bit bokers is that despite the web being around for best part of twenty years, browsers still differ so much in how pages render.
    It’s a bit like if you buy a HP printer and a Canon printer and get markedly different results with your designs sometimes fitting on an A4 page on one and needing a bigger sheet for the other.
    It’s not even as if HTML and other web standards are obscure arcane codes that need a new Rosetta Stone to decipher every few weeks.

Leave a Reply

Your email address will not be published. Required fields are marked *