Slides from my Adobe MAX 2013 session, 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