Technically and presentationally, iFrames are a flawed  technique these days, for a number of reasons.  That said, I still use it as a legacy, stopgap solution in one unique area of my resume website.

The DemoSite section (UX | Showcase | Demosites index) is a library of ‘clickable wireframe model mini-sites’ that I’ve produced as part of my body of work.

These 15 mini-sites (and they are actually small websites) were hand-tooled as prototypes, models and guidelines in a time before there were convenient tools – and before mobile was hip.

Several of the mini-sites are more than 10 years old. They were for in-house use by development teams, marketing, and business stakeholders. So all are designed for a ‘desktop-monitor’ (i.e. ‘non-mobile’) display environment.

My dilemma:

Be able to display ‘mini websites’ as a part of my body of work, but preferably without losing the clickable context of my own resume website.

The iFrame is a decent solution – even with all of its limitations.

Here’s what the drilldown tooks like (I’ve outlined the iFrame in red):

  • You can navigate within the multi-page mini-site in the iFrame.
  • The “Index of Demosites” button returns you to the Demosite menu on my website
  • The “NIA Group” link under the Index button takes you directly to the case study in my portfolio.

Is it a compromised hack and a kluge? You bet. But it sorta works …

Here’s my Demosite disclaimer:

These are demosites. They are design guidelines – Not finished products.

The wireframes may be styled or “raw” (skeletal). Sometimes clients are looking for usability, navigation, IA, and structure – rather than brand styling.

Clickability is mostly for navigation and flow .

Behavior is expressed, but it may be limited or simply described.

Content is mostly dummy data or placeholders.

Styling, complexity, size, and depth of the demosites vary as per client needs.

The sites in this section do not scale gracefully if you are viewing on a mobile device (But you can scroll).”


© The Communication Studio LLC