I’ve looked at Dan’s wonderful videos on box modeling, but I still find it very frustrating. I have yet to design a site that it would work easily for. Sites I’ve done are always changing as we are building them and adding to later.
If I try to build one just for practice, it always seems to fall apart. There’s always one more box I should have nested.
I’d liked to get peoples thoughts (and web links) of those of you using this method to layout your sites.
I can’t imagine not building inline layouts. I suppose that depending
on the layout requirements there may be better alternatives but for me
it all starts as inline. While it requires considerably more creative
planning it’s worth the effort as far as I’m concerned. After all,
most things worth knowing require extra effort in order to reap the
benefits. Yes, this can be done with tables but that’s not my
preference and often it’s not the clients choice either (in my
experience).
I know many people struggle with it but be diligent and it will start
to make sense. Once you master the basics you’ll wonder how you got
along without it. It’s a skill worth learning.
Todd
On Mar 9, 2009, at 2:31 PM, Robert Bovasso wrote:
I’d liked to get peoples thoughts (and web links) of those of you
using this method to layout your sites.
I do nothing but inline CSS layouts. I also create CSS styles manually to avoid the dreaded “style1, style22, style546000” syndrome. “Box model” layouts are almost totally alien to the intended nature of Freeway as a visual layout application. Being that I consider myself very visually oriented to begin with I would also be the first to admit it was a struggle to get used to. I have to give props to Freeway for making CSS even the slightest bit accessible. CSS is the choice of professional hands coders, and I think Freeway does a credible job of removing some of the tedium of CSS code, but not all of it.
There is certainly a need to be more mindful of the consequences of the process of adding or removing any inline content, which comes with practice, but both can be done. Eventually I learned that there is a basic structure that can be started from then built upon. There is no denying It takes getting used and Freeway does not always behave predictably.
Of even more importance to me, I would say that being motivated by the likes of Big Erns to learn the reasons that CSS does what it does by investigating outside source material (i.e. books and blogs about CSS), and how to insert it into Freeway was/is worth all the pain and suffering in the long run, even if Freeway doesn’t make implementing it as easy as it could be.
Sometime around 9/3/09 (at 15:31 -0400) Robert Bovasso said:
I’d liked to get peoples thoughts (and web links) of those of you
using this method to layout your sites.
How about the thoughts of those who don’t use it?
Me, I find it just too alien and creatively obstructive a process at
this time. I hope things change, but 'til then do I want to work in
methods that can fall around my ears if I forget to draw boxes in a
particular order or dare to remove an unwanted design element? Nope,
forget it.
I want a next-generation box model design process. I don’t want
today’s technically impressive but creatively backward process.
I side with Keith on this one - I approach from a creative design
viewpoint and have trouble thinking in strictly ordered boxes.
Nevertheless, I’ll be trying out a box model version very soon, on a
site that has to be very flexible for accessibility reasons.
Wish me luck - I’ll need it!
Colin
On 9 Mar 2009, at 21:43, Keith Martin wrote
Me, I find it just too alien and creatively obstructive a process at
this time.
I was going to try a personal site using a CSS layout, but my palms get sweaty just thinking about it! There doesn’t seem to be a lot of freedom with the design. I’m all for planning, but there is really no room for error.
It seems that it is impossible to alter or add something down the line if needed. The layout seems pretty set in stone.
Every time I preview what I’ve done in a browser, the layout gets all messed up and I usually can’t seem to fix it.
I was going to try a personal site using a CSS layout, but my palms get sweaty
Please don’t think that ‘CSS site’ means ‘box model layout’. It
doesn’t - that’s just one way of using CSS positioning. If you want
to move away from creating table-based layout structures just make
your objects layered. Either draw them with the CSS button enabled in
the button bar, or select an item and click the Layer checkbox in the
Inspector palette.
It seems that it is impossible to alter or add something down the line if needed. The layout seems pretty set in stone.
Not true. You can use cut and paste to move html boxes around. You just have to keep track of how your boxes are put together.
Try starting with a very basic layout grid first; one overall page box with header, body, and footer boxes inside that. Then put all relative content (other html boxes, graphics, tables) for each section into the appropriate box. Change the content, not the grid. Keep your “grid” boxes set to a fixed size until you have all the pieces in place, then you can go back and set heights to shrink for the grid objects.
That makes sense, I’ll have to see if I can do that.
The layout I was going to attempt, was a large box with graphic at the top. Maybe a nav box under that. A three column layout under that, with a footer box under that.
The layout I was going to attempt, was a large box with graphic at the top. Maybe a nav box under that. A three column layout under that, with a footer box under that.
Ok, so set up your grid of boxes (parent box, header box, menu box, left column box, center column box, right column box, and footer box). Just get the grid set before you start plopping content into it.
Try to use percentages for the widths of the boxes. For example, the header, menu bar, and footer boxes would all be set to 100% so they stretch across full width of page. The column widths will be a bit trickier and will take experimentation with different sizes till you get the 3 columns to equal 100% width. The columns also have to have the correct float and clear settings so they don’t push each other away (unless you want them to).
That basically is the whole page. Your content then goes inside each of those boxes.
Here’s a FW file of a very simple and ugly 3 column + header and
footer fully inline example that you can pick apart. This is a fixed
width example only (vertically stretchy); get your head around this
first then tackle a fully liquid layout (horizontal and vertical)
using percentages instead of pixels. Understanding how this example is
built will help you grasp the finer points of liquid layouts which is
trickier to build. If you want I can put together a liquid example
later.
Well, I was scared to death of trying it. You only have fear itself to fear though. After doing a couple, something clicked and I can generally work out the structure required fairly quickly.
The biggest leap was in realising that you can apply custom padding and margins to help separate items visually, but I still get burned occasionally with float settings of ‘none’ not translating properly in IE 6 and 7. I often have to apply an unnecessary left float to large parent boxes to get the contained inline content to display properly in IE.
Working through Dan J’s videos also helped me grasp the mental flip I needed to do to ‘get it’ with the box-model.
I haven’t tackled a site that expands laterally yet, just vertically. It would be just fantastic if you could provide a fully liquid example Todd.
On 10 Mar 2009, 2:57 am, Todd wrote:
Robert,
If you want I can put together a liquid example
later.
If it helps… I come from a creative design background and whilst I find the box model constraining, I think its the only way you can truly make sure your site will maintain its integrity should the user start playing around with font sizes or if you (or the client) needs to add tons more content.
I tend to start by creating the design very quickly without starting with a box model, being as flexible as I wish… once I have a design that I (and the client) are happy with… I then start the site in ernest and create the box model master page and copy and paste the items into place. If I need to add spacer gifs then so be it… but tend to find you can achieve most things with custom margins and padding.
NOTE One of the most important things I find with creating the box model, is for every item to be properly named and to view the layout, showing all items in the left hand menu… that way I can quickly locate any item if I need to change it.
Apart from that… the more I do, the easier it tends to become. Its not as quick… but the structure withstand most things in the long run. Although being a designer, I like to make each site look and feel different… hence the reason I don’t start with the BM.
If its a client editable web site, then yes, its a box model. To
allow for any quantity of words the client might want, yet still keep
some measure of control of the layout to stop it breaking up.
But for a site when you’ve got full control, then its often a
combination of box model and absolute positioning.
On 9 Mar 2009, at 21:43, Keith Martin wrote:
How about the thoughts of those who don’t use it?
David Owen :: Freeway Friendly Web hosting and Domains ::
I still see a problem with adding more boxes (not content) if you need to. There doesn’t seem to be a way to insert more boxes at lower levels (layers) after you’ve added all your other boxes.
