Comments on: Zoom layout

By: Kevin Francis

Kevin Francis — Sat, 30 Jul 2005 17:14:11 +0000

Nice article
I tried creating a zoom layout recently (I like to call it Flexible Layout), all went well with my em sized layout until I realised that the faux column I used to make opposite columns with different background colours/borders appear the same height was misaligning when I scaled the text/layout.

Any ideas on how to faux this?

By: wisbin

wisbin — Fri, 29 Jul 2005 22:44:20 +0000

While we are talking about ‘accessibility’ you could start with accesskeys in your menu. And maybe a standard ‘z’ could be set as a standard for those people looking for the zoom view button/link.
Althoug I still believe every webdesigner should layout a website that allows for a fair bit of zoomability, standard. (ctrl-mousewheel)

By: Flag

Flag — Wed, 13 Jul 2005 07:37:42 +0000

Adrian has a good point to drawing attention to the problem of highlighting the fact that a zoom layout is available but I‚Äôll be interested in seeing how we tackle the problem in the meantime by labelling the option in the web site. I‚Äôm leaning towards developing an ‚Äúaccessibility‚Äù menu at the very top of a website that I can use across projects and will be googling for best practice labels if they‚Äôre out there already.

By: Ulf

Ulf — Mon, 04 Jul 2005 10:21:41 +0000

Hmmm… I just wondered why you wouldn’t scale your stopdesign-logo too?
When I look at the site in a large version, the logo seems to be inapproriate small. Couldn’t you try to display different sized logos for different zooms?

By: SteveC

SteveC — Sun, 03 Jul 2005 20:29:01 +0000

What I love about this zoom layout is it isn’t just something thrown together, it looks like it was designed gracefully, and still above all looks nice. Sinc I browse the web on +1 text size all the time anyway I’ll be using the contrast version all the time, it doesn’t take away from the feel :)

By: Ross Bruniges

Ross Bruniges — Fri, 01 Jul 2005 09:30:20 +0000

We will be using one of these on our website – we actually have an accesibility section in our main navigation in which we (well I) plan to have our style switcher in.

In regards to making this stand out and visible to those using the site (and equally those who may require its functions) I have been thinking of a few ‘sneeky tricks’ that may just be awful but thought I would sound it out, see how it gets shot down!

One of the things that I took as the main point of Joe’s talk was the fact that most layouts used today on the web (those with columns!) will eventually break as people bump up the text sizes – therefore meaning that people WILL do it regardless of what we provide them….

…..but what if we provide them pages that won’t allow them into doing this and therefore make them use the zoom layouts, say we use pixel values for all apart from the links that lead to the accessibility sections or zoom layout links and therefore give them an emphasis over all else on the page; people may them decide to start using the zoom layouts we make and stop bumping up their browser sizes unitl our web pages break!!

I am sure this breaks every law of accessibility out there but its a Friday and my mind is starting to think of the weekend and I feel like a debate!

Any comments on this would be great :>

By: S√©bastien Guillon

S√©bastien Guillon — Fri, 01 Jul 2005 05:34:07 +0000

Great zoom layout Doug! There is a real effort towards simplification and prioritization (what?), which I think require the most work.

I have one remark though, but it is a bit far reaching (I couldn’t really find anything to criticize): both zoom layouts should make you switch to large or extra large text…

I have made a zoom layout for my site, although my site is fairly simpler and I just went for big text and inverted, high-contrast colors.
The (homemade) style-switcher however is more complex because it also allows for normal control over the stylesheets (via the UA interface) which I think is quite important (although I don’t know why).

PS: Is there something non utf-8 in your comments loop? When I previewed my comment, the name field became S√É∆í√Ç¬©bastien Guillon, upon second prview it was further munged (logically) to S√É∆í√Ü‚Äô√É‚Äö√Ç¬©bastien Guillon, and so on. I had to modify the name before submitting.

By: Douglas Bowman

Douglas Bowman — Thu, 30 Jun 2005 18:30:20 +0000

Gustavo – The user has the option of changing the default font size on the Preferences page. The only adjustment in size I made for both zoom layouts was to size text up from the default by 110%, and I avoided dropping it down by 85% like I do for the other styles.

By: Gustavo Caetano

Gustavo Caetano — Thu, 30 Jun 2005 17:47:46 +0000

I mean, was the default text size preference set to LARGE ?

By: Gustavo Caetano

Gustavo Caetano — Thu, 30 Jun 2005 17:44:38 +0000

Was this website’s text enlarged?

By: alex

alex — Thu, 30 Jun 2005 00:40:42 +0000

i used the following tutorial to implement a working and uncomplicated style switcher on my site

tutorial: http://www.centerkey.com/style/switcher/

my site:
http://www.ebauche.net

i have slightly altered the way the tutorial suggested to enable xhtml compatibility. This way i found was perfect for allowing someone to see that there is an option to increase the text(site) size.

and i’m totally sold on ems being used for as many measurements as possible.

This is the first time i’ve implemented this, but it certainly seems to work well (if someone has safari could they let me know if it breaks in that?)

By: ben morrison

ben morrison — Wed, 29 Jun 2005 15:14:19 +0000

We've just implemented a similar zoom to yahoo! on our new site (still in development) but am currently building a stylesheet switcher for a fixed width version as well, as those scrollbars can be a pain at 800x600. I do like your idea of adding a max-width property.

By: MatLat

MatLat — Mon, 27 Jun 2005 19:26:04 +0000

I read this article early this morning, and I’ve decided to add a stylesheet to the redesign I’m doing for http://www.uwplatt.edu to include low vision people. I was even spurred to write a haiku about it:

make those icons big
people with bad eyes can’t see
you silly monkey

I never claimed to be a poet.

By: Ted Drake

Ted Drake — Mon, 27 Jun 2005 16:33:12 +0000

I've also begun a zoom layout for a web site: www.alcalapetcare.com. it needs to be chosen from the file menu and I haven't made it persistent yet. I still need to make a few changes. A brief description of it: www.tdrake.net However, the notification of zoom layout on the normal version is still a tough call. This particular web site doesn't seem to have a place near the top for a nice button. I considered creating a little icon of mr. magoo style glasses with hover that could represent low vision. But they would look awkward on this site's circa 1915 Paris style. Ted

By: Karl Dawson

Karl Dawson — Mon, 27 Jun 2005 13:06:05 +0000

What a fantastic article to kick off my lunchtime blog surf. I found it very easy to use – nice to find the controls in a consistent location too. And pretty too! It’s all to easy to not bother with further styling as soon as you find yourself in accessibility mode which is rather a shame.

Adrian has a good point to drawing attention to the problem of highlighting the fact that a zoom layout is available but I’ll be interested in seeing how we tackle the problem in the meantime by labelling the option in the web site. I’m leaning towards developing an “accessibility” menu at the very top of a website that I can use across projects and will be googling for best practice labels if they’re out there already.

By: Jess

Jess — Mon, 27 Jun 2005 03:53:52 +0000

I love the idea of allowing user options. My only concern is the understanding of zoom software. A typical user who uses zoomtext goes far beyond the ability of what is built into stylesheets. The magnification zooms the entire screen not just the text. This can really fragment all fonts, no matter their size.

By: Tanny O'Haley

Tanny O'Haley — Sun, 26 Jun 2005 18:34:31 +0000

I really like the look of your zoom layout. Once again you’ve done a wonderful job.

Could you remove the indent for comments? I’m reading this page on a Treo 650 and the comments start about 40% from the left of the screen. Actually it would be nice to have a handheld style sheet that would turn off or minimize the body margins.

Thank you for adding beauty to a zoom layout.

By: Adrian

Adrian — Sun, 26 Jun 2005 13:49:51 +0000

whilst the zoom layout looks very good, and I agree with the concept, I still think there is a problem in that most people wont ever get to it. My experience is that people use a site in the layout they find it in and that’s it. Well for the most part.

I would be interested to see your stats in a few months to see how many people are actually using the zoom layouts.

Creating a zoom layout is easy. Creating a mechanism that allows the people who need it, find it and turn it on easily is more difficult. What you need is a button on the browser (all browsers, every browser) called Zoom or something. Where if a site has a alternative style sheet of type zoom, the button enables and users can just click that. Or something.

By: Veerle Pieters

Veerle Pieters — Sun, 26 Jun 2005 11:40:16 +0000

Just changed my fonts on my blog to ems instead of px and I feld a bit relieved… but now after seeing your Zoom lay-out it’s starting itching again, it just looks too nice ;-) Very inspiring and motivating (AGAIN!). Damn you :-P

By: Peter Akkies

Peter Akkies — Sun, 26 Jun 2005 09:04:37 +0000

I just had an idea while creating my own low vision-layout. Try to hover over an acronym to see its definition and you will notice the box that appears uses a very small font that obviously cannot be read by low-vision users. Now, I came up with this piece of code (good-browser only, though) that removes the problem:

acronym:after
{
content: ‘ (‘ attr(title) ‘)’;
}