Dreamweaver CS 5.5 has some built-in jQuery mobile functions that can help you design a mobile site. Going this route means one of two things:
- You begin with the mobile site, enhanced with prebuilt jQuery Mobile functionality, and progressively enhance to create a site that will work on all devices.
- You create a site just for mobile that is a separate design from your other site.
I’ll show you the basics of how to get started and what Dreamweaver is doing for you.
Open a new blank page using the DOCTYPE of your choice. Choose the jQuery Mobile category in the Insert panel. Choose the icon for jQuery Mobile Page, the first icon on the left in this view. (I like the Classic Workspace. Your view of the Insert panel may be different from this if you don’t use that Workspace, but the jQuery Mobile category will contain the same icons.)
Two dialog boxes appear. The first wants you to indicate whether you want to use the remote jQuery Mobile scripts and stylesheet, or install them locally. For this exercise, I’ll leave them as remote, but that might not be the best choice for actual use.
The second asks you to assign an ID to the new mobile page. Dreamweaver suggest ‘page’ by default, which will be okay for this demo. You also choose whether or not to have a header and footer here.
Clicking OK brings you back to the Dreamweaver document window. Let take a look at what your choices on the previous two dialog windows inserted into the document. The Design View doesn’t look like much.
What you Got Code-Wise
When you look at the Code View, you realize there’s a lot of work already done for you here.
- You see the links to the scripts and stylesheet. The styles show up in your Style panel and appear to be editable, but I would want to recopy them into a local CSS file myself just to be sure.
- You see that data-roles are assigned. This is how jQuery Mobile identifies what you are creating. One of the benefits of data-roles is that there are styling options associated with them.
It needs work, but you have a start.
What else can you do?
Next, take a look at the rest of the options in the jQuery Mobile Category of the Insert panel.
The first one on the left is the JQuery Mobile Page icon, already mentioned. From left to right, the others are:
- JQuery Mobile List View
- JQuery Mobile Layout Grid
- JQuery Mobile Collapsible Block
- JQuery Mobile Text Input
- JQuery Mobile Password Input
- JQuery Mobile Text Area
- JQuery Mobile Select Menu
- JQuery Mobile Checkbox
- JQuery Mobile Radio Button
- JQuery Mobile Button
- JQuery Mobile Slider
- JQuery Mobile Toggle Switch
I’ll walk through inserting one of these to give you an idea of what Dreamweaver does with it. How about the List View? I’ll create a space for it after the generic Header text and click the JQuery Mobile List View icon.
A dialog window opens. You choose the type of list, the number of items in the list, and several other choices including some pre-styled options if you want to use a split button. I’ll pick “Star” from the split button icons.
You see this in Design View.
You see this is Live View.
This is what happened in Code View.
The other jQuery mobile icons work in a similar way. While this is just a beginning for you, it does get you off to an fast (and easy) start in designing a site specifically for mobile using jQuery Mobile scripts.
If you are interested in taking a different approach with Dreamweaver CS 5.5 to create a site designed to be responsive and work in all device sizes, see my e-book How to Create a Responsive Web Design in Dreamweaver CS 5.5. Explaining how Dreamweaver helps you do that is a long story, so I packaged it as an e-book and am charging a small fee to download it.