Faced with this myriad of platforms and diversity of display sizes (the viewport), the use of a predictable, fixed-width design is becoming increasingly problematic. However, the use of a purely fluid design that expands and contracts without limits, trying to fill the screen regardless of its size (or lack of size), is also problematic, leaving the frustrated web designer with a choice between two imperfect solutions.
Enter the hybrid web design, which incorporates the page-filling benefits of a 100 percent width fluid design, with the consistency of layout and predictability of appearance that fixed width designs are noted for. What the hybrid design does is allow webmasters to specify a minimum as well as a maximum website width; using predefined content block sizes to ensure a consistently predictable design.
A case in point is one of my old textlink only TGPs that I’ve been revamping to try and increase its incoming traffic and affiliate stream profitability. One step I’ve taken is that the site no longer accepts outside gallery submissions and now features softcore thumbs (not covered by 18 USC 2256 and thus not triggering a “2257” labeling requirement) that point to my sponsor’s free-hosted photo galleries.
As part of this evolution, I re-imagined my TGP as a hybrid site that combines a TGP with an RSS-fed blog; plus elements of a review site; FPA and exit console combined. The site would retain its role as both a generator of incoming niche traffic — and exit destination for other sites to send targeted traffic to. All that was left was architecture.
During this rebuild, I took a different approach to designing the site; dropping my eternal insistence on building it with a 768px fixed width — and rather than simply upping it to 960px to better accommodate the majority of my visitors, I dropped the minimum design width through the floor; producing a hybrid fixed/fluid width XHTML/CSS-driven website designed for a 480px wide viewport that would perfectly suit Sony PSP and Apple iPhone users, along with MSN TV/set-top box and IPTV users.
But I didn’t forget the masses of desktop users, especially those with widescreen displays that are not as often catered to as they may like. My W3C-compliant design stretches its thumb table to fill your viewport, so that it looks “full and beautiful” — not only on my PSP, but on my 1920x1200 desktop: Indeed, I have two such monitors and dragged the browser window across both for a 3840x1200 view of the site and it still looked great.
But to try and provide the most consistent user experience, you need to establish some limits: so I’ve capped the site’s maximum width at 1680px; which provides room for the main content block plus as many thumbnail rows with up to 10 thumbs (120x180) across as I want — giving a nice, full display on most large screen monitors — but still offering a manageable size for a gracefully degrading design.
As a webmaster with a bit of experience in testing and resolving crossbrowser/platform compatibility issues, I have to say that once upon a time, the user experience of this site would have required multiple websites; each targeting a different screen size/browser/platform — as well as a lot of extra code — and I’ve not yet seen another site (adult or otherwise) that is as flexible at delivering a similar user experience to so many viewers at once, purely via CSS and a little scripting.
In many ways, I’m quite pleased with this new template and its overall approach; and once I finish fine-tuning it, I’ll port it over to my other TGP to similarly update it as well.
And speaking of fine-tuning, the granularity of the display size can also be increased, so that the 480px “main block” could be composed of 240px subblocks, or even a 120px minimum width that would dramatically open up the mobile display options without sacrificing the attractiveness and usability of the site on a high-resolution desktop display.
It all might sound pretty complicated or even downright confusing, but the visual effect and impact of the design is pretty cool — although you’ll have to take my word for it, as I’m not going to spare you some development time by just handing you a link to copy.
At the end of the day, it could pay handsome dividends to accommodate all users with a readily adaptable, highly flexible and easily accessible design — regardless of how, when or where they try to access it. Taking a hybrid fixed/fluid design approach is the first step.
