Welcome to TriRig.com

Introducing TriRig 2.0
article by Nick Salazar
Jun 17, 2013  hits 7,001

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.

Mobile Madness

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.

Design Unity

Here's a full-sized page, basically unchanged from the previous 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 dreaded appearance of a horizontal scroll bar. Text remains the same size in order to remain perfectly readable.

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.

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.

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

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

Tags » tririg
  • When we asked TriRig readers what they thought about mobile browsing, they were rather divided. I suspect that's because, in general, the mobile-specific sites out there aren't very good. So we set out to do soemething unique. Something better than what you're used to. TriRig 2.0 is a dynamic, device-specific experience that renders all the content you're used to in a way that's optimized for your display, and doesn't require you to re-learn anything. We think it's the best of all worlds.
  • This is a full-sized page. It will look very familiar to TriRig readers. When redesigning the site, we worked hard to make sure there was a consistent experience.
  • This is that same page resized down to a smaller window. You can see that the sidebar has gone away (it's moved below the main content), and everything has scaled down to fit within the window. This makes TriRig a dynamic site, and it will look great no matter what device you're browsing on.
  • Here's the TriRig Store in a full-sized window. As before, its mostly the same as before. The category navigation has changed just a little bit, but this is basically the same visual design as before.
  • Now here's the store at a very narrow window, much the way you would see it while browsing on a phone. You can see that ALL the content remains visible. The top navigation (in the orange bar) shrinks down to a dropdown menu, saving valuable space. But this is the same site, and you don't have to suffer with a crippled mobile site made by some generic template. This is the full TriRig experience, dynamically adapted to your browser.

Related Articles
One last rig to feature before race day -- the Aussie champ known as Barny is looking lean, mean, and ready to race. Check out the video interview and gallery.
Maik Twelsiek, Ironman champ and former Scott athlete, is now riding on the radical Dimond beam bike. Here's a close-up look at his rig.
Following his win at the inaugural Ironman Boulder, we caught up with Justin Daerr and gave his bike an aerodynamic overhaul.
They're here! The redesigned Sigma XF and Sigma N35 are now in stock and ready to ship. Here are all the details.
At long last, TriRig is proud to present wind tunnel data and analysis on our celebrated Alpha aerobar.