Using the CSS3 Mobile Pack for Adobe Fireworks CS5
If you’ve found yourself wondering how Adobe Fireworks can fit into your web and mobile design workflows, or how you can introduce students to a visual method of designing for mobile, I may have just the thing for you.
Today, my new eBook, Using the CSS3 Mobile Pack for Adobe Fireworks CS5, went live at http://www.peachpit.com/.
While there are already a couple good how-to tutorials available at the Fireworks Developer Center, I wanted to take a deeper, more practical approach to this new extension. I wanted to go beyond the how and hopefully address the why. I walk you through the basics, but then I move you to a realistic application of the extension. You will learn about both parts of the CSS3 Mobile Pack:
- CSS Properties Panel
- jQuery Mobile Theme Builder
CSS Properties Panel
In the chapter on the CSS Properties panel, for example, you’ll be doing more than simply exporting a rounded corner rectangle as CSS3 mark up; you will be taking a completed web page design and – using Fireworks and a Dreamweaver HTML5 starter page layout – building a standards-based web page, complete with navigation, semi-transparent content areas and stylized text.
Final web page design that matches the original Fireworks mock up
The only bitmap in the page is the background image. And it was all done with a minimum of coding. Maybe it’s just me, but I think that’s pretty cool.
jQuery Mobile design, mocked up in Fireworks, then exported to Dreamweaver and previewed in Device Central.
jQuery Mobile Theme builder
In the chapter on the jQuery Mobile Skinning, you will study and work with the jQuery Mobile template file, also part of the CSS3 Mobile Pack, and learn how to customize an existing skin and export that new mark up over to Dreamweaver to quickly create a simple, customized mobile web site.
Time-saver in production and in the classroom
Whether you are comfortable with code or not, the new tools in this extension can be a creative and time-saving boon.
A designer can export out standards based mark up, which can be further edited and tweaked by a developer in their preferred web page editing environment. Or if the designer wears both hat, he or she can move quickly from a visual design to realizing that design in HTML and CSS. I think this is a great example of Fireworks bridging the gap between designers and developers.
And for students learning the craft of web and mobile design, it gives them the opportunity to create their design first, and then see how that design becomes converted to code. Or, depending on the design itself, learn about the limitations to be aware of when building a standards-based design that targets multiple devices.
Either way, it’s a win-win.
Final thoughts
The fact that the extension is also FREE is another bonus. I think it’s pretty cool that Adobe released this extension now, rather than making anyone wait for the next version of Fireworks.
If you’re interested in the ebook, it’s available for less than $6.50 USD at http://www.peachpit.com/. Feel free to follow me on twitter @JimBabbage. If you’ve got questions, that’s a great place to find me.
