-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwords_aprill_11_2018.html
61 lines (61 loc) · 6.45 KB
/
words_aprill_11_2018.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
<!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>.</p>
<h2>Translations</h2>
<ul>
<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_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>
</ul>
<script src="words.js"></script>
</body>
</html>