Browse By

Why Write for Paper? Or ‘How I Learned to Stop Worrying and Love HTML’

I’ve been blabbering on recently about #Markdown here on TedCurran.net, and I just managed to interest a roomful of seemingly sane people why putting weird characters all over your writing is a good idea. I’m taking this as a sign that people get it– we need to write for the web, not the desktop.

English: A text written on Toilet paper Portug...

English: A text written on Toilet paper Português: Texto escrito num papel higiênico. (Photo credit: Wikipedia)

The Dream of the Nineties

A lot of us work in a place where “publishing” a document often means saving it as a PDF and emailing it to someone. Our collaboration spaces become storage sheds for folders and folders of files and folders. The problem is that it’s very difficult to search the contents of all these closed documents and idiosyncratically named folders to find the information you’re looking for. Worse, these files end up “siloed” in different people’s inboxes instead of being generally accessible for people to learn from. Accessing each document requires expensive, proprietary tools with compatibility issues. This is the pre-Internet way of working.

The Web is Here to Stay

Unlike proprietary desktop software like Microsoft Office or Adobe Acrobat, the web is built on the free, open text markup language, HTML. HTML is just plain text with some added formatting to help your browser understand what your document says. By formatting your work in HTML, you also make it easier to for your computer (and web browsers) to search and find information in your work. Text and HTML can be edited and viewed with free tools on any type of computer or smart device, and can be shared easily on the web.

The Learning Management System (or even your blog) is one example of “the cloud”– a shorthand term for shared web collaboration space delivered over the Internet in a browser. From Gmail to Facebook to blogs, wikis, file dropboxes and YouTube, cloud services let you share all kinds of content in a visual format.

I have been coming around to the opinion that I need to permanently adjust my way of working to make it easier to post my work on the web for others to read. Writing in Word is like writing for the desktop, and I’ve decided that my daily habit is going to be to write in text, markdown, or HTML for the web only.  I’ve been relying on the “what-you-see-is-what-you-get” tools built into my Office documents, my LMS, my blog– and I’m always coming up against the limitations of those WYSIWYG tools. By “protecting you” from learning HTML, they also insulate you from understanding a few basic formatting tricks that could make your documents look great. They are simplifying your inputs, but they’re always, necessarily limiting what you can do. As more and more of our collaboration and documentation moves to web-based formats, it’s increasingly clear that proficiency with Office documents is not enough– you need to know how to write for the web.

Where does Markdown Fit In?

In learning Markdown, I feel I’ve gained a simple addition to my workflow that makes a big difference in my collaboration. Markdown lets me do basic styling of my documents, organizing it into a nice outline format and adding nice Text Effects that can be converted into beautiful HTML and posted to the web.

I have gotten myself in the habit of peppering my writing with a few basic markdown tags that organize my document into a well-structured web page. Ready to learn a few?

Some Markdown tags for Beginners

Headings

One of the most important and underused features of HTML is Headings. These allow you to create a hierarchy to organize your writing into headings, subheadings, and sub-sub headings. This is very important for visually impaired people who access your work, as screen-reader technology scans through a document’s headings to help people navigate the page. It also helps everyone create more visually appealing documents with little fuss.

In HTML, Headings are numbered from H1 (the document’s main title) through H2 (subheadings), H3 (sub-sub headings) and so on. The HTML looks something like this:

<h1>What I did this Summer</h1>

<h2>Fishing with Dad</h2>

<p>This summer I went fishing with Dad. We had lots of blah blah blah…</p>

<h2>Trip to Paris</h2>

<h3>The First Week in Paris</h3>

<p>Our first day in the city of lights was eventful to say the least. Blah blah blah…</p>

and it produces formatting that looks like this:

What I did this Summer

Fishing with Dad

This summer I went fishing with Dad. We had lots of blah blah blah…

Trip to Paris

The First Week in Paris

Our first day in the city of lights was eventful to say the least. Blah blah blah…

Notice how the addition of headings organizes my document neatly into an outline-style format. The headings are also styled so that the big idea (the H1) appears bigger than the supporting ideas (the H2 and H3 headings). This saves me from having to bold and resize the text on my document– my blog does it for me.

 

 

So while I’ve been learning how easy it is to produce great looking HTML without actually coding it, I’ve also been learning about all the cool things you can do with your information once it’s encoded into properly semantic code.

Tools like rvl.io can take your headers and paragraphs and turn them into HTML5 presentation slides. You can create great looking presentations by just entering some HTML headers and bullet points.

You can start a website just by posting HTML pages into your Dropbox.

In other words, it breaks down the barriers between where you work and where you share. HTML can be pasted into email, onto websites, your blog, your intranet, and most any other web-based communication platform you use. If you make a commitment to working this way, you will find you’ll pick up the most common HTML and CSS tricks as you work. If you’ve ever wanted to learn to build a webpage, try Markdown first. It’s the easiest way to get your feet wet while building towards high quality web design.

Liked this post? Follow this blog to get more. 

Please share your thoughts!

%d bloggers like this: