Navigation on a desktop website targeting mobile-friendly users

Question

More and more people are browsing the web primarily from their mobile devices; similarly, most young people use their phone as their main browsing device.

I'm part of the generation who grew up with computers, and adopted phones and smartphones gladly as they became widespread.

But the next generation, the one that is 14 or less today, they discovered the web using their smartphones. And that's great, but they obviously got used to some different navigation principles than you and I.

So what does that mean when today, I'm designing a desktop website targeting these youngsters? Do I have to try to replicate what they're used to see on mobile websites, or do I give them a regular desktop web experience (the kind you and I are used to)?

As an example, mobile websites usually favor scrolling over splitting content in tabs. Should I replicate this in a desktop website targeted to the mobile generation?

Answer 1

Aside from width and information density, mobile website conventions aren't intrinsically unworkable for Desktop users. Navigation-wise, all that's really vital is that you keep it simple, prefer large click targets and not require hover interactions. If your mobile website doesn't strip out too many features (and really, it shouldn't) building up from a mobile site shouldn't be that bad. There's a reason Mobile First is a design philosophy, not just a business one; a properly built mobile site can be built up into a desktop set much more easily than a desktop site can be stripped down into a mobile one.

Here's some stuff to do and avoid:

Things to do:

• Build up from mobile: This makes everything else easier. Start with a solid mobile site.
• Responsive design: It doesn't have to be hard if you're starting from mobile. At certain breakpoints you can add things like sidebars, wider horizontal menus.
• Fluid design: If responsive isn't your thing or you're not sure how to make it work, you'll at least need to make sure your site uses screen space consistently. Make sure you test this well and try and read your content on both desktop and mobile. Don't be afraid to use min/max widths for elements, otherwise line lengths for text may end up too short/long
• Navigate by broad sections: Breadth over Depth works well on mobile and desktop because there's less clicking to more and more pages. Especially on mobile it can be preferable to scroll around one page to see all content that's available rather than clicking through multiple levels of navigation and waiting for each to load, but it's a good thing on desktop, too.

Things to avoid:

• Explicit touch/drag interactions: Instead prefer clicks and scrolling, which work on either platform.
• Small text: Despite all the 9 point text you see on the web, there's rarely a need to cram as much text on the screen as possible.
• Small buttons: Again, clickable areas tend to be small on desktop sites for no reason. Make them a bit bigger (include clickable background elements on navigation, prefer buttons over links when logical) and they're friendly for touch without being unwieldy for desktop
• Menu dropdowns on desktop: On mobile it's a great way to save space, but on Desktops it's unnecessary and adds extra clicks, and removes the at-a-glance view of what content is available.
• Horizontal scrolling: Even on desktop this is annoying. Scrolling should only go one way, especially on mobile, unless absolutely necessary.
• Pagination: It's much preferable to scroll to read content than to click (even on desktop, in my opinion). As I said above, more clicks to view content means more load time on mobile, too. Often a single, longer load is less painful on mobile than several smaller loads with the same amount of data overall; latency on mobile can be pretty bad.

Answer 2

Pioul,

I think Ben's advice is solid. Perhaps you might be overlooking the advice; to START with mobile as your primary experience when designing/laying out your new site. Design/lay them out together, side-by-side. You won't have to have two separate sites (one for mobile, one for desktop); they are they same site. You can use CSS/media queries to detect what type of device your site is being viewed on, and provide the viewer with an optimized layout for that device. So, you are building one site, that is viewable across various devices.

Since you are building this new site from scratch, now is the best time to do this. By starting with a mobile-first approach, you'll be able to satisfy your needs for having both a full desktop AND mobile experience by thinking them through simultaneously. Here are a couple of great articles and an example on how to approach this:

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

http://www.html5rocks.com/en/mobile/responsivedesign/

I hope this helps!