The proliferation of tablets and smartphones over the last couple of years means that digital marketers now understand that they need to deliver content that looks great on a multitude of platforms and devices. One way of doing this is to adopt a responsive web design (RWD) approach.
Some 72% of respondents featured in the 2012 Airport IT Trends Highlights expect to see smartphones as the top channel beyond 2015, so now is the time for all industries to be embracing this.
The first and possibly most important decision is choosing a responsive design approach rather than a dedicated mobile website. A responsive approach is attractive as it may require a smaller investment than developing a separate mobile site but there are still those situations when a separate site is more appropriate. For example, if the mobile user has a completely different set of requirements, the mobile site will need to be designed using a completely different user journey for the mobile experience. In this case responsive design won’t cut it.
But let’s just assume that a responsive approach is the correct approach for you - what should be considered next? Here are three approaches to RWD and the pros and cons of each.
Responsive Web Design
In a nutshell, Responsive Web Design allows the browser to display content in different layouts, depending on screen width and deliver images at an appropriate size, using browser resizing or displaying different sized images at different resolutions.
Most responsive designs make use of a fluid grid design to give the flexibility of layout required.
The concept of graceful degradation, used for many years to handle the varying capabilities of different desktop browsers, is often used in RWD to ensure an elegant experience in smaller resolutions and less capable feature phones.
The main problem with this approach when considering the mobile experience is the extra work being asked of the browser - forcing the browser to download extra code and images, resize images and increase the number of requests to the server will severely impact the speed performance of the page. This obviously conflicts with providing a great mobile experience. Downloading images at a resolution much bigger than they will be displayed is simply a waste. When using 3G it might be noticeably slow and a waste of data allowance.
Also some browsers (especially mobile) don’t handle image resizing well or at all so it can’t be considered a solution for all mobile devices. Not all applications and third-party plug-ins or widgets will be compatible with mobile browsers. In addition more devices of various screen resolutions are being released all the time. More variations of devices require more layouts, which compounds the speed problem.
· Delivers content elegantly to multiple screen resolutions.
· Removes the need for significant investment in separate mobile sites.
· Can impact the performance of a site by increasing code and media assets
downloaded and the number of server requests per page.
· Might not be compatible with essential applications or third party widgets.
Mobile First Responsive Design
If the reason responsive design is needed is to deliver a great mobile experience then it would make sense to develop an approach that makes this the primary concern.
A mobile site is about ensuring that the content delivered is relevant to a user. User and passenger journeys are looked at in great depth, along with their touch points and informational requirements when identifying the elements, to optimise within a mobile offering.
It has been identified that most users access airport information via a mobile device and therefore a mobile first approach would focus on those users in and around the airport, en-route and on the move to access up-to-the minute information and to take care of those last minute extras.
The basics for mobile first responsive design are the same as standard RWD but in this case the designer starts with the mobile experience. Content and functionality is prioritized accordingly and if it’s not truly essential, it doesn’t go in the page. The page is stripped to its bare essentials and, in contrast with the previous example, progressive enhancement is used to add layers of aesthetic complexity so the site looks great on whatever sized browser it’s viewed on.
The problem is it’s not as easy as it sounds to drop content and functionality - a lot of planning and compromise is required. It also depends on what kind of site is being built - if a large and complex piece of functionality is vital to the site but not applicable to mobile this may not be the right approach.
· Forces page design to be stripped to the essential elements.
· Creates a faster and more elegant mobile solution that also looks good in larger resolutions.
· Requires intense planning
· It may not be possible to simplify a site to the level required Responsive Web Design with Server Side Components
Responsive Web Design with Server Side Componants (RESS)
One way of modifying the RWD to address to the problem of device specific sites and the browser resizing images, is to develop a server side approach only on certain elements of the page, such as images and video, and let media queries and style rules handle the layout. This is known as RESS (a mix of responsive and server side – get it?) and it could be the perfect balance to provide futureproof, multi device content delivery for your website.
There aren’t any really any drawbacks with this approach. RESS is a perfect compromise when a site wants to deliver a great experience on multiple browsers but doesn’t want to operate on separate mobile sites. It does require a bit more investment than the standard RWD approach and it helps if you have a content management system like Sitecore that can automatically resize images and store cached versions of the different sizes until they need to be served.
· Solves one of the major drawbacks of standard RWD.
· Extra development work required compared with standard RWD
There are many ways of addressing the issue of optimising web content for different devices.
Responsive web design – in whatever form it takes - uses front-end wizardry to allow the site to present content in a layout suited to the browser width. This is different to offering contextual mobile-specific content via a dedicated mobile site or app. When offering mobile specific content in context to a user, the user story could be "I am at an airport therefore serve me special content to my mobile that I can't get (and don’t need) via a PC". Alternatively a responsive user story for that user would be "I am at an Airport, detect my browser size and rearrange the content available to be easily viewable on my mobile device”.
Whichever route you decide to take, make sure you’ve considered and addressed the needs of your users, and of your business.