Transcript Mobile Web Design with Adobe Dreamweaver

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?
• 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
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?
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 2014 2012
• 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
• 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
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
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.com
Facebook: facebook.com/jonathanmeersman
LinkedIn: linkedin.com/in/jonathanmeersman
Twitter: twitter.com/meersman
Email: [email protected]
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/
www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html
www.adobe.com/aboutadobe/pressroom/pressmaterials/pdfs/cs55_dreamweaver_whatsnew.pdf
www.adobe.com/devnet/dreamweaver/articles/packaging-web-applications-as-mobile-apps.html
foundationphp.com/dwmobile/
kb2.adobe.com/cps/924/cpsid_92492.html (Android app doesn't open in emulator)