Chris Essig

Walkthroughs, tips and tricks from a data journalist in eastern Iowa

New code: Using a Google spreadsheet to power a mobile site

with 3 comments

I’ve posted a new template on Github that I hope others will find useful. It involves using Tabletop.js to transfer data from a Google spreadsheet onto a mobile website. I’ve tried to create it so you have to do little tweaking of the code that grabs and formats the data so you can focus on collecting and cleaning the data. The template will render the same regardless of what data is in the Google spreadsheet.

It’s initial purpose was to power our guides to weekend festivals, since we have quite a few in the summer. We used it, for instance, for our guide to the National Cattle Congress fair, which was last weekend. And it was designed for mobile users, in particular. You will notice how the website kind of looks like an app you would download on your smartphone with navigation buttons at the button. But it was responsively designed so it will work on all computer sizes.

You can use it for whatever you like. You can also change the code to have the data displayed as you see fit. The whole project is open-sourced.

The code can be found here. If you use it at all, please e-mail a link to you work so I can share it with the world! My e-mail is chris.essig@wcfcourier.com.

Advertisements

Written by csessig

September 18, 2013 at 10:47 am

3 Responses

Subscribe to comments with RSS.

  1. This is really slick sir. Nice work. If you want to add some fun to handlebars, check out swag.js.

    Chris Keller (@ChrisLKeller)

    September 21, 2013 at 8:25 pm

    • Thanks man! Hopefully you can get some use out of it. It’s kind of like Tarbell but much simpler. It’s the same idea though. And thanks for showing my Swag.js. Great name, even better product!

      csessig

      September 22, 2013 at 4:30 pm

  2. […] The basic setup for the app is available on my Github page. This is a very similar setup mentioned in my last blog post. […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: