© Copyright 2012, Step Two Designs Pty Ltd • www.steptwo.com.auintranets • usability • information architecture • knowledge management • content management

KMCOLUMN

JULY 2012

Responsive design for mobile intranets?

The mobile space continues to grow atbreakneck pace. Many websites are now see-ing upwards of 20–30% of their web trafficcoming from mobile devices. This includesboth mobile phones (cellphones if you livein the US) and tablets (such as the iPad andothers).

Reacting to this, many organisations arestarting to deliver mobile versions of theirwebsites. For the early movers, the questionhowever, was what to deliver to mobiles,and how?

The majority of the web industry has nowsettled on an approach called ‘responsive de-sign’.

In simple terms, a responsive design detectswhat type of device is being used to visit thewebsite, and how big its screen is.

The display of the site is then adapted tomatch the device. This may mean droppingsidebars on smaller devices, or switchingfrom a three-column layout to a two-columnlayout on tablets, and a one-column layouton mobiles.

There is now a whole industry around re-sponsive web design, and many variationson approaches.

Lagging somewhat behind, mobile is nowbecoming a big issue within the enterprise.Increasingly, staff in the field, as well asthose sitting at desks, are expecting to beable to use both phones and tablets to dotheir work.

For intranet teams, is responsive design theright approach for intranets, as for websites?This article outlines the options, and dis-cusses possible approaches.

What is responsive design?The basic principle of responsive web de-sign is simple: display information (contentand images) in a way that matches the sizeand capabilities of the device being used.

This recognises that a design that looks greaton a desktop or laptop with a big screenwon’t usually work on a phone with a smallscreen. Even modern tablets with high reso-lution screens are often still too small forstandard web designs.

In practice, this involves making changessuch as:

• reducing the number of columns in the layout

• eliminating supporting elements, such as sidebars

• reducing or eliminating graphical elements

• shrinking the size of items, such as pictures

• reworking navigation options

• generally simplifying page designs

• adding mobile-specific features

In technical terms, this is often done by us-ing a ‘media query’ that presents a differentstylesheet (CSS) for devices other thanstandard screens.

It’s therefore possible to present different de-signs based on screen size, with one forsmall devices, and another for big devices.

Javascript can also be used to make more ad-vanced changes, although this can causecompatibility problems.

For more on responsive design, use theWikipedia page as a jumping off point:

en .wik iped ia .o rg /w ik i /Responsive_Web_Design

How should the intranet be presented on mobile devices?

James Robertson is the managingdirector of Step Two Designs, anintranet consultancy based inSydney, Australia. James is the au-thor of the best-selling books“What every intranet team shouldknow” and “Designing intranets:creating sites that work”.

Responsive design for mobile intranets? • Page 2© Copyright 2012, Step Two Designs Pty Ltd • www.steptwo.com.au

Responsive intranetsThe designs from Malmö Stad (the city ofMalmö in Sweden) show how responsive de-sign can be applied to intranets.

The default view, for desktop-based users,presents a three-column view. The first twocolumns contain content and links, with asidebar containing supporting details.

As the size of the device shrinks to a tablet,the display shifts to two columns. Mobilephones are presented with a one-columnview.

The same information is presented on all de-vices. On the smaller devices, the layout is‘stacked vertically’, rather than showing incolumns on a single screen.

This ensures that information is accessible,at least in a basic form, regardless of how thesite is being viewed.

For more on what was launched and why,read Jesper Bylund’s blog post:

jesperby.com/2012/05/28/an-intranet-for-the-mobile-devices/

Advantages of responsive intranetsApplying responsive web design to intranetsprovides a number of benefits:

• One intranet can serve the needs of all staff, regardless of what device they are using.

• The intranet is not locked into a single device (as would happen if it was delivered as an iPhone app, for example).

• Even older phones can make use of the intranet, if the design is done carefully.

• Delivering a single, adaptive site eliminates any duplication of content.

• The site retains flexibility over time, as the size and nature of devices inevitably changes.

• The development of the intranet can draw upon the extensive resources already produced for creative responsive web sites (eg tutorials, code samples, etc).

• The extra cost of producing a responsive design as part of an overall site redesign or rebranding is minimal.

Weaknesses of responsive intranets

The application of responsive design to in-tranets is not without its problems, however.These include:

• The full content of the intranet is presented to mobile devices, which can be impractical to use on small screens.

• Even though the whole intranet can be delivered to a mobile device, is this what staff need when they’re away from their desks?

• The interface isn’t really designed for touch screens, which makes it harder to click on links, for example.

• Sites can be slow on mobile devices, as the full page is downloaded before being tailored on the device.

• Responsive web design only covers the ‘core’ intranet, as published by the content management system. Frequently used tools, such as HR self-service, are not covered by the new designs, and probably won’t work well on mobile devices.

• Without significant reworking, more complex functionality, such as filling in forms and using web applications, will be difficult on mobile devices.

The reality is that responsive web design isthe ‘easy option’ for intranets. It provides ba-sic accessibility for all devices, but leavesmobile users with a huge site to navigate.

With only modest benefits provided to mo-bile users, staff are likely to become unsatis-fied with the mobile solution in comparisonto the elegance of consumer apps and tools.

Make your new intranet responsive by default

In this modern age, any intranet redesignproject currently planned or underwayshould deliver a responsive intranet.

The cost of doing so is small in the schemeof things, although some intranet platformsmay make it harder than others.

With the growth of ‘bring your own device’(BYOD) and enterprise mobility in general, itwon’t be long before a mobile-friendly

A responsive intranet can be used on all devices

Consider mobile when redesigning the intranet

Responsive design for mobile intranets? • Page 3© Copyright 2012, Step Two Designs Pty Ltd • www.steptwo.com.au

Responsive web design in action, showing how an intranet can adapt to match the size of the device that’s being used. Screenshots courtesy of Malmö Stad.

Responsive design for mobile intranets? • Page 4© Copyright 2012, Step Two Designs Pty Ltd • www.steptwo.com.au

ABOVE: Responsive design can also be applied to key information resources, such as this projects database. Screenshots courtesy of Arup.

LEFT: While responsive design is useful as a ‘default’ mobile view, a more effective solution can be to deliver a true mobile site, focusing on a handful of key tasks. Screenshot courtesy of UK Parliament.

Responsive design for mobile intranets? • Page 5© Copyright 2012, Step Two Designs Pty Ltd • www.steptwo.com.au

intranet will be required. So it’s better tomake provision for it today during the rede-sign project, rather than be forced to do an-other mobile-specific redesign later.

Teams must also recognise the limits of re-sponsive web design when designing anddelivering an intranet.

As discussed in the article What six things dostaff want on their mobile devices?, the reali-ty is that staff don’t want all five thousandintranet pages on their mobiles. It’s hardenough to find what they need when sittingin front of a big screen at a desk, let alonewhen using a touch interface on a smallscreen when on the go.

A responsive intranet should therefore bedesigned to meet two basic use-cases:

• As a default design that will provide a better (if not great) interface on mobile devices.

• As a tablet interface, where the full intranet may be required on a device with a larger screen, when a PC or laptop isn’t being used.

Create ‘responsive services’While applying responsive design to an en-tire intranet may provide limited value, itcan be useful to focus on making specific in-formation sources or services mobile-friend-ly.

For example, Arup has used responsive webdesign when delivering their ‘projects data-base’, as shown on the previous page.

This is a core information resource for theentire organisation, allowing staff to look upwhat’s been done before. It’s also a valuabletool for sales staff when talking to prospec-tive customers.

While it’s a very detailed resource, present-ing the full information to a mobile devicestill makes sense. So responsive design is agood fit, allowing a single resource to beused throughout the organisation.

Design a true mobile interface

Following the principle of delivering a hand-ful of key services to staff when they’re awayfrom a desk, intranet teams should plan todeliver a true mobile interface.

The example from UK Parliament on theprevious page shows what this can look like.Instead of a whole intranet squeezed onto amobile device, the intranet team delivered ahandful of common details and tools that areneeded by members of parliament.

The result is simple and elegant, while stillsupporting future expansion. Elements suchas the projects database in the Arup examplecan then be ‘slotted into’ this design as re-quired.

In this way, the mobile interface becomes amix of tailored interfaces and responsiveversions of intranet content. This provides abest-of-both-worlds solution that can begrown and improved over time.

Summary

Mobiles have become a part of our lives, andthey will soon be having a big impact withinour organisations.

It’s an exciting time for intranets, and mobiledevices provide a unique opportunity to fi-nally deliver information to staff whereverthey are, and whatever device they’re using.

Intranet teams must therefore start to delivermobile-friendly corporate solutions asquickly as possible.

Responsive web design is a natural elementto include in contemporary intranet rede-signs. This gives universal access to intranetcontent, regardless of the devices beingused.

Responsive intranets should only be seen asa good-enough solution in the short term,with plans made to deliver solutions that arespecifically designed for mobile devices andtouch screens.

Did you like this article?Send your thoughts and feedback to:

jamesr@steptwo.com.au

More articles!Find out when new papers are published:

www.steptwo.com.au/subscribe