Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Check out my website - it's responsive! Yawn!

Parent Feed: 

"OMG! You've got a responsive website!"

Update: Part 2 of this series: 5 Tips for a Responsive Website is now available.

Once something to brag about, this is now old news. Of course it's responsive - that's standard practice now, right? Unless your site is not responsive, in which case, you are probably losing visitors and money. And now that Google has started adding "mobile friendly" tags to its search results, you can be sure it'll soon be an SEO bonus to have a responsive website.

The various resources coming up on my searches can't seem to agree on exactly what percentage of internet users are mobile internet users, but they do all agree on this: mobile is big, mobile is growing and most users don't use one device exclusively. This means that the same people are visiting the same sites on different screen sizes and expect a very good user experience each time.

Think about a typical day.

Your alarm sounds and you pick up your phone to turn it off. Seeing as you have it in your hand, you have a look to see what's happened in the Twitterverse overnight. At breakfast, you lazily cruise some of your favourite sites on your tablet. On the bus, you're back on your phone, reserving cinema tickets for tonight and finishing off some of the tasty articles you scanned over breakfast. Now in work, you've got your big desktop monitor, doing some research. Tired of flicking between browser tabs, you arrange your windows with three browser windows side-by-side. Home-time comes and you're back on your phone, in a queue, whilst waiting to be served some fries before the cinema. You hit home just in time to stick the phone on charge before its tired battery dies altogether.

Imagine the annoyance if you hit a site that does not take account of your device, that does not adapt to your view. You're busy: you've probably got other things to do. There's usually another site that does what you want. If it's responsive, you'll probably end up doing your business there.

This scenario is not too far-fetched. Modern life is connected. People are on the go whilst they are on the go, and two things they really dislike are having to think whilst doing something else, and having to wait whilst waiting. In much of our typical day, there's more than one thing going on: breakfast and surfing, Twitter and queueing for fries, travelling and booking tickets. The attention of the user in each case is split. They are distracted, and they are not happy if they have to struggle to use their sausage fingers to navigate tiny icons and then stare at a blank screen whilst the page fails to load.

Be nice to your users: you want them to come back and to use your service. In order for that to happen they have to feel good about doing it. A poor mobile experience is not going to make that happen.

People often worry that responsive sites are more expensive. They don't have to be, once it starts at the design stage. A design can facilitate it or hinder it, and it's going to impact on both the budget and the bottom line.

Most of my work lies in supporting existing sites. I have actually found it easier to maintain responsive sites than fixed width sites, because of this: when adding new features, typically a responsive site is built in such a way that the new feature will just work. This is because both the designer and the developer have understood how each element interacts with its neighbours and have thought about how that interaction will play out over different screen widths. Fixed width or partially adaptive sites inevitably cause layout problems, as they facilitate lazy CSS. You don't have to be a CSS ninja to fix a width, but you really have to think when creating a fluid grid with breakpoints.

Who needs a responsive site? 

Everyone. Users need to use them because it makes surfing on a mobile device suck less. Site owners need to own them because it makes users happy and increases conversions. If you are thinking of getting a site built, make sure it's responsive. If your agency is not providing responsiveness, ask yourself: are these guys cowboys? If you plough ahead and get a non-responsive site, it will lose you money and you will still inevitably come to ask the dreaded question: "Quick one for you - can you make my site responsive?".

Have a look at the analytics for your own site. All those users you thought would never move away from IE6? They're now using ipads.

Mobile is real. But what is it? 

At its simplest, a responsive site is one that changes depending on the screen width of the viewing device. This means that you don't have to pinch-zoom to read the main content on a page, and you don't have to struggle to deal with fly-out menus or wonder how on earth you're going to navigate the site that relies on 'hovering' over the main navigation to activate the sub-menus.

You can go further down the rabbit hole and talk about adapting the content depending on device or location, or talk about serving different images dependent upon device or connection speed, but the basic responsive site is just an adjustment of presentation to better suit the viewing tool.

If you're still not convinced, have a look at this presentation from Luke Wroblewski at Drupalcon Denver. It is well worth kicking back and enjoying this excellent talk on all things mobile and web.

So, only one question remains:

Do you want a responsive site?

Yes, I want a responsive site!

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web