-
-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
172 lines (141 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="theme-color" content="#5f7995" />
<meta name="author" content="Jeremy Keith" />
<meta name="description" content="By Jeremy Keith" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@adactio" />
<meta name="twitter:creator" content="@adactio" />
<meta name="twitter:title" property="og:title" content="Resilient Web Design" />
<meta name="twitter:description" property="og:description" content="By Jeremy Keith" />
<meta name="twitter:url" property="og:url" content="https://resilientwebdesign.com" />
<meta name="twitter:image" property="og:image" content="https://resilientwebdesign.com/author/images/medium/jeremykeith.jpg" />
<title>Resilient Web Design</title>
<link rel="preload" href="fonts/etbookot-roman-webfont.woff2" crossorigin type="font/woff2" as="font" />
<link rel="preload" href="js/scripts.js" as="script" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="contents" href="contents/" />
<link rel="author" href="author/" />
<link rel="next prefetch" href="introduction/" />
<link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/" />
<link rel="manifest" href="manifest.json" />
<link rel="icon shortcut" href="images/icon512.png" sizes="512x512" type="image/png" />
<link rel="apple-touch-icon" href="images/icon512.png" type="image/png" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<header>
<hgroup>
<a href="introduction/">
<h1>Resilient<br />web design</h1>
<h2>by Jeremy Keith</h2>
</a>
</hgroup>
</header>
<nav>
<ol start="0">
<li><a href="introduction/"><cite>Introduction</cite></a></li>
<li><a href="chapter1/"><cite><span>Chapter 1</span> Foundations</cite></a></li>
<li><a href="chapter2/"><cite><span>Chapter 2</span> Materials</cite></a></li>
<li><a href="chapter3/"><cite><span>Chapter 3</span> Visions</cite></a></li>
<li><a href="chapter4/"><cite><span>Chapter 4</span> Languages</cite></a></li>
<li><a href="chapter5/"><cite><span>Chapter 5</span> Layers</cite></a></li>
<li><a href="chapter6/"><cite><span>Chapter 6</span> Steps</cite></a></li>
<li><a href="chapter7/"><cite><span>Chapter 7</span> Challenges</cite></a></li>
<li><a href="author/" rel="author"><cite>About the author</cite></a></li>
<li><a href="theindex/"><cite>Index</cite></a></li>
</ol>
</nav>
<main>
<h2 id="formats">Formats</h2>
<p>This is a web book, designed to be read on the web (with or without an internet connection). So you can <a href="introduction/">start reading now</a>. But if you’d prefer to have a copy of this book in another format, you can download <a href="https://resilientwebdesign.s3.amazonaws.com/downloads/ResilientWebDesign-portrait.pdf" download="ResilientWebDesign-portrait.pdf" type="application/pdf">a <abbr>PDF</abbr> in portrait format</a> (7<abbr>MB</abbr>) or <a href="http://resilientwebdesign.s3.amazonaws.com/downloads/ResilientWebDesign-landscape.pdf" download="ResilientWebDesign-landscape.pdf" type="application/pdf">a <abbr>PDF</abbr> in landscape format</a> (19.9<abbr>MB</abbr>). There’s also <a href="https://resilientwebdesign.s3.amazonaws.com/downloads/ResilientWebDesign.epub" download="ResilientWebDesign.epub">an <abbr>EPUB</abbr> version</a> (4.4<abbr>MB</abbr>) and <a href="https://resilientwebdesign.s3.amazonaws.com/downloads/ResilientWebDesign.mobi" download="ResilientWebDesign.mobi">a <abbr>MOBI</abbr> version</a> (10.4<abbr>MB</abbr>).</p>
<h3 id="audio">Audio</h3>
<p>You can subscribe to a podcast feed of the book via <a href="podcast.rss"><abbr>RSS</abbr></a>, <a href="https://itunes.apple.com/podcast/resilient-web-design/id1183700985">iTunes</a>, <a href="http://www.stitcher.com/podcast/resilient-web-design">Stitcher</a>, or <a href="https://play.pocketcasts.com/web/podcasts/share?id=2432cc30-a380-0134-9123-3327a14bcdba">Pocket Casts</a>.</p>
<p>Or you can listen to individual <abbr>MP3</abbr> files: <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/introduction.mp3">Introduction</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter1.mp3">Foundations</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter2.mp3">Materials</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter3.mp3">Visions</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter4.mp3">Languages</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter5.mp3">Layers</a>, <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter6.mp3">Steps</a>, and <a href="https://resilientwebdesign.s3.amazonaws.com/podcast/Chapter7.mp3">Challenges</a>.</p>
<p>Or you can download <a href="http://resilientwebdesign.s3.amazonaws.com/downloads/ResilientWebDesign.mp3" download="ResilientWebDesign.mp3" type="audio/mpeg">one <abbr>mp3</abbr> file</a> of the whole book.</p>
<aside>
<h2>People are saying…</h2>
<figure>
<blockquote><p>I can’t stop reading <a href="https://twitter.com/adactio">@adactio</a>’s beautifully written and surprisingly awe-inspiring (and free!) Resilient Web Design.</p></blockquote>
<figcaption><a href="https://twitter.com/owltastic/status/808729669830840321">Meagan Fisher</a></figcaption>
</figure>
<figure>
<blockquote><p>Web folks: treat yourself to a read of <a href="https://twitter.com/adactio">@adactio</a>’s lovely new (and free!) book, “Resilient Web Design.”</p></blockquote>
<figcaption><a href="https://twitter.com/beep/status/808743523252047873">Ethan Marcotte</a></figcaption>
</figure>
<figure>
<blockquote><p>Only two chapters in and already loving <a href="https://twitter.com/adactio">@adactio</a>’s Resilient Web Design. A book about the web on the web!</p></blockquote>
<figcaption><a href="https://twitter.com/vlh/status/809031509135003648">Val Head</a></figcaption>
</figure>
<figure>
<blockquote><p>I just read three chapters of <a href="https://twitter.com/adactio">@adactio</a>’s Resilient Design book without missing a beat, it’s that good.</p></blockquote>
<figcaption><a href="https://twitter.com/jontangerine/status/808746883795587072">Jon Tan</a></figcaption>
</figure>
<figure>
<blockquote><p>If this isn’t already, it should become like a bible to any good dev who cares about web. What a gem by <a href="https://twitter.com/adactio">@adactio</a>.</p></blockquote>
<figcaption><a href="https://twitter.com/PetraGregorova/status/808750282402365440">Petra Gregorová</a></figcaption>
</figure>
<figure>
<blockquote><p>If you make things for the web, you owe it to yourself to read <a href="https://resilientwebdesign.com/">resilientwebdesign.com</a> by <a href="https://twitter.com/adactio">@adactio</a>.</p></blockquote>
<figcaption><a href="https://twitter.com/garrettdimon/status/808712440548589568">Garrett Dimon</a></figcaption>
</figure>
<figure>
<blockquote><p>Read this book, <a href="https://twitter.com/adactio">@adactio</a> states in more eloquent words than I could ever muster the histories and philosophies of what makes something webby</p></blockquote>
<figcaption><a href="https://twitter.com/Lady_Ada_King/status/809351047605055490">Ada Rose Edwards</a></figcaption>
</figure>
<figure>
<blockquote><p>There is nobody I trust more on matters of web design than <a href="https://twitter.com/adactio">@adactio</a>. I have read some of this book; it is excellent, beautiful and free.</p></blockquote>
<figcaption><a href="https://twitter.com/yoz/status/808736765141917696">Yoz Grahame</a></figcaption>
</figure>
<figure>
<blockquote><p>Just finished reading resilient web design. If you haven’t already, read it. It’s a short—but wonderful—read.</p></blockquote>
<figcaption><a href="https://twitter.com/samdbeckham/status/810214096108945408">Sam Beckham</a></figcaption>
</figure>
<figure>
<blockquote><p>Go, read, do something amazing for your brain today!</p></blockquote>
<figcaption><a href="https://twitter.com/megcarpen/status/808712799987724288">Megan Carpenter</a></figcaption>
</figure>
<figure>
<blockquote><p>Like a massive deep-sea cable powering the internet, <a href="https://twitter.com/adactio">@adactio</a> uses his experience and intellect to continue powering the web.</p></blockquote>
<figcaption><a href="https://twitter.com/antibland/status/809908354474602500">Andy Hoffman</a></figcaption>
</figure>
<figure>
<blockquote><p>Oh my. <a href="https://twitter.com/adactio">@adactio</a>’s Resilient Web Design is absolutely superb.</p></blockquote>
<figcaption><a href="https://twitter.com/fstorr/status/809861115731546113">Francis Storr</a></figcaption>
</figure>
<figure>
<blockquote><p>Resilient Web Design by <a href="https://twitter.com/adactio">@adactio</a> is an excellent read, and makes perfect sense. Highly recommended.</p></blockquote>
<figcaption><a href="https://twitter.com/metalheadscifi/status/809562182044282880">Matthew Graybosch</a></figcaption>
</figure>
<figure>
<blockquote><p>Just read <a href="https://resilientwebdesign.com/">resilientwebdesign.com</a> by <a href="https://twitter.com/adactio">@adactio</a> in one sitting. Lovely writing on the philosophy of the web.</p></blockquote>
<figcaption><a href="https://twitter.com/rupl/status/808975024094871552">Chris Ruppel</a></figcaption>
</figure>
<figure>
<blockquote><p>Anyone who teaches the web, works on the web or cares about the web should read this from <a href="https://twitter.com/adactio">@adactio</a></p></blockquote>
<figcaption><a href="https://twitter.com/robweir/status/808864179557978112">Rob Weir</a></figcaption>
</figure>
<figure>
<blockquote><p>Without a doubt, <cite>Resilient Web Design</cite> is a required reading for web designers and front-end developers everywhere.</p></blockquote>
<figcaption><a href="https://www.visualgui.com/2016/12/14/jeremy-keith-resilient-web-design/">Donny Truong</a></figcaption>
</figure>
<figure>
<blockquote><p>Just finished the wonderful <a href="https://resilientwebdesign.com">resilientwebdesign.com</a> by <a href="https://twitter.com/adactio">@adactio</a>. If you work on, or anywhere near, the web then read this now.</p></blockquote>
<figcaption><a href="https://twitter.com/mrwiblog/status/810985175207251968">Chris Taylor</a></figcaption>
</figure>
<figure>
<blockquote><p>Go read <a href="https://twitter.com/adactio">@adactio</a>’s “<cite>Resilient Web Design</cite>”—it’s wonderfully entertaining, enlightening and inspiring.</p></blockquote>
<figcaption><a href="https://twitter.com/adambsilver/status/810817065619779584">Adam Silver</a></figcaption>
</figure>
</aside>
</main>
<footer>
<p><cite>Resilient Web Design</cite> was written and produced by <a href="https://adactio.com" class="v-card" rel="me">Jeremy Keith</a>, and typeset in <a href="https://edwardtufte.github.io/et-book/"><abbr>ET</abbr> Book</a>.</p>
<p><small>Licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution‐ShareAlike 4.0 International License</a>.</small></p>
</footer>
<script src="js/scripts.js" defer></script>
</body>
</html>