I’ve been talking about needing a new experiment for some time, and my whiteboard is now chock full of things to get to cracking on. Of note, one of the things that was missing is the poetry compliation that I’ve neglected to get started for this year (May 2010 – June 2011). Well, that’s now rectified, and an experiment done to boot.

A Little About Me and Poetry
Poetry is probably my oldest non-drawing art form. I’ve been writing since I was nine (9) years old, and doing spoken word performances since high school. I’ve spent a lot of time in prose, poetry, and psalms, and can pretty much say that I enjoy it a great deal.

After two poetry books were stolen from me in high school, I began compiling yearly collections. These compilations allowed me the freedom to write and explore, while also serving as a journal that I could look back on. Once I hit college, the idea of these compilations went full steam with me starting a new compilation in the two-month window of May-June, finishing each year with a month to reflect and reset.

This has been my practice every year since 1997, and there are a few thousand poems (and several hundred unwritten) to show for it. In the past years though, I’ve had a hard time keeping things together because I’ve grown tired of the weight and inflexible nature of the MS Word Document format.

Web As a Solution
One solution was to take my poems, and then publish each one as a blog entry, exporting the category to a more malleable document format for archiving and later reflection. This was difficult with many blogging systems, and even with the Mobile Web Server, I never got further than making the blog postings. I needed better.

This Year
This year, I’ve started a good bit later. For one, it has taken me a long time to see exactly what I’m doing with my life, and what kind of roles I’m responsible to. I’ve also got the data management question, and how to handle that. Well, yesterday saw me do one of those creative blitzes that changes things a bit for me.

I wanted a document format that would be simple for me to view on any device, but made sure to keep the details that I’d need for later reflection. I also wanted to make sure that whatever that I did, it would be web friendly, and at least make it easier to transport to various other services (poetry submission engines, Twitter, etc.).

I took some lessons from my frequent use of the S5 Slide Show System and went the route of creating from scratch a metadata filled document. This document would be one part interactive enough for me to be comfortable with sharing content, and another part contain the intimate notes that I value towards keeping for my writings.

The Method
I decided to create an HTML document from scratch. I would develop the metadata containers and lean on lessons about microformats that I’ve applied to my resume and business cards.

From a UI/UX perspective, I’ve always appreciated the landing page to Scripting.com and wanted something that essentially duplicated the functionality, without all of the JS to weigh down the page for various devices.

I started with the following metadata containers in an HTML5 structured document:

  • Header
  • Poem Container
    • Title
    • Body
    • Date
    • Description
    • Associated Links
  • Footer

The Header and Footer would be easiest, as these are simply duplicated from what I’d normally do in my Word documents. The rest would be difficult as I wanted to combine the idea of a table of contents with expandable regions for the poems to reside.

Also, the metadata fields tagged in the poem container were very important. If at any point that I’d want to convert this document into another format (likely) or add additional features and functionality (more likely), I’d need to make sure to nail on the initial go the logic and naming conventions here. From the initial design, all seems well on this account.

I then set about building first the HTML structure complete with dummy content. As any good web designer knows, you want to get your skeleton right before adding CSS and JS aspects. The more you do here correctly, the better and cleaner your code appears.

It took a few hours, but I was able to get a validated first prototype, with some good ideas into what the containers would look like closed and opened (sorry, I took no screens, was on a roll).

Adding the Styles

Adding styles can be hard or simple. With my MS Word document, I last did a style update about 3 years ago – to remove additional spaces, refine the table of contents, and clean things up for eventual exporting to HTML and PDF document types. This time around, I wanted to keep things simple, but also design so that I could easily go the route of making it printer friendly in v2.

The general design was nice and simple. The header was simply the title and some description text. Keeping with my general ethos, the description went align-right.

The footer was important to note a few things technically, but mostly I wanted to make sure that it simply got out of the way. The font and styling here reflected this idea.

A late design add – and something to go HTML5 with later – was the change of the font for the title “Elephants.” I wanted this to stand out, but also reflect some of the stability that my own personal brand has had. That went with a serif font and is the only main instance of color besides the notes section.

The notes (description) section and links sections I wanted to make look like a journal. So these were indented a bit more from the rest of the content, font made smaller, and then given a background following more of a note field than a blog comment or journal appendix.

jQuery to Make it Work

The hard part, and the bulk of the afternoon it seemed, was in making the open-close feature work. I’d worked with jQuery before, but its really been too long. I knew that it would be the smart bet for the functionality since it was already well optimized. I also knew that once I got to this point, that I’d nearly be done. I just wasn’t expecting how hard it was.

First, it took about a half hour to make the poem show correctly when clicking on the title. What I neglected to realize when building the HTML was how much I’d need to pay attention to class names and IDs here. Even with my proto, I kept running into an issue where I had to figure our how to name the containers for the poetry content in an efficient way, but not have to rewrite the script or CSS every time.

I then implemented the “hide” button (its the “close” button on the document) because I was getting frustrated. By this point though, I was comfy with showing my bro what I had done and got some great encouragement.

Within another hour or so, I was able to figure out the show/hide events, but still had the problem of managing class names and IDs.

To make this work, I needed to develop a method with the template container where I could use find/replace and a shortened naming convention to name both the function and the class names so that the show/hide worked properly. Once I did this, I was well on my way.

Adding the Poems

Just because I had not figured out a purpose for this year’s journals, I didn’t stop writing. In the midst of doing this, the title “Elephants” came out as something to roll with. There’s a small story behind it:

My best friend and I have often talked about in the past two years how we’ve moved from a place where we’d been hanging on the lessons and coattails of leaders around us; but increasingly being pushed outside of those lessons to apply them and bring up others. Given that we are both in our 30s, this is simply an obvious evolution of life.

For us, we often quote a line rapped by the one-time Cross Movement artist, the Ambassador, “…we were once monkeys on the elephants back, but now we’re the elephants other monkeys wanna stand on…”

More now than ever, especially since moving to MMM full-time, I’ve been asked to lead, direct, mentor, and do so by standing in this forest as an elephant. I wonder what elephants go thru… but I know that the best ones are always remembered.

So, with that in mind, I began copying over the poems already posted on the blog and twitter. This gave me a chance to look at my workflow, and to see if MS Notepad could sit tight as the editing platform (that’s right, this whole thing done in MS Notepad, chea). I would also be editing this on my smartphone – with a possibility for the iPad to take a few stabs here, so it needed to be tested from that standpoint.

After getting through the longer ones, I was able to find a flow, and will soon get the rest of my poems on there.

Privacy and Such

One of the aspects of this that I considered, but had not yet built into this project was the idea of securing my poems. I know where they’d be stored (mobile web server), and I’d have a good idea of how to track them, but still security is an issue since sometimes I write in a very personal nature.

I’ve done a few things to secure the code, and to implement some watermarking. But, there’s more that should be done here. When moving into being your own publishing platform, this is one of those kinds of questions that you need to have a clear answer to. I think I have one, but remember, I’ve got that extra layer of being on a web server that’s on a mobile device. Security concerns rise up a number of notches.

One of the next updates will address a few of my concerns, and it won’t be anything that you can see, but I’ll probably write some about it once its implemented.

Future Uses

One can’t build something like this from scratch and not talk about other uses. One of the things that I’d like to do with this template is to tune it for the already existing short story that I have (The Librarian and the Yellow Canoe). One of the biggest things that pained me about that project was that I could not keep the blog postings attached to the editing and sharing of each chapter. I’d like to rectify that, and make that project a much more pleasurable and interactive read. This template allows for that.

I also have it on task to write a book. Nope, not telling the subject. But, I’ve got an outline in progress and this template is an excellent format to use not only for personal keeps, but for linking to the various places that I’ll be collaborating with others about it. Should be fun.

Another thing that should be possible with this format is to adapt it to devices like the iPad by leaning on some of the lessons from an experiment that Russell Beattie had done that I remarked about some time ago. When content is built right, transformations like this are a better use of one’s design chops.

From This Stanza to Elephants

I’ve pretty much condensed much of what went through my mind and heart as I put this together. I can be very honest in saying that it took all of 8-10hrs to go from idea in head to document online. As I told my bro after I got to the test/cleanup phase, I am really excited about Elephants and this format.

Yes, it is very true that document formats and jQuery are very technical issues that most don’t care about. And its again true that many could care less about how I got to the title, and where my head is this year in respect to maturity in faith and life. However, these are those things that factor into who I am and how I teach myself those things which affirm my values. And I’m willing to experiment with such methods if it means that I’ll get to tread in places where others might not. Poetry (amongst other interests) has taken me many places for many years, I’d be foolish to let it stop now.

As for you, the reader, thanks for lasting this long in the post. Feel free to check out Elephants, and to offer your feedback on its interface and content to this Design Notes post.