Look, we all know that all the cool kids are accessing websites on their phones and tablets. We all know that the number of cool people doing this is always rising and that eventually everyone will be doing it. So right about the time the iPhone was introduced we started creating mobile versions of our sites. We know that mobile screens are different than computers so we tried to make the designs fit those screens better. Unfortunately, we created a whole new set of problems.

The problem with mobile sites

The spectrum of devices

It’s not a simple as desktop computers on one side and phones on the other. What do we do with tablets? The new iPads have more pixels on the screen than many computer screens. Some netbooks have pretty small screens to start with. What about the 50+ sizes and screen ratios of Android tablets? How do we handle different screen sizes rather than just deciding based on what type of device the user has?

Incoming links

When we create a completely different mobile version of a site that intercepts ‘mobile’ traffic and redirects it, incoming links are broken. Something like the following dialog happens:

iPhone: Show me the staff listing page. http://example.com/staff.html

Server: Ok… wait, are you a phone? You don’t get to see the staff listing page, here’s this mobile landing page instead. http://mobile.example.com

iPhone: Uh, no, show me the staff listing page. http://example.com/staff.html

Server: I can’t. You’re a phone so I’m going to keep redirecting you to the mobile landing page even if you keep asking for a URL that exists.

iPhone: Uh… ok.

You can see a good example of this problem on the Alvin Ailey American Dance Theater site. If you’re on a mobile device, search “Alvin Ailey staff”. You’ll get the following results, with the staff page as the top result.

Alvin Ailey Google Search Results

Try selecting that. You’ll get redirected back to a mobile landing page. Try linking into any deep link in the site and you’ll get redirected back to the mobile landing page.

Alvin Ailey Mobile Site

The answer: Responsive Design

Responsive design is creating one design that scales gracefully across a range of screen sizes and device capabilities. Rather than creating a completely separate version of the site’s content, Responsive Design creates multiple layouts of the same pages and then modifies the display based on the capabilities of the device. A lot of times this means creating multiple stylesheets for the site and then serving the correct one based on whatever will look best to the user.

For example, try dragging this browser window to make it smaller or bigger. Go ahead, we’ll wait. Did you see that? As the window gets smaller, the site responds by shrinking the content area a bit. Then it moves the sidebar underneath. The text scales proportionally to match what would look best at different widths. Check out the main portfolio page and single projects to see more responsive design in action.

Want some more examples? akanyc.net is a great example of scaling with video. Greygoose.com might be the best example of combining Responsive Design with beautiful parallax scrolling. Foodsense.is shows a nice range of sizes and layouts.

Benefits of Responsive design

Future-proofing

Since we’re not limiting our targets to specific devices but rather ranges of screen sizes, all current and future devices are accounted for. If we ever needed to target another range of devices, adding a new style sheet would be simple.

Single place to update

Rather than creating another version of the site with a separate CMS and content, keeping only one CMS is key for keeping updates simple and uniform across all versions.

Making all site pages accessible

This would make all pages of the site accessible for a range of devices, not just a limited selection like the issue that we saw above.

Tools for creating Responsive Design

Although designing a site responsively requires a lot of skill and imagination, when it comes to building it, you don’t have to start from scratch. Here are some frameworks that can make your build easier.

Bootstrap

twitter.github.com/bootstrap/

Bootstrap is a comprehensive framework for building a responsive site. It comes with plugins for a lot of useful interactions and interface elements like forms, photo galleries, menus and a lot more. Take a look at their examples of sites built on the framework.

Modernizr

modernizr.com

Modernizer helps you create layouts based on what a device is capable of rather than just what kind of device it is. So it checks to see if a device supports a particular feature, and if it does, it displays that content. If not, it can display backup content. So for instance, it can check to see if the device can display an HTML5 video and if not it could display a backup image or other content.

Skeleton CSS

getskeleton.com

Skeleton CSS is the most basic tool for creating responsive layouts. It’s not as fancy as the other tools but gives you a basic grid that responds to sizes and other variables.

Go for it

So what are you waiting for? Get out there and start creating responsive layouts for your site. Don’t get stuck with a mobile of your version that doesn’t meet your user’s needs. Responsive Design is the answer.

Some advantages to Piwik

• Automatic tracking of outbound links. While you can use some good coding to make this work in Analytics, it’s nice to have to have it built right in. Any time a link is added to the site, via the CMS or anywhere else, it’s tracked outgoing.
• Choose how often the numbers are crunched. While the new version of Analytics is pretty close to realtime, you might be flipping back to the old version sometimes for reports and exports. A 24 hour delay is a timeline in most digital campaigns. Piwik allows you to decide how often the numbers are run. It can be instant (the default) or up to once every 24 hours if you don’t need data that often.
• Better report exports. While the old version of Analytics gave you a lot of reporting options and even an email scheduling feature, that’s been removed in the new version of GA. It will probably be added back in the future, but right now it’s a huge miss. Even with the old version the report formats were pretty limited to CSV, Excel and PDF. It left a lot of people taking screenshots to include in a Powerpoint or presentation. Piwik allows you to export directly to an image on screen, ready to drop into any format as well as giving you all the CSV and PDF options.
• Easy report branding. If you work with clients and you’d like your reports to include your logo or color scheme, Piwik allows you to upload a graphic logo and see it across the site and reports. Done.
• It’s open source. While that’s not inherently a benefit to most people, if you’ve got a special problem to solve to a tweak that you just have to have, you can make that happen with Piwik. Want to change that color scheme or default behavior? Get started!
• You control your data. Since Piwik is running on your sever, your data is never transmitted to anyone else. While Google is generally pretty good about protecting your data, the new Privacy Policy only allows you to opt out of “any automated processes that aren’t specifically related to operating and improving Google Analytics or protecting the security and integrity of the data”¹ which isn’t very comforting.

A few downsides:

• Hosting. Since it’s not a hosted service, you will need to install and serve it yourself. It’s not a huge deal unless your site is very busy and you need to watch that server load. If you can install WordPress, you’ll be fine with Piwik.
• Integration with other Google products. Google Analytics has a major advantage being so well integrated with other Google services like AdWords. Although Piwik allows you to track paid search traffic as well, you’ll miss some of the seamless data sharing between those services.

If any of those benefits sound good to you, I recommend setting up an installation of Piwik in addition to Analytics as a trial case on your site. You can get started by checking out the Piwik site right now.

¹ Google Analytics Privacy Policy, 1.29.2012

I should point out that I do have blogging cred going back to the Xanga days. (http://splitpeasoupforthesoul.xanga.com was removed in 2003 so don’t even try to look for it.) We called them journals then I think. I also used Tumblr before it was cool. I’m talking spring 2007. An editor paid me to write for that dance blog. So there.

But it’s time to be professional. All the cool kids are.