Lab Notes

February 8, 2013 by Mackey

Creating a Timeline with Google Spreadsheet

I was looking at a timeline on KPCC.org (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:

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.

January 14, 2013 by Mackey

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.”

January 12, 2013 by Mackey

Dogged down with illustration

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

January 6, 2013 by Mackey

Playing with light

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.

[/one_fifth_last]

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.

Client introduction and brief consultation.
Client fills out Client Questionnaire so we can better understand the project, the target audience, the business or individual and their needs.
Proposal, Quote and Timeline
If the client accepts the Proposal, Quote and Timeline, then Contract/ First Payment
Discovery and Research/ Planning
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.
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)
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.
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.
Testing and Review. Testing of the site on all major browsers, review by the client and final modifications/edits.
After final testing and edits have been approved, we set a date to transfer the test site to the live site.
The site goes LIVE!

November 30, 2012 by Mackey

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!