tabbed content experiment…

…the final version ‑ upgraded

My “mission” was to find the most practical way to build and make even seriously oversized multi‐tab flipbooks work. Not that they have to be oversized – this is just a bonus that comes with the chosen method.

In essence: I was not entirely happy with tab line‐up method used for the original tabbed content experiment. It required very precise size and position values, and even when given precise values it tended to vary +/- 1px in line‐up on screens with varying font-size because of various browsers' “tip‐over points” for recalculating and mapping a mix of px, em and % into actual screen pixels. Varying screen resolution then also affected the line‐up.

I wanted a more stable and robust solution for multi‐tab flipbooks, so the original positioning method literally got turned on its head. The resulting method was found to work best no matter the number of tabs and tab‐lines, so this is the method I am gonna rely on in future designs.

NOTE: Have observed total rendering chaos for tabs in IE10 on win7. Have yet to study what causes that browser to fail. IE11 on win10 is doing OK.

4 flipbook demos…

a five tab flipbook

overview

features…

  • content‐blocks hold any type and mix of content.
  • flexible content‐block size = vertically expandable beyond min-height.
  • responsive (with the page).
  • HTML/CSS only (no script).
  • not using target = does not mess up page addresses with in‐page links.
  • hidden in clear view = no “invisible” content positioned outside browser window.

More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.

flipbook

You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.

It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't care much for effects, so all I have in these demos is a quick opacity transition.

For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.

pictures

citrus reflections

An image that is given no class, following directly after first‑child headline, is styled to have that very same headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old “tabbed content” variant of mine that also uses INPUT for in‐page user‐interfacing.

Such an “overlay‐on‐images” is nothing special – only involves z‑index and negative margin‑top in this case. Easy to remove or change into something completely different.

tailored

tailor individual tabs

Horizontal position and width of individual tabs, are tweaked in this demo. It is easy to tweak individual tabs and overall line‐up, no matter how many tabs and tab‐lines the line‐up consists of.

It is of course not necessary to fill a line with tabs, or limit number to five pr. line. It will work just fine no matter the number of tabs, as long as they are styled in percentages to stay within tab‐line width.

Tab‐tailoring can be taken too far, as it is easy to position tabs so they visually do not follow source‐code (HTML) order. I always follow source‐code order visually for content, and advice everyone to do the same – especially when including “show/hide” solutions.

finally

This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.

Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.

I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.

…next follows…

a ten tab flipbook

overview

features…

  • content‐blocks hold any type and mix of content.
  • flexible content‐block size = vertically expandable beyond min-height.
  • responsive (with the page).
  • HTML/CSS only (no script).
  • not using target = does not mess up page addresses with in‐page links.
  • hidden in clear view = no “invisible” content positioned outside browser window.

More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.

flipbook

You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.

It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't care much for effects, so all I have in these demos is a quick opacity transition.

For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.

picture

citrus reflections

An image that is given no class, following directly after first‑child headline, is styled to have that very same headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old “tabbed content” variant of mine that also uses INPUT for in‐page user‐interfacing.

Such an “overlay‐on‐images” is nothing special – only involves z‑index and negative margin‑top in this case. Easy to remove or change into something completely different.

example

reduced number of tabs

Reducing number of tabs and containers in HTML without modifying line‐up in CSS, will for this “two‐liner” result in the following…
…which in my opinion makes perfect use of space – at least in my design.

expand

expanding all tabs

Opening entire flipbooks in one go by :target‐addressing “#flipbook” – an element containing the actual flipbooks, does in my demos show hints of tabs…
…because that is how I like it here.

With flipbooks in expanded form, a tab counter is included to make it easier to keep track of tabs down the page.

I chose to attach the “#flipbook” ID to the section container all demos are nested inside, and the regular sitewide :target styling then also kicks in along with the specific one, showing blue background on first headline in the section that is being targeted.

line-up 1

line-up check v/h2

Otherwise nothing to see here.

line-up 2

line-up check v/h3

Otherwise nothing to see here.

line-up 3

line-up check v/h4

Otherwise nothing to see here.

line-up 4

line-up check v/h5

Otherwise nothing to see here.

finally

This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.

Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.

I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.

…wherafter naturally comes…

a fifteen tab flipbook

overview

features…

  • content‐blocks hold any type and mix of content.
  • flexible content‐block size = vertically expandable beyond min-height.
  • responsive (with the page).
  • HTML/CSS only (no script).
  • not using target = does not mess up page addresses with in‐page links.
  • hidden in clear view = no “invisible” content positioned outside browser window.

More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.

flipbook

You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.

It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't care much for effects, so all I have in these demos is a quick opacity transition.

For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.

pictures

citrus reflections

An image that is given no class, following directly after first‑child headline, is styled to have that very same headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old “tabbed content” variant of mine that also uses INPUT for in‐page user‐interfacing.

Such an “overlay‐on‐images” is nothing special – only involves z‑index and negative margin‑top in this case. Easy to remove or change into something completely different.

pictures

citrus reflections

Unlike what is shown in previous tab, this image has a class attribute, and although that class attribute is empty the image gets very basic display:block and margin styling to stay centered in its own space. That this very image is also shrinked by max‑width: 98%, doesn't affect alignment.

A meaningful class for alignment on an image, will of course make it act as defined in sitewide stylesheets.

sheet 5

space filler 5

Nothing to see here.

sheet 6

space filler 6

Nothing to see here.

sheet 7

space filler 7

Nothing to see here.

sheet 8

space filler 8

Nothing to see here.

sheet 9

space filler 9

Nothing to see here.

sheet 10

space filler 10

Nothing to see here.

sheet 11

space filler 11

Nothing to see here.

sheet 12

space filler 12

Nothing to see here.

sheet 13

space filler 13

Nothing to see here.

sheet 14

space filler 14

Nothing to see here.

finally

This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.

Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.

I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.

…and lastly we add…

a twenty tab flipbook

overview

features…

  • content‐blocks hold any type and mix of content.
  • flexible content‐block size = vertically expandable beyond min-height.
  • responsive (with the page).
  • HTML/CSS only (no script).
  • not using target = does not mess up page addresses with in‐page links.
  • hidden in clear view = no “invisible” content positioned outside browser window.

Again, more tabs‐lines, and more tabs pr. line, can of course be added, using the same technique. And leaving out tabs doesn't change how it works.

flipbook

You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.

It can easily be styled with transitions and effects, to satisfy those who believe web pages need that sort of thing. Personally I don't care much for effects, so all I have in these demos is a quick opacity transition.

For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.

pictures

citrus reflections

An image that is given no class, following directly after first‑child headline, is styled to have that very same headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old “tabbed content” variant of mine that also uses INPUT for in‐page user‐interfacing.

Such an “overlay‐on‐images” is nothing special – only involves z‑index and negative margin‑top in this case. Easy to remove or change into something completely different.

sheet 4

space filler 4

Nothing to see here.

sheet 5

space filler 5

Nothing to see here.

sheet 6

space filler 6

Nothing to see here.

sheet 7

space filler 7

Nothing to see here.

sheet 8

space filler 8

Nothing to see here.

sheet 9

space filler 9

Nothing to see here.

sheet 10

space filler 10

Nothing to see here.

sheet 11

space filler 11

Nothing to see here.

sheet 12

space filler 12

Nothing to see here.

sheet 13

space filler 13

Nothing to see here.

sheet 14

space filler 14

Nothing to see here.

sheet 15

space filler 15

Nothing to see here.

sheet 16

space filler 16

Nothing to see here.

sheet 17

space filler 17

Nothing to see here.

sheet 18

space filler 18

Nothing to see here.

sheet 19

space filler 19

Nothing to see here.

finally

This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.

Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 503px.

I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.

I could of course have continued adding tab-lines, but the above should do as dem­on­stra­tions of the concept.

one more down the drain

Yes, it works just fine, but now I am lost for ideas what to use it for. My imagination must have short‐circuited – hopefully it is a temporary condition.

Philippe Wittenbergh has helped making my “tabbed content” solutions more AT friendly.

(30.sep.2016) This “tabbed” experiment still works fine 2 1/2 year after it was originally launched. Minor revisions made on styles (margins / paddings mostly) to make it go with latest sitewide design upgrade, and the tab-spread method is also simplified. No changes made to source-code.
Still haven't come up with any great ideas for use, but that is a minor problem.

sincerely  georg; sign

Hageland 22.jan.2014
23.jan.2014 - styled for moving two-line tabs.
24.jan.2014 - testing ways to make tabs stand out.
25.jan.2014 - testing shortened tab-line variations.
29.jan.2014 - optimized selector chains.
30.jan.2014 - testing with three and four tab lines.
01.feb.2014 - testing with reversed tab-positioning.
02.feb.2014 - landed on the final, very flexible, version.
03.feb.2014 - updating diary.
05.feb.2014 - updating diary.
06.feb.2014 - updating diary.
30.sep.2016 - minor revision.
01.oct.2016 - upgraded tabs-CSS to go with sitewide upgrade.
11.oct.2020 - minor text revision.
last rev: 11.oct.2020



www.gunlaug.com advice upgrade advice upgrade navigation