Adobe released the Adobe Illustrator CS5 HTML5 Pack as a technology preview on Adobe Labs (you can get it here) so it isn't a full-blown solution -- it actually takes a bit of grunt work to get it installed. Then again, HTML5 and CSS3 aren't anywhere near complete or fully supported across all browsers, either. Consider this a peek into the future, and a GREAT way to experiment on your own, and live on the blistering edge of web design and development.
So what exactly does the Illustrator CS5 HTML5 Pack bring to the table? Here's a quick overview:
You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art. You can even create global variables.
You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.
Mark objects as canvas in SVG
Export named character styles as CSSYou can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.
Export artwork appearances as CSS
You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.
Include selected Graphic Styles as CSS in SVG
You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What's really cool is that you can include styles even if they aren't applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.
Where can I learn more?
So according to the double rainbow guy, what does all of this mean? At the very least, it's a peek into the future. With our continued feedback to Adobe, we're sure to see more robust tools coming to Illustrator and other great applications. Adobe released a similar HTML5 Pack for Dreamweaver a while back, and recently, Adobe actually rolled those features into Dreamweaver CS5 proper with a recent update. One can assume that something similar will follow here as well.
You can get all of the details on the Adobe Illustrator CS5 HTML5 Pack on the Adobe Labs webpage, and you can find a press release from Adobe here. You can also participate in the dedicated discussion forum here.
Of course, if you're a web designer who needs to brush up on some Illustrator skills, my Illustrator CS5 Essential Training course at Lynda.com or my Real World Illustrator CS5 book should cover the basis. To add to all of this excitement, my latest Lynda.com title, Illustrator CS5 for Web and Interactive Design is going live later this month (9/27).
If you'd like more information on HTML5, check out James Williamson's excellent HTML5 First Look title at Lynda.com as well.
Got questions? Let's talk! Leave a comment or send me an email.