HOW Interactive Conference
San Francisco 2011

Embrace Greater Design Freedom with HTML5/CSS3

Handout
Download color PDF of the handout
Download PDF

Responsive Web Design Template
Download a responsive web design template, complete with HTML, CSS, and pre-sliced Photoshop files
Download ZIP

CSS3 Online Tools

CSS3 Playground
by Mike Plate.
Visit site

Gradient Generator
Online visual tool for creating gradients with CSS.
Visit site

Button Creator
Online visual tool for creating buttons with CSS.
Visit site

Free Dreamweaver Design Templates

Free Dreamweaver for
jQuery Mobile

Free Dreamweaver Templates 6-9
Customizable starter designs for intermediates

Free Dreamweaver Templates 1-5
Customizable starter designs for beginners

Free Spry Design Themes
Applying design to Spry widgets

Smartnocities
Cōdify Design Studio Blog: Merging art and design with technology

Additional Learning Resources

Lynda.com — jQuery Projects
Dreamweaver and Code-only versions

Get a free 7-day free trial!

This course shows you a step-by-step process for creating an HTML layout that automatically adjusts it's layout based on a user's screen size. By Leveraging the power of CSS3 media queries, we are able to dynamically alter design and layout elements to deliver an optimal user experience from a single set of HTML and CSS markup. This course also covers strategies for graphic slicing and optimization in Photoshop, HTML code structure, and enabling HTML5 to work with older browsers while taking advantage of the latest web technologies. This course includes HTML, CSS and Photoshop templates that you can customize for your own projects.

Learn more

View courses by Chris Converse

Udemy — Multiscreen Web Designs

This course shows you a step-by-step process for creating an HTML layout that automatically adjusts it's layout based on a user's screen size. By Leveraging the power of CSS3 media queries, we are able to dynamically alter design and layout elements to deliver an optimal user experience from a single set of HTML and CSS markup. This course also covers strategies for graphic slicing and optimization in Photoshop, HTML code structure, and enabling HTML5 to work with older browsers while taking advantage of the latest web technologies. This course includes HTML, CSS and Photoshop templates that you can customize for your own projects.

Learn more

Create Interactive Documents
iPad App

Written, designed, and hosted by interactive design expert Chris Converse, this amazing iPad App will show you how to take your designs from Adobe InDesign to the screen with over 3.5 hours of easy-to-follow video tutorials and a full reference guide.

For many designers trying to produce advanced interactive experiences, scripting remains a major hurdle. With this video and text combo, designers will start in familiar applications, such as Adobe InDesign, Photoshop, and Illustrator, to create a visually rich and engaging interactive Web document — all without coding! By the end of the tutorial users will have built a finished product that includes a global navigation bar, video with navigation points, and sequenced animations of pages.

View in the App Store

Create Interactive Documents
Video Workbook

Designers today are increasingly called upon to create materials in a wide variety of media, or materials that can be delivered via multiple media, not simply for print or for Web alone. In Creative Suite 5, Adobe has addressed that need by making InDesign a powerful cross-media design tool, so designers can use the main tools that they're familiar with to create documents that not only look beautiful in print, but also provide all the interactivity customers expect when viewed online.

Learn more

Bring Your Web Design to Life
Video Workbook

This essential video from award-winning designer Chris Converse will have viewers transforming static web designs into visually rich, interactive websites in no time. Focusing on beginner web designers and print designers who need to optimize their designs for the web, Chris will walk the viewer through all of the tools in Adobe's Creative Suite Web Premium. With over 4 hours of high-quality video tutorials, the viewer will learn how to create an Adobe Dreamweaver website project, slice a completed design in Adobe Photoshop or Adobe Fireworks, build CSS rules for layout, format content and navigation with CSS, import and animate Adobe Illustrator files in Adobe Flash, edit and apply motion graphics to video with Adobe Photoshop Extended, and much more. By the end of the training, viewers will have the skills and knowledge to create a fully functioning web page with interactivity and embedded video.

Learn more

Editing an ePub with Dreamweaver

Free Podcast

Breeze through a completed InDesign document to see how particular elements and styles can be incorporated into an ePUB export in InDesign.

Learn more