Creating jQuery Mobile website themes in Fireworks using the CSS3 Mobile Pack

In this article you'll learn how to work with the Adobe Fireworks CSS3 Mobile Pack to create and maintain mobile websites using the jQuery Mobile Framework.

The CSS3 Mobile Pack includes two new features:

• CSS Properties panel: The CSS Properties extension maps all the properties of a Fireworks object that can be represented in CSS. It lists the equivalent CSS properties in the CSS Properties panel. To learn more about using this feature, read Extracting CSS properties from design objects in Fireworks using the CSS3 Mobile Pack.
• jQuery Mobile theme skinning: The extension adds new functionality that enables you to create or update the theme of a jQuery Mobile website in Fireworks. After updating a site, you can display it inside the jQuery Mobile theme preview and export the corresponding CSS code and related sprite assets. This article describes how to work with the jQuery Mobile feature provided by the CSS Mobile Pack.

The jQuery Mobile Framework is a JavaScript framework that allows you to quickly build websites for mobile devices. It is a touch-optimized web framework designed for smartphones and tablets. jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. The jQuery Mobile Framework is easy to use and includes web-specific controls such as buttons, sliders, list elements, and many more. When you build mobile websites with the jQuery Mobile Framework you can leverage the default theme provided with the framework.

The jQuery Mobile theme skinning extension enhances the Fireworks workspace to enable you to create or modify the default jQuery Mobile theme. It also generates the associated CSS style sheet and sprite assets. You can use the CSS generated by Fireworks to modify the default theme for jQuery Mobile pages to customize it for your projects.

This article describes how you can change or create jQuery Mobile themes using CSS3 Mobile Pack for Fireworks and how to apply the new or updated themes to your jQuery Mobile pages.

Before the CSS3 Mobile Pack was available, it was necessary to manually modify the CSS style sheet when you created a theme for a jQuery-based mobile website. Until recently, it wasn't possible to preview the site to check the appearance of the theme on the website. It was rather time-consuming because you had to switch between modifying the code on a web page and then previewing it in a browser until the desired theme changes were finalized.

The CSS3 Mobile Pack helps save time because you can now create or update a jQuery Mobile theme in Fireworks, preview it, and then generate the CSS style sheet and sprites for the site. When you apply the CSS code to your jQuery-based web pages for mobile devices, the theme is displayed exactly as it was when you previewed the design in Fireworks.

Using the jQuery Mobile Framework to design mobile sites

Every layout and widget included in jQuery Mobile is designed around a new object-oriented CSS framework. The framework makes it possible to apply a complete unified visual design theme to mobile sites and applications.

Consider the following benefits:

• jQuery Mobile uses CSS3 properties to create rounded corners, box and text shadows, and gradients. Using CSS3 properties instead of images is advantageous because it reduces the size of the theme file and the number of server requests.
• Themes include multiple color swatches—each consisting of a header bar, content body, and button states—that you can freely mix and match. These swatches enable you to create visual textures and richer designs.
• Open-ended themes support up to 26 unique swatches per theme. This makes it possible to add almost unlimited variety to your designs.
• All backgrounds now use CSS3 gradients to dramatically reduce the file size and number of server requests to improve performance.
• A simplified icon set includes elements most commonly used for mobile, in a sprite format to reduce image weight.

The default theme contains the following five bar styles (see Figure 1):

By default, the framework assigns the "A" swatch to all headers and footers because header and footer elements are typically visually prominent in a mobile application. To set the color of a bar to a different swatch color, add the data-theme attribute to your header or footer and set an alternate swatch letter such as "B" or "D" to apply the specified theme swatch color. The CSS code generated for a bar is shown below:

To learn more about how the default theme works, read the jQuery Mobile Framework Theme Documentation.

The jQuery Mobile theme includes some default sprite images and swatches. You can use the functionality provided by the Fireworks extension to modify the sprites and swatches. You can also create multiple swatches by duplicating an existing page and customizing a copy of it.

Begin by creating a new theme:

1. In Fireworks CS5, choose Commands > jQuery Mobile > Create New Theme to create a new theme (see Figure 2).

The page name is used to name the swatch. We recommend that you use a single character (a–z) when naming pages. You can create pages by duplicating existing pages and modifying the theme according to the requirement. Each page generates a unique CSS swatch.

The template contains the default sprites and related assets (see Figure 3).

Modifying a jQuery Mobile template

Using Fireworks, you can modify the skin based on the theme to match a site's design.

Follow these steps to modify an existing template to update it:

1. Open a page in Fireworks and select the desired elements.
2. Modify individual elements on the canvas. (For example, you can update colors, change text styles, add gradient fill, adjust the degree of rounded corners, apply effects such as drop shadows, or make other updates as desired.)
3. Save the changes by choosing File > Save.

Each object on the canvas corresponds to a section of CSS code in a swatch. The code is indicated by the title of each object (see Figure 4).

After making changes, the next step involves reviewing the recent changes to see how the design appears.

Previewing changes applied to a jQuery Mobile template

Follow these steps to preview the revised template file:

1. Select Windows > Extensions > jQuery Mobile Theme Preview (see Figure 5).

The Preview panel appears and displays the updated page (see Figure 6).

2. To preview all themes and sprites at once in a browser, select Commands > jQuery Mobile > Preview Theme in a Browser (see Figure 7).

Click the tabs along the top to switch between the different themes to preview individual swatches applied to various elements.

After you have created or updated a template, you can use Fireworks to generate the jQuery CSS code and the sprites for the site. Choose between one of the following two options to export the CSS swatches and sprites.

Option 1: Export both the CSS and sprites simulataneously

To export all of the swatches and sprites at once, choose Commands > jQuery Mobile > Export Theme to generate the swatches and sprites for all pages (see Figure 8).

Option 2: Export a specific swatch or sprite individually

To export a particular swatch, click Export Current Swatch in the jQuery Mobile Theme Preview panel. Use this strategy when you want to customize only the bar of a particular swatch in order to update it (see Figure 9).

Applying the generated CSS file to a jQuery page

At this point you've created the new CSS style sheet file to update the mobile website theme. In this section, you'll learn how to link the CSS file to your mobile website. Follow these steps:

1. Launch Dreamweaver CS5.5. Open an existing site or choose File > New and choose the options in the New Document dialog box to create a blank HTML page.
2. Choose Insert > jQuery Mobile > Page to create a jQuery Mobile page. In the jQuery Mobile Files dialog box that appears, leave all the default settings and click OK.
   The page is created using the default jQuery theme, as defined in this tag:

3. Review the code to see how the CSS style sheet is linked to the HTML page (see Figure 10).

4. In the Code window, edit the link to point to the jQuery CSS style sheet that you generated using Fireworks. Using this strategy, you can apply the new themes you create in Fireworks to the entire page or to specific elements of the page.

For example, rather than using the default "A" bar design, you can use code to apply a different bar style, like this:

After applying these changes, click the Live View button to review how the updated theme appears within the Dreamweaver workspace (see Figure 11).

When you test, it's important to review the changes on the mobile device to make sure everything appears as expected. But when you are still designing the mobile app, you can save time by choosing File > Preview in Browser > Device Central to see how the content appears in a mobile emulator for the targeted device (see Figure 12).

Note: In accordance with the jQuery Mobile Framework, Fireworks does not export patterns to optimize the size of the exported content.

As you've seen in this article, you can use the CSS3 Mobile Pack for Fireworks to create and update jQuery Mobile website themes to build and manage websites for devices. The updated interface includes the ability to generate the CSS style sheets that you can use to redesign mobile apps and sites.

Fireworks makes it easier than ever before to build and deploy web designs across multiple screens. Additionally, since the generated CSS is cross-platform compatible, the sites you create will perform and appear as expected on smartphones and tablets. Use the preview options in Dreamweaver to review the changes in Live View or in a browser in order to check your work before publishing the changes. You can also preview inside Fireworks.

To learn more about extending Fireworks to create CSS style sheets, read Extracting CSS properties from design objects in Fireworks using the CSS3 Mobile Pack, and watch the Fireworks senior product manager, Takashi Morifusa, demonstrate the CSS3 Properties panel and jQuery Mobile theme skinning tool. Also be sure also to check out the HTML5 and CSS3 Development Center.