As a full production, there would be about 17-20 personal, short stories, each by someone having played a unique role. This About page would have basic info about the Fringe festival (Wikipedia link), and project sponsors like a local city Fringe organizer and any cultural institutions.
The project seeks to demonstrate 2 things:
Audiences feel a connection to real people and their personal stories. Blogs, podcasts, and videos have brought them to a larger audience since 2004. And while individual stories can be interesting (and hugely popular) in and of themselves, when they’re written from multiple people around a common theme and collected in a single place, they gain greater ability to inform, influence, educate, or entertain. It depends on the publisher’s intent. Here are some applied examples.
While having high-quality, curated, and collected stories is important, the audience experience in a media-saturated world matters more so. This means having a pleasant visual design in both story listings and item pages, and a layout that focuses on the primary content and removes all extraneous elements. Secondary content, navigation, and additional functionality should be carefully designed and placed so they’re not necessarily intuitive, but rather available when most helpful and needed. Medium.com among other examples show how visual and interaction design decisions can make reading online quite enjoyable.
Since 2012, I’ve enjoyed attending small theatre shows in New York City, including the Fringe Festival. Having read about its origins in Edinburgh, Scotland after World War II, and that it’s now the world’s largest performing arts festival, I wanted to experience it firsthand in August 2014. So I went with the intention to both have fun and see if I could make some sort of media project out of the experience, using responsive web design. This approach uses fluid grids, flexible images, and media queries to make visual design and layout adjustments when the content is viewed in web browsers on different screen sizes. I’ve been very interested in the subject since reading a book about it by Ethan Marcotte in 2012, followed by learning about frameworks like Bootstrap and Foundation, and the importance of structured content so it can be easily targeted for adjustment by CSS and media queries.
At first, my intention was to make some sort of web documentary, journalism style. This would include photos, text, and short video clips using light and microphone attachments to my DSLR camera, as well as my smartphone. With the various media gathered over time, some sort of narrative and format would arise. Here’s what I did:
At the end of the fourth day, I had a basic website with preliminary media and an email signup form. I then applied with the media relations office for a press pass, outlining the project and passing along the website. It was rejected. Since I wasn’t going to be writing show reviews and didn’t work for an established company, it was understandable.
I also heavily researched web documentaries, their formats, and realized I was far in over my head to produce something that ambitious. The most I could reasonably foresee viably doing would be a long-form article about the festival. But since I didn’t have such an assignment with a publication, all I could do would be to self-publish on my purchased domain. That didn’t make much sense because I would rather have someone read it, in which case it would better be served on my Medium.com account, although there I wouldn’t be practicing any web development skills.
I began questioning the premise of “Experience”. Whose is it? Writers provide theirs as intermediaries on readers behalf. They’ll report facts, detail observations, collect quotes and stories, and provide a personal point of view explicitly through editorial, or implicitly through chosen and available coverage, editing, and the presentation order. For a bigger picture coverage, a publication will assemble the work of multiple writers into a feature.
But to get more personal, one has to cut that intermediary and go straight to the source.
I have long been inspired by the documentary storytelling work of Theron Humphrey for brands like Purina ONE with campaign: "Why We Rescue". It represents a viscerally engaging way for the audience to experience multiple stories, whichever ones seem most appealing (from a photo and some text), and in whatever order they want.
Although interviews provide a ready structure to guide both interviewees and the audience, and generally provide a much faster production turnaround time, there’s still an intermediary. For this project, I wanted to allow the subjects the freedom to fully express themselves and their story. Whatever it is, be it how they became interested in becoming a stage manager, the fear and excitement actors have before their premiere, or the difficulties and quirks with publicizing a show. Although this is merely a prototype with a single story, a full production would entail additional considerations like contributing writer selection, data workflows, editing, and promotion.
The project could live as a microsite on an existing domain or a custom one like FringeStories.com. The site was made with a tool called Typecast, which allowed me to drag and drop in HTML elements, reorder them, add breakpoints for variable widths, tryout webfonts from various foundries, and adjust properties, create and manage classes, and manually edit the CSS.
I chose a mobile-first site design because I had never done one before. This started me off with a fluid design assuming a screen smaller than 320 pixels. I then added breakpoints for a minimum width of 320, 480, 600, 768, 1024, and 1280 pixels.
The homepage includes a site navigation at the top, followed by a brief description and a list of stories to choose from. None of the stories have a title nor subheading because each story is focused on an individual and the unique role they played in the festival. Secondly, less text decreases readers’ cognitive load and the time to make a selection.
I floated the story items to the left, then adjusted the number of stories to show per line by adjust their widths as a percentage of their parent container size. So to have 1 story per line I used 100% width, 2 at 50%, 3 at 33%, and 4 at 25%.
The story page is designed to focus the reader’s attention solely on the text. I moved the site navigation to the bottom of the page and added negative space at the top to provide a breathing room. To ensure a comfortable readability, I used only 45-70 characters per line by placing asterisks at these points, then adjusting the text size and column width at each screen width so only asterisk would show on the first line. Additionally, I added sections to include contextual information about the story itself, and the writer’s background.
The resulting design was then exported HTML and CSS, further code edited in Brackets, and then uploaded to a web server. To date, I’ve tested the site on a 13" Macbook Air, iPad Air, iPhone 4S, and a Samsung Galaxy S5.
Not included in the prototype at this time are email subscription forms and social sharing buttons on the story page. Additionally, the story pages were designed only to hold text. CSS classes would have to be built for various photo and audio/video player sizes and attributes.
Lastly, to maximize the probability that each story would equally be read, I would have liked to randomize the order of stories listed.
A small project of this size would be headed by a production manager on a part-time basis. Contributing storytellers would be individually found through research and network outreach, contacted 2-3 months before publication, told about the project, and asked if they would like to participate. Depending on the nature and intention of the project, they would be compensated monetarily or in kind. Additionally, a copywriter or editor from within the organization or hired as freelance would be necessary.
Currently the site is simply static HTML and CSS. Although this does increase page loading speed, all content management would need to be handled by a web developer. If there’s a relatively small, fixed number of stories and media types (text, photos, multimedia), related content receive final edits, and all the content is published in a few intervals, a static website can be okay.
However if there will potentially be a large number of stories with lots of content and mixed media types, the need for on-demand edits, and regular interval based publishing, then having a CMS will be necessary. Additionally, the benefit of using a database will be that the structured content can be migrated elsewhere later.
In that scenario, a freelance developer would need to be hired to customize an existing CMS platform and page templates. For the visual design and theme, one can either purchase and customize an existing theme from an online store, or hire a freelance designer with experience in responsive design.
The stories can be published and promoted through communication channels individually when they receive final edits. This approach is particularly effective as part of a long term campaign, in which case it is best to launch with 3-5 finished stories. Every week for example, email subscribers and social media supporters would receive a new story, providing a consistent and meaningful connection to the publisher, organization, or cause. If there’s under 20 stories total though, I believe one can also publish them all at once and promote them either individually or as a collection.
First thanks goes to my advisor Karen McGrane for telling me to create a development log to accompany this project, so as to explain the process and intentions behind the scenes.
Secondly, I'd like to thank my Edinburgh roomates Joy, Matt, and Mark for being such lovely hosts and sharing their Fringe work experiences as publicists, writers, and printers respectively.
Thank-you Trevor Dawkins for sharing your story (so I can actually have a real one to use in this prototype!). And a final thanks to Typecast for such a cool responsive prototyping software and for their educational webcasts with designers.