##Better get snacks and drinks, this is going to be a long post
I’m no help when it comes to how to get Freeway’s workspace to resemble its output. My focus is on what Freeway produces and much less on how it looks in the raw.
Here’s a sample of my workspace: … and the same page in preview mode
##You must choose your path
I think the way to get the best from Freeway is to accept the reality that the app has strengths and weaknesses that are mutually exclusive.
-
You can build things fairly wysiwyg-- trusting Freeway to generate working code for your design, but you will quickly find there are limits to what you can build that way-- limits that most users quickly exceed.
-
You can also build things very modern and clever, leveraging Freeway’s ability to generate code by consciously directing the process. This means utilizing Freeway in a way that it was not designed to be used-- specifically, Inflow Layouts and Extended Styles. These give you more control of the output Freeway makes, but the app itself has no real way to graphically interpret elements used this way.
So, in summary, you can embrace Freeway’s wysiwyg workspace and live with what you can make that way, or you can let go of a literal workspace and leverage Freeway’s strength to write the code you need for whatever design you want.
##And now to the solicited opinions…
1 - Use flexible pass-through graphics with 100% max width rather than applying extended code to images to make them flexible
I don’t approve of 100% on max-width values… the reason being max-width is a limiter and 100% is not much of a limit. A width value of 100% makes more sense.
One of the good things about Freeway 7 is that you can set percentage widths on pass-thru graphics. Even nicer, the workspace reflects this setting, making it much easier to manage these images.
Percentages are tricky… they most often refer to parent containers. So width:100% on an image will make it scale as wide as it’s parent will allow. As long as you understand which elements are parents and which are children, this is fairly straight-forward.
Let’s say, for example, that you insert an image inline with a paragraph, float it right and give it a left-margin so the paragraph runs around the image. With FW7, the size of it as a pass-thru image doesn’t matter… if you select the image and give it a width of 25%, it will scale to be 25% the width of the paragraph container-- regardless of how you define the size of that container.
What I usually do is insert an html item (or div) into a run of text and size that by percentage of the container width, then insert my pass-thru image into that, sizing its width at 100%. This just gives me extra styling hooks, but both these methods absolutely create images that scale with the page and the rest of the content, without the use of Extended values.
2 - Use “available width” and not "fixed width 100% " in situations where either appear to work when previewed.
I’m not sure what the meaningful difference between “available” width and “100%” width is, except that I don’t need Freeway to write any extra code for available width items. My philosophy is less is best. If you don’t know how the browser will behave when you feed it your code, then more isn’t going to help.
Percentages less than 100% make more sense to me… like say, two divs side-by-side like columns, set at width:50% each. This of course leads to the next question-- the (in)famous Box Sizing debate.
3 - Apply the box-sizing action to any box that has box left and/or right side padding specified in pixels
Technically, you’re right-- box-sizing, especially with Inflow Layout techniques is essential for exactly the reason you state. I, however, think the implementation needs to be global instead of applied to individual items. Just the opposite strategy of Clearfixing. Here’s a recent article on how I implement global box-sizing values in Freeway using a method popular among web designers and one I hope Softpress will adopt as a preference or page option.
4 - Have pages specified with fixed width, with the Flexible Page and Auto Clearfix actions applied (both with the “enable” or “enabled” box checked)
It seems to me Clearfixing strategy in Freeway is currently a shotgun blast of code all over the place. This is unnecessary, like the stupid practice of wrapping the entire page in the form element when you want to make a form on a page. Once you understand what Clearfixing is-- and which elements in your design actually need it-- then it becomes much more sensible to target only those items. “Why did I clearfix that item?” “Because it contains a floated item.” And not “I don’t know the difference, so I blindly trust apps and actions to make up for my not-knowing.” Which is, of course, a path users can choose.
I also explained my approach to Clearfixing in Freeway here
My inflow layouts actually have Flexible Width pages. I fill it with Available Width items, and then fill those with a content container that is Center Aligned and Max-Width. All other content goes inside of those. The result is a normal looking page that is flexible at narrower viewports. But that’s just me.
As I said before, especially with inflow layouts, box-sizing is essential and clearfixing will be necessary if floats are employed. I have my ways of doing those things, but how you implement them is your choice.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options