June 14, 2010

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

Posted by John Nack at 4:28 PM on June 14, 2010

Comments

  • Anonymous Coward — 5:56 PM on June 14, 2010

    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.

  • Timothy Mackey — 9:29 PM on June 14, 2010

    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.

  • jcool — 7:37 AM on June 15, 2010

    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.]

  • jcool — 9:17 AM on June 15, 2010

    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!

  • Phillip Kerman — 9:30 AM on June 15, 2010

    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!

  • Mario — 4:11 PM on June 15, 2010

    I feel some web passion in your posts. But I don’t see that passion in Adobe as a company.

  • imajez — 5:06 AM on June 16, 2010

    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.

  • imajez — 5:09 AM on June 16, 2010

    Here’s an intertesting perspective on HTML5 and possible sidelining of Flash.
    http://www.pcpro.co.uk/blogs/2010/06/15/html-5-will-it-kill-flash/
    Before any Macolytes dismiss article as it is from a PC magazine – they also cover, use and like Apple products.

  • imajez — 5:31 AM on June 16, 2010

    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.

  • EngulfTech — 11:25 AM on June 16, 2010

    Nice contents to show in school lectures and to internees.

  • WebCreationUK — 1:55 AM on July 13, 2010

    Heading right now to read Matthew’s post, sounds interesting. Thanks for sharing mate.

  • Aura99 - Web design & Internet Marketing — 2:29 PM on June 11, 2012

    An interesting use for CSS3 and HTML5. My feeling is that HTML5 is not the correct medium for rendering a presentation. There are far better mediums for this I was reading earlier today on A List Apart an interesting article about layout design and the medium of presentation well worth a read http://www.alistapart.com/articles/a-simpler-page/.

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)