Save 37% off PRO during our Black Friday Sale! »

Designing with the Web

Designing with the Web

A heretical guide to creating native software.

Ae14cc4491ac334f9cd23f9f93b4305e?s=128

Steve Smith
PRO

April 13, 2013
Tweet

Transcript

  1. Designing with the Web A heretical guide to creating native

    soware. Steve Smith • @orderedlist
  2. Hello, I’m @orderedlist

  3. This is NOT about... Designing in the browser WebViews Language

    wars
  4. This IS about... Designing more than just visuals Try it

    before you buy it An easier transition to development
  5. HTML & CSS A Brief Demo A peek under the

    kimono...
  6. Using HTML & CSS to mockup native applications

  7. HTML & CSS Real Talk: Just use Webkit

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

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

  10. HTML & CSS Avoid drawing with CSS

  11. HTML & CSS Use rendered images you can use in

    your real application
  12. HTML & CSS

  13. HTML & CSS background-image

  14. HTML & CSS border-image

  15. HTML & CSS .button { -webkit-border-image: url(image.png) 1 10 repeat

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

    repeat; border-width:1px 10px; }
  17. HTML & CSS <a href="#" class="button"> View on GitHub </a>

  18. HTML & CSS But what about Retina?

  19. HTML & CSS -webkit-image-set

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

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

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

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

  24. HTML & CSS The benefits of CSS?

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

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

  27. HTML & CSS CSS can use your final image assets

    to create mockups.
  28. HTML & CSS So what’s the big deal? Back to

    the demo...
  29. Using JavaScript to mockup native applications

  30. JavaScript Start with jQuery, jQuery UI

  31. JavaScript Next, pick a JS framework

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

  33. JavaScript Things it should include... Fast to run, fast to

    write Browser local storage-backed models HTML5 history based routing
  34. JavaScript Why is this beer than just a picture of

    soware?
  35. JavaScript Design the complete workflow

  36. JavaScript See your design with real data

  37. JavaScript Design animations, loaders, and transitions

  38. JavaScript Evaluate a design in context

  39. JavaScript It removes questions for the developer

  40. JavaScript It hints at complication early in the process

  41. JavaScript Once more, to the demo... So how do I

    show this off?
  42. How to deploy your mockup as a web application

  43. Deployment Create a Rails app

  44. Deployment Authentication with oAuth

  45. Deployment Push the app to Heroku

  46. Deployment Push the app to Heroku

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

  48. Deployment Push the code to GitHub

  49. Deployment Send changes in Pull Requests

  50. Start slowly, and build your mockup over time

  51. It doesn’t demand perfection

  52. It’s still just a mockup

  53. It’s a ground for experimentation

  54. Thank you! Steve Smith • @orderedlist

  55. None