Hey! We’re Standing Up!
By Andrew CobbyOctober 11, 2012
It doesn’t take a sharp eye to notice some changes at The Global Mail today. After months of feedback, planning and hard work we’ve launched a more user-friendly design for our site. I call it TGM 2.0. Things change fast on the web. We’re still young, just eight months old, but already we’ve been on a technological adventure. I joined the ranks at TGM, in January this year, one month before it was launched. When I first saw the soon-to-be-released site I was impressed with the fearlessness of its design but uncertain about whether it would be accepted by its audience. Some negative feedback was inevitable; people don’t like change and, well, haters gonna hate.
This site was new, it was different — and it was gorgeous. I found these attributes refreshing, especially for something that is typically routine and ad-ridden — after all, it is a journalism website.
But despite the countless hours I spend every day consuming, critiquing and helping to build the web, I’d never encountered a site so invested in horizontal scrolling. And just because the majority of people my age — 21 — live and breathe the Internet, it doesn’t mean we’re any less sceptical about change.
February 6 saw TGM’s launch, as promised, with our horizontal scroll in full swing. I was eager to see how it would be received.
Well, soon after launch, it became clear improvements needed to be made to the site. And so began our six-month journey to re-think, re-design and re-develop for what we now see today.
The first question was relatively simple: What do we do to help our readers better deal with this new horizontal experience?
On the iPad it was excellent — it cried out “swipe me sideways” — but the desktop experience flew right in the face of web traditions that have existed since I was born.
From day one, the only way desktop users could navigate through stories was by clicking the arrows fixed to each side of the screen. I was keen to explore the horizontal scroll at the time; I felt the initial implementation was an unfair representation of its potential. So while our management listened and planned for the future site transformations, it was up to me — the new coder on the block — to try and make this thing work better. And so began the hacking.
This was my first time working on a Python backend (that’s a programming language) and, feeling out of my depth there, I proceeded to hack the frontend.
Before long I had a working prototype that would allow users to easily scroll through stories using their mouse wheel. But I still wasn’t 100 per cent happy with this: mouse wheels go up and down yet our stories went left to right. This mismatch would sit uneasily with me for months to come. Mac users – at least those using a Trackpad or Magic Mouse – were better off. The familiar left-to-right, two-finger swipe gesture worked brilliantly. With little effort these users could scroll through a story and even ‘fling’ their way to the start or end of the page.
But how could users know how far through the story they were? There was still no visual indication of their progress or even a concept of how long it was. This role was usually fulfilled by a vertical scrollbar. I didn’t have this luxury and would have to make my own. With little space in the story page design to actually implement a horizontal scroll bar, I accepted this coding challenge.
I wondered if non-tech-savvy readers appreciate the subtle complexities of something as trivial as a scrollbar. There’s actually a bit to take into account: calculating the width of the bar in the track depending on the story length and window size; recalculating it if the window resizes; enabling clicking empty portions of the track to jump the bar there; how far to scroll the story for every movement of the bar; and moving the bar if the user scrolls with their mouse wheel.
I’d be lying if I said that my adventure of exploring, hacking and playing with horizontal scroll had not been interesting. Still, today, and for good reason, TGM is calling on its admirers and readers to keep calm and scroll down.
Andrew Cobby was part of the in-house team that worked with Brisbane-based developers 4impact to create a new design for The Global Mail.