Think “Responsive Design”

If you are a happy owner of a smartphone or tablet, you are already familiar with ways to consume and interact with content on these platforms. But building all those apps & websites costs money… and we still need websites for the “classic” desktop users. Is there another way to merge all those fabulous ideas into a unique platform ?

The answer we believe in is called “Responsive design”.

For those who don’t know about it, responsive design combines progressive enhancement techniques, CSS media-queries, and innovative project approaches to allow us to create a website that responds to the context it’s being viewed within. Not only to the screen size of the device, but also to its capabilities (keyboard or lack thereof, touch-based devices,… ).

Before we dive in the explanation, let’s review the problems with native Apps and mobile-specific websites.

Problems you face when you develop Mobile Apps :

  • You need to have your App available for each OS : iPhone, iPad, Android,
  • You will have to maintain and update regularly each of those apps because of the OS updates and SDK changes. This means multiple code-bases in different programming languages.
  • Without regular updates and adequate marketing, apps quickly disappear from App Store charts. It takes extra marketing effort to make them relevant.

Belgian newspapers have launched native iPhone apps (without a suitable business model, obviously) years after its launch. Same thing for native iPad apps, soon it’s going to be Android apps. Those costs can be huge, and all that only for serving a segmented user-base.

Let it be clear, there are some contexts where a native app makes more sense, and if you’re in that case, you should already know it. Amongst the things that you currently cannot do with web technologies:

  • access device functionality like camera, mic, storage…
  • do some heavy data processing
  • reach a device-specific target audience
  • get revenue through app distribution

Problems you face when you develop separate Mobile Websites :

  • URL schemes that are not adequate for sharing. (How often have you opened a link from Twitter or Facebook that directed you to an inadequate version? Check for example the Mobile website of the Belgian Newspaper “LeSoir” from your laptop or desktop PC.
  • Different page templates, technologies, and designs that create overhead for maintenance and platform evolutions.
  • Loss of focus on the users from in-house staff. If some people work for mobile users and others for desktop users, who has a unified vision of your user experience?
  • Using device-detection is backwards-looking and not future-friendly (does “being pushed to a mobile-specific websites while using a tablet” sound familiar?)

Although some of these problems can be avoided with clever engineering and attention to user experience, we still see them happening too often.

We truly believe that there are better ways to build experiences that adapt to the devices. With the emergence of new technologies (CSS3, and the HTML5 API’s), and a careful application of responsive design and progressive enhancement, we can do more than you thought was possible with a “website”.

So what are the advantages of Responsive Design ?

  • Thinking about mobile from the start (the famous “Mobile First” approach) means you will prioritize functionality and focus on the users’ requirements.
  • One website, serving mobile, tablets, desktops, and ideally any kind of future device.
  • Savings compared to a native app, and the associated maintenance costs.
  • One URL scheme that guarantees efficient sharing (although this can be adapted).
Food & Drink Europe Website in devices

A unique website/platform has a different rendering in each device

Spade team members have been closely following this revolution in our area, and we’ve already been lucky enough to have a few clients that jumped the responsive chasm with us.

So if you’re thinking about redesigning your website, or you envisioning a mobile-app (or maybe a mobile-only website), maybe now is the time. If your presence is not a webapp, or applicative in nature, but more content-heavy, there’s are many reasons why you should consider this approach compared to, say, native apps.

What would make sense, instead, is noticing that all those new platforms have something in common: They come with powerful, modern browsers (unlike, cough, desktops that still run IE).

So the more logical approach we recommend to our clients, and that we’d like to see from newspapers or other content-focused websites here and elsewhere is to take advantage of this and develop an efficient browser-based platform.

As it has been largely discussed on various websites and blogs, Responsive web design might not (yet) be the Silver Bullet, but it’s definitely worth taking into account in 90% of cases.

 

A few wonderful examples of responsive websites :


Go further with some resources :

5 comments on “Think “Responsive Design”

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*