Hands-On Project: Offsite Strategy

When I talk about having an “offsite strategy” meeting, I’m looking to get out of the office and have some good, “strategic” conversation over a cup of coffee or a beer. Back when I worked for a software development company, we did our best design work at a hot dog stand in Des Plaines, IL; since then, I’ve always found it more fun to conduct some “bidness” in the proper atmosphere …

This was the germ of an idea that suggested a solid (simple, easy-to-remember) domain name and an interesting excuse to get some hands on with newer web technology. I’ve wanted to build a Google Maps mash-up for some time, and I’ve been seeing a lot of stuff about jQuery on Twitter – so as a break from a high-profile project at work, I hacked together something over the past few months that was both fun and practical (because, of course, it’s important to be able to quickly locate a suitable meeting place …)

offsite logo v2

Lessons Learned

Actually, the practical lessons learned from this project have to do with understanding modern web technology, understanding technology at a reasonable depth, and discovering a new value prop for Twitter

  • If you are just starting out, try developing with web APIs, and augmenting your HTML and CSS with jQuery, mootools, Scriptaculous, or Dojo. Code not your style? You should be looking at Google Wave and the Semantic Web – two other things on my radar screen.
  • If you are into code – well, this stuff is definitely getting more interesting. I found jQuery to be powerful yet complicated, definitely tricky. CSS for flexible layout is kids stuff – get ready to dive back into debug mode. The goal, however, is not to become an expert – just develop a healthy understanding of what is simple and what is difficult.
  • Twitter and the real-time web took on a whole new meaning for me – I use Tweetdeck, and often set up searches to watch a keyword like “SAP“, “master data“, or “jQuery“. This has become a great source for better plugins, but you can also get a quick sense of the market – the best code gets the most RT‘s!

If you are an IT leader, you simply must be getting in depth with this stuff as soon as possible. Your Sales, Operations, and Finance counterparts are desperately looking for the Next Big Thing in cost savings and/or competitive differentiation – grab a mitt and get in the game!

Besides, I like to be able to understand the subtle nuances – what’s easy and what’s difficult – when the business starts to talk about collaboration, the cloud, integrations and interfaces, and usability. (Primarily so I can set their expectations correctly after seeing breathless demos and presentations from well-meaning vendors …)

A Work in Process

OffsiteStrategy.com is really best behaved in Firefox and Safari, but I have put a ton of time into the site to get it somewhat well-behaved in IE6 and IE7 (still a little quirky). I’ve still got a list of features to add:

  • I’m not stuck on the Chicago area – check out Boston and Cincinnati, for example. I am working on adding a Search box to the map, so you can find _your_ location, then look for my fave in your area. Next time I’m in town …
  • I don’t have as many photos as my daughters (14GB!!), but I have some that might be fun to share. Again, mostly just looking for a reason to mess with Picasa and the APIs available there
  • I’m still hacking away here at the blog, and over on Twitter – and I’ve looked at some interesting scripts to pull data from those two platforms over to OffsiteStrategy.com, for some interesting visualizations.

Of course, if you have any feedback – or suggested locations – please let me know.

Credits / Further Reading

Like any self-teaching hack, I’ve constructed the site as a mix of original stuff plus techniques cribbed from demos and samples of work from other web developers. In particular …

Google Maps

  • I’ve used the Google Maps API V3 as the basis for my Maps stuff. I have an API key, no big deal, but I just like the default navigation features that come with this version (try the scroll wheel to zoom in and out of the map – just like the real thing).
  • I got most of my ideas for the basic UI and map action from Marc Grabanski, but I had to augment a bit with stuff from this demo program to get the InfoWindows to work like I wanted.
  • I also needed this handy Lat/Lon tool to get the markers positioned exactly where I wanted them to go.

jQuery

A very nice library of routines, plus I’m amazed at how fast the universe of plugins is expanding. The important ones used on this site include …

  • Rik Lomas’ quickSearch plug-in, for the excellent filter action on the table of Locations
  • Christian Bach’s tablesorter – did you notice that you can sort the table by clicking the headers?
  • I have made some progress dealing with the shortcomings of IE6 – thanks to Andreas Eberhard and his PNG-Transparency fix.
  • The dropdowns underneath the icons come courtesy of jQuery Tools – good UI stuff. I think there is more there than tooltips, but that will be for another project.
  • I used Mathias Bank’s excellent plugin for parsing URL parameters – wanted to send nice-looking links in email to people, that would point them where we should meet.
  • When I’m done with a plugin (or my own code), and I’m keeping a local copy, I have used Dean Edward’s JavaScript Compressor web app. It works fairly well, although with some code I get quirky results with the compressed results – need to keep fiddling with that stuff.

CSS

This site got me back into practice with CSS – it’s been a while since I’ve worked in this area. I did add Eric Meyer’s CSS Reset to the site, another attempt at insulating the IE6 users from unfortunate look/feel issues.

Miscellaneous Tools

I also got a lot of mileage out of a couple of other web-based goodies:

  • There are many color tools online, but Color Schemer Online v2 was the best for letting me quickly go from hue to hex.
  • I got all of my icons from Iconspedia, a great source for free stuff. I did search a lot on the IconArchive site – good stuff, I just didn’t find any that I needed from there.
  • I’ve used the meebo chat widget before on my blog (up and to the right …); it’s pretty nifty, and I figured it would make sense to want to get a chat going while we are discussing where to meet up.

Source Code

If you are interested, just give me a shout (contact information here) …

This Post Has 0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles
Digital Transformation Automation

Simple Ways to Quickly Build Valuable Digital Experience

Practical thoughts and examples - how to manufacture time and attention, to get hands-on, relevant skills in new technologies

Read more

3D Printing Requires Wildly Different Thinking

Additive Manufacturing faces slow adoption in most industrial companies due to material costs - and the challenge for designers to think differently about what was previously impossible.

Read more