Introducing TriRig 2.0
article by Nick Salazar
Jun 17, 2013
Today, I'm launching a secret project that has been kept almost completely under wraps. Until very recently, not the slightest hint of this news was made public. The finishing touches have just been put on, and this product is finally ready for release.
I'm talking, of course, about the brand new web design for TriRig.com. This is nearly the third Anniversary for TriRig.com. Our fourth year technically begins on July 1st, but I just couldn't wait to unveil the new site, so this is our early Anniversary present to you, dear readers. And although today's launch doesn't involve a product you can hold in your hands, it may be even more critical to our readers. What's at stake today is the most fundamental thing about TriRig the site itself.
Many of you have expressed some kind words about the existing design. You like the cleanliness, the ease of navigation, and the lack of clutter. So why would we mess with it? Well, mostly we didn't. You'll probably notice that things look basically the same. If you're browsing a full-sized desktop window, that is. But if you're reading this on a mobile phone, tablet or anything other than a full-sized desktop window, you'll immediately realize that something is going on.
The proliferation of mobile web browsing has recently been a stumbling block for website owners. What's the best route to take in terms of design? Should you make a mobile-specific site? What platform do you optimize for? There are a lot of different types of displays even among mobile devices, and their resolution densities are all over the map.
The way most websites go, quite frankly, sucks. Mobile-specific sites are quite often a huge pain in the rear, delivering only a fraction of the full site's functionality, trying desperately to deliver at least a majority of the important content. Some designers just opt to skip the mobile site entirely, letting users browse the desktop site on their mobile devices. That's what we have done at TriRig for the last three years, but that route has its drawbacks as well. Full-sized pages are hard to read and navigate on mobile devices. And text is impossibly small until you zoom in on a specific section.
Users are similarly confused about what to do. We conducted a poll in March, asking whether those among you who do browse on mobile devices would like to see a mobile-specific site. And you were quite divided in your answers. Some of you wanted a phone-specific page. Some of you wanted a tablet-specific page. Another group voted that they prefer browsing the desktop version of TriRig on their mobile devices. I suspect this is because of how poor mobile-specific browsing experiences usually are.
But this is TriRig, and the founding principle of this site is that we can do better than the status quo. I believe there is a solution out there, waiting to be developed. So that's what we've been up to. And I think you'll love the result.
In the end, I really believe that the future of web design isn't a divided browsing experience that requires you to familiarize yourself with a different user interface for each device you use. Rather, I believe web developers should focus on making dynamic pages that adapt to the devices we are using. One page to rule them all, if you will.
So that's exactly what we set out to create.
The new TriRig is a completely dynamic, scalable browsing experience that will adapt to whatever display it's browsed on, based on the browser window size. You can see the dynamic scaling for yourself. Just put this page in a resizable window, and slowly start to reduce the browser width. As you resize the page, you'll begin to see everything scale down. Images, video, and page elements scale proportionally, in order to avoid the dreaded appearance of a horizontal scroll bar. Text remains the same size in order to remain perfectly readable.
Of course, at some point it's no longer ideal to simply squish everything down and keep the same page structure you'd simply be trying to fit too much onto one screen. This is particularly true for smartphone browsing, where the display size is small enough that you really only get one column of usable text. So, at a breakpoint of 768px and below, TriRig's page elements reorganize themselves. The sidebar jumps below the main content, leaving more room to read on those small devices. You can see this yourself just continue to scale down your browser window, and you'll suddenly see the sidebar disappear. It didn't actually go away, it just moved below the main article text in order to give you more room to read. This is the structure that stays in place for all smaller screen sizes. Everything continues to scale down just as it did before, to keep everything visible. At really small screen sizes, the navigation bar at the top collapses into a dropdown menu, saving valuable screen real estate while maintaining that simple, familiar site navigation.
Oh yeah, and because TriRig was originally designed as a database-driven site, the new design applies to every single page on the site, back to the very first article we ever published.
What's so important about this design (in my opinion) is that while the browsing experience is optimized for every display size, the entire content of every page on the site is available no matter what device you're browsing on. It might be in a slightly different location, but it will be available nonetheless. And you don't have to re-learn our user interface to use the site on a mobile device.
Certainly this isn't the only way to solve the problem of display disparity in order to create a more cohesive browsing experience. And maybe it isn't the best way. But it's the best I could come up with at the moment. And in my opinion, it's much better than the haphazard, ad-hoc way in which many sites currently behave. You don't lose one smidgen of the site's content, and you don't have to learn a new user interface to enjoy TriRig on your phone, tablet, or any other device.
TriRig remains a completely hand-coded bit of software. Both the original version and the new version are contained in a few dozen php scripts that define all the elements of the user interface, along with a SQL database that stores and serves the site content. There's a bit more to it than that, but the idea is that the "engine" of the site hasn't fundamentally changed. But now, Foundation provides a new platform on which those elements are stacked. I've always been extremely selfish with my assets, and never wanted to give TriRig over to any kind of black box template or CMS that I couldn't completely control. So virtually the entirety of TriRig is completely handwritten in a simple text editor (I use Notepad++). Foundation was attractive to me because it provided the tools I wanted without requiring me to give up any of that control. The two Foundation scripts are completely user-editable, and have been bashed up quite a bit in order to maintain TriRig's original look and feel.
What's it all mean for you, the user? Well, maybe not much. If you aren't a tech head, you can just keep on browsing without even thinking about how this all works. That's the whole point. Browsing TriRig is just easier now, no matter what device you're doing it on. But then again, if you aren't a tech head, you probably aren't reading TriRig in the first place. There are a few of you (about five percent) still using Internet Explorer version 8 or lower, and those browsers aren't compatible with the Foundation scripts. Those browsers default to the smartphone version of the site; the navigation bar is collapsed into a menu, and the sidebar content is shown below the main content. So for those of you on IE8 and below, TriRig is still usable, but not ideal. Unfortunately, I just decided that the benefit to the other 95% of you on more modern browsers was worth it.
What do you think of the redesign? Do you think we've hit upon a good solution for modern web use? Are there weird quirks you're seeing that we need to address? We'd love to hear your thoughts in the comments section below.