Last week we looked at the clear and present need to make your site mobile-friendly. And, we teasingly suggested that this week we’ll look at the most elegant way to accomplish that.

Fear not, the wait is at an end!

You have a variety of options for making your site mobile-friendly:

1. Create a completely separate site for mobile users (m.example.com)
2. Use a plugin to detect mobile devices and display a pared-down version of the content
3. Use responsive design to detect screen size, and optimize the presentation accordingly

Option 1 is the least effective, and most costly. It means having to maintain two separate sites and updating both any time there’s any change. Cumbersome and time-consuming!

Option 2 is a step up – it’s all the same content, so you only update once per change you make. One drawback is that a plugin only works on a CMS, not necessarily a from-the-ground-up site. Also, most plugins serve up the same display to smartphones and tablets alike, regardless of the bigger screen on a tablet.

That brings us to Option 3, which is generally the best practice to follow if you want your site to be mobile-friendly. In a nutshell, responsive design determines how big the window is that the page is being viewed on. It then chooses the appropriate style sheet from a list of pre-defined size ranges. For illustration, let’s take a look at the excellent example set by the Boston Globe.

The full-size version of the home page: 3 columns, a full navigation bar, and a wealth of links along the top. Note the placement and details of the date at the top.

---

The mid-size screen display: 2 columns, a condensed navigation bar, and only the essential links along the top. The date now omits the day of the week to save space.

---

Here in the smallest screen display, it’s down to only one column; the navigation consists of two top-level links with drop-downs; and, the date has moved below the logo so as not to crowd the links along the top.

All in all, responsive design is an elegant, simple solution for making your site mobile-friendly. It takes away the hassle of maintaining separate sites, and avoids the code bloat of a plugin that can make your site more unwieldy. And, it’s a cinch to test it out on your desktop; visit bostonglobe.com for yourself, and play with the size of your browser window.