An Update on Suffusion – Part 2

This is a follow-up to my previous post. I wrote earlier that I was incorporating fluid-width options into Suffusion. Over the past couple of weeks I have managed to work a good bit on this and I am happy to say that I have managed to get the markup rearranged, and I started full-fledged work on incorporating fluid width into the theme today.

You might be wondering what I mean when I say “get the markup rearranged”. To explain, with a fixed-width setting I can define my layout this way:


<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>
<div id='main-content'>…</div>

This would render my page showing the first sidebar, then the second sidebar and then the main content – in other words, it represents a layout with 2 left sidebars. The code would change depending on the layout. So if I wanted a single left and a single right sidebar, my markup would become:


<div id='sidebar-1'>…</div>
<div id='main-content'>…</div>
<div id='sidebar-2'>…</div>

This works pretty easily and well with fixed-width layouts because each column has a pre-defined width. However with fluid width there are significant problems in this approach. Typically fluid width layouts would mean that the sidebars have pre-defined widths in pixels, but the main-content column takes up the remaining available space. Naturally, when you have the main-content appearing before a sidebar, the challenges become significant.

The fix for this is to use what is referred to as the CSS Holy Grail. Actually the Holy Grail is for a fluid-width central column and fixed width sidebars, but the markup and CSS for it can be extended to fixed width layouts as well. Using this approach you will really have just one markup for all layouts:


<div id='main-content'>…</div>
<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>

You can then use the CSS properties float, margin-left, margin-right, left and right to control where you want to show what. This approach is recommended by experts because:

  1. You can change your layout, but your content will always remain the same. So depending on your layout your CSS changes, not your HTML.
  2. This has the added benefit of being SEO-friendly, because your main content is closer to the beginning of your document. Particularly in cases where you have a long sidebar, this is a great benefit.

Porting this approach to a fixed-width setting, however was a huge challenge. Just think about it – I had to test all the following configurations for the changed markup:

  1. General layout:
    1. No sidebars
    2. Single left sidebar
    3. Single right sidebar
    4. Single left, single right sidebars
    5. Double left sidebars
    6. Double right sidebars
  2. Page templates for each of the 6 configurations above
  3. In each of the configurations above I had to factor in situations where you would have tabbed widgets, wide sidebars etc.

All in all this amounts to more than 50 different configurations. To add to the complexity, it would have been a great world if Internet Explorer was well-behaved. Instead, for each of the 50+ configurations above, I had to tear my hair out figuring out what works for IE6.

Anyway, this part of the challenge has been overcome. I am working on now putting in fluid width components into the layout. This has its own set of challenges. I had never imagined how easy fixed width has been so far. In changing the code I am now realizing how ingrained the fixed widths are into different elements of the layout. I had a lot of widths running off the main-content column’s width. Again, our favorite IE6 and Microsoft’s proprietary “expressions” are causing me a lot of grief.

Stay tuned – I will hopefully have the new release out very soon.

8 Responses to “An Update on Suffusion – Part 2”

  1. Thank you – You have redefined the possibility of a WordPress Theme.
    Maybe Suffusion could have a sub repository of GPL theme option files.

    IE (all) accounts for 31% of Browsers, while IE 6 is 5.6 % (September 2010)
    http://www.w3schools.com/browsers/browsers_stats.asp
    5.6 % seems small but it’s nearly as much as Safari and Opera combined!
    Hopefully, by this time next year IE 6 will be least used browser.

    • The stats from w3schools are dodgy because they only reflect visitors to their site. Overall IE has much better penetration in the market, though the percentage of IE6 users is not off the mark in the W3Schools figures.

  2. Dear Sayontan,

    I know about all these problems and I suggest to stop supporting IE6….
    What is the benefit of supporting a crappy, 6 year old browser? I know the arguments, some companies…
    but must you care for that?

    This f…d browser stole so much life-time already and life is short!

    Cheers, Connie

    • Connie,
      Heard from Peter that you are in hospital. I knew that you had surgery – didn’t know that you were in hospital still. Hope all is well.

      The question is not whether I want to support IE6 – it is really a question of how the install-base of Suffusion wants to use the theme. If you look at statistics, IE6 still commands more market share than Safari. While hard to believe that a neanderthal browser still has users, unfortunately that is the way of life. I will pull support for IE6 once the overall market share comes down to below 2%.

  3. Hi Sayontan,
    I can’t believe you are making the best WP theme on the planet even better…again!

    You make a good point about IE6. Once again, you go above and beyond what many for-profit theme developers do. I usually discount IE6 when building a site because it is so buggy, but hopefully it will just disappear in the next few months.

    I’m looking forward to the new fluid Suffusion. Cheers!
    -Kim

  4. Hello,
    Your template is very good and I want to use it in my project. Tell me please, when will a new version?

  5. […] in Suffusion since the inclusion of options in the very second release. This change required me to overhaul the HTML structure of the theme and always put the content before the sidebars, then do massive amounts of testing. While I put in […]