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
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