Autoscale in the Screens stack

In the Screens there is an option to turn on Autoscale.

This is great to have text autoscale as the screensize gets smaller, but you must remember, this is ONLY for text (both headers and text stacks) and will not autoscale other elements on the page, like buttons, form fields, or images (images will scale themselves).

How to use Content AutoScaling

AutoScaling is now handled intelligently on a per page basis Turn it on in the Page Stack.

Zoom

The main control is the Zoom

• this controls the size of the content

Min & Max Font sizes

-Set limits to the allowable font size. Generally only worry about the bottom number to control the size on mobile

Apply to Headers

• Applies the Autoscaling to headers as well as paragraph text

Max and Min Width

• Responsive widths at which the scaling will be limited to. So in the picture below after 1200px wide the content will not get any bigger. (This is a much better way to limit the maximum size than by setting a smaller Max Font Size)

Turn off at Min

This changes the behaviour of the Min Width so that instead of just stopping the reduction in scaling at the Minimum it removes scaling completely and the Foundation mobile font sizes will be used.

• This is useful if you have columns that fail to stack properly on mobile.

Autoscale Notes

A WORD ABOUT COLUMNS

• Remember, with Screens you are NOT designing a responsive website (where as the width gets less the height is increased) - this is bad with a single page layout

TIP. Instead of using a 4 column stack, try using 2, 2 column stacks inside another 2 column stack - this will behave a lot better in an autoscaled environment when reduced to mobile sizes.

The AutoScale Algorithm The new Autoscaling routine is setup to be specific to Screens. That is, it has a higher weighting towards the height than it does to the width - this ensures that your content should fit well to both extreme portrait (iPhone) and extreme Landscape (e.g. MacBook 1"1 & 13") situations.

AutoScale Is Not an excuse for poor content control Don't rely on autoscale, rely on good single page design practices. That said, it can make a huge difference in terms of difficult pages and also the finishe