0

I have a set of tabs that appear in my website. When making it responsive i cannot use tabs as i have 5-6 tabs and the width will exceed the screen size. What is the best suitable substitute for a tab in a mobile website?

  1. Can i use accordion? Accordions serve the same purpose , but the content in each tab is large and selecting an accordion tab will make other tabs go beneath the screen. Is this a good practice to follow ( The user wont be able to see all the navigation link at the same time)
  2. Is there a better option?

Edit

This tab is not for navigation purpose , but holding the content and it will appear in the middle of the page. So replacing it with navigation menus , hamburger menu etc is not a proper option.

during my research on this i found out the following website - https://www.g2crowd.com/ - where tabs are substituted with a usual navigation with all the navigation links at the top. Is this a good option considering UX ?

enter image description here

Improve this question
3
  • 1
    hamburger menu?
    – Paul Dessert
    Sep 24, 2015 at 7:18
  • The problem is the tabs comes not at the top of the page, but after some content. May be in the middle of the page. Is it a good idea to use hamburger menu in the centre of the page?
    – Sooraj
    Sep 24, 2015 at 7:20
  • No, it's not a good idea to put it in the middle. I'd suggest a "page" for each category. Remember, it's a mobile device. Brevity is the key here. Use a hamburger menu at top and list each topic/category under it. You might need to do some restructuring.
    – Paul Dessert
    Sep 24, 2015 at 7:23

1 Answer 1

Reset to default
2

For a Mobile Website, putting all navigation links on on top will make users need to scroll before they can see some real content (unless user is on a large screen phone or number of links are just 2-3).

Here are the options I can think of:

  1. Have a horizontally scroll able navigation bar on top. This would be something like this (How Huffington Post is doing this):

How Huffington Post is doing this

Be sure that the last visible item on the navigation (without scroll) is visible partially. This will tell the users that there is more on the nav. As many apps are using horizontal scroll, it is easily noticeable to the user.

  1. Place your navigation under the hamburger icon, and then open up the nav on it's click. You can chose to open in accordion style or full menu (if the number of links under each menu item are less than 4-5)

Example (How Times Of India is doing it):

How Times Of India is doing it

Improve this answer

Your Answer

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

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