Re: Aging Eye Reader's Gripe of the Day

Another solution is to use Responsive Web Design (RWD) to adapt the 
layout to different screen sizes/text sizes. When you increase the text 
size in browsers, media queries interpret that the real width of the 
browsers has decreased, so you can offer different layouts in the same 
way that you can do for mobile devices.

This way you can hide/show menus and other parts of the interface, 
change font family or size, image sizes, layout, etc. Indeed, I think 
that RWD can be great when used to improve user experience for low 
vision users.

Regards,
Ramón.

Russ wrote:

> Some comments below to take or leave  :)
> 
> Ideal line length for reading can fall roughly between 50-75 characters 
> per line. If lines are wider than this "optimal length, it is harder for 
> the average human to read comfortably.
> <http://baymard.com/blog/line-length-readability>
> 
> In your example, the content is allowed to flow completely freely - 
> there is no limitation placed on the content at all. This means that the 
> line length will vary depending on the users viewport (the viewable area 
> within the browser of device).
> 
> The problem with this method is that if the viewport is wider than the 
> optimal line length, users either have to accept this or adjust their 
> browser window manually.
> 
> There are some "let the user have complete control" advocates who 
> believe this is a good thing. However, when watching real users interact 
> with websites, this method can cause two problems.
> 
> a. some users may grumble about having to resize their browser window 
> (which means that have a less than ideal experience of the site)
> b. some users have no idea how to adjust their browser window and have 
> to read the content at the line-length provided.
> 
> There are some possible solutions (see below), but first a note on 
> word-wrap.
> 
> You mention word-wrap being a potential solution. This is a CSS Text 
> Level 3 property. It is not designed to control ideal line length for 
> reading. It's purpose:
> 
> This property specifies whether the UA may break within a word to 
> prevent overflow when an otherwise-unbreakable string is too long to fit 
> within the line box. It only has an effect when ?text-wrap? is either 
> ?normal? or ?avoid?.
> 
> <http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-wrap>
> 
> So, if this is not the solution, what is?
> 
> One way to limit the line length is to use a combination of "max-width" 
> and "EM" units.
> 
> EXAMPLE 1
> 
> Below is a link to an example layout (the "control" layout) showing 
> content flowing freely - with no max-width applied. Depending on your 
> browser window, the lines could contain anywhere from 30 characters (for 
> mobile devices) to upwards of 200 characters (for wide screen devices). 
> The example has a small red square for every 10 characters, so you can 
> see how many characters appear on each line. If you resize the window 
> inwards, the line boxes will shorten and the number of characters on 
> each line will be less.
> 
> <http://maxdesign.com.au/jobs/example-line-length/sample1.htm>
> 
> EXAMPLE 2
> 
> Below is a link to an example where the overall container has been given 
> a max-width value. This will allow the content to go as narrow as 
> needed, but the content will spread out only as far as the optimal line 
> length.
> 
> <http://maxdesign.com.au/jobs/example-line-length/sample2.htm>
> 
> The line-length is controlled using a simple rule:
> 
> .container { max-width: 32em; }
> 
> The max-width property is not supported by earlier versions of IE, but 
> there are work-arounds:
> 
> <http://www.svendtofte.com/code/max_width_in_ie/>
> 
> The great thing about using EM units is that this optimal line length 
> will work if the user has their default font-size set to a large size.
> 
> EXAMPLE 3
> 
> Below is a link to an example that shows the same layout as example 2, 
> but with the default font-size set to 150%.
> 
> <http://maxdesign.com.au/jobs/example-line-length/sample3.htm>
> 
> An even better approach may be to use max-width as a base level solution 
> and then provide ways that allow users to adjust the layout to suit 
> their own needs (such as wide, narrow, reversed colours etc).

Received on Tuesday, 17 July 2012 21:40:34 UTC