Note! This article is part of a series (see here). In prior installments of this series (see here), we demonstrated tools used to develop JavaScript applications. In this installment, we define our first mobile development project.

We start by describing business requirements. Business requirements describe "what" the application does and "why" someone would use the application.

Typically, "business requirements" are published in a formal document. I'm not going to publish a formal document here. However, we'll follow the basic document outline. We are also going to combine business and functional requirements in this article.

First a summary of our project.

Last summer I read a great article published on A List Apart here: . A Case for Responsive Résumés by Andrew Hoffman. The author makes a compelling argument for publishing your resume in a format that it can be viewed on any type of device. I took a look at the author's demo here, using my mobile phone. Too me, that is a great looking resume and a great idea.

I need a new resume that reflects my web development skills. I don't have the design skills that Andrew Hoffman has (or any of the folks at A List Apart). However, I know a little about programming, web technologies. I think I can adopt the idea of a "Responsive Resume". I'll build an application to generate a "Responsive Resume".

Application Users
This application is intended to be used by developers. Folks like myself who are familiar with HTML and CSS. That means our application places the responsibility of valid markup on the user.

Application Workflow

One a full sized device (E.G. desktop or notebook) we'll create, update and publish versions of our resume.

We'll send our resume to other folks via a email (as an attachment).

The recipient detaches (downloads) our resume from our email message.

Once our resume is detached. our friends can view it with their mobile web browser.

Since a picture is worth a thousand words, here is a screen shot of my prototype application. Note! The following image is a screen shot of the application, thus the top menu. The published resume would look the same, that is, minus the menu (the published resume does not contain a menu).

Functional Summary
The published resume automatically adjusts it's layout to the device size.

The published resume adjusts it's layout when the orientation of the phone is changed (I.E. moved sideways, between portrait and landscape modes).

The application divides the resume document in to a grid of cells (I.E. rows and columns).

The user can add, move or delete rows.

The user can add columns to a row.

The user can delete columns from a row.

The use can add plain text to a column,

The user can add html markup (including inline CSS) to a column.

The application assigns a default CSS class to each columns parent element (I.E. cell container).

The CSS column parent class defines the column's width within the row.

The CSS column parent class can also define a columns indentation within a column.

The user can save the document's raw data to the web browser's embedded database (by clicking on the application's menu).

The user can save the document's raw data to their computer's file system (by clicking on the application's menu).

The user can publish the resume as a standalone html document (by clicking on the application's menu and completing a file dialog).

The published resume can use any CSS3 graphics (E.G. gradient background colors, shadow effects, transitions, etc.).

Other Function Features
The application works whether the host computer is online or offline. This is a stand alone application. There is no server requirement.

The application persists the user's work between (work) sessions. The application stores the resume raw data in the web browser's HTML 5 localStorage database (when the user selects store from the application's menu). The application stores the resume raw data in the file system (when the user selects "export raw data" from the application's menu.).

The user can maintain multiple versions of their resume by storing either the raw data or published html documents on a file or version control system.

The user can email the application itself to other users.

We distribute resume templates along with the application.

The user can create and publish their own custom templates.

The application bundles a customized version of the Twitter Bootstrap front-end framework. Thus, most non-JavaScript components of the Twitter Bootstrap front-end framework are available in the published resume document.

A Summary of Functions Not Included
The published resume must be viewed in an HTML 5 compliant web browser. The published resume does not support legacy web browsers.

The application only functions when run from within a HTML 5 compliant web browser. The application does not support legacy web browsers.

The application does not provide a move column function. The user can simply copy and paste as a simple work around.

The application does not validate html markup. The user is expected to validate the mark up.

The application does not validate whether the number of columns added to a row exceed 12.

The application does not automatically save the document. The use must explicitly use the application's menu to persist (save) their work.

The application dialogues are not designed to be used on a mobile phone.

The application does not support external entity references such as images. sound files, flash files, audio or video files. The user can use markup which references an external resource (E.G. image.png file), however the application does not provide support for resolution (E.G. the computer is off line).

In our next installment, we will work on the internal requirements. That is "how" the application performs it's functions.

About the Author:
Lorin M Klugman is an experienced developer focused on new technology.
Open for work (contract or hire).
Drop Lorin a note. Click here for address.
Please no recruiters :)
- Home