Writing For The Web

Will Moyer Designer Writer Microsoft Word Hater

Workflows What’s your process?

That’s just how I’ve always done it.

??? ???

“Workﬂow is understanding your job, understanding your tools, and then
not thinking about it any more.” —Merlin Mann

Low Friction Preservable Presentation Control Versatile Transferable Accessible

Word is a four letter word.

Proprietary Software Word Imperfect

Word Imperfect Proprietary Software Conﬂates Form & Content WYSIWYG Bad
At Its Job

“The word processor is a stupid and grossly inefﬁcient tool
for preparing text for communication with others. ” —Allin Cottrell

“I love emailing Microsoft Word documents back and forth with
my client.” —No One Ever

Plain Text An elegant weapon for a more civilized age.

ASCII (and you shall receive) Nobody Owns It Just Compose
No Hidden Formatting So Many Tools!

“Plain text is fast. It’s portable. It’s easy to edit
and easy to sync. All you need is a few helpers and you can write just about anything without depending on a word processor or the limitations it imposes.” —Brett Terpstra

What about how it looks?

Digital Your content is everywhere!

Do You Feel In Control? TVs, Laptops, Tablets, Phones Inﬁnite
Screen Sizes Browsers and Apps And the future…

SEMANTICS

HTML The building blocks of the web.

<html> <body> <h1>Writing For The Web</h1> <p>Here’s a paragraph. You
can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>

But I don’t wanna write HTML :(

<html> <body> <h1>Writing For The Web</h1> <p>Here’s a paragraph. You
can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>

body { font-family: sans-serif; text-align: center; } h1 { font-size:
54px; color: gray; margin-top: 44px; } p { font-size: 18px; }

<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Writing For The
Web</h1> <p>Here’s a paragraph. You can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>

Markdown Your new favorite tool.

# Writing For The Web This is Markdown. Look how
much more readable it is than HTML. Markdown gives us the beneﬁts of plain text, while still allowing for semantic markup, because Markdown can be converted into *everything* .

Writing For The Web

Writing For The Web

Will Moyer

More Decks by Will Moyer

Other Decks in Design

Featured

Transcript