FreewayTalk
23 replies to this thread. Most Recent
Creating clean, efficient code
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?
Thanks!
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.
;-)
k
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. :-D
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?).
There’s a start. Anyone care to add to the list?
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.
k
I should’ve added “dumb-looking <em> to humans</em>”. I wondered about the SEO-friendliness of item names; thanks for confirming it, Keith.
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. do I really need a style called “bodytext”, or can I just use the p tag?).
I prefer to use the body tag instead of the p tag, take a look at Dan’ Jasker’s tutorial http://freewaycast.com/screencasts/view/35-styling-css-body-tags
CSS Edit is an awesome tool to create styles and I have learnt a lot using CSS Edit to just look at other sites and how their CSS is put together.
Cheers, Marcel
Yeah, I’m trying to get my head around css, too. Time is short, though, and it’s all coming in baby steps. Thanks for the link, Marcel.
Five.
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.
There’s more information about this over on this thread: http://www.freewaytalk.net/thread/view/65778
Atelier provided a couple of useful links: - Discussing the % vs px issue http://www.freewaytalk.net/thread/view/65778
and a px to % converter http://www.freewaytalk.net/thread/view/65778
Six.
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.
Learning is always my first step, then execution.
I couldn’t agree more, which is really the whole purpose of this thread: to record what I’ve learned about the coding side of Freeway.
Your box model screencast was something of a revolution for me. I hope to check out a few more in the future.
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.
Six.
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.
On 19 May 2009, 2:35 pm, Helveticus wrote: …
I prefer to use the body tag instead of the p tag, take a look at Dan’ Jasker’s tutorial http://freewaycast.com/screencasts/view/35-styling-css-body-tags …
Seems not to exist anymore. Has anyone a working link?
Have a search at http://danjasker.com — he moved everything behind a “pay wall” over there.
Walter
On Mar 12, 2010, at 12:07 PM, atelier wrote:
On 19 May 2009, 2:35 pm, Helveticus wrote: …
I prefer to use the body tag instead of the p tag, take a look at Dan’ Jasker’s tutorial http://freewaycast.com/screencasts/view/35-styling-css-body-tags …
Seems not to exist anymore. Has anyone a working link?
Freeway user since 1997
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.
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.
Not quite the case; Windows is perfectly capable of showing Adobe RGB (1998) colour-tagged images correctly. Perhaps it is the Windows browsers that assume sRGB? I know most browser plugins do that with Adobe RGB (1998)-tagged images (on Mac as well as Windows), rendering colours weaker than they should be.
k
I don’t know of any Windows browser that will actually read or do anything with ColorSync profiles on images they display. (Well, except for Safari, but that’s hardly a /Windows/ browser, is it?) They just show the raw image data, without performing any color-matching to account for local display foibles.
What you might find is that since your images are being displayed without any color correction whatsoever, and at a higher than normal gamma, they may appear quite different than you intended, or could predict.
Walter
On Mar 12, 2010, at 1:53 PM, Keith Martin wrote:
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.
Not quite the case; Windows is perfectly capable of showing Adobe RGB (1998) colour-tagged images correctly. Perhaps it is the Windows browsers that assume sRGB? I know most browser plugins do that with Adobe RGB (1998)-tagged images (on Mac as well as Windows), rendering colours weaker than they should be.
k
Freeway user since 1997
Thanks, Keith and Walt.
Speaking of color management — and for my own and others’ future reference — Keith provides an epic amount of information, he even expounds on cmyk profiles, here:
http://www.freewaytalk.net/thread/view/47222
Very helpful. I’ve pdfed it so I can keep it forever :-)
A pay-wall. :) I can’t be giving my work away for free Walt like I used too. It just wasn’t fair and balanced nor are my prices ridiculous either. I mean my WebYep series, episode 2 and 3 are an hour long and are each $5 bucks. All the money goes strictly to the web hosting and the site, not into my pocket, as I’ve stated to my customers.
I remember, so long ago, 11 totally free screencasts were out there on FreewayCast.com when it first got started but the site just failed to develop anywhere. There was no way to customize the site or edit any of the comments.
In the next few days I’ll be making an announcement that will change that.
Seven.
Check out Google’s webmaster’s pages for tips on SEO (Search Engine Optimization), if Google rankings are important for your site.
http://www.google.com/webmasters/tools/
Especially consider submitting an xml site map to them.
Further information can be found at the links below. http://thehelpful.com/befound/index.html http://www.freewaytalk.net/thread/view/49040#m_49041
In another thread Bucky Edgett has suggested adding the following discussions to this list.
http://www.freewaytalk.net/thread/view/69894 http://www.freewaytalk.net/thread/view/58190
The first is about editing the body tag, which I haven’t needed to do…yet. And the second is a detailed thread about those pesky style1s, style2s, etc. that pop up.
Thanks, Bucky!
