• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing Modern Web Interfaces with Dreamweaver CC
 

Developing Modern Web Interfaces with Dreamweaver CC

on

  • 1,996 views

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

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

Statistics

Views

Total Views
1,996
Views on SlideShare
1,995
Embed Views
1

Actions

Likes
2
Downloads
11
Comments
0

1 Embed 1

https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Developing Modern Web Interfaces with Dreamweaver CC Developing Modern Web Interfaces with Dreamweaver CC Presentation Transcript

    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Developing Modern Interfaces with Dreamweaver CCJames Williamson | senior author, lynda.com1
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2So what is a modern web interface?Parallax scrolling?Flat design?Single-page websites?
    • © 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.
    • © 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)
    • © 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
    • © 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
    • © 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
    • © 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
    • © 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
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10DEMOGenerating standards-based code
    • © 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
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12DEMOWeb font support
    • © 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
    • © 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
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15DEMOWorking with styles in Dreamweaver CC
    • © 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
    • © 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
    • © 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
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19DEMOjQuery support
    • © 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.
    • © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thank you!@jameswillweb on the Twitter