Tuesday Newsday: Magazines in Hours

It’s an interesting phenomenon we’re starting to see in a lot of tech and creative circles: what can you build in a weekend?

Charity event 24theWeb creates websites for charities who can’t afford them in 24 hours.

StartupWeekend gets developers and designers together for a weekend to share ideas, build technology and launch start-ups.

Ireland’s 24 Hour Universal Design Challenge creates inclusive design solutions to produce usable environments, buildings and products.

And now in magazines as well, we’re seeing some really fascinating experiments in “what can we publish, given a finite amount of time?”


Longshot Magazine Issue 2


Longshot has now created two issues of its 48-hour magazine. The second issue, published in July 2011 was created between noon July 29th, 2011 and noon July 31st, 2011. Its theme was “Debt”, and you can read a web version here: http://two.longshotmag.com/ or order from MagCloud if you want a print copy.

The Atlantic has a great article about the methods and tools Longshot used to create their magazine so fast: http://www.theatlantic.com/technology/archive/2011/07/the-almost-free-toolkit-we-use-to-make-longshot-magazine/242750/. In the article, Alexis Madrigal (who is both a founder of Longshot & a senior editor at The Atlantic) describes how they worked with thousands of people around the world who contributed content and managed things with free tools like Google Docs and Google Forms, raised money via Kickstarter, and posted updates to fans via Twitter, Tumblr and Google+.

Combining content from thousands of contributors, paring it down to the best of the best, editing and laying it out is no small feat. Doing it in a weekend is quite impressive. Unless you want to do it in a day…




If 48 hours just seems a little too laid back for you, 24HourMagazine was conceptualized, produced and printed all in a single day with the motto, “1 day. 1 magazine. Start to finish. Scratch to print.”

Founders Tuffer Harris and Sam Mulkay, along with volunteers, created 24HourMagazine in a 24 hour period including topics on fashion, design, music, and lifestyle. The endeavour resulted in a 47-page magazine with no advertisements using a system called Issuu. During the short project, they allowed viewers to check in on progress via photo and video feeds as well as blog and Twitter updates.

Unfortunately it looks like the website is no longer active. However, Cool Hunting has some screen shots of what the completed magazine looked like, and it’s quite beautiful indeed: http://www.coolhunting.com/culture/24-hour-magazin.php.


16HOURS Magazine


“Okay,” you’re thinking. “Now this is just getting ridiculous.”  Fear not: 16HOURS is not what you might expect given the above magazines. 16 Hours, as the website states, “is the time difference between Calgary, Canada and Sydney, Australia”, which is where the two designing founders of the magazine live.

16HOURS currently has three issues available, and their website mentions that they’ll be open to accept Instagram submissions for their next issue starting February 16th. So it seems the next issue could be just around the corner. Follow them on Twitter to stay up-to-date.

Like Longshot, you can purchase 16HOURS print or digital editions on the MagCloud site. Issues include content from artists all over the world and based on the previews on the site and on MagCloud, they are beautifully designed.



We often argue that we need more time, that we don’t have enough time, that our work would have been better if we had more time. But there is a need for deadlines, and restrictions have their place. Having unlimited resources, budget, and time may sound like a dream project, but with no goal post it can be tough to focus. Constraints force us to focus on the goal. The tougher the restrictions, the more creative we have to be.

Here’s an exercise to demonstrate the power of constraints:

  1. Pick one task you need to do this week: a blog post, a chapter of a book, something you’re cooking, some photos you have to edit, something that requires more creativity or thought than “dropping off the recycling” or “buying groceries.” (On the other hand, if you needed to save time, you could try ordering groceries online instead and see how it works out for you!)
  2. For whatever activity you choose, guesstimate how long it will take you. Give yourself half of that time to finish it. Impossible? See what happens. 
  3. Pick another task & give yourself 25% of the time you think you need to finish it. I take no responsibility, however,  if you attempt to cook a chicken in 30 minutes and make yourself sick.

One way this sometimes works for me is that I just get it done. An article I think will take me 5-6 hours and I only have 2? It’s got to be more focused, so I spend more time up front outlining what I need to write. Whereas usually when I have more time, I go slowly, letting any semi-related thought into an early draft, only to be edited out later.

Another thing that happens is that I don’t get it all done. I sat down to edit all ten billion of my photos from India tonight, and I only made it through 3 days of the trip. Oh well. But still: I made it through three days & I can share those with friends & family, versus before when I was waiting until I happened to have a spare eight hours. A spare eight hours does not accidentally happen, at least not to me. So now, instead of endlessly postponing a task & feeling guilty about it, I have some amount of progress, however small. A dent is a dent.



Websites can be designed & built in 24 hours. Design challenges to improve cities can be attacked in a weekend. A magazine can be produced in 48 hours or on opposite sides of the world. Whatever constraints are facing you are offering focus. Instead of assuming they’re hindering you, remember they’re there to help you progress.

Tuesday Newsday: Newspaper Developer Blogs

A common trait of successful online news and magazine sites is, surprisingly, a developer blog. Think of a developer blog as a look into the minds of the people building the site: what limitations they have, what they’re working on, what they believe their readers want or need, success stories of how they built interesting things, and even day-to-day tidbits that remind readers that the site is built by thinking, feeling people instead of a faceless entity.

  • I’ve heard many excuses for not wanting to have a developer blog:
    “Who would update the thing? Our team is busy!”
    No one wants to read stuff like this, they want to read the news.”
    We absolutely cannot publish this information, it’s secret. What if someone were to copy us?!”
    We’re developers, not writers. We wouldn’t know what to say.”
    Taking the time to write blog posts takes us away from being able to build the technology our team needs.”
    The list goes on and on.

But for teams who do make the effort to create and update developer blogs, the rewards are great. I’m going to walk through some of the benefits of creating a developer blog for your site, using excellent existing blogs as examples of how to do this well.



I believe very strongly that the best way to learn something yourself is to teach others and share your knowledge. This has become apparent to me from many directions including mentoring, teaching, writing tutorials, giving talks and training others. I always learn more each time I share with others.

This industry moves so quickly. Suggestions on things that work and things that don’t as well as best practices and “how to” articles are invaluable for people. A solid “why we did it this way” or “the fastest way to do x” type of article can save other developers a great deal of time and make them eternally grateful to you.  Google recently changed their Maps API Terms of Service, causing a lot of confusion. Chris Keller from Madison.com wrote about the changes and narrowed down the important bits for others affected by the change.

Madison.com Labs

At The Chicago Tribune, the team is not just interested in educating itself and its blog readers, but also the community. Joe Germuska blogs about his presentation to Hacks/Hackers Chicago in October, posting his slides and sites he referenced throughout his talk.

Chicago Tribune News Apps



It might not happen all the time, but occasionally your team may create new applications or methods of doing things which are so valuable they’re worth selling or licensing. In 2005, The Lawrence Journal-World newspaper from Kansas released an open source tool called the Django web framework, and they ended up spinning out a software division to sell their customized CMS now called Ellington CMS. A CMS coming from a media organization is a huge deal, since every media team I talk to vehemently hates their CMS.

Ellington CMS

The ProPublica News Apps team released a new feature earlier this month called DocDiver, and they announced this on their “ProPublica Nerd Blog.” The blog post included how it works, why they built it, and nerdy details on how it works. The project was built on top of the NYT DocumentViewer app and expands on that open source project.

ProPublica Nerd Blog



Recognition and respect are two of the most important things you can help your team members achieve. Developers and technologists who feel appreciated are more likely to stick around, work harder and be more loyal employees. Industry recognition for your team circles back to help your organization improve its image as well.

The Chicago Tribune has built a large collection of applications on Github which are available for others to view & fork: https://github.com/newsapps.

Chicago Tribune News Apps

Last week, Poynter.org published an article by Matt Thompson on why journalists should be ‘showing their work’ while they create and learn. He mentions paying it forward, building data literacy, increasing the impact of your work and more.




The worst thing that can happen to an industry is that it stagnates and no innovation occurs. Developer blogs are the perfect way to share your disruptive ideas with others who might be interested in doing something similar or building off of your idea.

My favourite example of this this year is from a Maine newspaper, The Bangor Daily News. Tired of a typically clunky workflow which involved a lot of cutting-and-pasting, the team built a new workflow out of Google Docs and WordPress. The Bangor Daily News dev blog is here: http://dev.bangordailynews.com/.  You can read more about their new workflow here: http://www.mediabistro.com/10000words/how-to-run-a-news-site-and-newspaper-using-wordpress-and-google-docs_b4781.  And here’s a short video showing the process:




What if you had a whole community of individuals you could get to give you input, suggestions, or even build things with your data and resources? Think of how much more you could achieve.

The Guardian’s Data Blog has done exactly that. A very active blog, The Guardian Data Blog releases new sets of data constantly in raw form. Sometimes they’ve been able to build charts or interactions to tell a story with it, and sometimes they simply provide the data. At the end of each article, they ask “Can you do something with this data?” and ask people to contact them or post visualizations on their Flickr page. 

The Guardian Data Blog

The result is a fascinating body of work, which is much more diverse having community input, and is definitely larger than what The Guardian could have produced on its own. That kind of interaction and dedication by a community makes your site and publication much more interesting and valuable.

The Guardian Data Blog Flickr Pool



My dad used to tell me, “It ain’t bragging if you’ve done it.” If your team has built something amazing, solved a really tough problem, or tried something crazy (even if it was a colossal failure!), why not tell the world? The New York Times launched its “beta620” labs project this year, and the site is specifically for trying out wacky ideas and experimenting. So far they have created some projects which are simply experiments they’ve learned from. But they’ve also created products like the Times Skimmer, which end up as full-fledged products in the main site or in their mobile apps.

The New York Times beta620



We all know hiring good developers, designers, UX designers, content strategists and other technology positions is tough and getting tougher. People want to work for respected organizations doing interesting things. Advertising for free on your developer blog that you’re using new technology or being creative is a wonderful way to help the right people find their way to you.

At The Guardian, they have been hosting “Guardian Hack Days” and “Developer drop-ins” this year, both of which help expose their team and technology to potentially excellent candidates for future hiring. A developer looking for his or her next role would find articles like these very telling about office culture, priorities and work ethic, all things which are near impossible to discover in an interview.

The Guardian Dev Blog



If you’re considering creating a developer blog for your news or magazine application, be sure to keep an eye on the following blogs which are great examples of how to write, teach, influence and share well:

ProPublica Nerd Blog :: http://www.propublica.org/nerds 
Bangor Daily News Dev Blog :: http://dev.bangordailynews.com/
Data Journalism Blog :: http://www.datajournalismblog.com/blog/
LA Times Data Desk :: http://projects.latimes.com/index/ 
Madison.com Labs Blog :: http://labs.madison.com/blog/
beta620 from The New York Times :: http://beta620.nytimes.com/ 
The Guardian Data Blog :: http://www.guardian.co.uk/news/datablog
Guardian Developer Blog :: http://www.guardian.co.uk/info/developer-blog
Chicago Tribune News Apps :: http://blog.apps.chicagotribune.com/

An Introduction to Treesaver

The CS Forum TimesIn my Content Strategy Forum workshop, we created a short, online magazine called The CS Forum TimesThe magazine used Treesaver to quickly layout the articles and images and make them work well on a variety of browsers and devices.  This is an overview of how we built The CS Forum Times and how you can do something similar very quickly and easily.  The before and after files we used are located here for you to download.


To create your own online publication, the simple steps are as follows:

  1. 1) Source your content
  2. 2) Source your art/imagery
  3. 3) Create a new HTML file for each article & paste in the content
  4. 4) Style using an HTML editor
  5. 5) Resize images if necessary & add in image tags
  6. 6) Edit the TOC file & make sure you’ve included each article
  7. 7) Upload to your server



With The CS Forum Times, I chose published articles from well-known speakers and organizers of CS Forum 2011.  Using content that is on the web makes it much easier as converting content from a PDF or Word document into HTML can be a pain.

NOTE: As this is just a short, proof-of-concept tutorial, I am not covering rights management, copyright, asset management, etc.  It is your responsibility to make sure you have the right permissions to reuse and publish material that is not yours or not original.



I was lucky with the articles I found in that most of them already had relevant artwork in the articles.  For a couple of the longer articles, I also added things like company and conference logos as well as headshots.

I wanted to have a cover, but it may or may not be necessary for your title.  I did this simply by creating a few full-page sized images in an image editor using logos and text from the event.



Now here I’ve helped you out by creating a small boilerplate zip file.  Inside the WorkshopBegin folder you’ll find everything you need for a simple Treesaver magazine.  Index.html is a sample cover page.  Page1.html is a sample article page.

The best thing to do is duplicate page1.html for each article you have.  So if you have four articles, copy it three times and rename them so you have page1.html, page2.html, etc. Or use better names that make more sense to you. 

Inside page1.html I’ve added two comment tags that look like this:
Inside those two lines is where you want to paste the content of the article.  What are you actually pasting? Lets say we’re including my last blog post: http://martharotter.com/blog/index.php/2011/09/cs-forum-2011-my-workshop-slides-content/.  I can copy & paste from the browser, starting with “Last week…” and ending with “…excellent places to start.”  Alternately, I can do a “View page source” from my browser to take all the HTML styling with me and save me some time later.  So instead I would be starting with whatever comes after “<div class=”entry-content”>”, which is how WordPress tells you the blog post text is starting.  That would have me copying starting with “<p>Last week I …” and ending with “…</a> are excellent places to start.</p>”



If you copied HTML content including the tags, you may not have to style it.  However it’s more likely that you’ll want to do a bit of styling to create paragraph breaks, make headings stand out, etc.  If you use any HTML editor such as CoffeeCup, BBEdit or something similar, then go ahead and open your new HTML files there and give them some style.  Take it slow at first and check frequently to make sure it’s looking the way you’d expect.

Due to browser security restrictions, the files will appear most accurate if you view Treesaver content running in a local web server.  A free app like XAMPP (works on Windows, OS X, Linux) is easy-to-use and adequate for viewing the files on a local server and checking to make sure they look and work right.



As you may notice if you resize your browser, Treesaver will adjust the image used for your content.  This has some great benefits, including mobile devices will not try to download an enormous image and then resize it and differently sized images don’t have to be of the same thing.

But those benefits do mean that you will need to resize and save your images at a few different sizes.  I’d recommend going for at least two, one for a mobile device (width of 280 or so) and one for a desktop browser (width of 600-ish), but you can create more depending on your style.  For the cover page, as an example, I created three to make sure the full-size image fit well for the viewer.

Any image editor will work fine, you just need to resize the image (keep the proportions intact) and save it with a different name.  I typically add the width to the end of the image file name to keep them straight.  So if my initial image was headshot.jpg, I resize and end up with headshot-280.jpg & headshot-600.jpg.

Editing the image tags can be tricky so be careful.  Each set of resized images must be enclosed in a <figure> tag.   The image tags themselves should have their height & weight attributes set.  So as an example, the two images above might look like this at the end of the html file:

    <img data-sizes=”single” src=”
width=”280″ height=”130″ />
    <img data-sizes=”double” data-src=”headshot-600.jpg”
width=”600″ height=”280″ />

The image tags are to be placed in the corresponding article’s HTML file.



The last thing you need to do before you upload is edit the Table of Contents file.  The TOC file specifies the order of the articles and which ones are included so it’s very important.

For each article to be included, you’ll need a hyperlink to the article with the attribute “itemprop=url”.  A typical article might look like this:

<div class=”keeptogether” itemscope>
<h5 itemprop=”title”><a itemprop=”url” href=”
article1.html“>My First Article</a></h5>

The TOC file can get more complex including things like advertisements, an actual page for the TOC (the one included keeps itself hidden) with titles, bylines & thumbnails, etc.  We’re keeping it as a simple list of article titles here.



Once you have everything ready to go and you’ve checked it out in XAMPP or another local file server, you’re ready to upload everything onto your server.  You’ll need to include everything that was in the .zip file including resources.html, style.css and your edited article and TOC files.  You’ll also need the image files you resized, whether they’re in the same folder or a subfolder.  Upload all of that to your webserver and navigate to it in a browser.  Voila!  Your brand new publication is online and live.



treesaver logoYes, this is a very short overview.  Treesaver is quite powerful in terms of what it can do and I’ve tried to minimize as much complexity as I could to make it a fast tool to get started with. To learn more, check out the discussion on Google Groups and walk through the tutorial on GitHub.  To do more with Treesaver you’ll need to start to understand how the resources.html & style.css files depend on each other to define the layout and customize content further.  There’s a bit about this in the GitHub tutorial, but it takes some time to get your head around it.



I know, I know, cut-and-paste is not a valid tool or method of publishing.  Treesaver is new and still building its community.  I hear there are folks working on plug-ins for a few popular CMSs like Expression Engine, WordPress and Drupal.  Your best bet for the latest news on those is the Google Group.  If you are working in an organization with a custom CMS, your tech team can look at Treesaver to see if it’s an option for them to build a plug-in for it.



If you give it a shot, please be sure to let me know how it goes.  If you get stuck or confused, e-mail me or check the Google Group discussions for more information.  If there are additional pieces that are tricky or could use some more clear instructions, let me know and I’ll do a more in-depth piece on specific sections.  Good luck and publish away.