Work Like a Web Writer: Adding Web UI Elements to Improve your Documents

by Ted Curran

I have been exploring what it would look like to write for the web instead of the desktop, by creating documents in Markdown and HTML rather than Word and Powerpoint. Instead of emailing files to people, I publish them online and then send someone a link. As I do this, I’m finding that I can use web design elements in my documents to make them more readable, organized and easier to navigate. Let me tell you about a recent example.

Tabbed Sections in a Document, thanks to composing in HTML, not DOCX

I recently had to prepare and present an over-arching plan for how our university could successfully embrace video in instruction. The plan touched on various different areas of our technology infrastructure, from individuals’ computers to our servers, cloud services, and even mobile devices. Writing it all out on a long, multi-page Word doc would have made it seem daunting and overwhelming for anyone to read and engage with. Instead, I wrote the whole thing in Markdown, and chose to make it as easy to visualize and navigate as possible.

I found that editing this document as a webpage rather than an Office document freed me to format my work using the many innovative user interface elements that people are used to seeing on websites. I was able easily add a nice tabbed interface using JQuery UI to break the document into manageable, logical sub-pages that the reader could easily browse through. (If that sounds scary to you, know that the code to do this is already out there for you to copy and paste, and there is great documentation to help you learn this simple skill).

When I was done writing the document, I simply posted it into the Public folder of my Dropbox.com account and sent a link to my colleagues via email.

There are many other features of JQuery (not to mention the many other UI libraries) that help you add nice graphical elements to organize your text. These are tricks that I would not have access to if I were simply writing documents in a Word processor. Now that I’ve decided to write in HTML, I feel like I have access to a much larger pool of options for how I want to present my work. I also have an authentic need to familiarize myself with those tools so I can match the HTML trick to the content I want to communicate. As a result, I grow more and more comfortable designing websites and mobile apps with every new web trick I master.

What do you think– could you see yourself working this way?