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