1 / 18

Mobile Web Design with Adobe® Dreamweaver CS5.5

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

wayne
Download Presentation

Mobile Web Design with Adobe® Dreamweaver CS5.5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Web Designwith 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 2014 2012 • 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. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. Live Dreamweaver Demonstration • Let’s explore some of the great new features…

  15. 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

  16. Q & A • Time for Questions

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

  18. 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/ • www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html • www.adobe.com/aboutadobe/pressroom/pressmaterials/pdfs/cs55_dreamweaver_whatsnew.pdf • foundationphp.com/dwmobile/

More Related