[Pro] Preparing a FW site in a way that a non-FW user can take over......

Off Topic
1

Hi

I am preparing a site to be. CMS driven. The client said that I must prepare the endproduct in a way that others (read not FW users) in the future could take over without problems understanding how FW has build the HTML and CSS.

Another must is that this site has to be very efficient, speedwise. The less code, the better. CSS stylesheet(s) lean and smart.

I wrote previously here that I consider using FW for the design only, then take over in Coda. I fear :wink: that This Moment has come. Now.

Cough.

My problem is that the advises I read on the net are rather confusing. I understand that there are many ways to build HTML and CSS. FW took the heavy lifting for me, and, thanks to the many advises I got here on these forums, I could find my way around the limitations of the app. when building CMS driven sites.

But I am not there yet.

So, my question, how would you do such a thing, prepare a FW site for ‘the other world’?

Is it about giving classes certain names?

Is it advisable to split classes into small parts, so I can use more that one class for an element?

Should I use one big stylesheet for the whole site, or is it better (understandable) to use also smaller ones for those pages that need only certain classes?

Questions questions questions…

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

prepare for a long discussion

On one level, FWP generates html, css and javascript - so technically it is
ready for someone else to pickup.

Except that it often generates this code in an unintelligent, machine-like
way. This is the hard part for code novices - learning how to make FWP
generate more human-friendly code… is there such a thing?

Yes, absolutely.

SEMANTIC HTML – start first with your html structures… these are tags like
div and in html5, header, footer, article, and so on. It’s also text tags
like h1, h2, p, block quote and so on. If you’re still not sure what is
html and what is not, find a way to cure that. HTML is the organized
structure of the page in the absence of style or decoration… by itself, it
means something.

In FWP, we are used to focusing on looks – you need to get away from that
for a bit. Learning to apply tags that are structural or semantic only,
forgoing images to convey your ideas, you end up with a page that reads
more like an outline but is structurally more powerful. Also, avoid using
div upon div in brick-like fashion to create a layout - simplicity is not
always simple, but should be your new design mantra.

RATIONAL CSS – FWP automatically makes styles for us… and the result is
often a sort of code “soup”. It works, but is often too complicated for
ordinary people to decipher. The best indicator of code bloat are a
proliferation of class styles like “p.style”, “p.style32”, “h1.style47”,
etc. Try to aim for just “p” or “h1” if possible. Watch the Style palette
when you are working and try to quash FWP’s endless attempts to sneak these
illegitimate styles in.

That’s not to say you shouldn’t have any class styles, just that YOU decide
when one is needed. This is what I mean by Rational CSS - as opposed to
“automatic” CSS. Try to use the semantic tags to your advantage, so that
their natural use achieves the effect you desire instead of needing to
slather style code into your page.

FWP also writes loads of redundant CSS, so learn how to be more deliberate
with the code that is written – for example, using combinations like

  h1, h2, h3, h4, h5 { font-weight:bold; }

instead of writing it five separate times. Or target styles by their
associate and descendent selectors, like “aside p” or “#mydivitem h1”. FWP
won’t know how to deal with these styles in the workspace, but the browser
will. This break from the WYSIWYG approach is hard for a lot of folk,
probably the biggest test of all. Let it go, trust what you know in your
mind and have learned about browser behavior and you can do this… many have
and still do.

SCRIPT CONSOLIDATION – most of the scripts Freewayers use are generated by
actions, and can result in acres of javascript littering your page code.
This is consistent with a machine-like aesthetic. A more human approach
would be to ask “Do I really need to embed the Library of Congress in my
page code?” In other words, can some of this code be consolidated and
off-loaded from the page and linked to instead? In my own work, I will ask
if my use of an action is even necessary - some actions, like the CSS Menu
action, generate much more code than I am comfortable with in my page code,
so I write them myself*… It becomes a matter of personal judgement how
scripting is applied.

Of course, all this requires that you become more familiar with how FWP
does its thing. This is hard, but not much different than riding a horse.
Learning how it interprets what you are trying to tell it may just require
you spend time tinkering then looking at the code and seeing "oh, if I do
THAT, this is the code it writes. And if I do something else, THIS is how
it writes that. Soon, you learn from observation that you can exercise a
different level of control and make FWP write it’s code in a more directed
way. Because you ARE directing it… to a large degree anyway.

*for the record, I love and appreciate the action writers for making life
easier. I want to be clear that whatever my personal opinions, my goal is
not to denigrate what they do.

–
Ernie Simpson, aka The Big Erns

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thank you, Ernie.
I do hope it’ll be a long discussion :wink:

In FWP, we are used to focusing on looks

As a matter of fact, my last 10 sites were almost no looks at all, in the FW doc. Just empty frames, with markup Crowbars.

And I use mostly JQuery for slideshows and lightboxes. As a code novice (as you name it so gently :slight_smile: I am very good in copy paste. And then change some parameters. Works for me.

I am aware of style-123 etc. I have a habit of deleting them from time to time. I am learning now to name them after use, not looks. And I like the HTML5 approach, I feel it makes sense.

Your last advise to tame FWP, that is an interesting one. Never looked at it that way, that it is even possible. For my part it has been a struggle. Maybe I am a bad lion tamer.

As I understand it, it is the human-friendly site of code that I am after.
I just get confused sometimes when I read about different opinions how this human-friendly code should look like. But I get your point, thank you.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options