E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Responsive web design and it's accessibility

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

From: suman damera
Date: Tue, May 22 2018 4:57AM
Subject: Responsive web design and it's accessibility
No previous message | Next message →

Hello all,
I written blog post on the responsive web design(RWD) and it's
accessibility and sharing the blog posts links here by thinking it would
help some one
part1:
http://www.sumandamera.com/responsive-web-designrwd-and-its-accessibility-part1/
part2:
http://www.sumandamera.com/responsive-web-designrwd-and-its-accessibility-part2/

Thank you.

From: Mallory
Date: Tue, May 22 2018 5:40AM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

Re this:
"User zoom: if user zoom is set to no then user cannot zoom the content and therefore, always set user zoom to yes to enable the zoom feature"
If the author leaves out zoom entirely, it should default to allowing zoom as well. Authors don't have to worry about remembering to set it to "yes" to allow zooming.

One thing I don't see in many places talking about responsive web design is not just using width media queries, but height ones as well. This mostly because on my laptop I am zoomed in enough to usually get the "mobile" view of a page. But when I don't, I often get the "sticky" things (sticky headers and footers) meant for the desktop view. But my screen when zoomed isn't large enough. I wish a height media query did a quick check on whether my viewport *height* (in em) is tall enough. When it isn't, un-stick the stickies. Otherwise I end up with pages looking unusable.
http://www.stommepoes.nl/Access/NCDT/img/zoomed_screenshot.png

cheers,
Mallory

On Tue, May 22, 2018, at 12:57 PM, suman damera wrote:
> Hello all,
> I written blog post on the responsive web design(RWD) and it's
> accessibility and sharing the blog posts links here by thinking it would
> help some one
> part1:
> http://www.sumandamera.com/responsive-web-designrwd-and-its-accessibility-part1/
> part2:
> http://www.sumandamera.com/responsive-web-designrwd-and-its-accessibility-part2/
>
> Thank you.
> > > >

From: suman damera
Date: Tue, May 22 2018 8:10AM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

Great points Mallory! and noted this points too.

On Tue, May 22, 2018 at 5:10 PM, Mallory < = EMAIL ADDRESS REMOVED = > wrote:

> Re this:
> "User zoom: if user zoom is set to no then user cannot zoom the content
> and therefore, always set user zoom to yes to enable the zoom feature"
> If the author leaves out zoom entirely, it should default to allowing zoom
> as well. Authors don't have to worry about remembering to set it to "yes"
> to allow zooming.
>
> One thing I don't see in many places talking about responsive web design
> is not just using width media queries, but height ones as well. This mostly
> because on my laptop I am zoomed in enough to usually get the "mobile" view
> of a page. But when I don't, I often get the "sticky" things (sticky
> headers and footers) meant for the desktop view. But my screen when zoomed
> isn't large enough. I wish a height media query did a quick check on
> whether my viewport *height* (in em) is tall enough. When it isn't,
> un-stick the stickies. Otherwise I end up with pages looking unusable.
> http://www.stommepoes.nl/Access/NCDT/img/zoomed_screenshot.png
>
> cheers,
> Mallory
>
> On Tue, May 22, 2018, at 12:57 PM, suman damera wrote:
> > Hello all,
> > I written blog post on the responsive web design(RWD) and it's
> > accessibility and sharing the blog posts links here by thinking it would
> > help some one
> > part1:
> > http://www.sumandamera.com/responsive-web-designrwd-and-
> its-accessibility-part1/
> > part2:
> > http://www.sumandamera.com/responsive-web-designrwd-and-
> its-accessibility-part2/
> >
> > Thank you.
> > > > > > > > > > > > >

From: glen walker
Date: Tue, May 22 2018 8:30AM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

unrelated to the blog, i like your background story, suman.

On Tue, May 22, 2018 at 8:10 AM, suman damera < = EMAIL ADDRESS REMOVED = > wrote:

> Great points Mallory! and noted this points too.
>
>
>

From: KellyFord
Date: Tue, May 22 2018 5:10PM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

Hi,

This is an interesting discussion and I'd like to bring up at least one issue I've experienced. I use a screen reader and have no vision. Rarely do I worry about the size of my browser window on my personal computer and in fact at various times have been told the window might be extremely small. Perhaps some combinations of things I inadvertently did caused this to happen. The end result today though is that I can at times get a very different experience, even though from my perception I'm going to the same web site.

I'm not saying at all that responsive design shouldn't be used but just be aware it has implications that may not always be expected.

Kelly

From: glen walker
Date: Tue, May 22 2018 6:09PM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

I have to remind designers that when they're designing for breakpoints and
start talking about tablet or mobile, that those breakpoints can be hit on
the desktop too if the browser is shrunk or the font is increased.

On Tue, May 22, 2018 at 5:10 PM, KellyFord < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> This is an interesting discussion and I'd like to bring up at least one
> issue I've experienced. I use a screen reader and have no vision. Rarely
> do I worry about the size of my browser window on my personal computer and
> in fact at various times have been told the window might be extremely
> small. Perhaps some combinations of things I inadvertently did caused this
> to happen. The end result today though is that I can at times get a very
> different experience, even though from my perception I'm going to the same
> web site.
>
> I'm not saying at all that responsive design shouldn't be used but just be
> aware it has implications that may not always be expected.
>
> Kelly
>
>
>
>
>
>
>
>

From: John Foliot
Date: Tue, May 22 2018 7:36PM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

> I wish a height media query did a quick check on whether my viewport
*height* (in em) is tall enough. When it isn't, un-stick the stickies.

Do you happen to have an example of "good" code Mallory? ;-) A rough
frame would be enough.

JF

On Tue, May 22, 2018 at 6:40 AM, Mallory < = EMAIL ADDRESS REMOVED = > wrote:

> Re this:
> "User zoom: if user zoom is set to no then user cannot zoom the content
> and therefore, always set user zoom to yes to enable the zoom feature"
> If the author leaves out zoom entirely, it should default to allowing zoom
> as well. Authors don't have to worry about remembering to set it to "yes"
> to allow zooming.
>
> One thing I don't see in many places talking about responsive web design
> is not just using width media queries, but height ones as well. This mostly
> because on my laptop I am zoomed in enough to usually get the "mobile" view
> of a page. But when I don't, I often get the "sticky" things (sticky
> headers and footers) meant for the desktop view. But my screen when zoomed
> isn't large enough. I wish a height media query did a quick check on
> whether my viewport *height* (in em) is tall enough. When it isn't,
> un-stick the stickies. Otherwise I end up with pages looking unusable.
> http://www.stommepoes.nl/Access/NCDT/img/zoomed_screenshot.png
>
> cheers,
> Mallory
>
> On Tue, May 22, 2018, at 12:57 PM, suman damera wrote:
> > Hello all,
> > I written blog post on the responsive web design(RWD) and it's
> > accessibility and sharing the blog posts links here by thinking it would
> > help some one
> > part1:
> > http://www.sumandamera.com/responsive-web-designrwd-and-
> its-accessibility-part1/
> > part2:
> > http://www.sumandamera.com/responsive-web-designrwd-and-
> its-accessibility-part2/
> >
> > Thank you.
> > > > > > > > > > > > >

--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =

Advancing the mission of digital accessibility and inclusion

From: suman damera
Date: Tue, May 22 2018 8:05PM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

Thank you glen for liking my background story!
Hi Kelly,
Even i too face the issue that you mentioned. when i face such problem then
i would realize that it is different layout and immediately i just maximize
the screen.
Thank you.
On Wed, May 23, 2018 at 4:40 AM, KellyFord < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> This is an interesting discussion and I'd like to bring up at least one
> issue I've experienced. I use a screen reader and have no vision. Rarely
> do I worry about the size of my browser window on my personal computer and
> in fact at various times have been told the window might be extremely
> small. Perhaps some combinations of things I inadvertently did caused this
> to happen. The end result today though is that I can at times get a very
> different experience, even though from my perception I'm going to the same
> web site.
>
> I'm not saying at all that responsive design shouldn't be used but just be
> aware it has implications that may not always be expected.
>
> Kelly
>
>
>
>
>
>
>
>

From: Patrick H. Lauke
Date: Wed, May 23 2018 2:28AM
Subject: Re: Responsive web design and it's accessibility
← Previous message | Next message →

On 23/05/2018 02:36, John Foliot wrote:
>> I wish a height media query did a quick check on whether my viewport
> *height* (in em) is tall enough. When it isn't, un-stick the stickies.
>
> Do you happen to have an example of "good" code Mallory? ;-) A rough
> frame would be enough.

Something like this? https://codepen.io/patrickhlauke/pen/RyOQZE

tl;dr: style as usual, and then if min-height above a certain threshold,
make the header sticky.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Mallory
Date: Wed, May 23 2018 6:58AM
Subject: Re: Responsive web design and it's accessibility
← Previous message | No next message

Patrick's got it, that's more toward what I would code (the actual design would of course have influence on what height would trigger what, similar to how designs and content affect which widths the developer uses. How fat is the sticky? Could the sticky's contents wrap to more lines (it better since we can't scroll stickies horizontally, a problem I get constantly with cookie-warnings)? What exactly is IN the sticky (how important is it that it remains onscreen)?). Likely somewhere someone would come up with a CSS pixel height to use as a reference, similar to the new 2.1's reflow starting with a 1280-px-wide viewport.

KellyFord brings up a good point I saw elsewhere-- that sometimes I reach a page, and notice the text is too small, and start zooming in more-- and a menu full of stuff vanishes into a hamburger. And I can figure it out, but I can see this becoming a potential future coga concern.

Wayne Dick brought up on a github issue another option for stickies, that they could be collapsable. Less passive than the media query but may make more sense for something like Jira's side menu (not that jira doesn't suck tremendously when you're zoomed in, so maybe microsoft's ribbon is a better example).

cheers,
Mallory

On Wed, May 23, 2018, at 10:28 AM, Patrick H. Lauke wrote:
> On 23/05/2018 02:36, John Foliot wrote:
> >> I wish a height media query did a quick check on whether my viewport
> > *height* (in em) is tall enough. When it isn't, un-stick the stickies.
> >
> > Do you happen to have an example of "good" code Mallory? ;-) A rough
> > frame would be enough.
>
> Something like this? https://codepen.io/patrickhlauke/pen/RyOQZE
>
> tl;dr: style as usual, and then if min-height above a certain threshold,
> make the header sticky.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >