1

I'm currently looking into web responsive navigation patterns. Tab bars on a mobile version of a website is rather uncommon.

A few years ago I know that there was an issue on some browsers with fixed positioning, which explained why it wasn't really an option.

According to web developers I work with, this technical issue is gone now. And yet, tab bars are still fairly uncommon on websites.

Do you see any usability issue with a bottom tab bar on a mobile for a responsive website?

The only one I've found so far is the fact that on iOS, one needs to click twice on the bottom of the screen. The first times it brings up the browser's controls and the second time your click on the tab bar is actually taken into account. What are your thoughts about that?

Improve this question
6
  • this is a bit too broad. what is the navigation for? how many items? what are your goals for those items? Technically, you can do it. Why and how is a completely different story (specially the WHY). Answering these questions first may give you a clearer view of the different issues and possible solutions (if needed)
    – Devin
    Commented Feb 13, 2018 at 15:56
  • I'm looking for a broad recommendation since this option is never mentioned. I've just found out there might be a technical issue after all on iOS when the website is in fullscreen mode...
    – Raphaëlle M
    Commented Feb 13, 2018 at 16:19
  • I am a web developer, and it is certainly possible from a technical perspective to have fixed bottom navigation. Here is a demo: codepen.io/adamzerner/pen/parEoO
    – Adam Zerner
    Commented Feb 13, 2018 at 18:01
  • Thanks @AdamZerner for this confirmation and ressource. I've had some additional info from developers : there is an issue on iOS which could be considered a bug : when you scroll down a page, the browser nav bar disappears. If you click on a link at the bottom of the page (ie. a tab bar) that click is not taken into account: the browser bar reappears and the user has to click again to navigate to that other page. Hope this is clear.
    – Raphaëlle M
    Commented Feb 15, 2018 at 10:02
  • caniuse.com/#feat=css-fixed should provide info on a) what devices and browsers it will work, and b) what known bugs there are. For web apps. Native iOS apps I don't know about. The bug you describe isn't listed, which means either you guys found a new bug, the bug is due to your applications code rather than the browser, or the bug is occurring due to something other than fixed positioning in CSS, or something I haven't thought of.
    – Adam Zerner
    Commented Feb 16, 2018 at 17:48

6 Answers 6

Reset to default
1

If it is a progressive web app, you absolutely can use a fixed bottom nav, because you can treat your UI like it's native if it has an offline mode and is using service workers. PWA's are more evolved than responsive design. If you're adding mobile functionality to your PWA, avoiding the hamburger might result in better engagement for you.

Improve this answer
1
  • I feel it bears mentioning as well that if a bottom nav makes contextual sense, you get the ancillary bonus of having your menu in the "thumb zone", making one-handed navigation far easier on mobile devices.
    – Kane Ford
    Commented Aug 17, 2018 at 1:03
0

I would not suggest using a bottom tab bar on a website unless the design is relatively static. You don't know how big a person's monitor is going to be, or how tall, or whether they're using one or a pair, etc. That means the tab bar could end up pretty far from the rest of the content, and the top nav in particular. Forcing users to mouse that kind of distance could be very frustrating for them.

Besides, users have been trained to look for nav elements on top or on the left side of their browser windows.

Improve this answer
1
  • 1
    I meant that the bottom tab bar would only appear on smartphones but I agree that it's rather unusual
    – Raphaëlle M
    Commented Feb 13, 2018 at 16:24
0

Bottom Nav/Tab bar is typically used by apps on mobile devices. This is very useful when there are 2-4 sections of your app/service that your user will frequently use.

From a user perspective(learned behaviour from using apps), the bottom nav bar indicates quick switching between the respective features. I do not know how your website is built, but if it is a progressive web app that doesn't have to make too many network requests to load the tabs, you're good to go.

Be careful though. If it is a static site with lots of network requests for each tab, then you should discuss optimisation options with your developer before implementing such a design.

Do share with us your final decision on this topic. Cheers.

Improve this answer
0

OK, based on your comment to Refe, what you want is not unusual on smartphones, but extremely common and there are specific patterns for this. For example:

Material Design Bottom Bar

sample: enter image description here

Foundation Mobile Footer

IOS Tab bars

sample: enter image description here

And as you may imagine, there's a lot of literature on the subject:

However...

As pointed in my comment on your question, not everything applies to all cases. For example, having forms or search boxes or signup buttons on top is very different than having then on bottom. Not necessarily better or worse (you'll need to test and find out) but definitely different

And if you want to just resize from desktop to mobile keeping the bottom position, then you'll find some issues, specifically on usability and discoverability. Of course, if you have a regular top nav on desktop and a bottom bar on mobile, then you're good to go.

Improve this answer
3
  • What you're talking about is bottom navigation on applications. I'm wondering about bottom nav on a a mobile website.
    – Raphaëlle M
    Commented Feb 15, 2018 at 10:05
  • @RaphaëlleM : Mobile applications or websites, i think this will fit the bill perfectly, the key lies in keeping the number of nav items to 3 or 4 .
    – semuzaboi
    Commented Feb 15, 2018 at 13:55
  • @RaphaëlleM, this is the pattern for mobile, doesn’t matter if it’s an app or a website. If you mean something different then we’d need some details, as requested in your original post.
    – Devin
    Commented Feb 15, 2018 at 14:56
0

Short answer: Yes, you can use a bottom navigation for mobile web, and yes, doing so can increase engagement multifold. What you need to know in order to gauge whether it will work for your case, is what you will be using it for. If you have some features or pages that are very frequently used (primary actions) then you will benefit from showing these at the bottom. These pages will be in very easy reach of the thumb due to their position in the tab-bar.

However, a tab-bar does take real-estate and it can be in the way with some browsers. This is why you need to know whether your users will be switching a lot between pages to have the benefits outweigh the cons. According to the CRO team at my agency, these tab-bars work absolute wonders for conversion on insurance and news sites, and also in logged-in environments.

Improve this answer
0

It is absolutely OK to have a bottom Tab Bar on a website! There are many benefits to it but the most important benefits of a Mobile Navigation Menu at the Bottom of the screen are:

👍 When the Navigation Menu of a website is positioned at the Bottom of the Screen it provides OPTIMAL THUMB ZONE ACCESS.

👍 The Thumb Zone Friendly Ambidextrous Mobile Navigation Menu provides OPTIMAL THUMB ZONE ACCESS to both the LEFT and RIGHT hand THUMB FINGERS.

👍 My website uses the SAME WEB PAGE LAYOUT AND MENU NAVIGATION that can scale from a small Smartphone screen to a Large Screen TV without using CSS3 Media Queries and is compatible with web browsers running BOTH CURRENT AND OLDER VERSIONS of Apple, Android an Windows operating systems.

👍 My website uses this feature: https://raulgonzalez.com/thumbzone.php

Improve this answer
1
  • 1
    Please add a screenshot to illustrate your answer. Thanks.
    – Michael Lai ♦
    Commented Aug 17, 2018 at 2:22

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.