$30 off During Our Annual Pro Sale. View Details »

Designing with the Web

Designing with the Web

A heretical guide to creating native software.

Steve Smith
PRO

April 13, 2013
Tweet

More Decks by Steve Smith

Other Decks in Design

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([email protected]) 2x
    )

    View Slide

  22. HTML & CSS
    HTML & CSS
    buon.png
    bu[email protected]

    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