16

This is purely for a mobile website that must have horizontal tabs.

The difficulty is that there could potentially be 5-7 tabs, with 5 being more likely. The text for each tab is long, which could result in poor visibility of the tabs.

I am struggling to think of different ways and approaches to make this a good experience for mobile users.

Does anyone have any suggestions to accomplish this design with those restrictions in mind?

Improve this question

4 Answers 4

Reset to default
13

This sounds like it could also apply to a horizontal main navigation for a site. Brad Frost has several options for responsive navigation systems, but the next two seem most appropriate to what you're trying to accomplish from his options. Here are those two and a third approach:

Dropdown Tabs

A popular way to solve this is to switch from tabs to a dropdown. Dropdown Responsive Tabs

Stacked Tabs

Another approach would be to stack the tabs. Stacked Responsive Tabs

Scrollable Tabs

Another option that's been appearing on mobile interfaces are scrollable tabs. Scrollable Tabs from the Android Developer site

Improve this answer
4
  • Cheers, very useful. Are there any demos of option 3? I'm on iOS so can't see the play market. The tabs are for a step by step linear process.
    – pab
    Commented May 11, 2013 at 22:34
  • Struggling to remember the best example I've seen. It was a mobile site, not app. sports.yahoo.com's mobile site has a similar pattern at the top for sports scores.
    – Matthew Moore
    Commented May 11, 2013 at 23:08
  • As an android user all I can say is PLEASE NEVER IMPLEMENT SCROLLABLE TABS!
    – MatthewFord
    Commented May 14, 2013 at 23:39
  • 1
    @MatthewFord could you elaborate on that? What's exactly the problem? That you can't see all at once?
    – mik01aj
    Commented Oct 7, 2015 at 14:08
3

Here goes one ios example what @Matthew has suggested as Scrollable tabs:

TOI

Improve this answer
3

I would also add that you can have it centered and wrapping on two lines (e.g. three items on top line and two below). You may need to make slight changes to design such as make them appear more button like and are easily click-able.

Improve this answer
3

I'll just add one more example ;)

enter image description here

This interaction is used in Rookie. I took the GIF from this great article about hamburger menus.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.