Developing Modern Web Interfaces with Dreamweaver CC

3,175 views

Published on

Slides from my Adobe MAX 2013 session, Developing Modern Web Interfaces with Dreamweaver CC

Published in: Technology, Business

Developing Modern Web Interfaces with Dreamweaver CC

  1. 1. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Developing Modern Interfaces with Dreamweaver CCJames Williamson | senior author, lynda.com1
  2. 2. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2So what is a modern web interface?Parallax scrolling?Flat design?Single-page websites?
  3. 3. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3No.Modern web design isn’t about trends, it’s about designingexperiences within the current parameters of user agentswhile anticipating future changes.
  4. 4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4In other words, focus on providing users withthe best possible experience based oncontent, context, and design goals.(duh)
  5. 5. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5So what should we focus on?Start with clean, standards-based codeWorking across multiple devices and screen sizesPerformance mattersHaving a strategy for touchHow apps are changing user expectations
  6. 6. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6A “modern” approach to web designMake mobile an equal partnerCreate the default experience firstProgressively enhance the user experienceTake advantage of what HTML5 and CSS3 have to offer
  7. 7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7Do nice things for your usersMake sure the design guides them through the processGive them things they expect, like autocompleteThink about how they are likely to want to interact with your content indifferent contexts
  8. 8. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8How does Dreamweaver help us?Generates clean, well-structured codeSupport for HTML5 and CSS3Integrated web fonts supportBuilt-in workflows for responsive designIncreased support for jQuery
  9. 9. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9Generating standards-based codeNew documents are minimal and based on the selected DOCTYPEYou can insert HTML5 video, sectional, and form elements visuallyValidate code through the W3C validation serviceCustom starter pages allow you to create your own starting point
  10. 10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10DEMOGenerating standards-based code
  11. 11. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11Working with web fontsDreamweaver allows you to manage web fonts globally across all sitesAdobe Edge Web Font support is built inYou can also manage locally-hosted fontsCustom font stack definitions are available across all sites
  12. 12. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12DEMOWeb font support
  13. 13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13Dreamweaver CC introduces CSS DesignerCSS Designer provides an updated way to create and manage stylesOffers visual workflows for creating CSS propertiesAllows you to filter selectors based on source and media queryMedia query support is found within the CSS Designer workflow
  14. 14. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14CSS Transitions supportThe CSS Transitions panel allows you to create and manage transitionsAllows you to target existing selectors or create new onesA single dialog let’s you target properties, timing, delays, and easingWill also detect and manage any existing transitions
  15. 15. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15DEMOWorking with styles in Dreamweaver CC
  16. 16. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16jQuery supportParts of jQuery UI and jQuery Mobile are baked into DreamweaverDreamweaver also offers robust jQuery code hintingCode hints are currently based off of jQuery 1.7
  17. 17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17jQuery UIjQuery UI is a set of user interface widgets built on top of jQueryAdobe has replaced the Spry widgets with jQuery UI widgetsThis allows you to add UI widgets with a single clickThese can be difficult to style and control
  18. 18. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18jQuery code hintingCurrently based on jQuery 1.7Very intelligent code hinting that introspects all related dependenciesSupports custom variables and functionsCurrently will not introspect resources brought in through loader scripts
  19. 19. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19DEMOjQuery support
  20. 20. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20cool.I know, right?Just keep in mind that although Dreamweaver gives you powerful toolsand workflows to build your sites, how you use them is up to you.Themost important thing isn’t the techniques you use, those change, themost important thing is the experiences you create.
  21. 21. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thank you!@jameswillweb on the Twitter

×