RethinkingTemplates

creating an ultimate theme for BW

Created by: dspt, Last modification: 17 May 2006 (11:31 UTC)
Ok, for some time already we've been discussing creation of a new theme for BW, which is:
  • more eye-catching and attractive (and more "mainstream-like"), because a lot of people around judge the CMS by the LOOKS
  • simpler in layout (reduced wrapping divs and non-semantic layout) and CSS (reduced in size and elements)
  • IE compliant...

In addition to current pluses, let me remind them:
  • smarty templates
  • div-based layout
  • xhtml 1.0 strict compliance
  • state-of-art multiple classes styling system...

...it will result in unbeatable front-end interface (:cool:)
Jill theme was the face for BW for quite a while and I saw it optimyzing in code constantly. /xing did (and still doing) a great job on that. Still, starting from scratch could be a nice opportunity to rethink some structural things, produce some insights, implement new ideas.

As I'm teaching courses on intermediate html and css coding, I feel myself quite confident messing around with all that bracketed nonsence, but I'm NOT a designer. Left alone on this task, I'm afraid to end up with some nerd-like minimal weirdness look. I'm willing to work on coding CSS and templates, but I hope someone will take the graphic design part. Any other participation is more than welcome, of course.

Basic layout: some investigation.

See ThemeStructureIdea2 for reference on structures we need to consider when thinking about layout.
We also should make sure, that our layout:
  • Semantic (which means we can't use any normal-flow layout, as the left column needs to be placed AFTER content area code)
  • standards compliant
  • works in ALL modern browsers (do we care about older versions? to hell with them! but of course we do care about textreaders etc. )
  • avoids javascript and css hacks enforcing the looks if possible
Done that, let's clear up some alternatives we are to choose from:
  1. Simple positioning technique (use absolut or relative positioning to place columns, requre tricky ways to get the footer right) example
  2. Simple floating technique (used now in Jill theme, puts some limitations on floats in content area) example
  3. Faux columns (basickly the same floating technique but a bit more advanced) example
  4. Column swapping Crazy float-over-float makes your brains boil but it works
  5. Jello Piefecta Great emulating of min-width for liquid design, but I find the technique overly complex
  6. One true layout Extremly complex technique, but looks as the best "ready-made" soultions avaliable. A great reference of css hacks at least :).
Did I missed something important?

I've investigated the given options and believe that we should dump complex ones that use too many wrapping divs (like Column Swapping) or CSS hacks. I'm determined to have a lightweighter, slim in code.

Most obvious thing to discuss: Liquid (sometimes referenced as Fluid) vs. Rigid design. Some real-life instalation might refuse to accomodate for 800:600 screen resolutions, but a CMS theme definetely SHOULD.
Any liquid "portal" (3-col) layout looks quite unaestetical to me when viewed in 800:600. It's way too crowded, the columns are usually fixed width, so the main area becomes so tiny...
Any fixed layout will require horisontal scroll in small screens and will leave space on big screens.
The best solution I see is semi-liquid design that behaves like the Jello Piefecta. Fixed width left column and content area fill in all 800*screen, with a small line of right column visible, reminding to the surfer that he can horisontally scroll to see the auxilary info at right column. On 1024*screen all the columns are visible and fill all the width. On >1024*screen the content area stretches. The header goes above left column and content area, but not above right column, like it's done in "mambo" theme here.
As the IE6 doesn't support min-width, it will require some cunning to achieve such effect (unless we use tables and graphuc spacers ;) )
For the sake of 2 and 1 column layouts we should consider enforcing max-width too, as we don't need unreadably long strings.

Another thing to discuss: same-height columns. Many portal-like CMSes have it as granted because of their table-based layout. But they don't necessary LOOK like that. Many real-life designs don't have any distinguishing design pattern for columns, only for modules, so the columns look as they end where the last module end. But the possibility for adding a distinguishing design for a column is of course neccessary to have for a CMS. Or am I getting too deep into details?
Anyway, for a div-based layout it's necessary to provide some way to enforce the general height for all 3 columns as we need to know where to place a footer. Which is generally ends up with the necessity to add-up wrappers avaliable solutions listed. It's only OK to me if that wrapping element is or , as we are in quest of reducing non-smantic markup here. Which leads us to a necessity to use positioning for header and footer.

Next item: position of the main menu in the sourcecode. If we want to get really "semantic" in our layout, we might put the main menu underneath the content area. After all, if someone loads the page, he's there not for the menu to jump to another page, but for the content. Currently we have half-soultion: hidden "skip navigation" link. Which might be good enough. Because of the bug in IE6, which renders floats and formelements ABOVE dropdowns of the menu, it requires being positioned to fix this anyway. So we can actually place it anywhere in the code and then absolute position it.

main menu length. I like the idea of having "all included" menu with sub-levels. But it's hardly "designable" the way it is. There're so many items, that only very small font-size can be used. Current Jill design of menu brakes in 800*screens (right end interferes with name/logout float and some items might create second line, that merge with the bg image) For users with many permissions (like admins) it will breack even at 1024*screens. Making the font and padding betwin items smaller will render it unreadable. Possible solutions I see:
  • having icons only for top level items, with text names shown on hover: will be really nice looking but not if the browser switched off image loading (I often do this myself) and not really speed optimised
  • deliberately create a design in a 2-lines pattern (will require some creative thinking to look nice, but can become a distictive feature, making people recognise BW)

basic html code

So how much divs do we really need if we go as "minimal" as it gets?

<?php
<html>
<
body>
<
div id="header"></div>
<
div id="content"></div>
 ...<
div class="leftmodule"></div><div class="leftmodule"></div>...
 ...<
div class="rightmodule"></div><div class="rightmodule"></div>...
<
div id="menu"></div>
<
div id="footer"></div>
</
body>
</
html>
?>

As you can see, no containers for columns. It's too much trouble to make them equal height, so why bother. It will require some smarty or php tweaking to add new class to the module depending to what column is it assigned to, though. Some designer, willing to implement special styling for a column, can add as many wrappers as he wishes.
Putting menu outside the header is not necessary, but I find it fitting nicely the total concept.
I placed html and body tags to remember them as possible containers for styles.
Done with html, we are ready to CSS...

Coming more soon...

Comments

excellent stuff

by xing, 28 Apr 2006 (21:43 UTC)
i really like the extensive information on here and the ideas about how a decent layout should work. as you know i'm also a great hater of hacks and try to avoid them if possible. i'm not sure the html you have outlined will be enough to correctly and reliably position the left and right modules but that is a topic for later.

i fully agree that we should go more main-stream and try to reduce the number of wrapping divs. there are a few obscure ones i'd really like to nuke such as .navbar, which should be the class name of the
  • rather than the div around it. we should get together and discuss this in detail and / or start making notes on TemplateChangelog.

    anyway, thanks for the contributions and help to further better bitweaver templates and css schema.

    x

Re: excellent stuff

by dspt, 29 Apr 2006 (08:40 UTC)
As for " i'm not sure the html you have outlined will be enough to correctly and reliably position the left and right modules"
Me neither... :( At least for now.
Posible solution I'm working on now is adding some classes like "firstleftmodule" etc.
Anyway, the footer is the biggest problem for now, as its existence interferes with any non-wrapped positioned layout...

by the way

by xing, 29 Apr 2006 (09:00 UTC)
i'm not sure you've noticed yet, but we are already using table-menus here on bw.o. in fact i removed the ie7 js hack completely on this site. we have all PNGs converted to gif in the themes/force/icons/ dir and therefore don't even need any of the png fixes either.

the changes to get the table-menus working were minimal. i changed the top_bar.tpl file to render the crazy when MSIE hits the site and added some rules to the _ie.css file which is specific to MSIE only: /themes/styles/jill/jill_ie.css. i haven't dealt with the admin menu dropdown yet and think that we could just ignore that since clicking on the admin link takes you to the admin screen with all available links anyway.

x</table>
  Page 1 of 1  1