Designing with the Web

A heretical guide to creating native software.

Transcript

1. Designing with the Web
   A heretical guide to creating native soware.
   Steve Smith • @orderedlist
   

   View Slide

2. Hello, I’m @orderedlist
   

   View Slide

3. 
   

   View Slide

4. This is NOT about...
   Designing in the browser
   WebViews
   Language wars
   

   View Slide

5. This IS about...
   Designing more than just visuals
   Try it before you buy it
   An easier transition to development
   

   View Slide

6. HTML & CSS
   A Brief Demo
   A peek under the kimono...
   

   View Slide

7. Using HTML & CSS to mockup
   native applications
   

   View Slide

8. HTML & CSS
   Real Talk: Just use Webkit
   

   View Slide

9. HTML & CSS
   background-color border
   box-shadow linear-gradient
   border-radius outline
   

   View Slide

10. HTML & CSS
    NOPE.
    background-color border
    box-shadow linear-gradient
    border-radius outline
    

    View Slide

11. HTML & CSS
    Avoid drawing with CSS
    

    View Slide

12. HTML & CSS
    Use rendered images you can
    use in your real application
    

    View Slide

13. HTML & CSS
    

    View Slide

14. HTML & CSS
    background-image
    

    View Slide

15. HTML & CSS
    border-image
    

    View Slide

16. HTML & CSS
    .button {
    -webkit-border-image:
    url(image.png) 1 10
    repeat repeat;
    border-width:1px 10px;
    }
    

    View Slide

17. HTML & CSS
    .button {
    -webkit-border-image:
    url(image.png) 1 10
    repeat repeat;
    border-width:1px 10px;
    }
    

    View Slide

18. HTML & CSS
    
    View on GitHub
    
    

    View Slide

19. HTML & CSS
    But what about Retina?
    

    View Slide

20. HTML & CSS
    -webkit-image-set
    

    View Slide

21. HTML & CSS
    -webkit-image-set(
    url(button.png) 1x,
    url(button@2x.png) 2x
    )
    

    View Slide

22. HTML & CSS
    HTML & CSS
    buon.png
    buon@2x.png
    

    View Slide

23. HTML & CSS
    The browser decides which
    image to use.
    

    View Slide

24. HTML & CSS
    Use -webkit-image-set
    anywhere you’d use a url
    

    View Slide

25. HTML & CSS
    The benefits of CSS?
    

    View Slide

26. HTML & CSS
    CSS encourages reuse of
    visual styles.
    

    View Slide

27. HTML & CSS
    CSS is really fast to write.
    

    View Slide

28. HTML & CSS
    CSS can use your final image
    assets to create mockups.
    

    View Slide

29. HTML & CSS
    So what’s the big deal?
    Back to the demo...
    

    View Slide

30. Using JavaScript to mockup
    native applications
    

    View Slide

31. JavaScript
    Start with jQuery, jQuery UI
    

    View Slide

32. JavaScript
    Next, pick a JS framework
    

    View Slide

33. JavaScript
    I happen to use SpineJS
    hp://spinejs.com
    

    View Slide

34. JavaScript
    Things it should include...
    Fast to run, fast to write
    Browser local storage-backed models
    HTML5 history based routing
    

    View Slide

35. JavaScript
    Why is this beer than just
    a picture of soware?
    

    View Slide

36. JavaScript
    Design the complete workflow
    

    View Slide

37. JavaScript
    See your design with real data
    

    View Slide

38. JavaScript
    Design animations, loaders,
    and transitions
    

    View Slide

39. JavaScript
    Evaluate a design in context
    

    View Slide

40. JavaScript
    It removes questions for
    the developer
    

    View Slide

41. JavaScript
    It hints at complication early in
    the process
    

    View Slide

42. JavaScript
    Once more, to the demo...
    So how do I show this off?
    

    View Slide

43. How to deploy your mockup as
    a web application
    

    View Slide

44. Deployment
    Create a Rails app
    

    View Slide

45. Deployment
    Authentication with oAuth
    

    View Slide

46. Deployment
    Push the app to Heroku
    

    View Slide

47. Deployment
    Push the app to Heroku
    

    View Slide

48. Deployment
    hp://mockup.domain.com/feature/section/id
    

    View Slide

49. Deployment
    Push the code to GitHub
    

    View Slide

50. Deployment
    Send changes in Pull Requests
    

    View Slide

51. Start slowly, and build your
    mockup over time
    

    View Slide

52. It doesn’t demand perfection
    

    View Slide

53. It’s still just a mockup
    

    View Slide

54. It’s a ground for
    experimentation
    

    View Slide

55. Thank you!
    Steve Smith • @orderedlist
    

    View Slide

56. View Slide