words/words.html at master · ramgp/words · GitHub

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

<!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>
</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 4KB. I didn't need a <em>Content Management System</em>, 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="http://bizbox.ca/kidlet/">a story about a squirrel</a>. She wasn't &quot;writing HTML&quot;; <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 &quot;no&quot;, 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></p>
<p><em>I'm writing a book on building and launching things on the web; <a href="http://buildandlaunch.net">you can find out more here</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>
</div>
</body>
</html>