-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
596 lines (492 loc) · 21.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive & Adaptive Web Design</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1><span class="high-blue">Responsive</span> and <span class="high-red">Adaptive</span> <span class="high-gray">Web Design</span></h1>
</section>
<section>
<h2>What do we mean when we say:</h2>
<h1><span class="high-gray">Responsive?</span></h1>
</section>
<section>
<h2>Let's first off define what <span class="high-blue">responsive</span> and <span class="high-red">adaptive</span> actually mean.</h2>
</section>
<section>
<section id="fragments">
<h2>responsive</h2>
<p class="fragment">adjective <span class="high-gray">|</span> re·spon·sive <span class="high-gray">|</span> \ri-ˈspän(t)-siv\</p>
<p class="fragment high-blue">: reacting in a desired or positive way</p>
</section>
</section>
<section>
<section id="fragments">
<h2>adaptive</h2>
<p class="fragment">adjective <span class="high-gray">|</span> adap·tive <span class="high-gray">|</span> \ə-ˈdap-tiv, a-\</p>
<p class="fragment high-red">: showing or having a capacity for or tendency toward adaptation</p>
</section>
<section>
<h2>adaptation</h2>
<p class="fragment">noun <span class="high-gray">|</span> ad·ap·ta·tion <span class="high-gray">|</span> \ˌa-ˌdap-ˈtā-shən, -dəp-\</p>
<p class="fragment high-red">: the process of changing to fit some purpose or situation</p>
<p class="fragment high-red">: the process of adapting</p>
</section>
</section>
<section>
<h2><span class="high-blue">Responsive</span> reacts to a situation</h2>
<h2><span class="high-red">Adaptive</span> adapts to a situation</h2>
</section>
<!-- <section data-background="https://cdn.shopify.com/s/files/1/0051/7692/products/ABA-hero-4_c97486bb-368b-4a52-8d53-72e7d35848e0.jpg?v=1417531418">
</section> -->
<!-- <section data-background="img/ABA-hero-4_c97486bb-368b-4a52-8d53-72e7d35848e0.jpg"> -->
<section>
<img src="img/ABA-hero-4_c97486bb-368b-4a52-8d53-72e7d35848e0.jpg" alt="RWD">
</section>
<section>
<h2><span class="high-blue">Responsive</span> Web Design</h2>
<p>Ethan Marcotte ©2011</p>
</section>
<section>
<p>Ethan Marcotte coined the term <q class="high-blue">“responsive web design”</q>… The technologies existed already: fluid grids, flexible images, and media queries.</p>
<footer>
<em class="high-gray">— Jeremy Keith</em>
</footer>
</section>
<section>
<h2><span class="high-blue">Responsive</span> Web Design</h2>
<ul>
<li>The Flexible Grid</li>
<li>Flexible Images</li>
<li>Media Queries</li>
</ul>
</section>
<!-- <section data-background="http://www.qualitypressthemes.com/wp-content/uploads/12-column.jpg">
</section> -->
<!-- <section data-background="img/12-column.jpg"> -->
<section>
<img src="img/12-column.jpg" alt="12 Column Grid">
</section>
<section>
<h2>The Flexible Grid</h2>
<p>Fluid grids that ebb and flow with a devices’ screen size.</p>
</section>
<section>
<p>
<q>“Nasty, evil pixels. We hates them.”</q>
</p>
<footer>
<em class="high-gray">— Ethan Marcotte</em>
</footer>
</section>
<section>
<h2>target ÷ content = result</h2>
<p>Say we have a 960 grid and want to add a content container of 900 pixels in our grid.</p>
<h3>900 ÷ 960 = 0.9375</h3>
<pre><code class="css" data-trim contenteditable style="font-size: 18px;">
.foo-content {
margin: 0 auto;
width: 93.75%; /* 900px / 960px */
}
</code></pre>
</section>
<!-- <section data-background="http://316design.com/wp-content/uploads/2013/11/316-Design-WEBSITES-Bestop-Defense.png">
</section> -->
<!-- <section data-background="img/316-Design-WEBSITES-Bestop-Defense.png"> -->
<section>
<img src="img/316-Design-WEBSITES-Bestop-Defense.png" alt="Responsive Images">
</section>
<section>
<h2>Flexible Images</h2>
<p>Flexible images and media that keep content intact on any resolution.</p>
<pre><code class="css" data-trim contenteditable style="font-size: 18px;">
img, embed, object, video {
max-width: 100%;
}
</code></pre>
</section>
<!-- <section data-background="http://www.websitemagazine.com/images/blog/screen-resolutions.png">
</section> -->
<!-- <section data-background="img/screen-resolutions.png"> -->
<section>
<img src="img/screen-resolutions.png" alt="Screen Resolutions">
</section>
<section>
<h2>Media Queries</h2>
<p>Media queries allowing designs to respond by establishing dimension breakpoints.</p>
</section>
<section>
<h3>Media Queries</h3>
<pre><code class="css" data-trim contenteditable style="font-size: 18px;">
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
</code></pre>
</section>
<!-- <section>
<h3>Specific</h3>
<pre><code class="css" data-trim contenteditable style="font-size: 18px;">
/* CSS for super-super-high-density screens - xxhdpi */
@media screen and (-webkit-device-pixel-ratio: 3.0) {
/* Styles */
}
/* CSS for super-high-density screens - xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2.0) {
/* Styles */
}
/* CSS for high-density screens - hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* Styles */
}
/* CSS for medium-density screens - mdpi */
@media screen and (-webkit-device-pixel-ratio: 1.0) {
/* Styles */
}
/* CSS for low-density screens - ldpi */
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* Styles */
}
</code></pre>
</section>
<section>
<h3>Super over specific (please don't)</h3>
<pre><code class="css" data-trim contenteditable style="font-size: 18px;">
/* iPad 3 (portrait) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPad 3 (landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
</code></pre>
</section> -->
<section>
<h2>The crux of <span class="high-blue">Responsive</span></h2>
<p>Responsive web design is a means of becoming device agnostic in the sense that it seeks to create an optimized experience for any screen.</p>
</section>
<!-- <section data-background="http://cdn.onextrapixel.com/wp-content/uploads/2015/02/2-AdaptiveWebDesign.jpg">
</section> -->
<!-- <section data-background="img/2-AdaptiveWebDesign.jpg"> -->
<section>
<img src="img/2-AdaptiveWebDesign.jpg" alt="AWD">
</section>
<section>
<h2><span class="high-red">Adaptive</span> Web Design: Crafting Rich Experiences with <span class="high-green">Progressive Enhancement</span></h2>
<p>Aaron Gustafson ©2011</p>
</section>
<section>
<h2><span class="high-red">Adaptive</span> Web Design</h2>
<ul>
<li>The Flexible Grid</li>
<li>Flexible Images</li>
<li>Media Queries</li>
</ul>
</section>
<!-- <section data-background="http://scottjehl.com/assets/dwpe.jpg">
</section> -->
<!-- <section data-background="img/dwpe.jpg"> -->
<section>
<img src="img/dwpe.jpg" alt="Progressive Enhancement">
</section>
<section>
<h2><span class"high-green">Progressive Enhancement</span></h2>
<blockquote cite="https://www.filamentgroup.com/dwpe/">“Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience — whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screen-reader, their experience should be as fully featured and functional as possible.”</blockquote>
</section>
<section>
<h2>What now?</h2>
</section>
<section>
<h2>How are they the same?</h2>
<p><span class="high-blue">Responsive</span> sites and <span class="high-red">adaptive</span> sites are the same in that they both change appearance based on the browser's width.</p>
</section>
<section>
<h2>How are they different?</h2>
<!-- <img src="https://cdn.css-tricks.com/wp-content/uploads/2015/11/rwd-vs-adapt-example.gif" alt="Difference Between Responsive and Adaptive Design"> -->
<img src="img/rwd-vs-adapt-example.gif" alt="Difference Between Responsive and Adaptive Design">
<p>The <span class="high-blue">responsive</span> example on top <em class="high-gray">flows</em>, the <span class="high-red">adaptive</span> example on bottom <em class="high-gray">snaps</em> into place.</p>
</section>
<section>
<h2>How are they different?</h2>
<p><span class="high-blue">Responsive</span> websites respond to the size of the browser at </p><p><em class="high-gray">any given point</em>.</p>
<p><span class="high-red">Adaptive</span> websites adapt to the width of the browser at </p><p><em class="high-gray">a specific points</em>.</p>
</section>
<section>
<img src="img/CeE_3x-W4AEDBGP.jpg" alt="RWDvsAWD">
</section>
<!-- Denis -->
<section>
<h2>Examples in play:</h2>
<p><a href="http://www.liquidapsive.com">liquidapsive.com</a></p>
</section>
<!-- /Denis -->
<section>
<h2>Choosing Between the two</h2>
<table>
<thead>
<tr>
<th><span class="high-blue">Responsive</span></th>
<th><span class="high-red">Adaptive</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.</td>
<td>Instead, there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.</td>
</tr>
<tr>
<td>Relying on flexible and fluid grids.</td>
<td>Relying on predefined screen sizes.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h1>Why is this important?</h1>
</section>
<section>
<h2>...because otherwise this happens:</h2>
<img src="img/rwd-vs-awd.png" alt="Responsive vs Adaptive as a Concept">
</section>
<section>
<section id="fragment" style="text-align: left;">
<h1>THE END?</h1>
<h2 class="fragment high-blue">No, we're just getting started.</h2>
</section>
</section>
<section>
<h2>Identifying the breakpoints</h2>
<p></p>
<table>
<thead>
<tr>
<th><span class="high-blue">Responsive</span></th>
<th><span class="high-red">Adaptive</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>The design process kicks off with a mobile first approach.</td>
<td>The design process kicks off by surveying the different devices for which we're planning to design.</td>
</tr>
</tbody>
</table>
</section>
<!-- Denis -->
<section>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
“Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!” – Stephen Hay
</blockquote>
</section>
<section>
<h1>Content</h1>
</section>
<section>
<h2>Layout should follow the Content #contentisking</h2>
<p>e.g. Text should be bigger on mobile devices, not smaller.</p>
</section>
<section>
<h2>Content Groups</h2>
<p>Don't split Content Groups.</p>
</section>
<section data-background="img/contentGroup_bad.png">
</section>
<section data-background="img/contentGroup_good.png">
</section>
<section>
<h2>Content Groups</h2>
<p>Don't split Content Groups.</p>
<p>Changing the order of elements is always complicated.</p>
</section>
<section>
<h2>Images</h2>
<p>Image formats should be the same, if possible.</p>
<p>The content of images is relevant for different screen sizes.</p>
</section>
<section data-background="img/image_inhalt_bad.png">
</section>
<!--<section data-background="img/image_inhalt_good.png">
</section>-->
<section>
<h1>Performance</h1>
</section>
<section>
<h2>You never know where the user is and which bandwidth is available</h2>
</section>
<section data-background="img/image_size.png">
</section>
<section>
<h2>You never know where the user is and which bandwidth is available.</h2>
<p class="fragment">Small screensizes = low bandwidth.</p>
<p class="fragment">Large screensizes = high bandwidth.</p>
</section>
<section>
<h2>Check file sizes</h2>
<p>Loading time.</p>
<p>Device performance.</p>
</section>
<section>
<h2>Device Performance</h2>
<p>Fancy animations / Parallax can kill the whole User Experience.</p>
</section>
<section>
<h1>Mobile First</h1>
</section>
<section>
<h2>Great for Conception</h2>
<p class="fragment">No risk to create stuff that is not working on small screens </br>
-> shrink Desktop Modules for smaller screens</p>
<p class="fragment">If it works on the Smartphone, it works on the Desktop.</p>
<p class="fragment">The hardest work is over :)</p>
<p class="fragment">Focus / Reducing unnecessary modules </br>
-> "We don't need that on the Smartphone" </br>
So do we REALLY need it on the Desktop?</p>
</section>
<section data-background="http://static.lukew.com/large_smartphones1.png">
</section>
<section>
<h2>Designers are often struggling with this approach</h2>
<p class="fragment">Linear structures, limited view, no space.</p>
<p class="fragment">Design modules, not sites.</p>
<p class="fragment">Creating Style Tiles. (<a href="http://styletil.es/">http://styletil.es/)</a></p>
</section>
<section>
<img src="img/style-tiles-beispiel.png">
</section>
<section>
<img src="img/facebook-style-tile.png">
</section>
<section data-background="img/mobilefirst-book.jpg">
</section>
<section>
<h1>Workflow</h1>
</section>
<section>
<a href="https://blog.kulturbanause.de/2013/06/workflow-responsive-web-design-prototyping/"><img src="img/webdesign-workflow.png"></a>
</section>
<section>
<a href="https://blog.kulturbanause.de/2013/06/workflow-responsive-web-design-prototyping/"><img src="img/responsive-webdesign-workflow.png"></a>
<p>Concepters, Designers and Programmers should meet as soon as possible and talk a lot.</p>
</section>
<section>
<h1>Trends</h1>
</section>
<section data-background="img/material-design.png">
<h2>Flat / Material Design</h2>
<p class="high-blue">Minimization of UI elements.</p>
<p class="high-blue">Drop embellishments.</p>
</section>
<section>
<h2>Reducing unnecessary elements</h2>
<p>Fast loading, Good usability</p>
<a href="http://www.uacstudios.com/"><img src="img/minimalistic_website.png"></a>
</section>
<section>
<h2>Typography</h2>
<p>With or without images.</p>
<a href="http://www.werkstatt.fr/#/home"><img src="img/typography.png"></a>
</section>
<section>
<h2>Large Navigations</h2>
<a href="http://www.apart-collective.com/home"><img src="img/big-nav.png"></a>
</section>
<section>
<h2>Infinite scrolling</h2>
<p>Fast navigation, nice for browsing</p>
<a href="http://www.etq-amsterdam.com/collection"><img src="img/infinite.png"></a>
</section>
<section>
<h2>Storytelling</h2>
<p>Background video, large images, sound</p>
<a href="http://blacknegative.com/"><img src="img/storytelling.png"></a>
</section>
<section>
<h2>Split Content / Card Design</h2>
<p>Divide Website into sections.</p>
<img src="https://lh3.ggpht.com/F-gu8nU6kMfN97BXOMloSB1_bXUT2ky32R4YJX5wp_q1i0KyO4U1TUjpV0MxtwgnDw=h900">
</section>
<section>
<h2>Sooo... what's better?</h2>
<h2><span class="high-blue">Responsive</span> or <span class="high-red">Adaptive</span>?</h2>
</section>
<section>
<h2>It depends on the project.</h2>
<h2><span class="high-blue">Responsive</span> is more powerfull and more flexible.</h2>
<h2>But <span class="high-red">Adaptive</span> is pixelperfect and cheaper.</h2>
</section>
<section>
<h2>Thanks for your attention!</h2>
<div class="fragment">
<p>Here is a funny cat.</p>
<img src="http://static.boredpanda.com/blog/wp-content/uploads/2014/02/funny-cats-if-it-fits-i-sits-5.jpg">
</div>
<p class="fragment">Questions?</p>
</section>
<!-- /Denis -->
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>