-
Notifications
You must be signed in to change notification settings - Fork 0
/
words-april-22-2014.html
76 lines (72 loc) · 7.1 KB
/
words-april-22-2014.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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Words</title>
<style type="text/css">
body { font-size:18px; }
.wrapper { max-width: 600px; margin:0 auto; }
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36474980-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link href='https://plus.google.com/u/0/115056462967470089501' rel='author'/>
</head>
<body>
<div class="wrapper">
<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 probably 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 6KB. 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 really 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, or a client who is working with one, I'd like to challenge you to think about 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's "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>
<a href="https://plus.google.com/u/0/115056462967470089501?rel=author">On Google+</a>
</p>
<p>---</p>
<p><em>Want to build and launch your own products on the web? Looking to build an audience online? <a href="http://justinjackson.ca/newsletter">Subscribe to my newsletter</a>.</em></p>
<p><em>This post was originally inspired by Jason Fried's design of <a href="https://knowyourcompany.com/">Know Your Company</a>.</em></p>
<p>---</p>
<p><a href="http://justinjackson.ca/words_greek.html">Greek translation</a> - thanks to <a href="https://twitter.com/yiannis_k">Yiannis Konstantakopoulos</a></p>
<p><a href="http://justinjackson.ca/words_japan.html">Japanese translation</a> - thanks to <a href="https://twitter.com/Krizel77">Elle Kasai</a></p>
<p><a href="http://justinjackson.ca/words_afrikaans.html">Afrikaans translation</a> - thanks to <a href="https://twitter.com/LeoGopal">Leo Gopal</a></p>
<p><a href="http://justinjackson.ca/words_hun.html">Hungarian translation</a> - thanks to Hüperión Fordítói Műhely (Budapest)</p>
<p><a href="http://justinjackson.ca/words_maltese.html">Maltese translation</a> - thanks to <a href="http://mangionlightfoot.com">Vanessa Galea</a></p>
<p><a href="http://justinjackson.ca/words_brazil.html">Brazilian Portuguese translation</a> - thanks to <a href="https://twitter.com/heitorbelloni">Heitor Belloni</a></p>
<p><a href="http://justinjackson.ca/words_sv.html">Swedish translation</a> - thanks to <a href="https://twitter.com/mymarkup">Erik Stattin</a></p>
<p><a href="http://justinjackson.ca/words_ru.html">Russian translation</a> - thanks to <a href="https://twitter.com/artw_dev">Ярослав Wебком</a></p>
<p><a href="http://justinjackson.ca/words_it.html">Italian translation</a> - thanks to <a href="https://twitter.com/pixline">Pixline</a></p>
<p><a href="http://justinjackson.ca/words_ro.html">Romanian translation</a> - thanks to <a href="http://fr.linkedin.com/in/lucianpricop">Lucian Pricop</a></p>
<p><a href="http://justinjackson.ca/words_ch.html">Czech translation</a> - thanks to <a href="https://twitter.com/jenahajek">Jan Hajek</a></p>
<p><a href="http://justinjackson.ca/words_turkish.html">Turkish translation</a> - thanks to <a href="https://twitter.com/@opereysin">Opereyşın</a></p>
<p><a href="http://justinjackson.ca/words_chinese.html">Chinese translation</a> - thanks to <a href="https://twitter.com/ZhuangdaZhu">Zhuangda Zhu</a></p>
<p><a href="http://justinjackson.ca/words_korean.html">Korean translation</a> - thanks to <a href="https://twitter.com/hongminhee">Hong Minhee</a></p>
<p><a href="http://justinjackson.ca/words_fr.html">French translation</a> - thanks to <a href="https://twitter.com/plmd">PLMD</a> and <a href="https://twitter.com/framaka">Alexis Kauffmann</a></p>
<p><a href="http://justinjackson.ca/words_es.html">Spanish translation</a> - thanks to <a href="https://twitter.com/_ramgp">Ramón García-Pérez</a></p>
<p><a href="http://justinjackson.ca/words_nl.html">Dutch translation</a> - thanks to <a href="https://twitter.com/fschaap">Frank Schaap</a></p>
<p><a href="http://justinjackson.ca/words_de.html">German translation</a> - thanks to <a href="https://twitter.com/david_l991">David</a></p>
<p><a href="http://justinjackson.ca/words_polish.html">Polish translation</a> - thanks to <a href="https://twitter.com/_wolanski">Gregory Wolanski</a></p>
<p><a href="http://justinjackson.ca/words_farsi.html">Farsi translation</a> - thanks to <a href="https://twitter.com/kamyarns">Kamyar</a></p>
</div>
</body>
</html>