Behind the Archer Site: Responsive Layout

There’s a new buzzword in town, and it’s “responsive” web design. This is the concept of building a single website that is flexible and fluid to fit any size device or screen. By using a combination of a grid system, Cascading Style Sheets (CSS3) Media Queries, image optimization, and a few JavaScript techniques, your one website can be visible to a larger audience.

Responsive technique is a flexible and reliable alternative to the other options available. One option involves building a completely separate site for mobile users, with files living in a different place, possibly on a different web server. The downside to this is that you must manage two separate websites and two sets of content. The other option is to have a CMS templating system that serves the user a different template based on a browser’s user agent string. This option is more useful because there’s only one set of content; however, it still requires maintaining a separate set of markup and structure for your website.

With a responsive design all the content and design for all platforms and devices live in one place. The site loads to whatever dimension the user’s browser or device may be.

When building a site as responsive, it’s important that the designers and developers work in harmony (can’t you hear the angels singing?), making decisions about the best positions for elements, which elements can be removed, and how best to simplify the site upon scaling.

The Archer site

If you’re currently viewing the Archer website in a modern browser such as Google Chrome v14+, Apple Safari v5+, or Mozilla Firefox v4+, and you resize your window width, you’ll notice a transformation of the layout at different sizes. If you’re on a tablet device such as an iPad, try switching between landscape and portrait mode. If you’re on a smartphone, you’ll see a layout formatted for the small screen. Keep in mind that there is only one website through all this.

Archer’s mobile site experience is designed to get right to the meat of the site. We simplified our layout, reorganizing elements into a single-column format so that content is front and center. We took liberties to hide flourishes and design elements that didn’t make sense for the mobile experience.

The Archer website utilizes the WordPress CMS, which provides a fairly robust back end for serving up all the content. We aren’t using any WordPress plug-ins for the responsive nature of the site. We have done quite a bit of customization to our WordPress install to help manage all the different types of content featured. For more on this customization, look for a great write-up from Bart Hook in the near future.

We used a grid system to display the feed content tiles. To optimize for load, a custom masonry-type JavaScript controls the size and location of the tiles displayed. This allows us to manipulate the feed’s width based on the device size. We can also serve up tiles that are smaller and more optimized for mobile. Dave Wallin will have more details on this particular JavaScript functionality in an upcoming article.

Admittedly, there is one highly technical page on our site that isn’t optimized for mobile. Our Approach page’s parallax functionality is designed specifically for a full browser experience. While it’s a fantastic show of custom JavaScript animations, it can be a bit overwhelming for a small device’s processor. We had to write some special code using JavaScript cookies and a little PHP to hide and show an alternative set of markup/content for mobile devices. We feel this does the trick to get users to the information they’re seeking, but if those users want to see the fun, they’ll have to be sitting down (at a computer).

Media queries

With media queries, you can set breakpoints within your style sheet to control the visible styles and layout of the page at different widths. You could have several completely different looking websites for all the breakpoints you set by changing the style sheet. Whether the device is a mobile device, a tablet, an ultra-book, or a widescreen monitor, a website built to be flexible or stretchy will allow anyone to see the content in usable format.

Because the website is relying heavily on media queries to hide and show content, one thing to keep in mind is that every page on your full-size site will load on mobile. Yes, you can hide specific elements on a page, but hiding a whole page is not as simple. Careful planning is required for how the layout will look throughout the site. If you don’t want a page to be viewed at different sizes, avoid incorporating a redirect to that page. You never know when someone will tweet or share a link to a page on your site, allowing someone else to view it on a mobile device or a desktop machine.

Pros of responsive

  • No need to be device specific: Your website is future proof for new devices
  • Works better across more mobile devices: iPhones, Android, Blackberry, Windows 7 phone
  • More reliable analytics data: All your users are now hitting the same site

Cons of responsive

  • Image size optimization can quickly become a challenging task
  • Can be slower loading with more code and elements on the page
  • Might not work on older mobile devices

Should your website be responsive?

Tough question, but it comes down to the needs of your website. Responsive may be a trendy buzzword this year, but we believe it will stick around for quite a while. Because it’s a new technique, there are still issues to be worked out. Everyday we see new tools and better ways of handling optimization and speed issues. If you want to reach the largest audience possible with a single website, a responsive layout should be considered for your next redesign.

This blog post covers just some of the details on responsive functionality. For further information, check out these other terrific resources:

We hope you’ve gained some valuable insight into the thought process behind the development of our company site. Let us know what you think in the comment/question field below.

Leave a Reply

Close Modal

Contact Archer

Close Modal

We know you're still using an older version of Internet Explorer. Do you know how much mind-blowing stuff you're missing because of this?

Save yourself. Upgrade now.
We'll help you...