Course Detail

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.