I’ve updated the three-tabbed section on the sidebar, which has reduced space consumption in the viewport and improved the overall viewing experience.
Why the Change?
On mobile devices, the sidebar appears below the post body. While responsive, the sidebar contains a lot of content, decreasing the mobile user experience.
That's how I felt because I just add to keep scrolling down and down and down. The scrolling down on mobile seemed endless and was frustrating.
This also negatively impacted my analytics. Not every user scrolls all the way down, leading to poor engagement scores.
The Solution:
The three-tab section previously implemented addresses this issue, but it can still be annoying to scroll back a bit to switch tabs.
While contemplating improvements, I came across a neat solution (I forgot the source): a responsive three-tab widget.
The best part is that it’s purely coded in HTML and CSS, without relying on JavaScript for tab switching like the former three-tabbed-widget.
And on mobile, the tabs are stacked on top of each other like collapsibles, making it much easier for users to navigate without excessive scrolling.
Future Plans:
With this new tab section in place, I plan to transition all tabs on the site to rely solely on HTML and CSS, eliminating JavaScript dependencies.
This change will further reduce the site’s load time and speed, enhancing the user experience.
