Designing responsively

  • 202 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
202
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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