Responsive website designs for multiple devices

Your web site gets viewed on hundreds of different devices these days. From phones, through tablets, and desktop devices. Noko are ensuring that all the new web sites we build adapt to these new devices out of the box.

Having your web site work on any device allows your visitors and customers greater flexibility to consume your web site when and how they like. It lets you write an article once before being made available to all devices. It ensures that your web site is future-proofed as more people browse web sites on non-desktop devices.

More devices than you can shake a stick at

In the web development industry our main design concern used to be screen size and browser compatibility. Now a site must work satisfactorily on everything from a smartphone held in portrait mode to a huge, widescreen desktop monitor.

The kinds of devices we must consider are:

• Smartphones
• 7” tablets (Blackberry Playbook)
• Large-form tablets (iPad)
• Netbooks
• Desktops

Taking into account the multitude of screen sizes and browsers that are available for these, and future devices, we have an unknowable number of permutations to design for. Add to this the differences in input device (mouse pointer vs. touchscreen) and how those differences affect user interface design. It becomes ever more important to create a framework and a design that is super-robust and adheres to the latest web standards in order for our web site to render beautifully on any platform and survive long-term.

How do we design for every device?

One way to solve the write-once-publish-to-anything challenge is to use a responsive layout framework. A responsive layout changes its layout depending on the screen width of the device viewing the web page.

You can see many examples of web sites with responsive layouts here http://mediaqueri.es/
You can either open the http://mediaqueri.es/ sites on your phone and desktop at the same time, or open them in a browser like Chrome or Firefox and resize your web browser to see the site dynamically adapt itself.

The main navigation may run across the top of the page when a desktop monitor is used, and may reformat itself into some drop-down navigation when viewed on a smartphone.

Generally, web sites that use responsive layouts are based on a flexible grid framework. A flexible grid framework allows content boxes on a web page to both...

resize (to keep the layout of several columns of information consistent within a specified width-range), and

adapt (re-arrange the page to ensure the information is still displayed when there is no room for several columns on smaller devices).

The Boston Globe at full-width (desktop)

The Boston Globe at a slightly thinner width (desktop or tablet-landscape)

The Boston Globe at tablet-width (tablet-portrait)

The Boston Globe at phone width (phone-portrait)

In the case of the Boston Globe web site (as well as many others) the most important content is always at the beginning on each layout. As screen sizes get smaller navigation systems adapt, and content either disappears, or is placed at the bottom of the main content.

You can also see from the first two images that the layout resizes in the first two images, and begins to adapt (change layout) in the second two images.

We’ve done the hard work, so you don’t have to

We’ve developed a robust responsive layout framework adapted from the fantastic open-source project Twitter Bootstrap and the work of the HTML5Boilerplate team.

Having a robust and flexible development framework has several advantages:

• The framework layout adapts to any device.
• The framework can be used for custom websites, web applications, and content management system templates.
• It allows our development team to rapidly prototype web sites and applications that work on any device.
• For sites with complex interactions, site features can be built and tested using pre-built, bullet-proof interface elements before a final design is applied. This results in a much more streamlined and efficient design process.
• All of the interface elements contained within the framework have been designed and built to work on multiple devices.
• Our framework is available as part of our Umbraco site builds (Umbraco is a great open-source CMS system).

When to use a responsive layout

A responsive layout might not be appropriate for every web project. A native mobile application might be more appropriate if you’re targeting a purely mobile audience or if your website is a web app and you know the majority of your audience is on a certain type of phone.

An interesting model for SaaS-based businesses is to first build the service with a responsive layout so that all devices can be catered for though their web browsers, before building native mobile apps for Apple and Android phones in order to take full advantage of better camera and phone integration and improved touch screen gesture support. Facebook, Twitter and Trello are all good examples of services that work whether you use the web browser on your phone, or download the native app for your device.

Responsive layouts are appropriate for most business-to-business website builds where an organisation would like to write their content once, and distribute it as clearly as possible to the greatest number of devices. It’s that simple.

In 2010 mobile internet browsing more-than-doubled to 4.3%.

In 2011 mobile internet browsing doubled again to 8.5%.

If this doubling of use continues we’ll be seeing a 50/50 split between mobile and desktop web access around the middle of 2014.

For your next web project ask yourself if a responsive layout would be preferable to ensure you’re not alienating this growing segment of potential customers.

If you’d like to know more about our responsive layout framework, drop Steve an email steve.attewell@noko.co.uk

New Retirement Homesearch website delivers 35% conversion rate increase

Noko, in partnership with Refreshed Media, have delivered a new website for Retirement Homesearch.

The project was a great success; improving the number of visitor conversions by 35% and placing the site top of organic search rankings for key phrases.

Retirement Homesearch are Britain’s leading retirement property specialist. The huge growth in consumers searching for property online has made the Retirement Homesearch website a key focus of the company’s growth strategy.

"The key goal for this project was to ensure the new site performed more effectively for Retirement Homesearch. That means more traffic generation, more property searches and more expressions of interest" said Chris Attewell, Managing Director of Noko. "For both Noko and Refreshed Media the answer was clear: user centred design".

A usability led approach was employed to ensure that key visitor journeys and goals were understood. This knowledge was then used as the cornerstone of the planning and design stages. "This approach means that the visitor always remains our top priority," said Chris, "and the overall effectiveness of the site isn’t compromised by the complexities of building a large, technically challenging online service."

The project utilised usability testing and extensive sets of wireframes to ensure that the visual design was intuitive and conveyed key content, navigation and interactive features effectively. Behind the scenes a standards compliant approach to the user interface was combined with extensive content and site optimisation work to ensure excellent search engine results.

The approach has worked. "After being live for two months we’re seeing a 35% increase in conversion rates so we’re really pleased," said Ben Pacy, E-business Executive for Retirement Homesearch.

"Understanding and designing for visitor motivations and goals was key to the success of the Retirement Homesearch project," said Chris Attewell, Managing Director of Noko. "Now the site is live we’re going to be using the latest agile web development and usability techniques to deliver measurable ongoing improvements to lead generation and conversion rates."

• You can visit the Retirement Homesearch website here.

Delivering an essential intranet for Czarnikow Group

Noko has delivered a new intranet for Czarnikow Group using specialist planning expertise and the Interact Intranet platform.

Czarnikow had clear business objectives for the project:

• Provide staff with convenient access to key business information and services
• Improve internal communication
• Support the global workforce
• Help build a single company culture

In short: deliver an intranet essential to the daily working lives of staff.

Czarnikow Group is one of the most respected companies in the agricultural commodity markets. The business is driven by knowledge, expertise and information so delivering an environment that actively supports the working day is key to their competitiveness.

Delivering business objectives and supporting staff

"We decided that a new intranet would help us support a range of key business initiatives at Czarnikow Group, including improving communication to our global workforce, access to market reports, compliance and business information, streamlining business processes and offering internal support services" commented Stuart Durrant, CIO at Czarnikow Group.

For the first stage of the intranet project Noko ran user-focused planning workshops to understand key staff challenges and tasks.

"When planning an intranet our first objective is to understand staff work patterns and look to support the way people work within the organisation," said Chris Attewell, Managing Director at Noko, "so we used a user-centred design approach to discover more about staff and the information challenges they face."

Making the intranet essential – Understanding staff needs

The project objective was to encourage user adoption by designing an intranet that makes it faster and more convenient for staff to perform their key tasks and daily job role.

Noko ran user-focused intranet planning workshops with the Czarnikow intranet team, creating personas to understand key staff challenges, using reaction cards to assess brand and business objectives, and running card sorting sessions to plan the information architecture.

Several common staff challenges were identified during the planning workshops:

• Contacting colleagues, plus knowing their status and location
• Understanding if global offices are open or closed
• Knowing the time in key office time zones
• The current exchange rate for key currencies
• Access to market reports and industry news
• Being informed of company status information

Solving these issues became the focus of the intranet homepage, ensuring that staff had quick access to useful information. Other departmental sections were then created to house further resources, including ICT helpdesk information, updates and guides; HR forms, compliance documents and market information from the Analysis team.

Interact intranet platform

Noko delivered the project using Interact Intranet. Interact was the perfect platform because it is flexible, intuitive to use and offers rich intranet features.

"Using Interact Intranet has enabled our team to build and manage a fully featured intranet without the need for extensive technical development," commented Maggie Delaney, Intranet Manager at Czarnikow Group. "With minimal training it’s possible for our users to manage intranet content and features."

The results

By focusing on solving staff tasks and challenges Noko delivered an intranet for Czarnikow Group that was well received by staff and started delivering real value from day one. The Interact Intranet platform provides Czarnikow with a suite of intranet tools that solve key information, collaboration and business process challenges within the organisation, and will continue to expand with their business requirements.

"We’re really pleased," said Maggie. "The new intranet has gained excellent feedback from both management and staff and we’re looking forward to expanding it with new features and services over the coming months."

Following the successful launch Czarnikow Group are creating a roadmap that will introduce new Interact Intranet modules and further integrate the intranet into the daily working lives of staff.

Travel agent portal project completed for Carnival plc

Noko, working in partnership with Refreshed Media, have revised the Complete Cruise Solution travel agent portal to coincide with the launch of Carnival's new Academy incentive scheme.

Carnival plc, the operator of leading cruise lines Cunard and P&O Cruises, have recently launched a new incentive and training scheme for individual travel agents which required a redevelopment of their award winning cruise portal, Complete Cruise Solutions. The portal launch had to be coordinated with the new incentive scheme, updates to internal systems and a launch campaign.

Working together with leading Bournemouth digital agency Refreshed Media and a team at Carnival, Noko successfully planned and completed the web development updates to CompleteCruiseSolution.com, implementing new online features, integrating with Carnival business software and processes, and coordinating with all the teams to achieve a successful launch.

"We're really pleased to have worked with Carnival and Refreshed Media on this project," said Chris Attewell, Noko's Managing Director. "It's very satisfying when a project involving several teams and a major new service has such a smooth and successful launch."

Noko announces Interact Intranet partnership

We’re extremely pleased to be working with Interact as implementation partners for their powerful Interact Intranet software suite.

Why are we partnering with Interact?

Over the past few years we’ve seen our clients’ desire to improve internal communication, knowledge sharing and business productivity grow rapidly. Interact Intranet can play a key role in delivering these business objectives in a cost effective and manageable way.

The suite includes a range of advanced features for managing rich internal communication, company documents, business processes and staff collaboration.

We think Interact Intranet will suit many organisations’ desire for intranet software that is easy to customise, intuitive to use, puts control directly in the hands of the intranet team and has many interactive features, but is not technically complex to plan, deploy and support.

It also complements our experience helping clients plan, design and roll-out intranet and collaboration projects.

Interact Intranet software suite

Interact Intranet enables intranet teams to deliver powerful, feature rich intranet and extranet sites. It combines sophisticated functionality with ease of use, taking away the technical complexity of managing an intranet and allowing non technical staff to concentrate on the features that drive a successful implementation:

• Delivering relevant, findable and up to date content
• Allowing common business tasks to be performed online
• Delivering internal communication, news and updates
• Providing a social collaboration platform connecting people to people and providing spaces for teams to work together
• A site design that reflects the culture of the business and helps to foster cultural change
• Tools that help maintain quality and relevance as the intranet expands

Maintaining a healthy, effective intranet

Over time intranets often lose their effectiveness, suffering from complicated navigation and becoming bloated with out of date information. Interact provides tools to help you evaluate and improve the quality of your intranet:

• Content review dates – When a document is added to the intranet the author can set a review date and a workflow alert will be issued to the author at the relevant time
• Out of date content notification – staff can report out of date content to the author
• Content rating – staff can rate the quality of content
• ‘Best Bet’ tagging – Content authors can tag a document as a 'best bet', ensuring the information (such as a company policy) is easy to find via the search engine
• Search analysis – Helps authors understand what users are searching for and improve taxonomy. Staff can also report back to the intranet manager if their intranet search did not produce relevant results

The core system

Interact Intranet provides a whole host of intranet features:

• Easy to use content management and document management
• Control over intranet design, structure and navigation
• Intelligent integrated search
• Staff directory with rich profiles, custom fields and enterprise social features
• Integrated media manager with support for rich media
• Workflow and Forms manager – Reduce the cost of printing and processing forms
• Interactive social features including blogging, commenting, tagging and status updates
• Role based permissions
• Fully customisable homepages with over 40 pre-built homepage widgets
• Flexible permissions
• Multi-lingual support
• Supports ‘AA’ level usability compliance and has been audited and approved by the Royal National Institute for the Blind (RNIB)

Additional enhancements and modules

Interact can also be extended with additional enhancements and modules, including:

• Statistics and search analytics – You can easily find out which searches yield poor results so that missing content can be added to the intranet. Warnings are automatically sent when content or intranet use is poor and when content is missing keywords
• Absence manager – Manage staff absence with all the facilities of an advanced HR system. Includes reporting facility to examine absence trends
• Expense manager – Expenses can be added, approved and processed quickly and easily via your intranet
• Room and resource manager – Reserve meeting rooms and resources such as projectors, pool cars and refreshments. Set approval processes where required and automatically list available resources
• Support desk – Helps IT log, track and monitor internal support. Users can also log and track their IT problems. Can also be used for external support
• Advanced document manager – Increase your control of document versions. Check in/out documents, add watches and control security
• Training manager – Streamline training administration and employee development by organising and administering training courses and maintaining up-to-date records of staff development

More information

If you’re looking to revamp your intranet and would like more information or a demonstration of Interact Intranet please contact Chris Attewell on 023 8090 5555 or complete the contact form on our website.