1. Designing in the
Browser
Mason Wendell
Canary Promotion + Design

2. Obviously didn’t use Photoshop

3. The Usual
Designing in Photoshop

4. Build Your Design
Twice!
• Once in Photoshop,
then again in markup/css
• Two completely different mediums
with vastly different abilities and limitations

5. Design the
Impossible!
Easy in Photoshop
!=
Easy in CSS

6. Design the
Impossible!
Hard in Photoshop
might =
Easy in CSS

7. That’s just too hard to
change.
• fonts & global typography
• color palate
• "just a few small changes"
translation:You'll have to tweak your whole
document

8. What happens when I
mouse over?
• Can't show interactions well, if at all
• You have to show a client two images just
to show a simple mouseover.
• How do you demo the speed and easing of
a javascript slideshow?

9. That’s not what I
approved!
• Why are the fonts different?
• I can’t see my content below the fold!
• It looks different on my boss’ PC!
• It looks different on my iPhone!

10. “Old Faithful”, Right?

11. “Old Faithful”, Right?

12. “Old Faithful”, Right?

13. “Old Faithful”, Right?

14. “Old Faithful”, Right?

15. The New
Benefits of Designing in the Browser

16. You're working in the
medium you're
designing for.

17. Everything you design is
build-able, because you
just built it when you
designed it.

18. What do you need?
• All the browsers
• Text editor
• Graphics Editor
• Firebug, Webkit Inspector, Firebug Lite
• Sass & Compass
• xrefresh

19. Play with the
cool new toys.
Most of that you need can be achieved in CSS3
• rounded corners • rotation and other
transformations
• @font-face
• alpha transparency • CSS animations
with transitions
• text and box • more, obv
shadow

20. Use Photoshop only as
much as you need to.
• break out your image editor for other
things
• Use it to make the graphics you need.
(Not to pretend it's a browser)

21. Client sees the real
thing from the start.
• The design they approve will be the same
as the design you deliver.
• You can demonstrate browser
inconsistencies from the start. Then decide
what to do about them.

22. Deliver finished markup
to your themer.
Take the frustrating guesswork off their plate.

23. Let's Get Started:

24. Make a Plan.

25. Sketch and/or
Wireframe.
• This is where you'll come up with your
basic layout and concept
• Use paper, a tool like balsamiq or
gomockingbird.com (or even Photoshop!)

26. Start with content.
• Get as close to the real content your
project will have as you can.
• Placeholder images and text can be used to
help you work quickly, if used with care.

27. You're doing these
steps already, right?
Excellent.

28. Being Drupal Aware

29. 1. Generate your raw
markup from Drupal
• Slower to build your raw markup, because
you need to build the site first.
• More accurate
• Best for simple sites and re-theming
existing sites
• If this is your route your markup may be
more complex but you'll skip the next step.

30. 2. Anticipate Drupal
• use your own markup, and be prepared to
bend Drupal to your will (to a point)
• use snippets from drupal in your markup
(nodes, blocks, views, etc)
• be aware when you're designing what will
become nodes, blocks, and views.
Document these with <!-- comments -->
to help your themer

31. Get Deep into CSS

32. Build the basic layout
from your wireframe
• Use a css framework, at least at first.
Blueprint, 960.gs
• They're well tested and near-proven to
give you the layout you expect.
• Think of them as open source CSS
snippets libraries. Take what you need.

33. More CSS Frameworks
• Typography
• Forms
• Baselines
• Fluid layouts
• Study them and take what you need.

34. Make the shift to
thinking creatively with
CSS

35. Embrace Progressive
Enhancement
• Start with content
• Add layers of css complexity
• Enhance for the latest and greatest
• It's fun & and you'll stay sharp
• All browser makers will support these new features
soon enough
• Use advanced techniques liberally. They're fast,
lightweight, and let you be creative. You can adjust for
old browsers and the “real world” later.

36. Demo

37. Q&A

38. Designing in the
Browser
• canarypromo.com
• twitter.com/canarymason
• 24ways.org/2009/make-your-mockup-in-
markup
• forabeautifulweb.com