Creating a Timeline with Google Spreadsheet

I was looking at a timeline on (Public Radio’s website here in Southern California) and got to wondering how they could quickly put together a timeline with a simple graphical interface, with images and links.  My first thought was maybe they have a custom built module in there CMS that handles this, or maybe they are hand coding the whole thing on the fly, or maybe… but really this can’t be rocket science.

In most cases I only look for a solution when I have a problem.  I’ve never had a need to build a timeline on the fly, so I’ve never much looked at what was already out regarding developing interactive timelines.  But in this case my curiosity got the best of me and I had to look under the hood.

What I found was that essentially KPCC is using three scripts:

  1. Tabletop
  2. Timeline
  3. Handlebars

Now what’s cool is that all these timelines are being generated from Google Spreadsheets (WTF, so super easy). Basically here’s what being done :

  • They are creating a Google Spreadsheet using unique column titles, and storing each set of data in a row.  Pretty simple concept.
  • Then using Tabletop.js they are taking the URL of the Google Spreadsheet and making it accessible through Javascript.
  • What is generated from Tabletop.js is readable by Handlebars, which basically is the simplest of templating.
  • Then they use Timeline to create a vertical timeline which utilizes Isotope (another cool script) and bam you got yourself a timeline on the fly!

Outside of the timeline I could potentially see the mass benefits of using Handlebars and Tabletop, ie putting together a simple prototype of a database driven site before investing the time and money into the real thing, and so on and so on.

Chart shot

Snapshot of a chart we’re working on for Kevin Edge Photography, draft #1.

Something to live by

We’re getting married

You need a service, we deliver the service.

If only it was that simple.

As much as a project’s success relies on expertise, creativity, knowledge, hard work, etc. it truly all comes down to a great marriage.  And a marriage entered into quickly and without thorough vetting and common goals and aspirations is only headed for disaster.  But despite common interests and goals, the best marriages are full of communication, understanding, flexibility and trust.

I find with new clients that is important to build a strong foundation, which can help us through tough decisions and pit falls in the future.  I have never experienced a perfect project process (and firmly believe there will never be one), but if we both know we are working as hard as we can toward a common outcome — developing that trust — there is no road block big enough to stop us.

Why do I bring this up?  I recently stumbled across an article in Smashing Magazine: “Getting Engaged” — although I don’t agree with every tid bit in the article I do find that it essentially summarizes the client relationship fairly well.

So in the end I’ll pop the question and all you have to say is “I do.”

Dogged down with illustration

We’re currently working on a site for and here’s a little snippet of the How It Works page pre-production with some nifty illustrations. (:

Window Perfs Installed!

Just finished installing the window perfs at Pasadena City College Science Village along with PrintEfex.  They came out really great and add a new touch of color to otherwise bleak portables.  Awesomeness!

Playing with light

Our Website Process



This is when we find out about you and the project.  This includes requirements analysis, site map, defining roles, determine necessary copy, and project timeline.




This is probably the funest part.  We get to start seeing the site taking shape visually.  This includes wireframes, graphics creation, site mock ups, and all other visuals within the site.




This is when we take the visual design and turn it into a working website.  At this point we go MIA for a bit and have our noses stuck in the computer.  This includes XHTML, CSS, JS, PHP and any other programming necessary.  Basically we’re coding the site.




Test, re-test and re-test again.  At this point we have a working site in BETA version that is ready for review and edits.  Once we have thoroughly tested the site, we’ll move it from the test environment to the LIVE environment. And voala your site is presented to the world!




Fantastic we have a LIVE site! But that’s not where things end.  The web is ever revolving and your site should too!  Constant attention and maintenance is required to make sure you are getting the most out of your web presence. We offere maintenance packages as well as an on-going relationship to help you be the best you can.


Below is the normal website client process. Of course this may change dependent on the project, but for the most part this is a good starting place.

  1. Client introduction and brief consultation.
  2. Client fills out Client Questionnaire so we can better understand the project, the target audience, the business or individual and their needs.
  3. Proposal, Quote and Timeline
  4. If the client accepts the Proposal, Quote and Timeline, then Contract/ First Payment
  5. Discovery and Research/ Planning
  6. Wireframe and Sitemap.  This is basically an outline of the pages contained within the site and a graphic outline of the template of the site.
  7. Gather content.  I.e. photos, copy, videos.  Anything that will be included on the site for its initial launch.  (This can coincide with the other parts of the process)
  8. Design mocks of the site.  These are the 2d graphical representations of the site prior to any coding.  This is usually a 2-3 stage process of revisions.
  9. Development.  After the design has been approved by the client, the actual coding and templating process begins. Upon completion of the coding the client will have a working site to test.  This is all done on a test server.
  10. Testing and Review.  Testing of the site on all major browsers, review by the client and final modifications/edits.
  11. After final testing and edits have been approved, we set a date to transfer the test site to the live site.
  12. The site goes LIVE!

Disabling disabled drop down option on iPad

We encountered a small but annoying bug with the Apple iPad and Mobile Safari — a disabled drop down menu option is selectable! Well the simplest fix for us (since we had a alternate iPad version) was to stick this little jQuery script within our header and load after the whole page has loaded.  Hopefully it helps someone else out!

<script type=”text/javascript”>
jQuery(window).load(function () {
jQuery(‘select option[disabled]’).remove();

Mardi Gras Madness Logo

© 2015 Maxwell Rowe

Theme by Anders NorenUp ↑