Designing with the Web - Speaker Deck

Slide 1

Slide 1 text

Designing with the Web A heretical guide to creating native soware. Steve Smith • @orderedlist

Slide 2

Slide 2 text

Hello, I’m @orderedlist

Slide 3

Slide 3 text



Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

This IS about... Designing more than just visuals Try it before you buy it An easier transition to development

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Using HTML & CSS to mockup native applications

Slide 8

Slide 8 text

HTML & CSS Real Talk: Just use Webkit

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

HTML & CSS Avoid drawing with CSS

Slide 12

Slide 12 text

HTML & CSS Use rendered images you can use in your real application

Slide 13

Slide 13 text

HTML & CSS

Slide 14

Slide 14 text

HTML & CSS background-image

Slide 15

Slide 15 text

HTML & CSS border-image

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

HTML & CSS View on GitHub

Slide 19

Slide 19 text

HTML & CSS But what about Retina?

Slide 20

Slide 20 text

HTML & CSS -webkit-image-set

Slide 21

Slide 21 text

HTML & CSS -webkit-image-set( url(button.png) 1x, url([email protected]) 2x )

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

HTML & CSS The browser decides which image to use.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

HTML & CSS The beneﬁts of CSS?

Slide 26

Slide 26 text

HTML & CSS CSS encourages reuse of visual styles.

Slide 27

Slide 27 text

HTML & CSS CSS is really fast to write.

Slide 28

Slide 28 text

HTML & CSS CSS can use your ﬁnal image assets to create mockups.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Using JavaScript to mockup native applications

Slide 31

Slide 31 text

JavaScript Start with jQuery, jQuery UI

Slide 32

Slide 32 text

JavaScript Next, pick a JS framework

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

JavaScript Things it should include... Fast to run, fast to write Browser local storage-backed models HTML5 history based routing

Slide 35

Slide 35 text

JavaScript Why is this beer than just a picture of soware?

Slide 36

Slide 36 text

JavaScript Design the complete workﬂow

Slide 37

Slide 37 text

JavaScript See your design with real data

Slide 38

Slide 38 text

JavaScript Design animations, loaders, and transitions

Slide 39

Slide 39 text

JavaScript Evaluate a design in context

Slide 40

Slide 40 text

JavaScript It removes questions for the developer

Slide 41

Slide 41 text

JavaScript It hints at complication early in the process

Slide 42

Slide 42 text

JavaScript Once more, to the demo... So how do I show this oﬀ?

Slide 43

Slide 43 text

How to deploy your mockup as a web application

Slide 44

Slide 44 text

Deployment Create a Rails app

Slide 45

Slide 45 text

Deployment Authentication with oAuth

Slide 46

Slide 46 text

Deployment Push the app to Heroku

Slide 47

Slide 47 text

Deployment Push the app to Heroku

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Deployment Push the code to GitHub

Slide 50

Slide 50 text

Deployment Send changes in Pull Requests

Slide 51

Slide 51 text

Start slowly, and build your mockup over time

Slide 52

Slide 52 text

It doesn’t demand perfection

Slide 53

Slide 53 text

It’s still just a mockup

Slide 54

Slide 54 text

It’s a ground for experimentation

Slide 55

Slide 55 text

Thank you! Steve Smith • @orderedlist

Slide 56

Slide 56 text

No content