From the BlogSubscribe Now

Responsive Web Design for Outdoor Bloggers

Sherpa Sites is about to launch and we’re excited for the new experience that we think it will deliver to outdoor bloggers and brands alike.  At the heart of Sherpa Sites is a responsive web design.

Responsive web design isn’t an entirely new concept.  It’s been floating around for a few years but has really captured the attention of web designers, and Trail Sherpa Design for sure, in recent months.  This post isn’t about the “how to” elements of responsive design, you can find that here.  And it’s not a collection of examples, you can see those here.  This post is about the implications that we believe this approach has for outdoor bloggers, retailers, and brands.

The History

A few years ago, Ethan Marcotte coined the term “responsive web design” when describing the need for design practices to adjust to the shift in viewing devices.  Many design principles have deep roots in the print industry but no longer hold the same value when you consider the plethora of devices and varied viewing windows.  As bloggers, we want our content to be just an accessible and readable on a smartphone as it is on a desktop.  Most websites and blogs are currently built to be viewed on a large desktop monitor but fail when viewed on a smartphone with a much smaller viewing area.  Enter responsive web design.

What is Responsive Web Design?

Responsive web design, often referred to as RWD, is an approach to web design that leverages CSS and an 1140 pixel grid design using a mathematical approach so that the web page as a whole can broken down into smaller elements.  Those elements can then be organized differently to display your site’s content in a manner that is just as readable on a desktop as it is on a smartphone or tablet including an iPad or Android.  RWD allows designers to break a page into various columns using CSS and then shift those columns based on the size of the device being used to view the page.  The display on a smartphone or tablet will be organized differently than a laptop or desktop but be just as readable.

The math is pretty straight forward and all starts with the 1140 grid.  This grid is 1140 pixels in width and allows the math to work out perfectly for 1280 pixel display windows.  The 1140 grid breaks into 12 columns of 95 pixels each or many combinations based on 12 being divisible by 2,3,4, or 6.  Brian Gardner has a great example on his blog here.

What?  I know, the math gets tricky and sometimes the number of digits after the decimal can become daunting.  The design is built on media queries (tricky stuff) and percentages that define the width of elements relative to the width of the viewing area rather than a hard set width in pixels.  As the width of the viewing area narrows, the content is shifted to maintain a clean and readable experience for the reader.

The bottom line here is that responsive design works because the math allows for a great degree of flexibility and flexibility is what we want in terms of the design and how it displays on devices of all sizes.

Responsive Design in Action

One of our first tasks was to take our Ultralight Theme and make it responsive.  Jessica, our Director of Social Web Design, personally tackled it in short order.  Here is what the Ultralight Theme looks like on three different devices.

The display looks fantastic when you view it on a laptop (1366 x 768):

On an iPad in portrait (768 x 1024) you can see that the design elements are preserved:

And on an iPhone (320 x 480), everything is presented inline to avoid shrinking the entire page to fit or introducing a horizontal scroll which we all hate.

What does this mean for the outdoor industry?

The outdoor industry should be quick to adopt responsive design.

Retailers can benefit by providing hikers and backpackers an effective shopping experience from a mobile device as the leave the trail.  We’ve all hiked with a friend who brought along a new piece of gear and then scrambled to our smartphone to see how much it cost.  Retailers can leverage responsive web design to capture sales at the point of need.

Hikers and backpackers love to preserve their epic adventures by creating trail reports.  For those that choose to power their websites and blogs with Sherpa Sites, you’re all set!  For everyone else, mobile usage is on the rise and your content must be readable on a mobile device as well as a tablet.  Who knows, that last minute trail closure or change of heart could lead a hiker to search out an alternative trail.  When your site comes up in their search it better deliver a solid user experience or they will move on to the next site that does.

The reality is that responsive web design should be on the radar for any organization that operates in the outdoor industry.  We are all sharing links on Twitter and Facebook, probably from our mobile device or tablet.  That means that others are discovering outdoor brands, maybe your brand, on these platforms.  What do they see when they click that link from a friend or someone they follow touting your product or service on their tablet or mobile device?  They need to see your message delivered in a very user-friendly way.  Responsive design provides that experience to them while preserving the defining aspects of your brand’s look and feel.  No need to build a mobile site.  No need for plugins or widgets.  It just takes a bit of planning, some CSS changes, and a bit of testing.

About Tim Miner

I'm the founder of Vestor Logic, the digital strategy and web design firm that created Trail Sherpa, ParksFolio, and Modern Steader. I'm a day hiker, top chef in camp, doting husband, and father to two headlamp wearing boys. My work in digital media brings those experiences to life.

Trackbacks

  1. […] your outdoor blog designed for each of those devices? It should be. Responsive web design is the new standard and more and more readers expect every site they visit to deliver a seamless […]