Mobile Web Design with Adobe® Dreamweaver CS5.5

Presentation on theme: "Mobile Web Design with Adobe® Dreamweaver CS5.5"— Presentation transcript:

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)