Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing with the Web
Search
Steve Smith
PRO
April 13, 2013
Design
28
1.3k
Designing with the Web
A heretical guide to creating native software.
Steve Smith
PRO
April 13, 2013
Tweet
Share
More Decks by Steve Smith
See All by Steve Smith
Git Better
orderedlist
PRO
22
1.1k
Producing Creativity
orderedlist
PRO
344
39k
Collaborating on Vision
orderedlist
PRO
8
800
Designing with GitHub
orderedlist
PRO
57
4k
Design Everything
orderedlist
PRO
25
1.3k
Designing Windowed Web Applications
orderedlist
PRO
13
1.4k
Introduction to Speakerdeck
orderedlist
PRO
9
310k
Real World Data Modeling with Mongo
orderedlist
PRO
8
860
Other Decks in Design
See All in Design
OLTA株式会社/デザイン紹介資料
taxy
0
110
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
160
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.5k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
870
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
How to go from research data to insights?
mastervicedesign
0
220
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
170
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
290
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Code Review Best Practice
trishagee
67
18k
The Cult of Friendly URLs
andyhume
78
6.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Designing for Performance
lara
604
68k
Become a Pro
speakerdeck
PRO
26
5.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Transcript
Designing with the Web A heretical guide to creating native
soware. Steve Smith • @orderedlist
Hello, I’m @orderedlist
This is NOT about... Designing in the browser WebViews Language
wars
This IS about... Designing more than just visuals Try it
before you buy it An easier transition to development
HTML & CSS A Brief Demo A peek under the
kimono...
Using HTML & CSS to mockup native applications
HTML & CSS Real Talk: Just use Webkit
HTML & CSS background-color border box-shadow linear-gradient border-radius outline
HTML & CSS NOPE. background-color border box-shadow linear-gradient border-radius outline
HTML & CSS Avoid drawing with CSS
HTML & CSS Use rendered images you can use in
your real application
HTML & CSS
HTML & CSS background-image
HTML & CSS border-image
HTML & CSS .button { -webkit-border-image: url(image.png) 1 10 repeat
repeat; border-width:1px 10px; }
HTML & CSS .button { -webkit-border-image: url(image.png) 1 10 repeat
repeat; border-width:1px 10px; }
HTML & CSS <a href="#" class="button"> View on GitHub </a>
HTML & CSS But what about Retina?
HTML & CSS -webkit-image-set
HTML & CSS -webkit-image-set( url(button.png) 1x, url(
[email protected]
) 2x )
HTML & CSS HTML & CSS buon.png bu
[email protected]
HTML & CSS The browser decides which image to use.
HTML & CSS Use -webkit-image-set anywhere you’d use a url
HTML & CSS The benefits of CSS?
HTML & CSS CSS encourages reuse of visual styles.
HTML & CSS CSS is really fast to write.
HTML & CSS CSS can use your final image assets
to create mockups.
HTML & CSS So what’s the big deal? Back to
the demo...
Using JavaScript to mockup native applications
JavaScript Start with jQuery, jQuery UI
JavaScript Next, pick a JS framework
JavaScript I happen to use SpineJS hp://spinejs.com
JavaScript Things it should include... Fast to run, fast to
write Browser local storage-backed models HTML5 history based routing
JavaScript Why is this beer than just a picture of
soware?
JavaScript Design the complete workflow
JavaScript See your design with real data
JavaScript Design animations, loaders, and transitions
JavaScript Evaluate a design in context
JavaScript It removes questions for the developer
JavaScript It hints at complication early in the process
JavaScript Once more, to the demo... So how do I
show this off?
How to deploy your mockup as a web application
Deployment Create a Rails app
Deployment Authentication with oAuth
Deployment Push the app to Heroku
Deployment Push the app to Heroku
Deployment hp://mockup.domain.com/feature/section/id
Deployment Push the code to GitHub
Deployment Send changes in Pull Requests
Start slowly, and build your mockup over time
It doesn’t demand perfection
It’s still just a mockup
It’s a ground for experimentation
Thank you! Steve Smith • @orderedlist
None