1. Mobile Web Design with Adobe® Dreamweaver CS5.5
Presented by: Jonathan Meersman
Course Technology Conference
San Antonio, Texas
March 9, 2012

2. Session Agenda What is Adobe® Dreamweaver?
Why Design for the Mobile Web?
Dreamweaver CS5.5’s Mobile Features
Enhanced Multiscreen Preview
Media Queries for Responsive Design
jQuery Mobile Framework
PhoneGap to Create Native Apps
Live Demonstration
Mobile Curriculum at MATC

3. Presenter Background Jonathan Meersman Current Industry Employment
Milwaukee Area Technical College – Web Design Faculty
eBusiness Consultant
Previous Industry Experience
HostingSpot.com – Founder & Past President
General Electric – eLead Systems Designer
Milwaukee Kickers Soccer Club – Multimedia Coordinator
Education
MBA in eBusiness
BA in Geography (focus: Computer Cartography)

4. What is Adobe® Dreamweaver?
What is Dreamweaver?
Industry-leading web development tool
MAC and Windows versions
Built-in FTP/SFTP client
Supports HTML5, CSS3, ASP, PHP, XML, jQuery Mobile, JavaScript, Ajax, ColdFusion, etc.
New features support mobile web and app design

5. What is Adobe® Dreamweaver?
History of Dreamweaver
1997 – Developed by Allaire Systems
2001 – Macromedia acquired Allaire
2005 – Macromedia Dreamweaver 8 - 9/05
2007 – Adobe Dreamweaver 9 (CS3) - 4/07
2008 – Adobe Dreamweaver 10 (CS4) - 10/08
2010 – Adobe Dreamweaver 11 (CS5) - 04/10
2011 – Adobe Dreamweaver 11.5 (CS5.5) - 04/11
What will the future hold?

6. Why Design for the Mobile Web?

7. Why Design for the Mobile Web?
Mobile Internet Explosion
According to Morgan Stanley:
Number of smartphones & tablets sold exceeded total PCs in 2010
Mobile Internet is ramping faster than desktop Internet did - more users may connect to the Internet via mobile devices than desktop PCs by
Internet users reached 1 billion in 2005, but mobile Internet is at 10+ billion

8. Why Design for the Mobile Web?
Mobile Internet Explosion
According to Nielsen:
44% of U.S. mobile subscribers now own a smartphone, up from 18% just two years ago
The majority of smartphone owners (62%) have downloaded apps
83% of all smartphone app downloaders use Android or iPhone

9. What’s Your Preference?
<?xml version="1.0" encoding="ISO " ?>
<poll url="
<!-- This snippet was inserted via the Poll Everywhere Mac Presenter -->
<!-- The presence of this snippet is used to indicate that a poll will be shown during the slideshow -->
<!-- TIP: You can draw a solid, filled rectangle on your slide and the Mac Presenter will automatically display your poll in that area. -->
<!-- The Mac Presenter application must also be running and logged in for this to work. -->
<!-- To remove this, simply delete it from the notes yourself or use the Mac Presenter to remove it for you. -->
<title>Your preferred mobile device?</title>
</poll>

10. Why Design for the Mobile Web?
Mobile Internet Explosion
According to IT job site Dice.com, job postings for:
Android developers rose 302% in Q1 of 2011 versus Q1 of 2010
iPhone-related positions rose 220% in Q1 of 2011 versus Q1 of 2010

11. Great Example of Content Adaptation

12. Desktop Web  Mobile Web  App
Delta.com / mobile.delta.com / Apps
Content Adaptation – less and targeted
Desktop Web
Mobile Web
App

13. Dreamweaver CS5.5’s Mobile Features
Enhanced Multiscreen Preview
Media Queries for Responsive Design
jQuery Mobile Framework
PhoneGap to Create Native Apps

14. Enhanced Multiscreen Preview
Simultaneously view three different customizable screen sizes
Run your code in real time
Quickly and easily preview your designs for smartphones, tablets, and PC screens
Helps create CSS media queries and display separate style sheets for each device

15. Media Queries for Responsive Design
Media queries let you target your designs for multiple devices by specifying a different CSS file for each device
Dreamweaver’s Media Queries dialog box allows you to attach or create multiple CSS files for different screen sizes

16. jQuery Mobile Framework
Allows rapid development and design of a mobile-specific interface with minimal hassle
Integrated jQuery code hinting and starter layouts for many different types of mobile devices

17. PhoneGap to Create Native Apps
Use existing web development skills, assets, and resources without learning a new model
Build native Android and iOS apps directly from Dreamweaver CS5.5 projects
Write mobile apps using standards-based code, such as HTML, CSS, and JavaScript
Add device-specific functionality, such as multi-touch, geolocation, and accelerometer

18. Live Dreamweaver Demonstration
Let’s explore some of the great new features…
(sorry, must be present to see my demo)

19. Mobile Curriculum at MATC
New Classes
Mobile Web Development
iPhone App Development
Android App Development
Advanced Mobile Development
New Programs
Mobile App Designer Technical Diploma
Mobile App Designer A.A.S. Degree

20. Q & A
Time for Questions

21. Presenter Contact Information
Jonathan Meersman
Site: JonathanMeersman.com
Facebook: facebook.com/jonathanmeersman
LinkedIn: linkedin.com/in/jonathanmeersman
Twitter: twitter.com/meersman

22. Resources
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile-pages/
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile/
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-native-mobile-applications/
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-multiscreen-authoring/
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-building-a-native-mobile-application/
tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-creating-a-native-mobile-application/
tv.adobe.com/watch/creating-for-mobile-and-tablets/creating-a-mobile-specific-website/
foundationphp.com/dwmobile/
kb2.adobe.com/cps/924/cpsid_92492.html (Android app doesn't open in emulator)