HOW Slides: Web Design For Non-Web Designers
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.
See more at 
um, it would have been nice to see it work in IE, just sayin’.
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.
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.
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.
Bravo!
Matt, these slides are great! It was a pleasure meeting you at the conference, too. See you again in Chicago?
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.
I just learned the basics of html and css through w3schools.com. And seeing your presentation sums-up the behind-the-scenes of my venture in creating beginners’ websites. Thanks. Those information are eye-openers!
@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.
Awesome presentation!
Loving this presentation.
Is there any chance of a PDF/PPT style copy for offline access?
@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.
Nice Presentation!!! Thanks for the post!
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?