[Pro] Trying to shrink

Freeway
1

Miserable failure at my first flexible/fluid layout. Specifically, the client wants the images to scale down so that a browser window of low pixel height dimension sees the pictures and text without their being cut off.

  1. My Header doesn’t take up any space at all. I have it set to “19%” but that’s being ignored.

  2. Nothing shrinks! Trying to use the Flexible Image Action. Have Height set to “100%” and Keep aspect Ratio turned on, but it occurs to me I don’t know 100& of what?

Thrashed around with this for hours, reading forum posts; available documentation has two paragraphs on flexible layouts!

Any advice would be greatly appreciated.

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

2

Do yourself a favour and buy Caleb’s Backdraft responsive template.

Even if you only use it and its documentation as a learning tool to help you build your own it will be worth it.

David

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

3

This man speaks the truth. Where’s a like button when you need it…

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

4

This man speaks the truth. Where’s a like button when you need it…

In the footer: http://backdraft.onrampwebdesign.com. :wink:

Buckey, I know that it’s cliche, but failure is how you learn. Thrashing around helps a lot, as does FreewaySearch.

Now, on to the how to:

  1. The second principle of flexible width layouts is that pretty much everything needs to have the width declared as a percentage (the first principal is inline construction, but you have that part down). From looking at the CSS output, you seem to have everything sized in pixels.

    For starters, set the page to be 100% width, with a reasonable max-width (960-1500px, depending on your layout). Inspector shot: http://cl.ly/Q59m

    The easiest, and most fool-proof way to set a % based widths for your other items is to use Softpress’ awesome CSS3 Box-Sizing Action. The sweetest thing about this action - besides setting the box-sizing to border-box (which is essential, but you don’t have to understand it right now) - is that it will convert a pixel-width into a percent-width without you having to use %'s in the inspector. Just apply it to about everything on your page, with the exception of the images.

  2. Images, images. First, let me say that I’ve never gotten the Flexible Image action to work satisfactorily for me. There are many other ways to do this, but this will be the easiest and most automatic:

    • In the menubar of your Freeway document, go to “Page > HTML Markup…”.

    • In the resulting window, choose “Before ” from the drop down.

    • Paste this code in the box:

       <style type="text/css">
 img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
 }
 </style>

    • In the words of Delta Dave (or is it Walter?), there is no step four.

    Now, any and every image will be flexible width. Keep in mind that this code will have to be present on every page that you want to have flexible images, so use your master pages to good effect!

  3. Onto percent heights! When you set an element to have a % based height, you are actually setting the height to that percent of the width of it’s parent element.

    For example, let’s say you set an element named “header” inside a HTML box that measures 400px tall x 900px wide. Then, you set “header” to have a height of 50%. Although you probably think that it would measure 200px tall - the height of the parent element divided by two - it will actually be 450px tall, the width of the parent element divided by two. This is just how CSS works.

    When I’m building flexible width, I never have the height of an element declared (click on the little ← → icon in the inspector to deactivate that field). Without any height, it will shrink to fit it’s content. Then, I use the min-width field in the inspector if I want it any larger. Inspector shot: http://cl.ly/Q5bW

Wow, this reply got really big, I hope you can understand the monstrosity!

Last but not least: Backdraft comes with all this built in, as well as being responsive to boot and overall awesome. Then again, as the creator of Backdraft, my opinion is probably clouded. :slight_smile:

Best of luck!

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

5

All right, I’ve got a lot to learn. And thanks to Caleb I’m on my way.

Caleb, I bought the Backdraft template, just because you’ve been so helpful so far. Once I can understand its use, I’m sure it will be briliant. I’ve also done some brute force reinforcing with spacer JPEGs.

But one thing I notice about the example web sites for Backdraft, and about my current iteration at David Hess , is that no height shrinkage occurs. Or perhaps it’s more accurate to say that the page&pictures do not shrink in height (& width proportionally, of course) to fit into a very short browser window.

Height shrinkage occurs when the browser window gets narrow, and the pictures magically and beautifully narrow to fit the window. That’s wonderful! It’s a great start on a flexible layout. But it’s not the original concern. Rats!

Of course, most web sites don’t care about fitting into a given window height, assuming some scrolling will be necessary. But my client is particularly concerned for visitors who have a lot of Task Bars and so forth open, and have short “page areas” in their browser windows. (She’s much more a print person than a web person, and some of the web limitations really gravel her innards! As a matter of fact, they do mine too, but I’m trying to adapt.) She wants the whole design to appear, no matter what.

So, assuming most people will have a reasonable height available to show our page design so that in most cases it won’t be tiny small, how can I force this silly thing to automatically adapt to short browser windows? Or is that even possible? With a provision for a very small minimum height for the header, at least?

Thanks for any help you can give!

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

6

It might be possible, with JavaScript and a lot of arithmetic, to make this happen. But it would be tragically wrong, and completely backwards of what you would actually want to do on a small screen.

These days, the small screens are iPads and iPhones and their distaff cousins from Android-ville. They actually do better with the font sizes turned up a bit, not down, particularly for the owners over 40. Scrolling is good, not bad. Fitting the entire page into a specific height is a fool’s game, and will be seriously limiting to what your page can communicate, and how well it ranks in search engines.

By all means, put the most important and tantalizing bits at the top of the screen, in the so-called “above the fold” region of the page. But if all of your site’s pages have to fit on an iPhone in landscape orientation while still being readable to an average visitor, then they will look seriously stupid on a 30" Cinema display.

Walter

On Jul 5, 2013, at 10:51 AM, Bucky Edgett wrote:

But one thing I notice about the example web sites for Backdraft, and about my current iteration at David Hess , is that no height shrinkage occurs. Or perhaps it’s more accurate to say that the page&pictures do not shrink in height (& width proportionally, of course) to fit into a very short browser window.

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

7

Thanks for the thoughts, Walter. Of course not every page on any site is required to have this behavior. It’s only one intro page, that will have links to two separate portfolios built at FolioLink. And all of their portfolios have the browser window-defines-height-and-no-scrolling function. It works perfectly. I’ve tried looking at the page source, but it’s way over my head! ( Antonio Mendez Portfolios ) This one cuts off the MenuBar, but we’re working on another using a different template that shrinks the Menu height and adds a scroll tab. Nice!

It’s true that the FolioLink pages reach a state of ridiculosity fairly quickly, but the image is never cut off. That’s important to artists. It’s being done very nicely at FolioLink.

I have no idea how this would influence SEO.

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