tabbed content addition…
…stress testing
“What if this or that gets changed?”, is always a justifiable question in web design. All too often a solution goes down the drain because it hasn't been stress tested well enough beforehand.
I like to know what my solutions can handle in real‐world situations, and where the weak points are. Consequently, I give them the full run‐through early on.
Not often I release these tests, but here I make an exception so others can see for themselves what does and doesn't work, and how long it takes to solve problems.
flipbook stress tests…
test #1
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/CSSonly (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.
Testing of line‐up when not all horizontal space is occupied by tabs. Having four tabs on a line looks fine to me on this page, where a line spans approx. 40em on wide and 20em on very narrow screens in my page design.
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.
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 #1
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 481px.
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.
test #2
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/CSSonly (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.
Testing with uneven number of tabs spread over two lines, which requires line‐up adjustments on‐the‐fly.
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.
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 #1
picture #2
dry lake.
Signs of a very dry winter and spring in Florida.
Image borrowed from sketchbook, sixth sheet.
picture #3
red velvet.
A plant observed on one of the many rest areas along the US highways.
Image borrowed from sketchbook, first sheet.
picture #4
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 481px.
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.
test #3
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/CSSonly (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.
Testing to see that all works flawlessly no matter the arrangement and number of tabs.
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.
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 #1
picture #2
dry lake.
Signs of a very dry winter and spring in Florida.
Image borrowed from sketchbook, sixth sheet.
picture #3
red velvet.
A plant observed on one of the many rest areas along the US highways.
Image borrowed from sketchbook, first sheet.
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 481px.
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.
test #4
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/CSSonly (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.
Testing with only one tab to see that all works flawlessly no matter the arrangement and number of tabs.
test #5
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/CSSonly (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.
Testing without visible tabs to see that all works flawlessly no matter the arrangement and number of tabs.
one more balled‐up and archived
Works well so far, but more stress testing necessary. I'll get to that, eventually.
sincerely 
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.
26.jan.2014 - introducing ":target" opening.
29.jan.2014 - optimized selector chains.
last rev: 29.jan.2014