My talk for Smashing Conference in Whistler, BC, December 10, 2014.

1. SCULPTING
TEXTEASING THE PAIN OF DESIGNING IN THE BROWSER
STEPHEN HAY

2. PHOTOSHOP

4. http://store.copicmarker.com/

5. COMPS FROM THE MARKER ERA (HARRY BORGMAN)
http://storyboardcentral.blogspot.com/2009/08/harry-borgman-harry-comp-man.html

6. Designing in the browser
doesn't mean designing
in the browser.
It means making your
comps for the browser.

8. PAIN POINTS

9. “I'm faster and more
comfortable in Photoshop.”

10. WTF—
DAMMIT MOM, I SAID
YOU NEED TO ADD AN
ALPHA CHANNEL!
You were not born
knowing Photoshop.

12. 10
7,5
5
2,5
0
Photoshop Code
Effectiveness

13. “I don't see the creativity
in code. ”

14. CASEY REAS, CREATOR OF PROCESSING

18. One of the biggest problems
we have with designing in
the browser is that many
designers think about
layout first.
WE NEED TO STOP DOING THAT.

19. We need to think about
structured content first.
PSSST! HTML IS STRUCTURED CONTENT.
(WHEN DONE RIGHT, OF COURSE)

21. Take actual content, structured
with HTML, and start building
upon it, incrementally,
cumulatively. That is the way of
progressive enhancement, and
it’s the nature of the Web.

22. “ One technique I've used for years is to “design in text”... not
necessarily describing everything in textual form […]
essentially what is the message that needs to be
” communicated if I was only able to provide the user with
unstyled HTML?
– Bryan Rieger

23. Unstyled HTML has benefits.

24. Because of the focus on
content and structure,
irrelevant or inappropriate
content is easy to spot.

25. The linear form of structured
content helps prepare us for
the smallest screens and
those environments with the
least capabilities.

26. When you create a plain
HTML document, you have
created a web page that is
“mobile-ready”.

27. Structured content takes the
focus off of containers.

28. What if we approached
responsive design in the
spirit of additive sculpture?
WHAT IF WE WENT FROM SIMPLE TO COMPLEX?

29. TIP #1
Focus on small screens first.

30. TIP #2
Focus on color & type first.
MAYBE IMAGES AS WELL. BUT NOT LAYOUT (YET).

31. TIP #3
Use a tool that makes it easy
to sketch in code.
JSBIN, CODEPEN, ETC.

34. TIP #4
Use your browser’s
developer design tools.

36. TIP #5
Sketch before coding.
DO THIS BEFORE EVERY BREAKPOINT.

38. TIP #6
Expand your browser window
until your design looks like
$#!%. Time for a breakpoint.
CONTENT & DESIGN, NOT DEVICES, SHOULD DETERMINE BREAKPOINTS.

39. TIP #7
Avoid ski ballet.

45. THANK YOU! @stephenhay
Linus by Charles Schulz. Image: https://www.etsy.com/listing/84806498/oversized-vintage-linus-peanuts-postcard
Crocobear image: http://www.reddit.com/r/HybridAnimals/comments/2ldzqq/the_requested_crocobear/
Phil Hawksworth by Luke Wroblewski: https://www.flickr.com/photos/lukew/10453062745/in/set-72157636814608894
Baby images: http://www.morguefile.com/archive/display/910824 and http://www.morguefile.com/archive/display/907077
Full Casey Reas interview: https://www.youtube.com/watch?v=_8DMEHxOLQE