The “mobile first” intranet (part 2)

Have you heard the web design term “Mobile first”? It’s a concept where you start with the smallest screen size you want to deliver content to, and then you work your way up.

(This is part 2 in a series about how to build a Mobile first intranet. You can find part 1 here.)

The Masthead

The masthead is an important part of the intranet and the top of all pages. The masthead should be global and basically look the same on every page. This sends the message that the end-user is still on the same site when following links within the intranet. Different mastheads on the same intranet make end-users confused. A page without some kind of head is a very lonely page.

Since the masthead is global and static, it is the right place for some functions the end-user should have always-access to. Here are some classic intranet functions needing a global space:

• Search (because you should be able to search from any place in the intranet)
• Navigation menu (because you should be able to change section from any place)
• The intranet name + logo (so you know what site you are using) (name and logo should also be the ”home” button, since this is the internet standard)
• Profile access (for signing out/in, and intranet settings) (since most intranets need to be personalised in order to deliver the right stuff)

Four things are just about the amount you can fit in a mobile masthead. The most common mobile width is 375 points (iPhone 6/6s/7/8/X/Xs), so this is the horizontal space available. A good mobile masthead height is ≈60 points, because we need to maximise the main area. If you like the masthead to be sticky, a low masthead is even more important.

This constrained space (375×60 points ≈ 22,5K points ≈10% of the screen) is good thing, since you really need to make some choices about what should be there and not. As it happens, 60 points is also approximately a centimeter in height, a perfect space for a button active area.

You have some freedom placing the functions in the masthead, but best practice suggest you put the most used functions on the right-hand side, since most people are right-handed and will use that thumb for clicking. (iPhone has the function Reachability, triggered with a double-tap on the touch ID button, for fixing this, but not everyone knows this.)

Let’s try it! Below is the first part of the mobile intranet for XCoffee, my fake company.

Try it out live here! (Mockup for W375 points = iPhone 6/6s/7/8/X/Xs)

If you’d like to put something else in the masthead, do it! But then you must have a good, alternative solution for the function you are removing.

Warnings

Some days are not great in an organisation. Bad things happen, and everyone should know about it because it hinders the ordinary work. Therefore you should be able to show a special warning on the intranet, a big red one, impossible to miss.

Since a warning is really important, it should be visible on the whole intranet, on all pages. In close proximity to the masthead is a good place. I prefer to put warnings above the masthead. It could also go directly below, but then the menus and search will interfere (should they press down the warning or hide it?).

Putting a warning at the top also signals “this is the thing you should read first”.

Are you a warning-intensive organisation? Add orange and yellow warnings, creating different threat levels.

Try it out live here! (Mockup for W375 points = iPhone 6/6s/7/8/X/Xs)

***

Part 3 Main and Footer.