1. DESIGNING
RESPONSIVELY
FROM SKETCH TO PRODUCTION
Christopher Cochran
@tweetsfromchris
Sunday, October 13, 13

2. Technology is advancing constantly
Sunday, October 13, 13

3. To put responsive design at the heart of
our builds, we must change the process.
Sunday, October 13, 13

4. FORM FOLLOWS
FUNCTION
Sunday, October 13, 13

5. MOBLE EXPERIENCE SHOULD BE AT THE ROOT.
NOT A LAST THOUGHT
It forces us to focus on the essential
content, to build optimized, fast
mobile experiences that are
progressively enhanced, with the
user at the forefront.
Sunday, October 13, 13

6. Mobile First = Content First = User First
Sunday, October 13, 13

7. Focus and prioritize the constraints of mobile
design, not just on the devices.
Sunday, October 13, 13

8. If it’s not important on 3 inches,
it’s not important on 13 inches.
Sunday, October 13, 13

9. NO JUDGEMENT
Quick Sketches, sketch as quick as ideas come
to you.
Sunday, October 13, 13

10. KEEP IT SIMPLE
YOU DON’T NEED TO BE AN ARTIST
Sunday, October 13, 13

11. Sunday, October 13, 13

12. RAPIDLY
GENERATING IDEAS
SOLVING PROBLEMS
Sunday, October 13, 13

13. THEY ARE JUST SKETCHES
Because sketches are unfinished and
loose, they invite commentary.
Sunday, October 13, 13

14. ENCOURAGE
“WHATIF?”
PINPOINT POSSIBLE ISSUES.
Sunday, October 13, 13

15. PAPER & PEN
Sunday, October 13, 13
< CODE />

16. THE BROWSER
AS A
DESIGN TOOL
Sunday, October 13, 13

17. The best place to test interaction is where the
interaction will take place.
Sunday, October 13, 13

18. PIXEL PRECISE
Sunday, October 13, 13

19. PATTERN LIBRARIES
Reusable patterns increase consistency,
improve design productivity and reduce
implementation time.
http://bradfrost.github.io/this-is-responsive/
patterns.html
Sunday, October 13, 13

20. FRAMEWORKS
Bootstrap
Foundation
Sunday, October 13, 13

21. STYLE GUIDES
Sunday, October 13, 13

22. LAYOUTS
Embrace the Cascade
Treat Layout as an enhancement
Sunday, October 13, 13

23. BE MODULAR
Think in terms of reusable parts to keep
things simple and consistent.
Sunday, October 13, 13

24. PREPROCESSORS
ARE YOUR FRIEND
SASS, Stylus, LESS
Sunday, October 13, 13

25. GRUNT
Watch
Lint
Run automated tests
Concatenate & Minify
Sunday, October 13, 13

26. MOBILE IS FAST
Sunday, October 13, 13

27. MOBILE IS FAST
At least we want it to be...
Sunday, October 13, 13

28. Today’s average website takes 7s to load
Sunday, October 13, 13

29. More than a second will cause the user to
interrupt their flow of thought, creating a
poor experience.
Sunday, October 13, 13

30. Sunday, October 13, 13

31. OPTIMIZE
• Number of redirects should be minimized
• Server must render the response (< 200 ms)
• Avoid external blocking JavaScript and CSS in
above-the-fold content
• Optimize JavaScript execution and rendering time
• Optimize File sizes
Sunday, October 13, 13

32. Design from the bottom up;
from the content out.
Sunday, October 13, 13

33. CONTENT IS KING
Sunday, October 13, 13

34. USE REAL CONTENT
Sunday, October 13, 13

35. Set breakpoints according to the content.
Explore your design to find the points
where it naturally breaks down and adjust.
Sunday, October 13, 13

36. Design for device types.
Not specifics.
Palm, Lap, Desk relate to screen size and use.
Sunday, October 13, 13

37. This is the time to test questionable ideas.
Sunday, October 13, 13

38. Better manage client expectations and
development requirements
Sunday, October 13, 13

39. Visualizes breakpoints and how the design changes.
Sunday, October 13, 13

40. RAPID PROTOTYPING
Sunday, October 13, 13

41. Get Feedback Early
Get Feedback Often
Sunday, October 13, 13

42. Gather & Inspect
Identify & Fix
Monitor & Alert
Sunday, October 13, 13

43. DON’T display: none;
Don't limit experiences.
Sunday, October 13, 13

44. PERFORMANCE IS KEY
Sunday, October 13, 13

45. Don’t Forget to Give Love to the Design
Sunday, October 13, 13

46. TEST, TEST, TEST
Sunday, October 13, 13

47. TEST
Sunday, October 13, 13