HTML text shifting

Hi,

Does anyone know how to create HTML text that doesn’t shift from the original design when people first enter a website? When I check web pages that use HTML text, the text shows up in various sizes and line breaks in different browsers (FYI, I am not manually increasing or decreasing text sizes using my keyboard).

Also, is there a way to manage the appearance of text when people do manually increase/decrease the text size?

Thank you!


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

As a previous work colleague was rather too fond of saying:

“That may say spaghetti on the label, but you’ve actually opened a can of worms…”

First let’s deal with text being deliberately resized.

Our problems arise because people CAN resize text. The first thing to ditch really, is the notion of fixed websites that reflect on screen what would be otherwise published on paper.

The trick is to design sites that can expand or contract to accommodate resized text - something I’d actually like to see on paper based media as well, come to think of it!

The simplest solution is to design sites using a table layout, but this can sometimes take a bit of planning and tweaking work to get things to work correctly, but is the easiest solution for starting off.

An alternative is to use Cascading Style Sheet (CSS) layout using the ‘box model’ method. This method can initially seem even more impenetrable than tables for the uninitiated, but I find it is ultimately more flexible once you have got your head around it.

Dan J has put together a tutorial page on the box model method:

http://danjasker.blogspot.com/2008/07/fw5-understanding-box-model.html

It can seem utterly alien at first, but is worth persevering with, although there are drawbacks. The main problem is that of master pages - they no longer work correctly for pages done this way. It can also seem very awkward targeting the precise element or position for editing within a layout at first.

To keep text looking as similar as possible across browsers, and where no deliberate resizing is being done, it can pay to express text size in pixels within Freeway eg 12px.

This won’t cure the problem entirely as fonts and the way they are rendered differ slightly across platforms.

If Freeway was consistent about accepting ems as a measurement, I’d be using that instead of pixels. I’d still get differences, but I’m resigned to this. The biggest hurdle is to stop trying to completely nail a design down, as you would for print. Design it to be flexible from the outset, and accept the limitations of the web. After a while they cease to be limitations and turn into advantages. Well almost!

Ian


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

super helpful Ian. THANK YOU!


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