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:
Mobile Web Design with Adobe® Dreamweaver CS5.5 Presented by: Jonathan Meersman Course Technology Conference San Antonio, Texas March 9, 2012
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
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)
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?
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
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
What’s Your Preference?
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
Great Example of Content Adaptation
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
Dreamweaver CS5.5’s Mobile Features Enhanced Multiscreen Preview Media Queries for Responsive Design jQuery Mobile Framework PhoneGap to Create Native Apps
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
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
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
Live Dreamweaver Demonstration Let’s explore some of the great new features… (sorry, must be present to see my demo)
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
Q & A Time for Questions
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
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