WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Narrow viewport

for

Number of posts in this thread: 5 (In chronological order)

From: Glenda Watson Hyatt
Date: Wed, Feb 08 2006 1:30PM
Subject: Narrow viewport
No previous message | Next message →

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?

Cheers,
Glenda

Glenda Watson Hyatt, Principal
Soaring Eagle Communications
Accessible websites. Accessible content. Accessible solutions.
www.webaccessibility.biz
Check out my autobiography I'll Do It Myself due out November 2006!
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.15.2/253 - Release Date: 2/7/2006





From: Glenda Watson Hyatt
Date: Wed, Feb 08 2006 2:00PM
Subject: RE: Narrow viewport
← Previous message | Next message →

Earlier I 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?

Cheers,
Glenda

That should be www.BooksbyGlenda.com. My EZ Keys got me, again! Now how
dumb do I feel! Thanks Amy for pointing that out.

Cheers,
Glenda
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.15.2/253 - Release Date: 2/7/2006





From: Paul R. Bohman
Date: Wed, Feb 08 2006 2:15PM
Subject: Re: Narrow viewport
← Previous message | Next message →

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




From: Glenda Watson Hyatt
Date: Wed, Feb 08 2006 3:45PM
Subject: RE: Narrow viewport
← Previous message | Next message →


Glenda Watson Hyatt wrote:
> This may be quasi accessibility related, so please feel free to reply
> offlist.
>
> I discovered my new site www.BooksbyGlenda.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?

Paul replied:

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.

Glenda responds:

Thanks Paul. I definitely consider removing the right column, tho I kinda
had my heart set on a three-column layout. There has to be a way to make
this work in terms of accessibility, doesn't there??

I think the images are part of the culprit. The portfolio page
http://www.booksbyglenda.com/portfolio.htm with no images seems to work a
bit better.

I borrowed this template from
http://webhost.bridgew.edu/etribou/layouts/skidoo/lean/.

Perhaps I'd be between to go with a layout more like on my company site
http://www.webaccessibility.biz/ and just float the right column? I was
just trying to be adventurous by trying a new layout. Oh well. Back to
drawing board!

Cheers,
Glenda

--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.15.2/253 - Release Date: 2/7/2006

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.15.2/253 - Release Date: 2/7/2006





From: ben morrison
Date: Wed, Feb 08 2006 4:45PM
Subject: Re: Narrow viewport
← Previous message | No next message

On 2/8/06, Glenda Watson Hyatt < = EMAIL ADDRESS REMOVED = > wrote:

> 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?

Hi,

You could look at making your vertical margins use a flexible width
instead of fixed, a good example can be seen here:

http://www.clagnut.com/

ben