Creating better portable experiences with Responsive Web Design

By Tom Prior

Posted on

The explosion in smartphone and tablet ownership in recent years has given way to the rise in popularity of application (app) downloads, motivated by a number of factors, including the perceived improved user experience, performance advantages, and ability to utilise hardware features.

The advantages for publishers of the marketplace ecosystems provided by each manufacturer include improved findability, and the potential for profit-making by taking a percentage of download cost for paid applications or content subscriptions.

If you want to check out some of our responsively designed websites and other projects see Makemedia’s case studies here

A better portable experience

The lure of apps is easy to grasp, with layout, navigation, and typography optimised for the specific screen size, big or small. The boom in app popularity has seen a number of organisations simply translate their website content into downloadable applications, moving e-commerce, editorial, and social platforms from the browser, directly onto their user’s hardware. Even though many of these applications replicate content available from the same organisation’s website, they prove enormously popular with consumers.

Although the quality of their design varies, good smartphone and tablet applications deliver content in a way which does not require a user to work hard to get to the content they need. No need to pinch and zoom to scale up page content, no waiting for unnecessary page elements to load, and no need to battle with navigation designed specifically for a desktop user. Choosing an app over a website is often the pain-free choice.

The New York Times website viewed on Mobile Safari (Attr: Robert Scoble)

However, although app’s can be a viable solution for organisations wishing to optimise their content for portable devices (depending on their objectives and technical aims), there are potential pitfalls.

Potential disadvantages

Device Specific

Producing multiple apps to ensure coverage of the most popular hardware can add to development overhead, and this often means production effort may be limited to a defined number of devices. Market share is spread among a plethora of smartphones, tablets, and e-readers, so a percentage of any potential audience is lost.


Updating device specific applications can increase development effort and cost depending on the language employed, and add to the intrusive load of updates served to users. In addition, new arrivals to the marketplace may prove popular enough to justify additional investment.

Shelf life

Like VHS, CD-ROM’s, and DVD’s, apps have a best-before date which is hard to predict. As new formats bloom, new hardware launches, and application eco-systems change, so the software developed specifically for these devices will one day reach a point at which they are incompatible with the latest device or operating system.


The ecosystems within which applications are managed by hardware and software manufactureres (such as the Apple App Store) mean a percentage of revenue is surrendered by publishers for every download of a paid application or subscription.

An alternative

Old habits

For several years the trend toward fixed-width website layout became something of a standard practice, delivering pages at set pixel width to allow greater control over their appearance. As desktop screen sizes grew, so did the accepted ‘standard width’ for websites, until the explosion in mobile browsing meant this would no longer cut the mustard.

Navigating a website optimised for a large monitor on a small screen (such as those on an iPhone) can be a frustrating experience, and the App Store beckons for those requiring for a more usable mobile experience.

Responsive web design

Infrastructure Journal’s responsive platform

The term Responsive Web Design was coined in May 2010 to specifically define a set of design methodologies and web technologies used to create websites that adapt to the size of the user’s screen size. In essence, a responsive web design can detect the size of a user’s web browser window size (from the smallest smartphone to the largest cinema screen) and reorganise the website’s content and navigation to suit.

It is delivered through a single set of code, without the need to create separate code for each of the different sizes of device. The result? Users of any version of iPhoneiPad, modern Android devices, and Windows Phone experience the same website, but with the user experience adapted accordingly. Those on desktop machines experience the same website in a form optimised for large screens too. No apps required, just modern web technologies.

The technical bits

Using a flexible grid system (the guides designers use to define page layout), flexible media (text, images, and video which can change size), and a technology called CSS3 Media Queries (website code which applies layout and styling changes based on the user’s current screen size), we can create websites which optimise for desktop and portable devices instantly using the universal language of the web – HTML.

Unsurprisingly, the use of this technology has become enormously popular, with organisations like Starbucks and The Boston Globe redesigning responsively, and others like the BBC experimenting with employing responsive web design techniques.

See it in action

Makemedia recently launched a responsive redesign for Infrastructure Journal, a global data and editorial website for the global infrastructure finance market. If you’re using a desktop browser, follow these steps to see how the new IJ changes it’s layout as the browser width decreases in size (such as on a smartphone), or watch the short screencast above for a quick glimpse of this technique in action.

In a modern browser, you will see the page content flex and move to suit the size of your browser as it changes without the page reloading. Page content is reordered, navigation is optimised, and text sizes are adjusted for comfortable viewing.

Opening the same page on your smartphone or tablet browser has the same effect, with the website automatically adapting for the size of your chosen device, using the exact same set of website code used for the desktop site.

An app experience for everyone

Device agnostic

HTML has been the language of the web since it’s birth; websites designed fifteen years ago still work in today’s modern browsers, and will continue to for years to come. By developing responsive websites using HTML and CSS, experiences can be optimised to deliver websites optimised for any screen regardless of portability, manufacturer, or operating system.

From iPhone to Kindle, Android to iPad – the kind of experience previously the reserve of mobile-specific websites or downloadable applications can be had by all, through the browser.

Maintainable and scalable

Updates to websites designed responsively only require a single set of code to be updated when changes are required, without the need to interrupt a user’s experience through intrusive updates or negotiating app store approval.

More than a trend

Responsive design has quickly become an important part of many designer’s and agency’s workflow, and it’s ethos is starting to bloom beyond the technical definition outlined by Ethan Marcotte in 2010. It has led to many traditional design processes being reconsidered (with strategies such as Mobile First becoming more popular), with speed and performance again becoming one of the top considerations when developing for a multitude of devices that may have wildly differing connection speeds. Rather than simply being concerned with optimising for screen size, more detailed elements of a user’s context will soon be used to shape the experience they have, ensuring the most usable and optimised solution is delivered through their browser.

Ready to use

The good news is that support for the technology part of designing responsive websites is very good, with most modern browsers – which includes the majority of popular smartphones and tablets – able to take advantage of the techniques required to design responsively. Older browsers can experience a fixed width design, so don’t lose out on the same content.

One size doesn’t fit all

Like any design or technology choice, users and business cases need to be considered carefully before deciding a strategy for development: responsive web design isn’t the answer for everyone. Although multiple app development can be costly, responsive web design done properly usually requires additional planning, research, and design. Of course, there are occasions when web technologies alone cannot deliver the solution required, such as when direct access to restricted hardware (such as camera, accelerometer, or sensors) is needed.

Some publishers prefer the direct marketing opportunities presented by the marketplace ecosystem, and find designing to the restrictions of individual platforms a more efficient workflow. The monetisation model for app stores are also familiar to users, and cut down on the steps required for purchase once payment details have been stored. Until faster, more universal, and more integrated payment gateways are popular in the browser, app store ecosystems do offer a more seamless method of commerce.

However, if your aim is to simply translate an existing website experience for mobile, responsive web design is a great solution for delivering an optimised experience for as many users as possible, using web technologies which will stand the test of time.

I hope to follow this post up with some more detail around the methods and technologies used to deliver responsive web design, including case studies of how we delivered areas of Infrastructure Journal.

In the meantime, take a look at some of the other responsive website’s we have launched recently (Martin Searle Solicitors, BRS Global), or get in touch if you want to know how we could do the same for your organisation.

Back to top

Leave a Reply