Going Mobile – How Responsive Design Solves the Device Dilemma

A quick look at any of our clients’ analytics will reveal an undeniable trend, year over year more people are visiting their sites on mobile devices. In the last few years, there’s been a tremendous amount of discussion about how to ensure your site works well across all kinds of devices and screens.

If you’ve been wondering if you need to invest in the development of an app to make sure your site seen on mobile devices – there’s good news on the web front. It’s a one-stop solution for browsers big and small and it’s called Responsive Design. 

In December 2012, tech blog Mashable outlined “Why 2013 Is the Year of Responsive Web Design” in a great article by Pete Cashmore that explains why we need one solution for all mobile devices. In fact, he reported that “the shift to mobile is happening at an extraordinary speed. Today, 30% of Mashable’s traffic is mobile. By the end of next year, this may exceed 50%.”

In the last couple of years we’ve been busy working with long-time clients with older sites to address this issue and introduce all the other great bells and whistles standard for a great user experience and efficiency on the client side.

In analyzing those sites, a review of visitor statistics since 2010 revealed a growth in visits via iPads and iPhones alone, from 360% for one client, to a stunning 2000% increase in mobile visits for another!

Is there an app for that?

Most clients ask “should we also build a mobile app too?” Building an app for Apple’s iOS (and/or Android and/or Windows) is certainly a great idea if an app can perform a certain function or deliver content in a certain way but if your goal is to render your site on mobile devices better, responsive design is the answer we had been waiting for.

We started building responsive sites in early 2012 believing that there are just way too many devices and operating systems to possibly address via apps and special code. Bolstering that opinion, Mashable reports, “according to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app. While I think media companies should certainly offer apps, it’s clear that having a great mobile website should be the priority.”

responsive phone animationHere’s how responsive design works

Today the code we write for all our sites includes queries to determine how each visitor is accessing the site (PC, tablet, phone, etc.) and what resolution is required. Where we used to use rigid tables to house the content, now we fluid grids that contract and reorganize based on the screen from which the site is being accessed. Images are now also fluid to a large degree – they shrink down with the grid to render on smaller screens instead of breaking the site as they would have in the past. Alternatively, they can be hidden altogether on a phone.

Here’s a great perk: on a regular PC or Mac monitor, fluid grids also mean that sites can be much, much wider taking advantage of bigger monitors and giving us much more screen real estate.

Here’s the tough thing to wrap your head around

When we talk about responsive design, clients often think that responsive design means when you look at the site on a phone, the entire website has nicely shrunken down to fit on the relatively tiny phone screen. It looks the same – just tiny. Hooray!

But let’s think about this from your visitor’s perspective. Yep, there’s your site … but the text is so small they can’t really read anything. And so begins the pinching out to zoom into one little area of the page they think might be what they’re looking for or to try to use the navigation on the site.

The true genius of responsive design means that the site responds to the device, stacking content in a way so as to make the content accessible and readable. That is responsive. It may also mean that your navigation becomes one dropdown with the major site selections within.

Certainly there is flexibility within this approach. But the takeaway is that responsive design is the answer to the big and multifaceted mobile question. And you’re not shelling out for a new site and new apps.

Kelly Patchet

Kelly is a co-founder of GK Media and has been a web content expert and website strategist since 1997.