The Mobile Right Rail
Built for the Tampa Bay Times as a solution for the age-old "right rail" problem on mobile devices.
The Tampa Bay Times has used a "right rail" to the right of the primary content for decades. When mobile devices became the dominant method for viewing tampabay.com, the content in the right rail got pushed to the bottom of the page, mostly lost to viewers.
View it live and in action (on a mobile device or emulator) here.
The Problem
As stated above, any content in the right rail was pushed to the bottom of the site. Once the reader finished the primary content on the page, there was no reason to scroll further and all of the right rail content was effectively invisible and lost.
This resulted in lost ad revenue and lowered numbers in site recirculation, which reduced subscription rates.
The Solution
On mobile devices, a sticky navbar of buttons was placed at the bottom of the screen. Each button opens a fly-out panel from the right, populated with content and tools that could be of interest to the reader, along with a small advertisement.
The Result
The Technology
Figma
I started by designing an interactive concept in Figma and presenting it to stakeholders. After a few cosmetic revisions, it was approved for implementation.
React Hooks
The components were built in React Hooks, most importantly using useState to coordinate the opening and closing of all of the panels; not just for the Mobile Right Rail, but in conjunction with the primary flyout menu and various dropdown menus.
SASS
Basic styling in SASS.
ARC XP PageBuilder
Proprietary software, a CMS created by The Washington Post. The Mobile Right Rail build had to intergrate into this environment to be made live.