-
Notifications
You must be signed in to change notification settings - Fork 0
/
words.html
219 lines (219 loc) · 8.43 KB
/
words.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Words</title>
<link href="words.css" rel="stylesheet" />
</head>
<body>
<h1>This is a web page.</h1>
<p>There's not much here.</p>
<p>Just words.</p>
<p><strong>And you're reading them.</strong></p>
<p>
We've become obsessed with fancy designs, responsive layouts, and scripts
that do magical things.
</p>
<p>
<strong>But the most powerful tool on the web is still words.</strong>
</p>
<p>
I wrote these words, and you're reading them: <em>that's</em> magical.
</p>
<p>
I'm in a little city in British Columbia; you're probably somewhere else.
I wrote this early in the morning, June 20th, 2013; you're reading it at a
different time. I wrote this on my laptop; you could be reading this on
your phone, a tablet or a desktop.
</p>
<p>
You and I have been able to connect because<em> I wrote this </em>and
<em>you're reading it.</em> <strong>That's the web</strong>. Despite our
different locations, devices, and time-zones we can connect
<em>here, </em>on a simple HTML page.
</p>
<p>
I wrote this in a text editor. It's 6 kB. I didn't need a Content
Management System, a graphic designer, or a software developer. There's
not much code on this page at all: just simple markup for paragraphs,
hierarchy, and emphasis.
</p>
<p>
I remember teaching my daughter to code HTML when she was 8. The first
thing she wrote was
<a href="https://justinjackson.ca/squirrel">a story about a squirrel</a>. She
wasn't "writing HTML";
<strong>she was sharing something with the world</strong>. She couldn't
believe that she could write a story on our home computer, and then
publish it for the world to see. She didn't care about HTML; she cared
about sharing her stories.
</p>
<p><strong>You are still reading.</strong></p>
<p>
Think about all the things you could communicate with a simple page like
this. If you're a businessperson, you could sell something. If you're a
teacher, you could teach something. If you're an artist, you could show
something you've made.
<strong>And if your words are good, people will read them.</strong>
</p>
<p>
If you're a web designer, I challenge you to think about the words first.
Instead of starting with a style guide or a Photoshop mockup,
<em>start with words on a page</em>.
</p>
<p>
What do you have to say? If you don't know, there's not much use in adding
all that other cruft. <strong>Just start with one page</strong>, with a
single focus. Write it and publish it, and then <em>iterate on that</em>.
Every time you're about to add something, ask yourself: does this help me
communicate better? Will that additional styling, image, or hyperlink give
my audience more understanding? If the answer is "no," don't add
it.
</p>
<p>
<strong>At its heart, web design should be about words</strong>. Words
don't come <em>after</em> the design is done. Words are the beginning, the
core, the focus.
</p>
<p>Start with words.</p>
<p>
Cheers,<br />
Justin Jackson<br />
<a href="http://twitter.com/mijustin">@mijustin</a><br />
</p>
<p class="note">
Do you like to make stuff on the web?
<a href="https://justinjackson.ca/newsletter"
>Subscribe to my newsletter</a
>.
<br>
I also like <a href="https://transistor.fm/how-to-start-a-podcast/">creating podcasts</a>.
</p>
<h2>Translations</h2>
<ul>
<li>
<a href="words_ar.html" hreflang="ar">Arabic</a> – thanks to
<a href="https://ayoodeh.com/"
>Muayyad Jesry</a
>
</li>
<li>
<a href="words_sl.html" hreflang="sl">Slovenian</a> – thanks to
<a href="https://www.linkedin.com/in/leon-%C5%A1krilec-67317792/"
>Leon Škrilec</a
>
</li>
<li>
<a href="words_ca.html" hreflang="ca">Catalan</a> – thanks to
<a href="http://jordinebot.me/">Jordi Nebot</a>
</li>
<li>
<a href="words_af.html" hreflang="af">Afrikaans</a> – thanks to
<a href="https://twitter.com/LeoGopal">Leo Gopal</a>
</li>
<li>
<a href="words_pt-BR.html" hreflang="pt-BR">Brazilian Portuguese</a> –
thanks to <a href="https://twitter.com/heitorbelloni">Heitor Belloni</a>
</li>
<li>
<a href="words_zh.html" hreflang="zh">Chinese</a> – thanks to
<a href="https://twitter.com/ZhuangdaZhu">Zhuangda Zhu</a>
</li>
<li>
<a href="words_cs.html" hreflang="cs">Czech</a> – thanks to
<a href="https://twitter.com/jenahajek">Jan Hajek</a>
</li>
<li>
<a href="words_da.html" hreflang="nl">Danish</a> – thanks to
<a href="https://makey.biz" hreflang="en">Anders Gerlev Hansen</a>
</li>
<li>
<a href="words_nl.html" hreflang="nl">Dutch</a> – thanks to
<a href="https://twitter.com/fschaap">Frank Schaap</a>
</li>
<li>
<a href="words_fil.html" hreflang="fil">Filipino</a> – thanks to
<a href="http://nearamos.tk/">Nearamos</a>
</li>
<li>
<a href="words_fr.html" hreflang="fr">French</a> – thanks to
<a href="https://twitter.com/plmd">PLMD</a> and
<a href="https://twitter.com/framaka">Alexis Kauffmann</a>
</li>
<li>
<a href="words_de.html" hreflang="de">German</a> – thanks to
<a href="https://ihmels.com">Yannick Ihmels</a> and
<a href="https://twitter.com/david_l991">David Lucas</a>
</li>
<li>
<a href="words_el.html" hreflang="el">Greek</a> – thanks to
<a href="https://twitter.com/yiannis_k">Yiannis Konstantakopoulos</a>
</li>
<li>
<a href="words_hebrew.html">Hebrew</a> – thanks to
<a href="https://twitter.com/cunningstudent">Shachaf Rodberg</a>
</li>
<li>
<a href="words_hu.html" hreflang="hu">Hungarian</a> – thanks to Hüperión
Fordítói Műhely
</li>
<li>
<a href="words_ind.html" hreflang="id">Indonesian</a> - thanks to
<a href="https://twitter.com/Panduan_IM">Darmawan</a>
</li>
<li>
<a href="words_it.html" hreflang="it">Italian</a> – thanks to
<a href="https://twitter.com/pixline">Pixline</a>
</li>
<li>
<a href="words_ja.html" hreflang="ja">Japanese</a> – thanks to
<span>Elle Kasai</span>
</li>
<li>
<a href="words_ko.html" hreflang="ko">Korean</a> – thanks to
<a href="https://twitter.com/hongminhee">Hong Minhee</a>
</li>
<li>
<a href="words_mt.html" hreflang="mt">Maltese</a> – thanks to
<a href="http://mangionlightfoot.com">Vanessa Galea</a>
</li>
<li>
<a href="words_mn.html" hreflang="af">Mongolian</a> – thanks to
<a href="https://plus.google.com/107991474876405169669/posts">Ocho</a>
</li>
<li>
<a href="words_fa.html" hreflang="fa">Persian</a> – thanks to
<a href="https://twitter.com/kamyarns">Kamyar</a>
</li>
<li>
<a href="words_pl.html" hreflang="pl">Polish</a> – thanks to
<a href="https://twitter.com/_wolanski">Gregory Wolanski</a>
</li>
<li>
<a href="words_ro.html" hreflang="ro">Romanian</a> – thanks to
<a href="http://fr.linkedin.com/in/lucianpricop">Lucian Pricop</a>
</li>
<li>
<a href="words_ru.html" hreflang="ru">Russian</a> – thanks to
<a href="https://twitter.com/artw_dev">Ярослав Wебком</a>
</li>
<li>
<a href="words_es.html" hreflang="es">Spanish</a> – thanks to
<a href="https://twitter.com/_ramgp">Ramón García-Pérez</a>
</li>
<li>
<a href="words_sv.html" hreflang="sv">Swedish</a> – thanks to
<a href="https://twitter.com/mymarkup">Erik Stattin</a>
</li>
<li>
<a href="words_tr.html" hreflang="tr">Turkish</a> – thanks to
<a href="https://twitter.com/opereysin">Opereyşın</a>
</li>
<li>
<a href="words_vietnam.html">Vietnamese</a> – thanks to
<a href="https://twitter.com/littl3monk">Nam Quach</a>
</li>
</ul>
<script src="words.js"></script>
</body>
</html>