OK, so I know Freeway generates pretty good code, but I also know that in order to the best job with this it needs my help.
And so I ask…
What do I need to do in Freeway to ensure the cleanest, most efficient, SEO-friendly code? What steps do I need to take, and in what order?
I’m sure many of you have a general procedure you follow when setting up a site. For example, modifying the p and body styles at the start, using alt text, etc. I’d love to hear how you all go about this, and what secrets there are to it.
Also, on a related note, I’ve noticed that FW generates some pretty convoluted code in order to make targets appear and/or disappear on rollover or click, and I think there’s probably an easier what to handle this via an onClick in the Extended attributes — something like onClick=“show…”. Does anyone use Extended attributes on a regular basis for this — in preference to FW’s Rollover action — and if so, would you like to share some of the basic code?
Sometime around 27/3/09 (at 04:32 -0400) derekzinger said:
I’ve noticed that FW generates some pretty convoluted code in order
to make targets appear and/or disappear on rollover or click
There are more modern, CSS-flavoured ways to do this, but the
rollover etc. code that Freeway creates is lengthy specifically to
include all the extra stuff needed to keep things working as expected
even when some IE6-using fruitcake stumbles into your site. Rich
browser compatibility comes at a cost. But thankfully only to the
extent that our pages get a tad more code in them - we don’t have to
worry our pretty (or otherwise) little heads about it.
Thanks, Keith. I figured there was a reason for all that code, but I just didn’t know exactly what it was. IE6: Grrr.
BTW, how good is the code produced by the CSS Rollover action? Is it IE-proof?
Looks like the first part of my question hasn’t gone down too well for whatever reason. I’ll Start a list of things I’ve learned to do over the months, and perhaps others will be inclined to add to it and/or correct me.
Name everything. The default “item1a1a” is useless as a reference and creates dumb-looking code.
Use alt tags in the appropriate places. Unless visually impaired users and search engines have no need for it on a specific item, add alt text.
Customize the p, body and h styles, and use the h styles as first choices for headers. Only add your own styles when truly necessary (ie. do I really need a style called “bodytext”, or can I just use the p tag?).
Sometime around 27/3/09 (at 14:53 -0400) derekzinger said:
Name everything. The default “item1a1a” is useless as a reference
and creates dumb-looking code.
Remember that browsers coulden’t give a stuff about dumb-looking item
names. But yes, if someone does want to look through they might
wonder. And using proper names will improve your SEO goodness.
FOUR. Applying styles. It seems that styles work rather differently in Freeway than in other apps. I assume this is because Freeway offers the possibility to nest styles and text attributes. At any rate, styles need to be applied consecutively (i.e. start at the beginning of a run of text and apply one style and only one style to each sentence, paragraph or block of paragraphs.
Do NOT, as in InDesign, start by applying one style to the whole text box and continue to apply styles to sentences and paragraphs on top of it. This can create ridiculously deep nests of styles for every line of text, which means more “dumb”, bloated code.
This makes me wonder how to apply styles quickly and efficiently to long runs of text, without having to go through it manually. Is there a way to do this, perhaps on import?
BTW, I’m turning this thread into my own personal notebook of things that I, as a print designer-cum-self-taught web designer discover about the strange world of html and Freeway. I’ve asked a lot of questions on this forum, and many of you have kindly saved me hours of struggle. This is my way to hopefully return the favor to others.
IE 7 and below don’t have the ability to scale fonts that are defined by height in pixels. Percent is a much better way to “IE-proof” your site and deal with font-size in this respect.
Percent sizes need to be entered via the Extended dialog. This will override whatever you have set in the “usual” place.
Styles, Part 2. Beware the dreaded style1, style2, etc. They are created almost every time you edit text in the Inspector. Change the color and boom — a new style; change the size and pow — a new style. Searching the source code in your browser and using Freeway’s styles window allows you to track these rogue styles down and eliminate them by merging them together into an existing style or by at least renaming them to something “smarter”.
Rather than making a mess and cleaning it up afterwards, the best way to deal with these randomly appearing styles is to try as much as possible to set up styles BEFORE creating the text they apply to.
It’s always wise to try and plan ahead, but not always the easiest thing to do. I try and condense everything and try and focus on understanding what I’m looking to accomplish before I waste a bunch of time with it. It’s why I have tutorials to help people understand what they are doing and not just saying they can do something only if an action exists. No sense in calling yourself a web designer if you don’t understand what you’re doing and need a plugin to equate a title.
Thanks Derek. I am in the middle of rewriting (hand-coding) my entire website from scratch as I’ve just got a book on ExpressionEngine and I will easily admit to missing the ball when it came to that system. I dove in to the CMS system and built the website I have now as a novice and so I’m hoping that this will revamp things and clean it up.
Let this also be a lesson to read the manual before asking questions. I know real men don’t read the manual, but I will say that it will at least spring-board your mind into a new direction at possibly doing some problem solving and leaving those guys at Softpress to their tea and crumpets in peace while evaluating all the awesome things in store to stay competitive for the next version of FW.
I’ve also been working in ExpressionEngine 2 so that will be a nice transition once that hops out of beta.
Yeah, more times than not I’ve found the answer to my questions in the manual, or especially on his forum, and haven’t needed to ask anyone. Both are great resources for people like me: designers who are using FW to bridge the coding gap, but realize that to really do the job right we need at least to understand what’s going on behind the scenes.
As for your site, I think it looks very nice. How well you’ve integrated EE is another story, but visually it’s solid.
I know that CMS is in my future, but I think I have quite a few things still to learn before I jump into it.
It’s not code-related, but I’ve just read that images should have the sRGB color profile attached, or no profile at all. Adobe RGB, which works just fine for print, will wash out on Windows monitors.
Thanks. In the meantime, back at the ranch, I looked better in my files and found an old download from before the paywall era. Hm. DanJ follows the same methode I found out already myself. Nice screencast, BTW.
