HOW Slides: Web Design For Non-Web Designers

Monday, 06.14.10 at 6:50 pm
Written by , Posted Under: Design,Free Stuff Dept.,Inspiration,Projects,Tips & Tricks

Last week I presented at the HOW Design Conference Denver, CO. Our objective for HOW was to present well-formed technique, design solutions and inspiration to designers looking to work online. The challenge at hand being to convince a packed room of talented yet overstimulated pro’s that the web is not as complicated/different as they are often led to believe. As promised, I have posted the Web Design For Non-Web Designers presentation online. (That was the link right there)

HTML5 was selected as the presentation engine because it was seemingly the right time to do so. A lot of designers/developers were inspired by the HTML5 slides built by Marcin Wichary & Ernest Delgado, our goal was to add some web fonts and make it look nice. Over the years I have used Powerpoint, Keynote and Flash to build out often elaborate presentations, but now I am quite content trying to push the HTML5 & JavaScript slides as far as possible. If there is continued interest I can post more information about building the presentation itself.

On the way back from Denver, I made some additions to the slides:

  • Removed the PDF links, replacing them with Shadowbox.js galleries.
  • Quickly added a print.css file, which means it will look nice when you hit print.
  • Enabled the display of inline notes, just hit the 2 key (on a slide with notes).
  • Cleaned up the copy a bit, added more resource links.
  • Trimmed down the file size a bit. There is always room for more optimization.

The HOW Design Conference is a force for good, and I don’t often say such things about big conferences. The attendees, speakers (and yes sponsors) are a humble & talented group. Huge thanks to the folks at HOW and everybody who stopped me to say hello and talk shop.

Tags: , , , , , , , , , , , ,

um, it would have been nice to see it work in IE, just sayin’.

06/15/2010 | 10:36 am

You see… that’s kinda the point here. It’s not going to work fully in IE until Microsoft decides to better support HTML5 & CSS3. In the disclaimer attached to the presentation, we mentioned that IE users can optionally install the Chrome Frame plug-in if they want to see HTML5 working without switching browsers.

The markup is fairly clean tho, so within browsers that don’t fully support HTML5 & CSS3 you should see all the content. If you were interested in using HTML5 for presentations online, you could always build out an alternate style document.

06/15/2010 | 10:56 am

Thanks for posting this. I really wanted to attend this session, but it conflicted with one my boss really wanted me to go to. My time would have been better spent here, I think! Great presentation.

06/15/2010 | 10:59 am

Great narrative plus very clearly laid out.

As a non-web designer (an architecture student in fact) with a passion for the web – I found this illuminating for not only myself, but also my classmates who are increasingly looking at the web as an opportunity to get a head.


06/15/2010 | 12:42 pm

Matt, these slides are great! It was a pleasure meeting you at the conference, too. See you again in Chicago?

06/15/2010 | 2:28 pm

Good material–really nice seeing some behind-the-scenes details that other shops don’t candidly share. It might have felt more linear to see the code after the wireframes (though I wasn’t at the presentation).

The HTML5 Slides doesn’t work well on the iPad, surprisingly . . . The APIRocks version has me excited, though we’re sadly a ways off before universal (non-Webkit, IE) support.

06/16/2010 | 1:24 pm

I just learned the basics of html and css through And seeing your presentation sums-up the behind-the-scenes of my venture in creating beginners’ websites. Thanks. Those information are eye-openers!

06/17/2010 | 6:38 am

@Mig It was excellent to cross paths in Denver, next time i am in Chicago I plan on finding you.

@Rich Thanks man. I think it holds up pretty well on the iPad given what is going on. I actually started the process by trying to optimize everything for tablets. The touch & gesture JavaScript stuff I tried was not woking out, and the time in which I had to finish ended up forcing me to focus primarily on desktop screens.

06/17/2010 | 10:08 am

Awesome presentation!

06/22/2010 | 4:40 pm

Loving this presentation.

Is there any chance of a PDF/PPT style copy for offline access?

06/25/2010 | 2:37 pm

@graham I made sure to create a set of CSS rules for print, so if you are on a computer capable of printing to a PDF file, you have everything you need. If you are not, or if anybody else has a similar request – I have created a PDF version and posted it here.

Thanks for the kind words.

06/25/2010 | 3:32 pm

Nice Presentation!!! Thanks for the post!

07/01/2010 | 4:46 pm

Hi, I tried downloading your presentation, Web Design for Non Web Designers, but keep getting a black screen with just the title at the bottom. Can you help?

02/02/2011 | 2:22 pm
Sing Out, Sista: