Mobile Responsive Design and Tabs

[jbculp]

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

[David Chu]

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

[jbculp]

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

[David Chu]

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

[Author]

Posts