“The decision whether to build a responsive site or separate mobile version should be driven by return on investment.”
Therein lies the answer. A cost-benefit analysis showed in the case of Nidos that it is more profitable to develop one responsive intranet than two separate ones (mobile and desktop). And we are convinced that this also applies to many other organizations. But such an analysis will have to show this for a specific situation each time.
Pros and cons of responsive intranet
Advantages:
Independent of device type or platform: works not only on smartphones, tablets, laptops, desktop PCs and other devices, but also on different types of smartphones and so on.
The layout is optimized for any screen, making content always accessible.
Only one (holistic) approach — research, strategy, design, development and implementation — is needed. Saves development costs.
One intranet with one codebase and one information source. Saves on management costs.
Complex websites or intranets are often built from a structure with multiple levels of information (in your information architecture) and this is often reflected in the navigation (main navigation, meta navigation, sub navigation and search function). On a desktop PC where a screen has a high resolution, there is enough space to develop this navigation in a user-friendly way. But translating it to a mobile device is a lot more difficult. (And for complex navigation, 'mobile first' design and development is not necessarily the solution, in our experience.)
And why not an app(s) or mobile intranet?
We would like to list the pros and cons of the technical possibilities (app, mobile or responsive intranet). Of course, budget and management also play a decisive role in this.
Mobile app
Advantages:
Communicates directly with system resources (processor, geolocation, camera) via the OS (iOS, Android, Windows). This often results in significant differences in performance;
Can be specifically designed to meet the needs of mobile workers.
Disadvantages:
Platform dependent: Nidos would be tied to one OS and would no longer have the freedom to easily switch to other platforms;
Development is expensive;
Management is expensive;
You are (often) dependent on a third party (Apple, Google or Microsoft) for publishing and updating your app.
This option was out of the question for Nidos anyway.
Mobile intranet
Advantage:
Platform independent: works on all OS's (iOS, Android, Windows). Stichting Nidos is therefore not tied to a specific smartphone.
Can be arranged according to the taste and needs of mobile employees.
The layout is optimized for any mobile screen, so content is always accessible on smartphones.
Disadvantage:
Development is expensive, because you develop 2 versions of an intranet.
Management is expensive because you maintain 2 separate sources of information.
When designing the mobile intranet according to the taste and needs of employees, a mobile strategy is necessary.
iPhone home intranet Nidos
Functional and interaction design
The functional and interaction design for Nidos.
Information Architecture (IA)
The information needs of the employees and the categorization of topics that came from the focus group, as well as the results of the strategy workshop, we translated into an information architecture (IA). Ideally, you want to test the information architecture with a larger group of users by means of a tree test, but unfortunately there was no room for that in this trajectory.
With a tree test you test a menu structure that is composed on the basis of card sorting. You do this online with the user. You ask them a specific question to which they have to find the answer via the 'tree' (the menu or navigation structure). For example: 'Book a meeting room at location Den Bosch'. This makes it clear which navigation paths users find logical. And therefore whether you really made the right choices in your preliminary work
Interaction design (IDE)
A tree test provides a clear guideline for the development of the interaction design. For the intranet of Nidos, we also used the results of the focus groups to create the interaction design. In interaction design, concept, functionalities, navigation, interaction and information architecture come together. Such wireframes function as a concept or discussion document where changes can be implemented quickly and easily. The chance of delays and high costs for implementing changes during development is therefore considerably smaller. As soon as the interaction design is final, the (graphic) design process starts.
One of the main challenges was the (interaction) design and development of a robust solution for navigation for mobile, tablet and desktop. The intranet of Stichting Nidos consists of different sections with multiple levels of information. Logically, we mainly experienced problems for mobile. Because where do you put main navigation, meta navigation, a search option and an entrance to the employee's profile, without the entire screen being filled up?
Off-canvas there is plenty of space
Most responsive websites often rank page elements in mobile state by switzerland mobile phone number data priority below each other. At the top of the page there is space for navigation, the logo and possibly a search function . You can see that nicely below.
Mostly fluid Nidos responsive intranet
For the intranet of Stichting Nidos, a different approach is needed. Because when we place all navigation elements in sight, that is at the expense of the most important content per page. An off-canvas layout offers a solution here. This type of layout uses the space outside the initial viewport of the browser to hide page elements until the user takes action to show them. Or when a larger screen has enough space to include these elements permanently in the layout.
Below you can clearly see that there is no room for extensive navigation on a mobile screen. But when the user activates the menu with the menu button at the top right, the menu slides in from the left side of the canvas. With the meta navigation directly below it. The rest of the page elements remain. Only scrolling within the menu is still possible, until the user deactivates the menu with the same button.
iPhone-home1