I’ve been wanting to make Clicky take advantage of larger screens for a long time but there were a lot of challenges involved beyond just changing the width of the site container. (I know that sounds pretty lame but just trust me).
But after last week’s release of our new Segments feature, it was clear this needed to be the next major project. Segments are great, but they take up a lot of horizontal space which really crippled a few reports. For example, the Links (referrers) report:
[Note: Click any of these screenshots to see a full sized version]
That just killed me, having every referrer be basically unreadable beyond the domain name. Well, here’s what that report looks like now:
Much better, eh?
Here’s a summary of what’s changed:
- Instead of a fixed width of 960px, the width is now dynamic with min/max boundaries of 960px and 1200px. We wanted to make sure everything still worked fine with the old width (e.g. this is important for some of our white label customers who have Clicky integrated via iframe), but let people with larger screens take advantage of them.I’m not really a fan of sites that go the full width of your browser window, as I feel the readability suffers on really large monitors. I tested various max widths and anything over 1200 just felt wrong. BUT… my opinion on that may change. Feel free to try and convince me.
- We now have the browser do string-shortening for us, instead of doing it on the backend. This always ensures that the text takes up the full width available, which was extremely important in order to support a dynamic width. Doing it on the backend has also always been a major issue for non-English character strings, as our old shortening code was not “multibyte friendly”, so I’m glad that’s behind us now!This was the major challenge of this release. The basics of it are of course dead simple, but it’s the small details that matter. The voodoo magic I had perform to get this to work in all the variety of scenarios I needed it felt like I was jamming a square peg through a round hole over and over (and over) until it finally fit.
- Spy looks gorgeous. We got a much higher-res map, combined with the wider screen, it’s killer. (Screenshots below). We’ve also moved the controls (e.g. map zoom) to the top left corner so they’re in a fixed position instead of moving around when the map size changes.
- There’s not really any “small” text anywhere anymore. Now that we have so much more room, the font sizes (almost) everywhere now are more of a “normal” size, which makes things a lot more readable.
- The main site dashboard and the user homepage both need some work to take better advantage of all the extra space, but I didn’t feel delaying this release was warranted just for that. I wanted to take some time to think up and test different ideas. For example one thing I’m considering is having an option for a third column on the dashboard. So hopefully we can get some updates out to those in the next few weeks.
SPY VS SPY
Here’s a few screenshots comparing the old Spy to the new one. Click any of them to see full size!
OLD SPY 🙁
NEW SPY 😀
This was heavily tested with all 5 of the major browsers, and everything is cool, including all the way back to IE7. However there are bound to be a few bugs so please let us know if you experience any layout issues. Screenshots and details of your OS/browser version are of course appreciated.
