WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Layout Stability

for

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

From: DAVOUD TOHIDY
Date: Mon, Nov 05 2007 12:40PM
Subject: Layout Stability
No previous message | Next message →

Hi there,

In an attempt to invite coders and designers to consider coding for "layout stability" to increase the readability and usability of web content. Please visit my online portfolio at http://cssfreelancer.awardspace.com for the definition of layout stability.

I am wondering what your opinion is about it.

Would you please provide a feedback?

regards,davoud

From: Keith Parks
Date: Mon, Nov 05 2007 2:10PM
Subject: Re: Layout Stability
← Previous message | Next message →

On Nov 5, 2007, at 11:32 AM, DAVOUD TOHIDY wrote:

>
> Hi there,
>
> In an attempt to invite coders and designers to consider coding for
> "layout stability" to increase the readability and usability of web
> content. Please visit my online portfolio at http://
> cssfreelancer.awardspace.com for the definition of layout stability.
>
> I am wondering what your opinion is about it.
>
> Would you please provide a feedback?

I agree that trying to find the right compromise between fluid and
fixed-width layout can be tricky. I understand that IE(7) finally
supports min-width and max-width properties, which could help a lot
in keeping text areas more usable over a wider range of browser
window sizes. Ah, I see you are using them. :^)

For the time being I stick with fixed-width columns, but on my To-DO
list is to work up a more fluid design.

- Keith

BTW, I noticed something you may want to double-check in your own
CSS. When I bump the text size up a couple of notches, some of your
text areas run off the right edge of the screen, particularly
the .note class. This is in Safari and Firefox. Might be because
the .content class has its left margin set to in EMs, thus the bigger
the type, the larger that margin, pushing the fixed-size .note block
out of the frame?

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.


From: Gunlaug Sørtun
Date: Mon, Nov 05 2007 5:10PM
Subject: Re: Layout Stability
← Previous message | Next message →

DAVOUD TOHIDY wrote:

> In an attempt to invite coders and designers to consider coding for
> "layout stability" to increase the readability and usability of web
> content.

> http://cssfreelancer.awardspace.com

> I am wondering what your opinion is about it.
>
> Would you please provide a feedback?

Having worked with what I call "robust designs" for a few years, I have
to say there aren't all that many working versions around. Guess IE6 has
held up the web for too long with its lack of CSS support, and IE7 is
late and just barely up to a minimum.

Creating robust, 'layout stable', CSS-based designs should otherwise not
really be a problem today. Even images can be modified on the fly to fit
in a mix of flexible and fixed containers, columns, with proper use of
min/max width, and older browsers can be given acceptable workarounds.


There are 'fluid', 'elastic' and 'conditional elastic' solutions to the
'layout stability' problems. Some simple demos linked in on this page...

<http://www.gunlaug.no/contents/wd_additions_14.html>;

...which contains more complete workarounds for IE6' lack of min/max
than you're using in your page - also for elastic layouts.

regards
Georg
--
http://www.gunlaug.no

From: DAVOUD TOHIDY
Date: Tue, Nov 06 2007 4:40AM
Subject: Re: Layout Stability
← Previous message | Next message →

First of all I would like to thank you for giving a feedback.

@Keith Parks:
I have designed this layout allowing for up to two increments. I am aware of the problem you mentioned, However for this layout I can't think of anything at the moment to prevent that happenning while keeping it cross browser and cross platform and preventing overlaps and providing an acceptable white space when browsing normally.

I would be very happy if you could provide a solution for this. However I will check my code again in the upcoming days too. Thanks for mentioning it.
Thank you very much for visiting my portfolio and the link for your site.
---------------------------------------------------

@Georg :

Well I am pleased to see your web site. I beleive what you have accomplished is a wonderfull job. Georg, I beleive we are pacing on the same road. What both of us have accomplished , are pointing to the same direction providing a cross browser, stable, usable and readable environment for web content.

I really enjoyed seeing your web site and learnt some lessons. It has been annoying to me seeing a lot of web sites out there without doing research on readability and usability.
I noticed that you have used CDATA in your css files added to the html code, which I beleive you are preventing an XML parser from producing errors. Why do you see a necessity of adding CDATA in this case? Is there any other reason for it?

In regards to older browsers and that IE6 has held up the web for too long and as we move on we will have more standard compliant browsers i do agree with you. However providing a correct code considering layout stability to prevent readability and usability problems is necessary even when coding for standard compliant browsers.

In other words it is possible to code in a way that standard compliant browsers will have readability and usability problems, which is what made me to invite for considering coding for layout stability.

I have provided a solution to prevent the loss in quality of pictures when they are browsed within an html file in different resolutions ( When the browser's window expanding or compressing) simply by creating a picture with a width of 735px and filling the rest of the veiwport for higher resolutions with a background color which is presented in the header of my portfolio. May I have your opinion about it please?

I also visited your main page at: http://www.gunlaug.no/main-en.html . I noticed that the fixed pisiotoned div on the right (#right-top) as well as footer on your main page disappears/ cutts off when resizing the browser's window in browsers such as Firefox 1.0.7, IE7, NS 7.2, Opera 8.01 and the content in the main area overlaps the left area where you have the back14wh.jpg background picture causing layout stability problems. I thaught you might be interested in double checking your code.

I have done some SEO for my portfolio and there are more than 70 combination of keywords which my portfolio will rank from number one to number 10 (mostly 1 to 5) on the first page of google. Some of the keywords are as below which my portfolio stands number one on google :
"css coder" "online portfolio" "xhtml coder" "online portfolio" "xhtml freelancer" "online portfolio" "xhtml coder" wcag "css coder" "readability" "cross-browser " "css freelancer" "cross-platform " "css coder"

As I mentioned there are other keywords that my portfolio ranks number one to 10 , however I am not going to bother you with mentioning in here. I was wondering if we can exchange a front page (main page) link please?

Once again thank you very much for visiting my portfolio and thank you for providing a link to your web site.

regards,

davoud
> Date: Tue, 6 Nov 2007 00:54:04 +0100> From: = EMAIL ADDRESS REMOVED = > To: = EMAIL ADDRESS REMOVED = > Subject: Re: [WebAIM] Layout Stability> > DAVOUD TOHIDY wrote:> > > In an attempt to invite coders and designers to consider coding for > > "layout stability" to increase the readability and usability of web > > content.> > > http://cssfreelancer.awardspace.com>; > > I am wondering what your opinion is about it.> > > > Would you please provide a feedback?> > Having worked with what I call "robust designs" for a few years, I have> to say there aren't all that many working versions around. Guess IE6 has> held up the web for too long with its lack of CSS support, and IE7 is> late and just barely up to a minimum.> > Creating robust, 'layout stable', CSS-based designs should otherwise not> really be a problem today. Even images can be modified on the fly to fit> in a mix of flexible and fixed containers, columns, with proper use of> min/max width, and older browsers can be given acceptable workarounds.> > > There are 'fluid', 'elastic' and 'conditional elastic' solutions to the> 'layout stability' problems. Some simple demos linked in on this page...> > <http://www.gunlaug.no/contents/wd_additions_14.html>;> > ...which contains more complete workarounds for IE6' lack of min/max> than you're using in your page - also for elastic layouts.> > regards> Georg> -- > http://www.gunlaug.no>;

From: Gunlaug Sørtun
Date: Tue, Nov 06 2007 7:00AM
Subject: Re: Layout Stability
← Previous message | Next message →

DAVOUD TOHIDY wrote:

> ... I noticed that you have used CDATA in your css files added to the
> html code, which I beleive you are preventing an XML parser from
> producing errors. Why do you see a necessity of adding CDATA in this
> case? Is there any other reason for it?

I see no point in "XHTML" that'll only work when served as 'text/html',
which means I have to add some "redundant" stuff here and there. It's
part of creating somewhat 'robust' solutions.

Examples on how I work:
<http://www.gunlaug.no/contents/wd_1_06_03.html>;
<http://www.gunlaug.no/contents/wd_1_06_03.xhtml>;

A well-tuned Tidy adds what's necessary - if I forget.

> In regards to older browsers and that IE6 has held up the web for too
> long and as we move on we will have more standard compliant browsers
> i do agree with you. However providing a correct code considering
> layout stability to prevent readability and usability problems is
> necessary even when coding for standard compliant browsers.

I don't think it is possible to prevent problems altogether - only
minimize them. Everything on the web can be turned into "a problem", and
I'm sure someone will - just for the sake of doing it.

If you by 'correct code' mean 'semantic use of MarkUp', then we're on
the same track. However, "semantics" in HTML is somewhat limited and
technical, and I don't aim for perfection since it can't be achieved.

If you mean 'proper use of CSS', then there are some solutions to that.
1: don't rely on CSS to "fix" anything.
2: test to well beyond breaking-point and see if the final solution can
take enough to be "acceptable" - usually a matter of opinion.

> In other words it is possible to code in a way that standard
> compliant browsers will have readability and usability problems,
> which is what made me to invite for considering coding for layout
> stability.

The web is full of bad examples, and most good ones are limited by
opinions on what's "good" and/or "good enough". There's always a limit,
and I always look for and usually push to the technical limit.

> I have provided a solution to prevent the loss in quality of pictures
> when they are browsed within an html file in different resolutions (
> When the browser's window expanding or compressing) simply by
> creating a picture with a width of 735px and filling the rest of the
> veiwport for higher resolutions with a background color which is
> presented in the header of my portfolio. May I have your opinion
> about it please?

It is a working solution, used by many.
Here's my take on some of the issues with images on the web...
<http://www.gunlaug.no/contents/wd_additions_23.html>;

> I also visited your main page at: http://www.gunlaug.no/main-en.html
> . ...

As mentioned: one has to draw the line somewhere, and there's a limit to
what can be done for old browser-versions and extreme cases. Someone
somewhere will break whatever we release, no matter what.

The use of 'position: fixed' is in itself a limitation on that and other
pages, and there's no way around that. It won't stop me from using 'p:f'
though.

Generally: browser-developers should fix their software, and users
should update often enough to at least make use of major improvements.
Otherwise there isn't much point in progress across browser-land.
I usually wait at least one year after a major upgrade of a browser, and
then I stop checking the old versions.

> As I mentioned there are other keywords that my portfolio ranks
> number one to 10 , however I am not going to bother you with
> mentioning in here. I was wondering if we can exchange a front page
> (main page) link please?

I don't "do" SEO. I don't think you'll find 'keywords' anywhere on my
site, and none will be added. I also don't have a page dedicated to
linking to other sites.

I'll have a look at your site and see if some of it fits in somewhere,
but I won't promise anything since I only link to pages/sites that are
relevant to whatever I write about so I don't have to copy/steal stuff
from others. That's all the "SEO" you'll find on my site, and none of it
is aimed at search engines. I get listed though :-)

regards
Georg
--
http://www.gunlaug.no

From: Austin, Darrel
Date: Tue, Nov 06 2007 1:40PM
Subject: Re: Layout Stability
← Previous message | Next message →

> I am wondering what your opinion is about it.

It seems to be a term that describes'fixed width layouts'

Not sure that's really an accessibility issue as much as usability.

-Darrel

From: Keith Parks
Date: Tue, Nov 06 2007 3:00PM
Subject: Re: Layout Stability
← Previous message | Next message →

On Nov 6, 2007, at 12:36 PM, Austin, Darrel wrote:

>> I am wondering what your opinion is about it.
>
> It seems to be a term that describes'fixed width layouts'
>
> Not sure that's really an accessibility issue as much as usability.

In my mind the accessibility issue is where some users with decreased
vision may need to *significantly* bump up the text size in order to
read it, but if the layout is not flexible enough some content may
get pushed out of its containing element, either to disappear or else
overlap other content.

Obviously not an issue with a ZoomText-style screen magnification,
but I assume some people take advantage of the out-of-the-box text
resizing to address the same difficulty.

For a couple of random samples, compare in internal Apple page
<http://www.apple.com/itunes/>;

With the Yahoo home page <http://www.yahoo.com/>;

Visiting each in Firefox and bumping up the text size 5 or 6 times,
the Yahoo columns flex to accommodate the content, but in the Apple
site content gets cut off and/or pushed out of place.

So it's a usability question in that anyone ought to be able to
adjust the font size, but an accessibility issue in that low vision
users would reasonably seem more likely to be on the extreme end of
big type.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.


From: DAVOUD TOHIDY
Date: Tue, Nov 06 2007 3:50PM
Subject: Re: Layout Stability
← Previous message | Next message →

>It seems to be a term that describes'fixed width layouts

eventough specifying a fixed width is the main key to providing a stable layout however as you can see in my portfolio which is a combination of liquid and fixed layout, it does not necessarily describe fixed width layouts.

> Not sure that's really an accessibility issue as much as usability.

It is a readability and usability issue.

regards,davoud

> Date: Tue, 6 Nov 2007 14:36:54 -0600> From: = EMAIL ADDRESS REMOVED = > To: = EMAIL ADDRESS REMOVED = > Subject: Re: [WebAIM] Layout Stability> > > I am wondering what your opinion is about it.> > It seems to be a term that describes'fixed width layouts'> > Not sure that's really an accessibility issue as much as usability.> > -Darrel> >

From: Rahul Gonsalves
Date: Tue, Nov 06 2007 11:10PM
Subject: Re: Layout Stability
← Previous message | Next message →

On 06-Nov-07, at 4:57 PM, DAVOUD TOHIDY wrote:

> I have done some SEO for my portfolio and there are more than 70
> combination of keywords which my portfolio will rank from number
> one to number 10 (mostly 1 to 5) on the first page of google. Some
> of the keywords are as below which my portfolio stands number one
> on google :
> "css coder" "online portfolio" "xhtml coder" "online portfolio"
> "xhtml freelancer" "online portfolio" "xhtml coder" wcag "css
> coder" "readability" "cross-browser " "css freelancer" "cross-
> platform " "css coder"

I'm not sure what relevance this has to the WebAIM list, but I was
unable to find your web-page using the search terms that you provided.

Best,
- Rahul.

From: tedd
Date: Wed, Nov 21 2007 11:00AM
Subject: Re: Layout Stability
← Previous message | No next message

At 2:32 PM -0500 11/5/07, DAVOUD TOHIDY wrote:
>Hi there,
>
>In an attempt to invite coders and designers to consider coding for
>"layout stability" to increase the readability and usability of web
>content. Please visit my online portfolio at
>http://cssfreelancer.awardspace.com for the definition of layout
>stability.
>
>I am wondering what your opinion is about it.
>
>Would you please provide a feedback?
>
>regards,davoud

Could could start by validating your site:

http://validator.w3.org/check?uri=http://cssfreelancer.awardspace.com/

Cheers,

tedd
--
-------
http://sperling.com http://ancientstones.com http://earthstones.com