In a few months Clicky will celebrate its 13th birthday, and I’m happy to say it is now (finally) 100% mobile friendly, and our old dedicated mobile site is history. Almost everyone used the normal version of Clicky on their phones anyways, but now it should be a much better experience. This has been one of our biggest feature requests of the last 5+ years so I’m thrilled it’s arrived!
Oh and we have a new dark mode too:
You can imagine a service as big and old as Clicky has built up a lot of cruft over the years! Making Clicky mobile friendly was going to be a big project no matter what, but I knew I was going to be updating so much of the layout code anyways that I should take the opportunity to gut it all and redo most of it from scratch and get with the times in terms of modern web design (e.g. CSS variables, and layout using grid and flex instead of floats and tables). This of course made the project considerably bigger, but I’m thrilled with the result, which we pushed out on Friday July 19.
Grid and flex are designed to be mobile friendly from the start. E.g. the dashboard now collapses into a single column on a narrow screen, without any silly javascript or media queries or anything. Just, BAM. It’s great! We do use media queries to hide some other elements on narrow screens now as well, that’s something we could have done before to make things slightly better, but trust me this update is a lot more than media queries.
Any change brings negative feedback to some degree but people have actually been reaching out in big numbers to say how much they like the change, which is encouraging (that’s never happened before). But we are listening to the feedback. The biggest complaint people have had is that it’s “too bright”. The main reason it feels brighter is because we no longer have alternating row colors. This was not originally planned, but CSS grid does not have selectors for rows (which is honestly my only real complaint with grid – it’s amazing otherwise) so you can’t style them directly. You can style cells in a row but then you can’t use e.g. grid-gap without looking ridiculous.
I was unsure initially about losing the alternating row colors, but I got used it very quickly and I think most of you will as well. But based on feedback so far, just this morning (Monday) I pushed out a few tweaks so the tabs and links are slightly darker, and there’s a little more padding on most of the grid elements (which was the second biggest complaint, that things were too tight). We’ll continue to tweak things as we hear more feedback but beyond the initial shock factor, we think most of you will get along just fine.
Here’s some other things of note with this update:
Themes
We moved all colors over to CSS variables (“custom properties”) which allows for easy theming. Right now we just have a dark mode as an option but we will be adding a few more options in the future. You can toggle dark mode with the light bulb icon in the top right corner. And to our white label system we added the option to create a fully custom theme to match your branding. (This replaces custom CSS, which was a nightmare to maintain).
Above the fold
Our old header made poor use of white space and was a mess. One of my big goals was cleaning that up and removing everything that wasn’t used much, and now so much more fits above the fold on any page you’re viewing. Some of you are asking for the trend comparison menu to come back, so we will likely do that.
Tab re-organization
We had 16 tabs on the main reporting screen. That was just too many so a few were downgraded to sub-tab status: Alerts is now under Prefs, and Custom data is now under Visitors). Big Screen is now a link from your user homepage instead of taking up a tab for no reason. Removing those 3 saved a lot of horizontal space, but we wanted even moer so Dashboard was renamed Home, and Preferences was renamed Prefs. Wowzers! And last, Spy moved way to the left, the purpose of which is to make it quick to access for mobile visitors. Its our most popular feature anyways so it makes sense that it’s prominent.
MSIE is dead!
Grid, flex, and CSS variables are fairly new standards but all major modern browsers support them 100% perfectly (Firefox, Chrome, Safari). Note, MSIE’s last major release was 6 years ago. Not only is that not modern, it’s practically the stone age. Since Microsoft has declared it dead anyways as of a few years ago, and well less than 0.5% of our customers used it, we’re biting the bullet and no longer supporting it. And let me tell you… designing a web site without having to constantly fight MSIE’s bugginess was an amazing feeling. I’ve been doing this for 20 years and fighting that beast every step of the way. NO MORE!
Icons in all their pixelated glory!
We’re still using the super old school “silk” icon set, mostly (there’s a few customized icons and whatnot sprinkled in too). I dunno, it has a special place in my heart I guess. But these were created well before high DPI screens so they’re 16×16 and they look terrible when browsers try to blow them up on high DPI screens. I only upgraded to 4K a few years ago but it’s bugged me ever since. During this update, however, I discovered a fairly new CSS property called “image-rendering”, that lets you tell a browser to keep all the amazing 90s-style pixels instead of trying to prettify everything, and I love the result. Maybe it’s because I played a lot of Super Nintendo back in the day and lots of indie titles on the Switch currently that all look like they were from that era… at the very least, the icons now look like they’re supposed to instead of a blurry mess. (I did try some alternative modern icon sets during this update, but they just didn’t do it for me – but it wasn’t a priority once I found this new parameter. Except for user agent icons, those are all new).
Speaking of icons, here’s a great example of why I’m beyond ecstatic to be done with MSIE support! Back in 2006 when Clicky was born, MSIE didn’t support transparent PNG files. So at that time, I just converted all the silk icons to GIFs. Even today, that’s all fine as long as your backgrounds stay white, but guess what: Themes. GIF transparency looks AWFUL on any background that’s not white. I had go through and find all the original icons again (a lot of which I had changed the names of) and recopy them and then find every single icon in every single file and update to point to “.png” instead of “.gif”… this was a very solid 3 days of grunt labor and it’s all because of awful MSIE and their horrible support for any kind of standards over the last 20 years. Good. Freaking. Riddance.
PDFs update
The tool we used to export PDFs, wkhtmltopdf, is based on Chrome 13 which is 8 years old, well before grid was even a twinkle in the W3C’s eye. It doesn’t support any of this new stuff so we had to temporarily disable PDF exports while we move to a new solution. We’re looking at Puppeteer which is based on Chromium and maintained by Google so its engine stays up to date. Give us a few weeks on this one.
UPDATE 7/26: We got Puppeteer up and running and the PDFs look great, they’re fully enabled again in the UI export and email reports. This went a lot faster than expected so that’s a big win for everyone. Bonus is that the graphs work 100% now, whereas with wkhmltopdf they were very finicky, especially for the email report ones.
Anyways, if your initial reaction to the design refresh is negative, please give yourself a few days and see how you feel then before telling us we’re blockheads. But we are listening and will be tweaking things based on our own gut feelings and your feedback!
