A heretical guide to creating native software.
Designing with the WebA heretical guide to creating native soware.Steve Smith • @orderedlist
View Slide
Hello, I’m @orderedlist
This is NOT about...Designing in the browserWebViewsLanguage wars
This IS about...Designing more than just visualsTry it before you buy itAn easier transition to development
HTML & CSSA Brief DemoA peek under the kimono...
Using HTML & CSS to mockupnative applications
HTML & CSSReal Talk: Just use Webkit
HTML & CSSbackground-color borderbox-shadow linear-gradientborder-radius outline
HTML & CSSNOPE.background-color borderbox-shadow linear-gradientborder-radius outline
HTML & CSSAvoid drawing with CSS
HTML & CSSUse rendered images you canuse in your real application
HTML & CSS
HTML & CSSbackground-image
HTML & CSSborder-image
HTML & CSS.button {-webkit-border-image:url(image.png) 1 10repeat repeat;border-width:1px 10px;}
HTML & CSSView on GitHub
HTML & CSSBut what about Retina?
HTML & CSS-webkit-image-set
HTML & CSS-webkit-image-set(url(button.png) 1x,url([email protected]) 2x)
HTML & CSSHTML & CSSbuon.pngbu[email protected]
HTML & CSSThe browser decides whichimage to use.
HTML & CSSUse -webkit-image-setanywhere you’d use a url
HTML & CSSThe benefits of CSS?
HTML & CSSCSS encourages reuse ofvisual styles.
HTML & CSSCSS is really fast to write.
HTML & CSSCSS can use your final imageassets to create mockups.
HTML & CSSSo what’s the big deal?Back to the demo...
Using JavaScript to mockupnative applications
JavaScriptStart with jQuery, jQuery UI
JavaScriptNext, pick a JS framework
JavaScriptI happen to use SpineJShp://spinejs.com
JavaScriptThings it should include...Fast to run, fast to writeBrowser local storage-backed modelsHTML5 history based routing
JavaScriptWhy is this beer than justa picture of soware?
JavaScriptDesign the complete workflow
JavaScriptSee your design with real data
JavaScriptDesign animations, loaders,and transitions
JavaScriptEvaluate a design in context
JavaScriptIt removes questions forthe developer
JavaScriptIt hints at complication early inthe process
JavaScriptOnce more, to the demo...So how do I show this off?
How to deploy your mockup asa web application
DeploymentCreate a Rails app
DeploymentAuthentication with oAuth
DeploymentPush the app to Heroku
Deploymenthp://mockup.domain.com/feature/section/id
DeploymentPush the code to GitHub
DeploymentSend changes in Pull Requests
Start slowly, and build yourmockup over time
It doesn’t demand perfection
It’s still just a mockup
It’s a ground forexperimentation
Thank you!Steve Smith • @orderedlist