Customizable starter design for jQuery Mobile
Created
10 October 2011
Requirements
User level
All
Sample files
This article shows you how to use this customizable starter design for your jQuery Mobile projects. Read the overview to learn about two key approaches to developing websites for mobile, preview and download the template and related files and assets, and watch a short video to learn how you can customize this template.
Understanding jQuery Mobile development
When developing your website for use with mobile devices you have two options. You can make your design "responsive" to varying screen sizes by using CSS media queries, a technique referred to as multiscreen design, responsive design, or screen-sensitive design. The idea behind this approach is to adapt your design based on the users' screen sizes. Your web page uses a single set of HTML markup, and CSS is used to alter the appearance and layout of that HTML in order to adapt your design for varying screen sizes. (For more information on and a free template for this approach see Customizable starter design for multiscreen development.)
The second approach deals with using an alternate set of HTML and CSS for the mobile version of your website, while using JavaScript to alter the user experience. This approach can give your mobile website a "mobile app feel," which can tie in closer with the usability of the device's operating system. Figure 1 represents the relationship between the HTML markup and the design view of the content of a jQuery Mobile project in Dreamweaver.
jQuery Mobile has been developed specificaly for this purpose. And Dreamweaver CS5.5, has built-in support to aid you in creating mobile websites built on the jQuery Mobile framework. jQuery Mobile allows you to build pages, or screens, in a single HTML file, and control what information is seen based on user interaction. As the content slides back and forth, the user experience begins to resemble many mobile application interfaces, while allowing you to break your content into manageable pieces for small-screen consumption.
jQuery Mobile pages consist of a single HTML file, and use JavaScript to create the app-like user experience of sliding content back and forth (see Figure 2). This framework allows you to change the visible content on the screen based on the HTML markup that appears inside of certain DIV containers.
Figure 2 shows the relationship of the HTML markup to the rendered results across various hand-held, Internet-enabled devices. In addition to a single line of additinal HTML markup for the logo (commented in the code), this template includes presliced source Photoshop files, in addition to a modified CSS file to help you get started developing your own cutsomed-desiged jQuery Mobile websites.
Watch the video: Using the custom template
Get an overview of this customizable starter template for your jQuery Mobile projects. (Running time: 5:46)
Preview and download the template
Download the HTML, CSS, and source Photoshop files related to this template.
More Like This
- What's new in Dreamweaver CS5.5
- Introduction to media queries – Part 1: What are media queries?
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Simple styling with CSS
- Code editing in Dreamweaver
- From table-based to tableless web design with CSS – Part 1: CSS Basics
- Creating your first website – Part 3: Adding content to pages
- Creating your first website – Part 4: Adding the main image text
Tutorials and samples |
Dreamweaver user forum |
More |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
Dreamweaver Cookbook |
More |
