Introducing TriRig 2.0

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 for the months during which we were working on it. 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 new year technically turns over on July 1st, but I just couldn't wait to unveil the new site, so this is our early Anniversary present to you. 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. So why would we mess with it? Well, mostly we didn't. You'll probably notice that things look basically the same. But there's a LOT going on - the entire site was rewritten from the top down. And if you're reading this on an iPhone, you'll immediately realize why.

Mobile Madness
The advent of ubiquitous mobile web browsing has traditionally been a stumbling block for website owners. What's the best route to take? 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 route most administrators take, 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, and 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 it has its drawbacks as well. Pages are hard to read and navigate, text is impossibly small until you zoom in on a specific section (and once you do, it's like trying to read a newspaper with a telescope.

Users are similarly confused. 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, nearly as large, voted that they prefer browsing desktop sites 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.

Design Unity

Here's a full-sized page, almost unchanged from the latest iteration of our v1 design.
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 appearance of a dreaded 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.

And here's what that same page looks like when scaled down a bit - notice that ALL the same content and function is still intact. The sidebar just moved below the main article.
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.

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.

Zurbified
None of this dynamic scaling goodness would have happened without the awesome work of a group called Zurb. They put together an open-source tool called Foundation that makes it relatively simple to code up all the features I described above. For the coding geeks among you, Foundation is essentially just a CSS style sheet and accompanying Javascript that put a whole lot of convenient predefined classes and JS tools at your disposal. It makes it really easy to think in the terms I've described above, and put together pages that conform to them.

At very narrow widths, the navigation bar collapses into an expandable menu - a convenient feature for mobile phones with limited display space.
TriRig remains a completely hand-coded bit of software - it has always existed as a few dozen php scripts that define all the elements of the user interface, a SQL database that stores and serves all the site content, and a few other little bits of code serving various purposes. And now Foundation provides the bedrock 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.

Conclusions
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 enormous 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.