This presentation looks pretty wowwy if your browser has 3D transforms

Designing in the browser

@divya ★ Slides:

Advanced Web and Interactivity Engineer at Adobe
Previously, Web Opener at Opera
Co-Creator of HTML5 Please, HTML5 Boilerplate, and so on.

What am I talking about?

Why Mockups Suck

Web Design

No longer the legacy of print
Design the interaction experience
Product design

Embrace the constraints of the web

No pixel perfection
Uncertainity of features
Things never designed to interact, will
You cannot control the content

Print Tools ≠ Web Design Tools

Makes features appear trivial
Tweaks are impossible and hard to do even with templates
Lorem Ipsum can only go so far
Not easy to recreate CSS3 effects without much work

What does prototyping provide?

Design around content, user interaction
Use print tools to augment the prototype (see Prototyping with XHTML)
Find where design breaks experience of users
Find where data breaks design (see Wireframing for Web Apps)
Templates for any use
Design for complexity and uncertainty (see Taming Complexity)
Build from ground up with design break points (see: Stephen Hay's presentation)

What you shouldn't be concerned about

Pointless Semantics
Pixel Perfection, Layout perfection
Old IE Compatibility

Tools for Prototyping

Scaffolding generator: Docpad Jekyll
Sensible Defaults: HTML5 Boilerplate
Style preprocessor: Sass Less Stylus
Naming Conventions: BEM | Nicolas Gallagher's conventions
Templating Languages: Mustache Eco Haml
Getting real fake data: Faker.js
Design Scaffolding: Twitter Bootstrap
Use CodeKit or LiveReload to save on ⌘+r

Document Your Code

Scripts: Docco ★ Styles: Style Docco

In Action


Made with impress.js

Adobe is hiring!

SF + Web = ? ping(@divya) : weep('uncontrollably')

Use a spacebar or arrow keys to navigate