Designing with the Web

Transcript

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

   soware. Steve Smith • @orderedlist

2. Hello, I’m @orderedlist

3. 

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

   wars

5. This IS about... Designing more than just visuals Try it

   before you buy it An easier transition to development

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

   kimono...

7. Using HTML & CSS to mockup native applications

8. HTML & CSS Real Talk: Just use Webkit

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

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

11. HTML & CSS Avoid drawing with CSS

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

    your real application

13. HTML & CSS

14. HTML & CSS background-image

15. HTML & CSS border-image

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

    repeat; border-width:1px 10px; }

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

    repeat; border-width:1px 10px; }

18. HTML & CSS <a href="#" class="button"> View on GitHub </a>

19. HTML & CSS But what about Retina?

20. HTML & CSS -webkit-image-set

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

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

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

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

25. HTML & CSS The benefits of CSS?

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

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

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

    to create mockups.

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

    the demo...

30. Using JavaScript to mockup native applications

31. JavaScript Start with jQuery, jQuery UI

32. JavaScript Next, pick a JS framework

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

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

    write Browser local storage-backed models HTML5 history based routing

35. JavaScript Why is this beer than just a picture of

    soware?

36. JavaScript Design the complete workflow

37. JavaScript See your design with real data

38. JavaScript Design animations, loaders, and transitions

39. JavaScript Evaluate a design in context

40. JavaScript It removes questions for the developer

41. JavaScript It hints at complication early in the process

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

    show this off?

43. How to deploy your mockup as a web application

44. Deployment Create a Rails app

45. Deployment Authentication with oAuth

46. Deployment Push the app to Heroku

47. Deployment Push the app to Heroku

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

49. Deployment Push the code to GitHub

50. Deployment Send changes in Pull Requests

51. Start slowly, and build your mockup over time

52. It doesn’t demand perfection

53. It’s still just a mockup

54. It’s a ground for experimentation

55. Thank you! Steve Smith • @orderedlist

56. None