Mobile Responsive Design and Tabs

Community Forums Forums Design Tips and Tricks Mobile Responsive Design and Tabs

This topic is: not a support question

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 1 year, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #60521

    jbculp
    Participant
    Post count: 119

    Hi all, I’m somewhat starting fresh on this topic because I need to understand the high level view. What is the impact of mobile responsive design on Tabs. In this context I’m speaking about Tabs within a Page or Post that will allow different content to be displayed by clicking on the tab.

    I’ve learned that Tables for example are not so compliant as a general rule and people recommend using column classes. Is there a similar design consideration around Tabs if one wants to have a fully mobile responsive site?

    I appreciate any discussion on this topic.

    Thanks

    John

    #60856

    David Chu
    Participant
    Post count: 1397

    Hi,
    Your concern about HTML tables is warranted. One could wrestle those into responsiveness, but it would not be a day at the beach. HTML tables (and forms) are a real pain to style even if not using responsive code. :-)

    Nowadays most things that produce tabs actually don’t use HTML tables at all. They will instead use jQuery, CSS, and normal HTML markup. Here’s a great example from jQuery UI.

    BUT…. the Genesis Tabs plugin, for instance, may not work – it’s not been updated in ages. In answering a question here a couple days ago, I tested it on Genesis 2, and it balked. Tab plugins seem to be the most fragile, because “everything” uses jQuery nowadays, so the chance of conflicts is omnipresent. If your tab plugin uses HTML tables, I would probably suggest quietly abandoning it. ;)

    The short answer to your question is that a modern tabs scenario isn’t really harder to make responsive than other elements.

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #60930

    jbculp
    Participant
    Post count: 119

    Thanks David,

    The use of jQuery is a good thing and yet tabs have their disadvantage. I’d be interested in hearing interface alternatives. Best thing I can think of is to create pages for the tabbed content and work with the CSS to make those links visually appealing on the page.

    I appreciate your thoughts and reply.

    Cheers

    John

    #60982

    David Chu
    Participant
    Post count: 1397

    John,
    I’m not an interface expert, but I do have preferences. Tabs are nice when one needs lots of content on a page, but doesn’t want to show all of it. I also like using “accordions” for that purpose. You can see demos of those on the site above, too.

    I like using this plugin for tabs and other jQuery goodies. Lots of possibilities and even themes (it’s pulling directly from jQuery UI Central, so to speak). I have not dealt with them from a responsive standpoint, except to say that when the context around it is responsive, it works fine.

    You could try this tabs one, too.

    Beyond that, you may want to talk to an interface geek, not many of those around here. Probably looking at interface blogs would be enlightening.

    Good luck,
    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.