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

Designing in the browser


Advanced Web and Interactivity Engineer at Adobe
Previously, Web Opener at Opera
Member of the CSS Working Group
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
Just like you learnt to love print tools, learn to love web tools
Design around content, user interaction
Use print tools to augment the prototype
Find where design breaks experience of users
Find where data breaks design
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
IE Compatibility

What you should be concerned about

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 data. Or fake it: Faker.js
Design Scaffolding: Twitter Bootstrap
Find features that work: HTML5 Please
Use CodeKit or LiveReload to save on ⌘+r

Document Your Code

Styles: Style Docco Scripts: Docco

Hear from others

UK Government Digital Service and Bearded Studio write on why this is their preferred strategy.



Made with impress.js

Adobe is hiring!

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

Use a spacebar or arrow keys to navigate