Once Source to Rule Them All

1. One Source to Rule Them All. R EF RES H LO UIS VILLE April 20, 2010

2. OR How to use media queries to optimize the same markup for different devices and features.

3. Reference The League of Moveable Type http://www.theleagueofmoveabletype.com/

5. How much should I charge per hour? E VE RY W EB D ES IG NE R ’ S Q U E ST I O N

6. Let’s build an app. E VE RY W EB D ES IG NE R ’ S A N SW E R

7. 1 Build for mobile first.

8. SKETCH

10. Start building...

11. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>  <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html>

23. Reference Rate Calculator http://designintellection.com/ratecalc/

24. 2 Media queries = neat.

25. Media: Types & Features

26. all Types: screen print handheld projection speech 3d-glasses

27. all Types: screen print handheld projection speech 3d-glasses

28. width height device-width device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

29. max-width min-height min-device-width max-device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

30. Reference Media Queries http://www.w3.org/TR/css3-mediaqueries/

31. Detect mobile

32. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>  <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>

33. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>  <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>

34. 3 HTML5 & CSS3

35. HTML5 (briefly)

36. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&</em> Conditions</a> </section> </div>

40. Reference Dive Into HTML5 http://diveintohtml5.org/ HTML5 For Web Designers http://books.alistapart.com/product/html5-for-web-designers

41. CSS

42. base.css

43. base.css * { margin:0; padding:0; } body { font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:100%; background-color:#fff; } .layout { display:block; } .panel { display:block; } header { display:block; position:relative; } ul { list-style:none; } sup { font-size:50%; }

45. mobile.css

46. mobile.css body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0 auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; }

48. Reference Safari Reference Library http://developer.apple.com/safari/library/navigation/index.html

52. Title bar

53. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> ... </section>

54. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> ... </section>

55. mobile.css .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; }

56. Before

57. After

61. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));

67. Reference CSS3

69. Object Oriented CSS (Very briefly)

71. mobile.css .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } .text-emboss { text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); }

72. Reference Object Oriented CSS http://wiki.github.com/stubbornella/oocss/

73. The Navigation

74. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>

76. mobile.css .app-nav-item { display:block; width:90%; padding:8px 5% 10px 5%; font-size:1.5em; font-weight:bold; text-decoration:none; color:#fff; border-bottom:1px solid #333; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c1c1c), color-stop (0.5,#1c1c1c), color-stop(0.5,#111), to(#111)); background-color:#111; }

77. Before

78. After

79. After

80. index.php <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&</em> Conditions</a>

81. mobile.css .disclaimer-link { display:block; width:100%; padding:10px 0; position:absolute; left:0; bottom:0; font-size:0.75em; line-height:1em; text-align:center; text-decoration:none; color:#fff; background-color:rgba(0,0,0,0.2); z-index:15; }

83. Select specifics...

90. mobile.css .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; }

95. Before

96. After

97. Hover (or lack thereof)

98. mobile.css .tap-change:hover, .tap-change:active { background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821)); }

102. More markup

103. index.php <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section>

109. mobile.css .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; - webkit-appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; }

110. mobile.css .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit- appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; }

111. Result

112. Result

113. index.php <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header>

114. index.php <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header>

115. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em; text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }

116. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em; text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }

117. Before

118. After

119. <input class="amount-value text-emboss" id="rent-amount" type="number" />

121. jQuery

122. index.php  <script src="_js/jquery-1.4.2.min.js"></script> <script src="_js/jquery-ui-1.8.custom.min.js"></script> <script src="_js/rate-calculate.js"></script>

123. Rudimentary... (A.K.A. I’m not a jQuery expert)

124. index.php <script> $(document).ready(function() { $("#main-nav ul li a").click( function() { $(".app-nav-item").removeClass("app-nav-item-current"); $(this).addClass("app-nav-item-current"); var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear current"); $("#home-view").addClass("slide-out"); $("section").removeClass("reverse-out panel-close appear"); $(showPanel).addClass("slide-in appear"); return false; } ); $("a.back-link").click( function() { var removePanel = '#'+$(this).parents("section").attr("id"); $(removePanel).removeClass("slide-in appear"); $(removePanel).addClass("reverse-out"); $("#home-view").removeClass("slide-out"); $("#home-view").addClass("reverse-in current"); return false; } ); }); ... </script>

125. index.php <script> $(document).ready(function() { ... $("#read-terms-conditions").click( function() { var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear"); $(showPanel).removeClass("panel-close"); $("section").removeClass("reverse-out panel-close"); $(showPanel).addClass("slide-up panel-flip-inner"); return false; } ); $("a.close-link").click( function() { $("#terms-conditions").removeClass("slide-up"); $("#terms-conditions").addClass("panel-close"); $("#home-view").addClass("panel-appear"); return false; } ); }); </script>

126. CSS & z-index

127. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5; } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }

128. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5; } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }

130. .current { z-index:7; }

134. .current .panel(s) { { z-index:7; z-index:1; } }

135. .panel(s) { z-index:1; }

136. .panel(s) { z-index:1; }

137. .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }

138. Watch this video CSS transitions with no animation http://designintellection.com/iphone-css-transitions-with-no-animation/

139. Last but not least...

140. Animation

143. .current .current {{ z-index:7; z-index:7; }}

147. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }

150. .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }

152. mobile.css @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }

153. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }

155. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0%

156. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%

162. mobile.css @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } }

163. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } 0% 100%

164. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%

167. @-webkit-keyframes slideout-toleft @-webkit-keyframes slidein-fromright { { from { -webkit-transform:translateX(0%); } from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(-100%); } to { -webkit-transform:translateX(0%); } } } -100% 0% 100%

168. @-webkit-keyframes slideout-toleft @-webkit-keyframes slidein-fromright { { from { -webkit-transform:translateX(0%); } from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(-100%); } to { -webkit-transform:translateX(0%); } } } -100% 0% 100%

169. Watch this video CSS transitions with animation http://designintellection.com/iphone-css-transitions-with-animation/

170. Reference jQTouch http://www.jqtouch.com/

171. 4 DESKTOP VERSION

172. Detect desktop

173. index.php  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />  <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >

177. desktop.css /* LOTS O’ STUFF */

179. 5 TYPOGRAPHY

182. @font-face

183. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }

187. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); } .title-bar { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; } .focus-value { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; }

190. Reference Font Squirrel http://www.fontsquirrel.com/

191. 6 iPad VERSION

192. Detect iPad

193. index.php  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />  <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />

194. index.php  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />  <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />

197. index.php  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />  <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >  <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />

200. ipad-portait.css

201. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; } .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }

204. Before

205. After

206. ipad-landscape.css

207. ipad-landscape.css body { font-size:62.5%; } .frame { position:relative; background-color:#333; z-index:7; } .panel { background-color:transparent; } .slide-in { -webkit-animation-name:none; } .slide-out { -webkit-animation-name:none; } .reverse-in { -webkit-animation-name:none; } .reverse-out { -webkit-animation-name:none; } .panel { display:none; width:568px; position:absolute; left:0; background-color:#333; z- index:1; } .sub-view { display:none; margin-left:200px; } .appear { display:block; } .disappear { display:none; } .nav-view { display:block; width:200px; margin-left:0; position:absolute; left:0; top:0; } .back-link { display:none; } .disclaimer-link { display:none; }

208. Before

209. After

210. 7 EMOTIONAL DESIGN

211. http://designintellection.com/ratecalc/

212. THANK YOU! David Yeiser http://designintellection.com/ @davidyeiser

Once Source to Rule Them All

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Once Source to Rule Them All

Similar to Once Source to Rule Them All (20)

Recently uploaded

Recently uploaded (20)

Once Source to Rule Them All