2 Days

Hands-On: $975

9am - 4pm

Register

Unavailable: Adobe Dreamweaver CS5.5: Dreamweaver for Mobile Devices

Class Description

Learn to use Adobe Dreamweaver CS5.5 to create websites for Mobile Devices! Students will learn to use Media Queries, use jQuery Mobile, ThemeRoller and PhoneGap. Best practices for design and sizing will also be covered.Prerequisite: Adobe Dreamweaver Level 1 or Prior Experience

Class Prerequisites

Adobe Dreamweaver Level 1 or Prior Experience

Dreamweaver Goes Mobile!

  • Note: This Level 2 class assumes you have solid working skills in Adobe Dreamweaver CS5.5

  • Developing mobile websites and mobile apps to accommodate different devices
  • Enabling Access to your Site when Offline
  • Design challenges such as white space and images
  • Breaking down the site: Header, Main Content and Footer
  • Best practices for sizing images and logos within a confined space
  • Common screen sizes and a fluid design for elastic layouts to accommodate screen sizes
  • Ensuring a flexible grid-based layout
  • Understanding the 960 Grid System for cross-browser-tested preset column widths
  • Accessing HTML5 and CSS3

Adapting Existing Pages for Mobile using Media Queries

  • What are Media Queries?
  • Incorporating Media Queries to deliver different styles to many different devices
  • Using Dreaweaer's Media Query to determine a mobile device's landscape or portrait mode
  • How Media Queries check for width and height of a browser window
  • Using Media Queries to create a stylesheet for phones
  • Linking stylesheets using media queries

jQuery Mobile

  • Creating a site with jQuery Mobile for dynamic touch interfaces
  • Compatibility with iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo with base support for devices that read HTML
  • Custom Data attributes
  • Rapid deployment using jQuery Mobile Widgets
  • Creating, submitting, and displaying forms for mobile devices
  • Understanding ThemeRoller application for theming framework

PhoneGap

  • Setting up PhoneGap to build a mobile app for Droid or Apple iOS directly within Dreamweaver
  • Leveraging HTML and JavaScript with PhoneGap
  • Deploy to multiple platforms
  • Using PhoneGap plugins
  • Access native mobile device features such as Contacts, Geolocation, Compass and Camera

Testing Your Site

  • Sony K750 and Nokia N70 simulators: http://mtld.mobi/emulator.php
  • dev.mobi also offers Samsung z105 Sony Ericsson k750i, Motorola v3i and Sharp GX-10 simulators
  • Using Device Anywhere for enterprise-class mobile testing

Hands-On Class Time to Develop a Mobile Site

  • Paring down your content to create a purpose-driven experience
  • Setting up your site to auto-detect mobile phones
  • Minimize embedded images to reduce the number of HTTP requests