Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Mobile Web Design with Adobe® Dreamweaver CS5.5 Presented by: Jonathan Meersman Course Technology Conference San Antonio, Texas March 9, 2012."— 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 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?

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 Delta.commobile.delta.comApps 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.comJonathanMeersman.com Facebook: facebook.com/jonathanmeersmanfacebook.com/jonathanmeersman LinkedIn: linkedin.com/in/jonathanmeersmanlinkedin.com/in/jonathanmeersman Twitter: twitter.com/meersmantwitter.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) kb2.adobe.com/cps/924/cpsid_92492.html


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

Similar presentations


Ads by Google