Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 256 lines (237 sloc) 12.278 kb
66e543b @infil00p First Commit
authored
1 <!doctype html>
2 <head>
3 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5
6 <title>Viewports: Designing for the Modern Web</title>
7
8 <meta name="description" content="Viewports: Designing for the Modern Web">
9 <meta name="author" content="Joe Bowser">
10 <meta name="viewport" content="width=1024, user-scalable=no">
11
12 <!-- Core and extension CSS files -->
13 <link rel="stylesheet" href="deckjs/core/deck.core.css">
14 <link rel="stylesheet" href="deckjs/extensions/goto/deck.goto.css">
15 <link rel="stylesheet" href="deckjs/extensions/menu/deck.menu.css">
16 <link rel="stylesheet" href="deckjs/extensions/navigation/deck.navigation.css">
17 <link rel="stylesheet" href="deckjs/extensions/status/deck.status.css">
18 <link rel="stylesheet" href="deckjs/extensions/hash/deck.hash.css">
19
20 <!-- Style theme. More available in /themes/style/ or create your own. -->
21 <link rel="stylesheet" href="deckjs/themes/style/phonegap.css">
22
23 <!-- Transition theme. More available in /themes/transition/ or create your own. -->
24 <link rel="stylesheet" href="deckjs/themes/transition/horizontal-slide.css">
25
26 <script src="deckjs/modernizr.custom.js"></script>
27 </head>
28
29 <body class=deck-container>
30
31 <section class=slide id=title-slide>
32 <br />
33 <img src="img/no_cell_phone.png" />
34 <h2 style="text-align: center; color: #000;" >Viewports: Designing for the <span style="text-decoration: line-through ">Mobile</span> Modern Web</h2>
35 <h3 style="text-align: center; color: #000;"> Joe Bowser <br />
36 <a href="mailto:jbowser@adobe.com">jbowser@adobe.com</a><br />
37 <a href="twitter.com/infil00p"> @infil00p</a></h3>
38 </section>
39
40 <section class=slide>
41 <style type="text/css" media="screen">
42 th { text-align: left }
43 </style>
44 <h2>The Modern Web</h2>
45 <img src="img/tablet_icon.png" />
46 <ul>
47 <li>The Mobile Web is just PART of the Web - You're not going to haul your TV down the street</li>
48 <li>Mobile does not mean just phones - I can take a Netbook or a Tablet with me</li>
49 <li>We should not make predictions about what devices people will use - (i.e. RIM still isn't dead)</li>
50 <li>Who knows how people will view the web five years from now?</li>
51 </ul>
52 </section>
53
54 <section class=slide>
55 <style type="text/css" media="screen">
56 th { text-align: left }
57 </style>
58 <h2>The Problem</h2>
59 <div class="twopane">
60 <img src="img/mobile_guardian.png" style="position: absolute; left: 20px;"/>
61 <ul style="position: absolute; left: 520px" >
62 <li>Web sites are deferring to native applications which display the same content</li>
63 <li>Web applications (both PhoneGap and others) aren't gracefully dealing with multiple screen sizes</li>
64 <li>Some sites have hard-coded URLs which display the mobile site, which don't detect screen size when sharing</li>
65 <li>People still design for a single device or a single resolution and expect it to scale everywhere</li>
66 </ul>
67 </div>
68 </section>
69 <section class=slide>
70 <h2>What the problem used to be</h2>
71 <img style="position: absolute; left: 100px;" src="img/ResolutionGraphic.png" />
72 <ul style="position: absolute; left: 500px;">
73 <li>Mobile meant phones</li>
74 <li>The largest resolution were higher-end Android devices</li>
75 <li>iOS has a device-independent resolution</li>
76 <li>Android resolutions were more flexible</li>
77 <li>We roughly knew what pixels we were using</li>
78 </ul>
79 </section>
80 <section class="slide">
81 <h2> Lots of testing </h2>
82 <img src="img/brian_phones.jpg" />
83 </section>
84 <section class=slide>
85 <h2>What the problem is today</h2>
86 <img src="img/LargerResolutionGraphic.png" />
87 </section>
88 <section class="slide">
89 <h2>This is not a mobile web problem</h2>
90 <img src="img/pstam_moving_hdtv.jpg" />
91 </section>
92 <section class=slide>
93 <h2>How do we go about fixing this?</h2>
94 <ul>
95 <li>Multiple versions? - May or may not be feasible</li>
96 <li>CSS Media Queries? - Relies on assumptions about devices out in the wild</li>
97 <li>Multiple Web Assets</li>
98 <li>Viewport Meta Tag</li>
99 <li>Javascript APIs for detecting DPI</li>
100 <li>Test on multiple devices</li>
101 <li>There is no silver bullet for this</li>
102 </ul>
103 </section>
104 <section class="slide">
105 <img src="img/warning_large.png">
106 <h2 style="text-align: center">LIVE CODING AHEAD</h2>
107 </section>
108 <section class="slide">
109 <h2>Multiple Assets</h2>
110 <img src="img/scale.png" />
111 <ul>
112 <li>Needed for performance</li>
113 <li>Scaled Images make scrolling suck!</li>
114 <li>This isn't just a Web problem, native scrolling can suck too!</li>
115 <li>Downsampling images just makes things janky</li
116 </ul>
117 </section>
118 <section class=slide>
119 <h2>What about pixels?</h2>
120 <ul>
121 <li>Pixels aren't real measurements</li>
122 <li>CSS Pixels - pixels whose size is relative to scale</li>
123 <li>Device Independent Pixels - CSS Pixes at 100% zoom</li>
124 <li>Device Pixels - The actual pixels that you can't use</li>
125 </ul>
126 <img src="img/falling.png" />
127 </section>
128 <section class=slide>
129 <h2>Pixel Density: Tablet vs Phone</h2>
130 <img src="img/point.png" style="position: absolute; left: 100px;" />
131 <ul style="position: absolute; left: 400px;" >
132 <li>It's next to impossible to determine tablet or phone on pixels alone</li>
133 <li>Arbitrary pixel cut-offs are arbitrary</li>
134 <li>iOS will always report a pixel density of 2 for Retina Screens</li>
135 <li>Android pixels were once equal to device pixels, but will not be any longer</li>
136 <li>Use pixel cut-offs for orientation, or for device, or for both</li>
137 <li>Actual Device Width on Android is devicePixels/pixelDensityRatio</li>
138 </ul>
139 </section>
140 <section class="slide">
141 <h2>This is what it really looks like in CSS pixels</h2>
142 <img src="img/Stupid_Resolution_Graphic.png" />
143 </section>
144 <section class=slide>
145 <h2>The Viewport: Screen Width and Height</h2>
146 <ul>
147 <li>Setting device-width is fun times!</li>
148 <li>On many browsers, this will default to 320x480</li>
149 <li>density-dpi is being deprecated, although many Android apps use this</li>
150 <li>100% zoom doesn't mean you'll get real pixels</li>
151 </ul>
152 <pre>
153 &lt;meta name="viewport"
154 content="
155 <b>height</b> = [<em>pixel_value</em> | device-height] ,
156 <b>width</b> = [<em>pixel_value</em> | device-width ] ,
157 <b>initial-scale</b> = <em>float_value</em> ,
158 <b>minimum-scale</b> = <em>float_value</em> ,
159 <b>maximum-scale</b> = <em>float_value</em> ,
160 <b>user-scalable</b> = [yes | no] ,
161 <b>target-densitydpi</b> = [<em>dpi_value</em> | device-dpi |
162 high-dpi | medium-dpi | low-dpi]
163 " /&gt;
164 </pre>
165 </section>
166 <section class=slide>
167 <h2>CSS media queries</h2>
168
169 Webkit based:
170 <pre>
171 &lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /&gt;
172 &lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /&gt;
173 &lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /&gt;
174 </pre>
175
176 Mozilla based:
177 <pre>
178 &lt;link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 1.5)" href="hdpi.css" /&gt;
179 &lt;link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 1.0)" href="mdpi.css" /&gt;
180 &lt;link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 0.75)" href="ldpi.css" /&gt;
181 </pre>
182 </section>
183 <section class=slide>
184 <h2>Or you can design for the web</h2>
185 <pre>
186 &lt;link rel="stylesheet" href="landscape.css" type="text/css" media="screen and (min-width: 1024px)" /&gt;
187 &lt;link rel="stylesheet" href="portrait.css" type="text/css" media="screen and (min-width: 1023px)" /&gt;
188 </pre>
189 <ul>
190 <li>Using browser-specific CSS isn't the web</li>
191 <li>This uses CSS pixels</li>
192 <li>This is good for when width=device-width with no max-device-width</li>
193 <li>This doesn't make sense for use with multiple versions</li>
194 </ul>
195 </section>
196 <section class=slide>
197 <h2>Javascript Detection</h2>
198 <img src="img/gears.png" />
199 <ul>
200 <li>Use this to determine pixel-density</li>
201 <li>Can be used to execute CSS media queries</li>
202 <li>Can be used with other APIs to determine type of device</li>
203 <li>Can also be used to change things that CSS can't change (i.e. img tags)</li>
204 </ul>
205 </section>
206 <section class=slide>
207 <h2>Conclusion</h2>
208 <img src="img/info.png" style="position: absolute; left: 50px;" />
209 <ul style="position: absolute; left: 300px; " >
210 <li>Multiple versions may save you from some of this headache, but only if you know how many pixels you have</li>
211 <li>This gets complicated when pixel density is brought into the picture</li>
212 <li>A mix of CSS Media Queries, Seperated Assets, and Javascript can help</li>
213 <li>Test on multiple devices</li>
214 <li>Don't give up</li>
215 </ul>
216 </section>
217
218 <section class=slide>
219 <h2>Resources</h2>
220 <ul>
221 <li><a href="http://developer.android.com/guide/webapps/targeting.html">Targeting Screens from Web Apps</a> - Android Open Source Project</li>
222 <li><a href="http://marakana.com/s/a_pixel_is_not_a_pixel_ppk_explains_viewports,1141/index.html">When a pixel is not a pixel</a> - Peter-Paul Koch - <a href="http://quirksmode.org">http://quirksmode.org</a></li>
223 <li><a href="https://developers.google.com/events/io/sessions/gooio2012/206/">Fast UIs for the Cross-Device Web</a> - Boris Smus, Google</li>
224 </ul>
225 <h3>Source</h3>
226 <ul>
227 <li><a href="http://github.com/infil00p/oscon_demo">https://github.com/infil00p/oscon_demo</a> - Example of Media Queries and JS</li>
228 </ul>
229 </section>
230
231 <section class=slide>
232 <h2>Legal</h2>
233 <p>Portions of this presentation are modifications based on work created and
234 shared by the <a href="http://code.google.com/policies.html">Android Open Source Project</a> and
235 used according to terms described in the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons 2.5 Attribution License.</a></p>
236 <p>Iconography courtesy of the Noun Project and covered under <a href="http://creativecommons.org/licences/by/3.0/">Creative Commons 3.0 Attribution Licence</a></p>
237 <p>Scale icon by __Lo</p>
238 </section>
239
240
241 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
242 <script>window.jQuery || document.write('<script src="/deckjs/jquery-1.7.min.js"><\/script>')</script>
243
244 <!-- Deck Core and extensions -->
245 <script src="deckjs/core/deck.core.js"></script>
246 <script src="deckjs/extensions/hash/deck.hash.js"></script>
247 <script src="deckjs/extensions/menu/deck.menu.js"></script>
248 <script src="deckjs/extensions/goto/deck.goto.js"></script>
249 <script src="deckjs/extensions/status/deck.status.js"></script>
250 <script src="deckjs/extensions/navigation/deck.navigation.js"></script>
251
252 <!-- Initialize the deck -->
253 <script>$(function() { $.deck('.slide') })</script>
254 </body>
255 </html>
Something went wrong with that request. Please try again.