cacdesign.github.io/index.html at master · cacdesign/cacdesign.github.io · 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
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>bettermotherfuckingwebsite</title>
  </head>

  <body>
  	<div>
    <h1> This is <em>still</em> a motherfucking website. </h1>
    	<p> And it's more fucking perfect than the last guy's.
    	</p>
    <h2> Seriously, it takes minimal fucking effort to improve this shit.
</h2>
		<p> 7 fucking declarations.</p>
		<p>
			That's how much CSS it took to turn that <a href="http://motherfuckingwebsite.com/">grotesque pile of shit</a> into this easy-to-read masterpiece. It's so fucking simple and it still has all the glory of the original perfect-ass website:
			<ul>
				<li>Shit's still lightweight and loads fast</li>
				<li>Still fits on all your shitty screens</li>
				<li>Still looks the same in all your shitty browsers</li>
				<li>The motherfucker's still accessible to every asshole that visits your site</li>
				<li>Shit's still legible and gets your fucking point across</li>
			</ul>

		</p>

		<h3> And guess what, motherfucker:
</h3>
			<p>
			You never knew it, but it's easy to improve readability on your site. Here's how.

			</p>


	<h2> Let it breathe

</h2>
		<p>
		Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.
		</p>

		<p>
		If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.
		</p>


	<h2> A little less contrast
</h2>
		<p>
		Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.

		</p>


	<h2> Size Matters
</h2>
		<p>
		I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.

		</p>


		<h2> Line-width, motherfucker
</h2>
		<p>
		Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.

		</p>

		<h3> Yes, this is also fucking satire, you fuck
</h3>
			<p>
			I love what the creator of <a href="http://motherfuckingwebsite.com/">this site's inspiration</a> did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.

			</p>
			<p>
			<b>"You're a fucking moron if you use default browser styles." </b>
			- Eleanor Roosevelt
			</p>

	<h2> Epilogue
</h2>
		<p>
		Inspired by the geniuses behind <a href="http://motherfuckingwebsite.com/">motherfuckingwebsite.com </a> and <a href="http://txti.es/">txti</a>.
		</p>

		<p>
		This page—that isn't a total fucking eyesore—was created by<a href="https://twitter.com/drew_mc">me</a> with help from <a href="https://twitter.com/gabehammersmith">him</a>.
		</p>


	</div>
  </body>

</html>