This article features 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.
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.
jQuery Mobile has been developed specifically for this purpose. And Dreamweaver, 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.
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 additional HTML markup for the logo (commented in the code), this template includes pre-sliced source Photoshop files, in addition to a modified CSS file to help you get started developing your own cutsom-designed jQuery Mobile websites.
Get an overview of this customizable starter template for your jQuery Mobile projects. (Running time: 5:46)
That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.