Learning from mobile navigation

Should we learn a lesson from mobile web design and apply minimalistic navigation to larger screen websites?

Play

Responsive design is not just a set of technical techniques. It also has attached to it certain underlying principles. Two particularly noteworthy principles are content first and not presuming context.

Content first

Content first says that content should be our main consideration and the user interface should support that. We should build up from that content, through the simplicity of the mobile interface, via tablets to a desktop version. Although each layer may add more complexity to support the user, content should remain at the heart.

Context cannot be presumed

Many used to (and in fact still do) argue that we can make certain assumptions about users requirements based on the device they are using. For example, some argue that if somebody is using a mobile device they are more likely to be out and about and so require different content.

Responsive design rejects this premise, arguing that a user is just as likely to be using a mobile device at home on the sofa, as on a bus or a train. It argues that we should deliver the same content whatever device is being used.

Taking these principles to their conclusion

Recently when I was asking for debate topics, a Boagworld reader called Scott suggested a subject based on these underlying principles of responsive design.

He reasoned that if we are putting content first and if there is no real known difference in context between desktop and mobile, that perhaps we should treat desktop design more like mobile.

When designing for mobile we strip out all but the most essential screen elements. We focus solely on the content. But why should desktop be any different.

One area of particular interest to him was site navigation. He therefore suggested that…

This house proposes that larger screen sites need to learn from mobile design and hide navigation in order to remove clutter.

I have to confess I cannot make up my mind about this one. On one hand it makes a lot of sense. After all, by hiding the navigation you focus the user on content, which is what our websites should be all about.

Mobile navigation on stuffandnonsence.co.uk
Should we be using the same minimalistic navigation on larger screens as we do on mobile websites?

However, by hiding the navigation we raise other issues. Its harder for users to scan the site and work out their next step.

It’s an interesting one and I would love to hear whether you agree with this ‘proposition’. As always your answers will become the basis for a podcast discussion.

Let me know your thoughts in the comments below.

  • richarddale

    I definitely think mobile sites have their place. Many of the sites I built prior to RWD, static sites that view great on desktop and tablet. Its only when you get down to smart phone size that things start to break down. For many of these sites a mobile specific site would probably work better than a RWD site where I could be more focused and target the medium specifically.

    I did a RWD e-commerce website recently and although the end results were good, trying to get the shopping basket working and looking correct whilst being responsive was a nightmare and I couldn’t help but think that a mobile specific site would have been a better solution. When I browse the web using my iPad Air I never visit a fix width website and think this is a poor user experience why don’t they have a RWD site. I ony ever think this when on my iPhone.

  • sanedevil

    I am not a web designer, but have a team that is building one for me. So in trad way, I have to have a “web designer” design the site in Photoshop which is then handed to “web developer” to generate code.

    You can imagine there are several problems w this – time, costs, rework, code doesn’t do what the design shows etc.

    I hit upon your blog while thinking if there are tools that would eliminate the design-to-code step

    I very much agree w the house and would love to know the process and tools to help achieve this.

Headscape

Boagworld