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. But 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 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:
#Simple positioning technique (use absolut or relative positioning to place columns, requre tricky ways to get the footer right) [http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml|example]
#Simple floating technique (used now in Jill theme, puts some limitations on floats in content area) [http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml|example]
#Faux columns (basickly the same floating technique but a bit more advanced [http://www.pixy.cz/blogg/clanky/css-3col-layout/|example]
#[http://www.satzansatz.de/cssd/columnswapping.html|Column swapping] Crazy float-over-float makes your brains boil but it works
#[http://www.positioniseverything.net/articles/jello.html|Jello Piefecta] Great emulating of min-width for liquid design, but I find the technique overly complex
#[http://www.positioniseverything.net/articles/onetruelayout/|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.
As the IE6 doesn't support min-width, it will require some cunning to achieve such effect (unless we use tables and graphuc spacers ;) )


Coming more soon...
Page History
Date/CommentUserIPVersion
17 May 2006 (11:31 UTC)
deleted tablemenu chants
dspt217.21.50.1677
Current • Source
dspt212.98.176.1974
View • Compare • Difference • Source
dspt213.184.224.31
View • Compare • Difference • Source