WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Narrow viewport

for

From: Paul R. Bohman
Date: Feb 8, 2006 2:15PM

Glenda Watson Hyatt wrote:
> This may be quasi accessibility related, so please feel free to reply
> offlist.
>
> I discovered my new site www.BooksbyGenda.com doesn't view well in a narrow
> viewport, ie at a low resolution or with browser side panel open. I know it
> is something to do with the stylesheet and I've tried playing with it, to no
> avail. I guess that is what I get for relying on someone else's stylesheet,
> eh?
>
> Is there any way to make images scalable?? I think that is also part of the
> problem.
>
> Any suggestions?

One suggestion is to get rid of the right column, since you don't seem
to be using it much. I looked at the style sheet and came up with a
quick and dirty way of doing that. I set the display:none for the column
and got rid of the wide border that takes up the space. See the CSS code
below. Of course, you'll want to go in and tweak the page and the CSS to
get rid of the right column in the page and in the CSS, rather than just
turning the display property off. I used display:none for quick testing
purposes only.

As far as making images scalable, you can set them to enlarge/shrink
with the text size by using em rather than px as the image size unit
(using CSS). However, this won't cause the image to shrink as users
shrink their browser window size. It will only cause the image to
enlarge/shrink as users enlarge or shrink their font size. You could use
CSS to set the image size in % or something like that, but that's going
to give you some strange results, I think. I suppose you might be able
to use JavaScript to shrink or enlarge the image dynamically, but that's
overkill for this purpose.

As far as I can tell, the best solution is to get rid of the right
column. You may consider shrinking the image size as well, but that may
not be necessary.


Here are the changes I made to the CSS:


#outerColumnContainer
{
background-color: #ffffcc;
border-style: solid;
border-width: 0 0 0 14em;
border-left-color: #ccff99;
border-right-color: #ccff99;
color: #000;
z-index: 1;
}

#rightColumn
{
display:none;
}

--
Paul R. Bohman