Developing Modern Web Interfaces with Dreamweaver CC
3 likes3,424 views
The document discusses features in Dreamweaver CC that help developers create modern web interfaces. It focuses on clean, standards-based code; responsiveness across devices and screen sizes; performance; and touch strategies. Dreamweaver CC generates valid HTML5 and CSS3, supports responsive design workflows, and has built-in jQuery features. It allows managing web fonts, creating styles visually, and offers intelligent jQuery code hinting. The conclusion emphasizes that the techniques will change, but creating good user experiences is most important.
Developing Modern Web Interfaces with Dreamweaver CC
- 1. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Developing Modern Interfaces with Dreamweaver CC James Williamson | senior author, lynda.com 1
- 2. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2 So what is a modern web interface? Parallax scrolling? Flat design? Single-page websites?
- 3. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 No. Modern web design isn’t about trends, it’s about designing experiences within the current parameters of user agents while anticipating future changes.
- 4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 In other words, focus on providing users with the best possible experience based on content, context, and design goals. (duh)
- 5. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 So what should we focus on? Start with clean, standards-based code Working across multiple devices and screen sizes Performance matters Having a strategy for touch How apps are changing user expectations
- 6. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 A “modern” approach to web design Make mobile an equal partner Create the default experience first Progressively enhance the user experience Take advantage of what HTML5 and CSS3 have to offer
- 7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Do nice things for your users Make sure the design guides them through the process Give them things they expect, like autocomplete Think about how they are likely to want to interact with your content in different contexts
- 8. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 How does Dreamweaver help us? Generates clean, well-structured code Support for HTML5 and CSS3 Integrated web fonts support Built-in workflows for responsive design Increased support for jQuery
- 9. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Generating standards-based code New documents are minimal and based on the selected DOCTYPE You can insert HTML5 video, sectional, and form elements visually Validate code through the W3C validation service Custom starter pages allow you to create your own starting point
- 10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 DEMO Generating standards-based code
- 11. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 Working with web fonts Dreamweaver allows you to manage web fonts globally across all sites Adobe Edge Web Font support is built in You can also manage locally-hosted fonts Custom font stack definitions are available across all sites
- 12. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 DEMO Web font support
- 13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 Dreamweaver CC introduces CSS Designer CSS Designer provides an updated way to create and manage styles Offers visual workflows for creating CSS properties Allows you to filter selectors based on source and media query Media query support is found within the CSS Designer workflow
- 14. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 CSS Transitions support The CSS Transitions panel allows you to create and manage transitions Allows you to target existing selectors or create new ones A single dialog let’s you target properties, timing, delays, and easing Will also detect and manage any existing transitions
- 15. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 DEMO Working with styles in Dreamweaver CC
- 16. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 jQuery support Parts of jQuery UI and jQuery Mobile are baked into Dreamweaver Dreamweaver also offers robust jQuery code hinting Code hints are currently based off of jQuery 1.7
- 17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 jQuery UI jQuery UI is a set of user interface widgets built on top of jQuery Adobe has replaced the Spry widgets with jQuery UI widgets This allows you to add UI widgets with a single click These can be difficult to style and control
- 18. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18 jQuery code hinting Currently based on jQuery 1.7 Very intelligent code hinting that introspects all related dependencies Supports custom variables and functions Currently will not introspect resources brought in through loader scripts
- 19. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 DEMO jQuery support
- 20. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 cool. I know, right? Just keep in mind that although Dreamweaver gives you powerful tools and workflows to build your sites, how you use them is up to you.The most important thing isn’t the techniques you use, those change, the most important thing is the experiences you create.
- 21. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thank you! @jameswillweb on the Twitter