Creating jQuery Mobile Websites With Dreamweaver

About This Course

Building mobile-friendly websites is the new frontier in Web design. As more people adopt tablets and smartphones, the demand for Web designers who can build mobile-friendly sites to reach users on these devices is increasing.

There's more to making mobile-friendly websites than just designing them to fit on smaller screens than traditional laptop (or desktop) environments. Mobile-friendly sites need to load faster, be easier to read in sunlight, and provide navigation that does not rely on a mouse. This course begins by surveying the design challenges in creating sites that will be inviting and attractive to mobile device users, including color scheming and page design. We'll look at successful mobile sites to see what works and what doesn't.

The heart of the course is generating mobile-friendly sites using jQuery Mobile pages in Dreamweaver. No knowledge of JavaScript is required. A background in HTML and CSS will be helpful, but again, it's not required. You will use Dreamweaver's menus and panels to generate animated, interactive navigation elements that rely on the jQuery Mobile library of code.

The course covers everything you'll need to build a complete, professional, mobile site and define it as an alternate to a site aimed at desktop and laptop users. You'll learn to build and customize animated navigation elements like those used in successful mobile-friendly sites. You'll create custom themes (sets of design elements such as colors, fonts, and boxes) using Dreamweaver's built-in theming tools and the open-source ThemeRoller site. You'll work with ways to organize your site, including listviews, collapsible blocks, and grids. You'll also create mobile-friendly forms with HTML5 form fields (such as sliders and flipswitches) that work well in mobile devices. You'll learn to embed HTML5 native media (audio and video).

This course is practical and project-oriented. While it's not required, a mobile device will come in handy so you can preview your projects. From the beginning of class, you'll upload your mobile site to a free, provided remote hosting server, where you can test it using your own mobile device.

While the main focus of this course is Dreamweaver's jQuery Mobile tools, you'll also learn to use other Dreamweaver features that enhance mobile sites with JavaScript. And you'll learn to use Responsive Design (Dreamweaver's Media Queries) to design mobile sites that adjust for different displays in larger tablets or smaller smartphones.

About The Instructor

This course includes a knowledgeable and caring instructor who will guide you through your lessons, facilitate discussions, and answer your questions. The instructor for this course will be David Karlins.

David Karlins is the author of more than a dozen books on Web design that have sold over a million copies worldwide, and his articles on Web design have appeared in publications ranging from Macworld to Business Week. He has taught Web, graphic, and interactive design at San Francisco State University's Multimedia Studies Program and the University of California, Berkeley, Extension division. His Web design and consulting clients have ranged from Hewlett Packard to the Himalayan Fair.

Syllabus

A new section of each course starts monthly. If enrolling in a series of two or more courses, please be sure to space the start date for each course at least two months apart.

Week 1

Wednesday - Lesson 01

Mobile websites are one of the fastest-growing and most exciting dimensions of Web design, but there are quite a few challenges in designing sites for mobile devices. In this first lesson, we'll examine some of those challenges, and we'll take a look at how Dreamweaver can help us. Dreamweaver is the most widely used and powerful application for designing Web pages, and Dreamweaver CS6 includes a great set of tools for creating mobile sites. We'll also explore why mobile sites are so important, and we'll cover the basics of working with jQuery Mobile.

Friday - Lesson 02

The foundation for creating jQuery Mobile pages in Dreamweaver CS6 is a Dreamweaver site. A Dreamweaver site manages all of your website's files. It maintains the links between those files and ensures that the files work together on your computer and after you upload them to a remote website. You'll learn how to define a Dreamweaver site in this lesson, and we'll also walk through the steps of signing up for a remote site!

Week 2

Wednesday - Lesson 03

In this lesson, we'll use Dreamweaver's Mobile starter page to generate a working jQuery Mobile site. Then, we'll deconstruct the jQuery Mobile page to see how it works. And finally, we'll customize the content with our own text and HTML tags.

Friday - Lesson 04

In the previous lesson, we learned how to build a basic four-page jQuery Mobile site from a Dreamweaver sample page. But in "real life," mobile sites include links to many pages, not just four. In this lesson, you'll add additional pages and create link structures to tie your site together.

Week 3

Wednesday - Lesson 05

Listviews, those ubiquitous sets of mobile-friendly links, are the most defining element of a mobile site. In this lesson, you'll learn to enhance the appearance of listviews with preformatted elements like insets and text descriptions. You'll make listviews more accessible and powerful with search boxes and submenus. And you'll learn how to create custom listviews by combining Dreamweaver's standard HTML tools with jQuery Mobile features.

Friday - Lesson 06

What's the technique for formatting jQuery Mobile sites? jQuery Mobile Themes. These themes are essentially an extensive set of color combinations that you can apply to any jQuery Mobile element. By mixing and matching themes—that is, by applying different theme color sets to different elements—you can create a highly customized look and feel for your site.

Week 4

Wednesday - Lesson 07

In the previous lesson, we explored options for pushing the envelope to customize design using the standard set of five jQuery Mobile Themes. In this lesson, we'll take a look at ThemeRoller, an online tool acquired by Adobe. ThemeRoller meshes with Dreamweaver to create completely new, custom themes.

Friday - Lesson 08

In Lesson 5, you learned how to create listviews. This was your first introduction to providing access to content in jQuery Mobile. Another way to provide access is with collapsible blocks. Collapsible blocks are content elements that expand and collapse to reveal (or hide) content—a powerful way to pack a lot of content into a small space. That's what we'll explore in this lesson, and you'll also learn how to combine collapsible blocks with listviews to offer a set of dynamic navigation options!

Week 5

Wednesday - Lesson 09

Grids and blocks are the jQuery Mobile element that defines multi-column layouts. In this lesson, we'll explore the role of multi-column mobile page design, and you'll learn how to build multi-column layouts. How is this relevant to designing sites for mobile devices? You'll find out!

Friday - Lesson 10

Collecting data through forms (like search boxes, order forms, or sign-up forms) is one of the most important elements in a website. But the small size of mobile device viewports, their lack of keyboards, and mouse-free environments make it a hassle for users to enter data into forms in mobile devices. jQuery Mobile and Dreamweaver have solutions to those challenges, and that's exactly what we'll talk about in this lesson. By the end of this lesson, you'll be well on your way to designing and building your own mobile-friendly forms!

Week 6

Wednesday - Lesson 11

Today's mobile-fixated demographic (in other words, young folks!) demands video content. And mobile sites, from YouTube to the New York Times, provide plenty of video content. In this lesson, you'll master the techniques involved with providing video that works in every mobile environment. You'll learn about Flash Video (FLV), iOS (Apple)-friendly h.264 video, and options for more complex video streaming.

Friday - Lesson 12

As you know, there's a wide range in viewports within the mobile browsing community. A design that works great in a 320-pixel wide smartphone isn't necessarily optimal for a wider tablet. So in this final lesson, we'll explore tools in Dreamweaver, and beyond, to create a multi-environment presence.

Requirements

Adobe Dreamweaver CS6 for Mac and the Mac OS X 10.6 Snow Leopard or Mac OS X 10.7 Lion operating system, or Adobe Dreamweaver CS5.5 for Mac and the Mac OS X 10.5 Leopard or Mac OS X 10.6 Snow Leopard operating system, or Adobe Dreamweaver CS6 for Windows and the Windows 7, Windows Vista, or Windows XP operating system, or Adobe Dreamweaver CS5.5 and the Windows 7, Vista, or XP operating system; Internet access, e-mail, the Microsoft Internet Explorer or Mozilla Firefox Web browser, and the Adobe Flash and PDF plug-ins (two free and simple downloads you obtain at http://www.adobe.com/downloads by clicking Get Adobe Flash Player and Get Adobe Reader).

Note: Dreamweaver CS6 or Dreamweaver CS5.5 must be installed and fully functional before the course begins. Owning a mobile device is not a requirement, but will be helpful in testing your mobile-friendly site.

Prior experience with Dreamweaver and/or successful completion of "Advanced Web Pages" is recommended.