Re: [WSG] CSS "rollovers" for images?

[cat soul]

tee...you are quite right to point that out..every medium has its  
booby traps and difficulties..I've spend my share of time wrangling  
with recalcitrant files myself.



cs


On Oct 20, 2010, at 4:11 PM, tee wrote:


Fixing PostScript error is like knowing browser quirks




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] attribute selectors to target external and internal links

[Thierry Koblentz]

> This rule works
> a[href^="http"]
> 
> Problem is almost every CMS system uses absolute url for internal link,
> this makes it impossible to target just the external link without the
> content editor having to add a class to it.

If you deal with absolute paths, you should be able to match internal links
with this:

a[href*='domain-name']

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] attribute selectors to target external and internal links

[tee]

This rule works
a[href^="http"]

Problem is almost every CMS system uses absolute url for internal link, this 
makes it impossible to target just the external link without the content editor 
having to add a class to it.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[tee]

 
On Oct 20, 2010, at 9:11 AM, cat soul wrote
> 
> Please don't groan, but my background is in Print. Luckily, I never had to 
> write PostScript. Illustrator, PS, Quark, and later InDesign all do a fine 
> job of it.
> 
> 
> but just imagine if I DID have to write the post script, and to know 
> variations for every single printing device?!?!
> 
> IMHO, we need some kind of lingua franca that works for all of these 
> electronic gizmos once and for all...
> 
> but...things have been set in motion, and perhaps it's going to remain a 
> bucket of stinky fish guts into the foreseeable future.
> 

As someone who was in print media, I would say the approach is pretty much the 
same (well except the creative part-creative as artistic) if you can get out of 
the "print media box".

You may not need to write PostScript, but you need to know how to fix the 
PostScript errors (this may no longer needed as it used to be anymore with the 
advanced printing technology that we have today): I remembered the days when I 
could spent 5 hours layout a 300 pages documentation and spent extra 8 hours to 
hunt the Postscript errors that occurred during printing/PDF conversion. 
Commanding the essential software (Illustrator, PS, Quark, and later InDesign) 
is just as  the same that you need to command markup and CSS, and command it 
well.


Fixing PostScript error is like knowing browser quirks, e.g. what to avoid when 
you write your CSS; where to look for clue when your layout goes out of whack 
in certain browser(s). If you are lucky than I was, you may never have to deal 
with PostScript, but the similar goes to colors, paper and printing technique 
(none-digital printing), that what color combinations with the right choice of 
paper stock can bring up the design etc.

I hated those days I had to stay in the office till midnight fighting with 
PostScript errors from time to time, but very so often in my life now as a web 
developer, I realized how much I benefited from those days which turned me into 
a pretty good problem solver in  solo web development setup.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images + Feedback Sources??

[Nick Stone]

 Leslie,

This is such valuable feedback.

Thanks very much!

Does anyone have suggestions on how to obtain website usability feedback 
from various members of the disabled community?


Thanks in advance,
Nick

--
Nick Stone, MBA
SEO, Web Accessibility, Web Development
http://nick-stone.com/




Good idea, but please remember that for someone with problems of 
co-ordination or fine muscle control, hovering can be extremely 
difficult.  I've encountered javascript image galleries which work like 
this, and on a bad day I find them completely unusable.


Lesley

On 19/10/10 21:13, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small thumbnails of
samples, and hovering the mouse over them would invoke a hover state in
which a larger version of that same image would appear..."Larger"
meaning 400x600 pixels, or in that neighborhood.

Is this not wise from a coding perspective? How about usability? Do web
page visitors not expect this kind of behavior..would it be confusing to
them as to what they're supposed to do, or what to expect?

I'm wanting to use CSS to do what javascript rollovers do, only without
the javascript.


thanks for any feedback or opinions.

cs




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Russ Weakley]

 
> stop sending me emails

We've stopped sending this person emails. no need to comment on this.  :)

Continue with this great thread!

Thanks
Russ

BTW, every WSG email that goes out has an unsubscribe link at the bottom. 
Better to click that that tell 7,000 people you don't want any emails  :)



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[cat soul]

Heh!  That is pretty funny!

However, clients may have the need to ensure a universal experience.  
One example of this is in their brand values, which may call for a  
certain look and feel. If a person experiences one thing on their  
iPad and another experiences something different on their HP  
notebook, those brand values could be said to have been compromised,  
diluted, changed..


cs


On Oct 20, 2010, at 12:07 PM, Jason Arnold wrote:


progressive enhancement is what you ought to do.  and to answer the
question if the experience needs to be same universally we have the
answer right here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

--




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Jon McInerney]

stop sending me emails

On Wed, Oct 20, 2010 at 3:25 PM, Hassan Schroeder  wrote:
> On 10/20/10 11:42 AM, cat soul wrote:
>>
>> I agree thoroughly, Hassan. Yet as this is a best-practices discussion and
>> group, and since
>> we've been hearing that these things A) don't always work and B) aren't
>> always well-received by
>> end users, we're left with a need.
>>
>> And that need is to know: out of the universe of what we can do, what
>> ought we do to ensure as
>> universal an experience as possible?
>
> I don't see any such need. Every site or application needs to be
> evaluated in terms of the expected audience. Testing with real users
> is essential, but you can still reasonably start with assumptions
> that differ depending on whether you're building e.g. an intranet
> inventory-management system vs a public lolcats-haiku-sharing site :-)
>
> --
> Hassan Schroeder - has...@webtuitive.com
> webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
> twitter: @hassan
>                          dream.  code.
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>



-- 
Jonathan T. McInerney
Vice President, Pearse Street, Inc.

www.pearsestreet.com
800-985-5932


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Hassan Schroeder]

On 10/20/10 11:42 AM, cat soul wrote:

I agree thoroughly, Hassan. Yet as this is a best-practices discussion and 
group, and since
we've been hearing that these things A) don't always work and B) aren't always 
well-received by
end users, we're left with a need.

And that need is to know: out of the universe of what we can do, what ought we 
do to ensure as
universal an experience as possible?


I don't see any such need. Every site or application needs to be
evaluated in terms of the expected audience. Testing with real users
is essential, but you can still reasonably start with assumptions
that differ depending on whether you're building e.g. an intranet
inventory-management system vs a public lolcats-haiku-sharing site :-)

--
Hassan Schroeder - has...@webtuitive.com
webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
twitter: @hassan
  dream.  code.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Jason Arnold]

On Wed, Oct 20, 2010 at 1:42 PM, cat soul  wrote:
> I agree thoroughly, Hassan. Yet as this is a best-practices discussion and
> group, and since we've been hearing that these things A) don't always work
> and B) aren't always well-received by end users, we're left with a need.
>
> And that need is to know: out of the universe of what we can do, what ought
> we do to ensure as universal an experience as possible?

progressive enhancement is what you ought to do.  and to answer the
question if the experience needs to be same universally we have the
answer right here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

-- 

Jason Arnold
http://www.jasonarnold.net



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[cat soul]

I agree thoroughly, Hassan. Yet as this is a best-practices  
discussion and group, and since we've been hearing that these things  
A) don't always work and B) aren't always well-received by end users,  
we're left with a need.


And that need is to know: out of the universe of what we can do, what  
ought we do to ensure as universal an experience as possible?




cs


On Oct 20, 2010, at 11:26 AM, Hassan Schroeder wrote:


But it's not that cut and dried -- CSS has always had behaviors,
e.g. :hover, :focus, as well.


so maybe these rollovers, when they do ANYTHING besides indicate a

> clickable thing, are passe, amateurish techniques ...


Now we're all over it..we've seen it, and we are back to function,

> information, usability, speed...

And maybe providing expanded affordances through hover behaviors is
totally appropriate in some circumstances, to deliver exactly those
benefits.  :-)




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Hassan Schroeder]

On 10/20/10 10:19 AM, cat soul wrote:


The picture I am developing now is this: HTML and CSS should be used strictly 
for content,
structure and formatting.

*Behaviors* are best left to things like Javascript.


But it's not that cut and dried -- CSS has always had behaviors,
e.g. :hover, :focus, as well.


so maybe these rollovers, when they do ANYTHING besides indicate a

> clickable thing, are passe, amateurish techniques ...


Now we're all over it..we've seen it, and we are back to function,

> information, usability, speed...

And maybe providing expanded affordances through hover behaviors is
totally appropriate in some circumstances, to deliver exactly those
benefits.  :-)

YMMV,
--
Hassan Schroeder - has...@webtuitive.com
webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
twitter: @hassan
  dream.  code.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[cat soul]

Well, I am down with that..I never did care for the jumpy, spinny,  
whizzy things... As a print designer, I'm all about good design, good  
typography, quality imagery and clear communication.


however, you sometimes get the idea that if you don't pay obeisance  
to that fashion (jumpy, spinny, whizzy), you'll be ignored and  
marginalized in favor of those whose sites are a  multi-sensory  
fantasmatron of motion,  speed and sounds.



However, books have been captivating people for centuries and they  
just sit there until you pick them up and use them.


I would be happy to have none of that silly stuff on my page, but  
then I get told my site "looks a bit dated."



cs



On Oct 20, 2010, at 10:40 AM, Joseph Taylor wrote:


Cat,

That's the holy trinity of web design: content, presentation and  
behavior. ;)

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 1:19 PM, cat soul wrote:


I thank you for that link, David.

The picture I am developing now is this: HTML and CSS should be  
used strictly for content, structure and formatting.


*Behaviors* are best left to things like Javascript.


Are these two statements ones that most here can buy into? Are  
they fair statements, accurate reflections of practice and real- 
world usage?


IOW, there are things we *can* do, and out of that, there are  
things we ought do, or ought not do, based on the demonstrable.



cs


On Oct 20, 2010, at 9:46 AM, David Dorward wrote:



On 20 Oct 2010, at 16:59, cat soul wrote:

will there be/can there be a  new command/property which can be  
read by each device the way it needs to be?


could there be soon a "touch" command so that you could write  
the code like:


"hover, do this. If no hover, then touch, do this. If no touch,  
then __ and do this"


We shouldn't need it.

We have :hover which can be thought of "When the user is  
potentially about to activate something" and we have :active  
which is "When the user is activating something".


That should be enough until you start trying to use :hover for  
doing things beyond indicating the possibility of activation, and  
one you start doing that … http://www.cennydd.co.uk/2010/end- 
hover-abuse-now/


--
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[cat soul]

Help me if I  mis-interpret the writer's fine article, but this  
pertains to Javascript rollovers, too.


The end user doesn't know and doesn't care whether that thing popping  
up was a CSS Hover, or a Javascript rollover. S/he only knows that,  
by innocently mousing around, something popped up without his/her  
deciding to actively invoke the popping up her/himself.


so maybe these rollovers, when they do ANYTHING besides indicate a  
clickable thing, are passe, amateurish techniques associated with the  
earlier days of the internet when the most cool thing was "stuff  
happening."


Now we're all over it..we've seen it, and we are back to function,  
information, usability, speed...




On Oct 20, 2010, at 9:46 AM, David Dorward wrote:

That should be enough until you start trying to use :hover for  
doing things beyond indicating the possibility of activation, and  
one you start doing that … http://www.cennydd.co.uk/2010/end-hover- 
abuse-now/




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[Joseph Taylor]

Cat,

That's the holy trinity of web design: content, presentation and 
behavior. ;)


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 1:19 PM, cat soul wrote:

I thank you for that link, David.

The picture I am developing now is this: HTML and CSS should be used 
strictly for content, structure and formatting.


*Behaviors* are best left to things like Javascript.


Are these two statements ones that most here can buy into? Are they 
fair statements, accurate reflections of practice and real-world usage?


IOW, there are things we *can* do, and out of that, there are things 
we ought do, or ought not do, based on the demonstrable.



cs


On Oct 20, 2010, at 9:46 AM, David Dorward wrote:



On 20 Oct 2010, at 16:59, cat soul wrote:

will there be/can there be a  new command/property which can be read 
by each device the way it needs to be?


could there be soon a "touch" command so that you could write the 
code like:


"hover, do this. If no hover, then touch, do this. If no touch, then 
__ and do this"


We shouldn't need it.

We have :hover which can be thought of "When the user is potentially 
about to activate something" and we have :active which is "When the 
user is activating something".


That should be enough until you start trying to use :hover for doing 
things beyond indicating the possibility of activation, and one you 
start doing that … http://www.cennydd.co.uk/2010/end-hover-abuse-now/


--
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[cat soul]

I thank you for that link, David.

The picture I am developing now is this: HTML and CSS should be used  
strictly for content, structure and formatting.


*Behaviors* are best left to things like Javascript.


Are these two statements ones that most here can buy into? Are they  
fair statements, accurate reflections of practice and real-world usage?


IOW, there are things we *can* do, and out of that, there are things  
we ought do, or ought not do, based on the demonstrable.



cs


On Oct 20, 2010, at 9:46 AM, David Dorward wrote:



On 20 Oct 2010, at 16:59, cat soul wrote:

will there be/can there be a  new command/property which can be  
read by each device the way it needs to be?


could there be soon a "touch" command so that you could write the  
code like:


"hover, do this. If no hover, then touch, do this. If no touch,  
then __ and do this"


We shouldn't need it.

We have :hover which can be thought of "When the user is  
potentially about to activate something" and we have :active which  
is "When the user is activating something".


That should be enough until you start trying to use :hover for  
doing things beyond indicating the possibility of activation, and  
one you start doing that … http://www.cennydd.co.uk/2010/end-hover- 
abuse-now/


--
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Al Sparber]

From: "Patrick H. Lauke" 

On 20/10/2010 10:44, cat soul wrote:

Yes, and while we're on the topic of things that won't work on phones
and iPadsis there anything else we need to know about that also
won't play nice with those two handheld platforms?


A gentle reminder that iDevices are not the only platform that has touch 
interfaces, and that Mobile Safari is not the only browser on devices 
with touch interfaces.


Interestingly enough, the old problems of hover/mouse based interactions 
that we've been preaching against for ages with regards to (keyboard) 
accessibility have now reappeared in terms of touchscreen interfaces, 
where hovering doesn't work (reliably - some devices have weird 
heuristics where a click can be interpreted as a hover in certain 
conditions).


Touch devices can be served targeted CSS via media queries. Just something to 
keep in mind :-)

--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] CSS, :hover and touch screen devices (Was: CSS "rollovers" for images?)

[David Dorward]

 
On 20 Oct 2010, at 16:59, cat soul wrote:

> will there be/can there be a  new command/property which can be read by each 
> device the way it needs to be?
> 
> could there be soon a "touch" command so that you could write the code like:
> 
> "hover, do this. If no hover, then touch, do this. If no touch, then __ 
> and do this"

We shouldn't need it.

We have :hover which can be thought of "When the user is potentially about to 
activate something" and we have :active which is "When the user is activating 
something".

That should be enough until you start trying to use :hover for doing things 
beyond indicating the possibility of activation, and one you start doing that … 
http://www.cennydd.co.uk/2010/end-hover-abuse-now/

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Joseph Taylor]

Things are definitely better now than they once were in the world of 
browsers.


Sure, we have a number of IE's of varying inability to deal with plus a 
bunch of others.


Sure, we're constantly in a state of "it doesn't work on everything yet".

Sure, not one tool we use can be relied on 100% of the time.

But

We finally have an environment where standards can flourish. Browser 
competition exists again. So much so that Microsft had no choice but to 
join in. This is good.


We have new toys like CSS3 that create enough excitement that browsers 
are scrambling to handle them.


While I've been continuously disappointed for the last decade on 
standards adoption etc, I remain optimistic that the future is bright.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 12:11 PM, cat soul wrote:
Well, you certainly busted wide open a huge can of worms, Joseph, and 
I salute you for it.

the one comfy thing in that, to me, is the "no IE" part.


Starting with clean HTML is easy enough, but everything else is 
squarely in the "don't count on it" category..revealing the lick and a 
promise nature of CSS and  Jscript...not that they are not worthy 
tools; they simply can't be counted upon to be properly supported...



but neither can HTML, which, IIRC, is the reason for CSS.


Yanno, folks...I am smelling the need for some kind of revolution 
here...That "standards" do not work reliably doesn't help anyone..not 
client, not end-user, not author/designer/developer.



Please don't groan, but my background is in Print. Luckily, I never 
had to write PostScript. Illustrator, PS, Quark, and later InDesign 
all do a fine job of it.



but just imagine if I DID have to write the post script, and to know 
variations for every single printing device?!?!


IMHO, we need some kind of lingua franca that works for all of these 
electronic gizmos once and for all...


but...things have been set in motion, and perhaps it's going to remain 
a bucket of stinky fish guts into the foreseeable future.



cs



On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote:

Good questions. I have yet to see definitive answers for most of 
these questions.


I've been thinking on this constantly as I try to alter my work flow 
to a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or downwards 
from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive 
fashion.


The touch devices add a new dimension to the workflow. They may 
change the way you approach some items on a page (like a multi select 
widget) and you now have to pay more attention to the :active 
attribute in your CSS as that'll react to a touch vs. :hover - no 
biggie, right?


For the most part, the touch devices all use modern browsers which is 
pretty cool. I made an iphone version of my site using media queries, 
which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:
Yes, and while we're on the topic of things that won't work on 
phones and iPadsis there anything else we need to know about 
that also won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for 
the iPad and for phones, and have desktop and notebook users simply 
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

*From:* tee 
*Sent:* Wednesday, October 20, 2010 1:57 AM
*To:* wsg@webstandardsgroup.org 
*Subject:* Re: [WSG] CSS "rollovers" for images?

Caution with the use of hover for such purpose if you also want 
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I 
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add 
javascript to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main 
image, then have your Javscript/CSS hijack the link and show the 
image. Everyone wins.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-307

Re: [WSG] CSS "rollovers" for images?

[cat soul]

Well, you certainly busted wide open a huge can of worms, Joseph, and  
I salute you for it.

the one comfy thing in that, to me, is the "no IE" part.


Starting with clean HTML is easy enough, but everything else is  
squarely in the "don't count on it" category..revealing the lick and  
a promise nature of CSS and  Jscript...not that they are not worthy  
tools; they simply can't be counted upon to be properly supported...



but neither can HTML, which, IIRC, is the reason for CSS.


Yanno, folks...I am smelling the need for some kind of revolution  
here...That "standards" do not work reliably doesn't help anyone..not  
client, not end-user, not author/designer/developer.



Please don't groan, but my background is in Print. Luckily, I never  
had to write PostScript. Illustrator, PS, Quark, and later InDesign  
all do a fine job of it.



but just imagine if I DID have to write the post script, and to know  
variations for every single printing device?!?!


IMHO, we need some kind of lingua franca that works for all of these  
electronic gizmos once and for all...


but...things have been set in motion, and perhaps it's going to  
remain a bucket of stinky fish guts into the foreseeable future.



cs



On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote:

Good questions. I have yet to see definitive answers for most of  
these questions.


I've been thinking on this constantly as I try to alter my work  
flow to a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or  
downwards from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive  
fashion.


The touch devices add a new dimension to the workflow. They may  
change the way you approach some items on a page (like a multi  
select widget) and you now have to pay more attention to  
the :active attribute in your CSS as that'll react to a touch  
vs. :hover - no biggie, right?


For the most part, the touch devices all use modern browsers which  
is pretty cool. I made an iphone version of my site using media 
queries, which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!
Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:


Yes, and while we're on the topic of things that won't work on  
phones and iPadsis there anything else we need to know about  
that also won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design  
for the iPad and for phones, and have desktop and notebook users  
simply have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

From: tee
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS "rollovers" for images?

Caution with the use of hover for such purpose if you also want  
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I  
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add  
javascript to control how the image shows and fades, positioning  
etc.


For maximum accessibility, have the thumbnail link to the main  
image, then have your Javscript/CSS hijack the link and show the  
image. Everyone wins.

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:


Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small  
thumbnails of samples, and hovering the mouse over them would  
invoke a hover state in which a larger version of that same  
image would appear..."Larger" meaning 400x600 pixels, or in  
that neighborhood.


Is this not wise from a coding perspective? How about  
usability? Do web page visitors not expect this kind of  
behavior..would it be confusing to them as to what they're  
supposed to do, or what to expect?


I'm wanting to use CSS to do what javascript rollovers do, only  
without the javascript.



thanks for any feedback or opinions.

cs



This email has been scanned by Netintelligence
http://www.netintelligence.com/email

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgrou

Re: [WSG] CSS "rollovers" for images?

[cat soul]

will there be/can there be a  new command/property which can be read  
by each device the way it needs to be?


could there be soon a "touch" command so that you could write the  
code like:



"hover, do this. If no hover, then touch, do this. If no touch, then  
__ and do this"


?



On Oct 20, 2010, at 8:45 AM, Patrick H. Lauke wrote:

Interestingly enough, the old problems of hover/mouse based  
interactions that we've been preaching against for ages with  
regards to (keyboard) accessibility have now reappeared in terms of  
touchscreen interfaces, where hovering doesn't work (reliably -  
some devices have weird heuristics where a click can be interpreted  
as a hover in certain conditions).




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Patrick H. Lauke]

On 20/10/2010 10:44, cat soul wrote:

Yes, and while we're on the topic of things that won't work on phones
and iPadsis there anything else we need to know about that also
won't play nice with those two handheld platforms?


A gentle reminder that iDevices are not the only platform that has touch 
interfaces, and that Mobile Safari is not the only browser on devices 
with touch interfaces.


Interestingly enough, the old problems of hover/mouse based interactions 
that we've been preaching against for ages with regards to (keyboard) 
accessibility have now reappeared in terms of touchscreen interfaces, 
where hovering doesn't work (reliably - some devices have weird 
heuristics where a click can be interpreted as a hover in certain 
conditions).


P
--
Patrick H. Lauke
__
re∑dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Joseph Taylor]

Good questions. I have yet to see definitive answers for most of these 
questions.


I've been thinking on this constantly as I try to alter my work flow to 
a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or downwards 
from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive fashion.

The touch devices add a new dimension to the workflow. They may change 
the way you approach some items on a page (like a multi select widget) 
and you now have to pay more attention to the :active attribute in your 
CSS as that'll react to a touch vs. :hover - no biggie, right?


For the most part, the touch devices all use modern browsers which is 
pretty cool. I made an iphone version of my site using media queries, 
which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:
Yes, and while we're on the topic of things that won't work on phones 
and iPadsis there anything else we need to know about that also 
won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for 
the iPad and for phones, and have desktop and notebook users simply 
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

*From:* tee 
*Sent:* Wednesday, October 20, 2010 1:57 AM
*To:* wsg@webstandardsgroup.org 
*Subject:* Re: [WSG] CSS "rollovers" for images?

Caution with the use of hover for such purpose if you also want 
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I can do.
http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add javascript 
to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main 
image, then have your Javscript/CSS hijack the link and show the 
image. Everyone wins.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small 
thumbnails of samples, and hovering the mouse over them would 
invoke a hover state in which a larger version of that same image 
would appear..."Larger" meaning 400x600 pixels, or in that 
neighborhood.


Is this not wise from a coding perspective? How about usability? Do 
web page visitors not expect this kind of behavior..would it be 
confusing to them as to what they're supposed to do, or what to 
expect?


I'm wanting to use CSS to do what javascript rollovers do, only 
without the javascript.



thanks for any feedback or opinions.

cs




This email has been scanned by Netintelligence
http://www.netintelligence.com/email


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org 


***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org 


***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*** 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**

Re: [WSG] CSS "rollovers" for images?

[cat soul]

Yes, and while we're on the topic of things that won't work on phones  
and iPadsis there anything else we need to know about that also  
won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for  
the iPad and for phones, and have desktop and notebook users simply  
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

From: tee
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS "rollovers" for images?

Caution with the use of hover for such purpose if you also want  
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I  
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add  
javascript to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main  
image, then have your Javscript/CSS hijack the link and show the  
image. Everyone wins.

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
"Clean, Simple and Elegant Web Design"
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:


Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small  
thumbnails of samples, and hovering the mouse over them would  
invoke a hover state in which a larger version of that same image  
would appear..."Larger" meaning 400x600 pixels, or in that  
neighborhood.


Is this not wise from a coding perspective? How about usability?  
Do web page visitors not expect this kind of behavior..would it  
be confusing to them as to what they're supposed to do, or what  
to expect?


I'm wanting to use CSS to do what javascript rollovers do, only  
without the javascript.



thanks for any feedback or opinions.

cs



This email has been scanned by Netintelligence
http://www.netintelligence.com/email

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Lesley Lutomski]

Good idea, but please remember that for someone with problems of 
co-ordination or fine muscle control, hovering can be extremely 
difficult.  I've encountered javascript image galleries which work like 
this, and on a bad day I find them completely unusable.


Lesley

On 19/10/10 21:13, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small thumbnails of
samples, and hovering the mouse over them would invoke a hover state in
which a larger version of that same image would appear..."Larger"
meaning 400x600 pixels, or in that neighborhood.

Is this not wise from a coding perspective? How about usability? Do web
page visitors not expect this kind of behavior..would it be confusing to
them as to what they're supposed to do, or what to expect?

I'm wanting to use CSS to do what javascript rollovers do, only without
the javascript.


thanks for any feedback or opinions.

cs


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS "rollovers" for images?

[Kevin Ireson]

An excellent and very up to date point about accessibility. 


From: tee 
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org 
Subject: Re: [WSG] CSS "rollovers" for images?


Caution with the use of hover for such purpose if you also want touchscreen 
device user able to use it.  




In regards of touchscreen, this article explains it better than I can do.
http://trentwalton.com/2010/07/05/non-hover/



tee 


On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:


  You could certainly do that with CSS. You'll want to add javascript to 
control how the image shows and fades, positioning etc.

  For maximum accessibility, have the thumbnail link to the main image, then 
have your Javscript/CSS hijack the link and show the image. Everyone wins.

  Joseph R. B. Taylor
  Web Designer / Developer
  --
  Sites by Joe, LLC
  "Clean, Simple and Elegant Web Design"
  Phone: (609) 335-3076
  Web: http://sitesbyjoe.com
  Email: j...@sitesbyjoe.com


  On 10/19/10 4:13 PM, cat soul wrote: 
Any thoughts on using CSS hover properties to show larger images? 

The scenario I'm envisioning is one where you'd have small thumbnails of 
samples, and hovering the mouse over them would invoke a hover state in which a 
larger version of that same image would appear..."Larger" meaning 400x600 
pixels, or in that neighborhood. 

Is this not wise from a coding perspective? How about usability? Do web 
page visitors not expect this kind of behavior..would it be confusing to them 
as to what they're supposed to do, or what to expect? 

I'm wanting to use CSS to do what javascript rollovers do, only without the 
javascript. 


thanks for any feedback or opinions. 

cs 






This email has been scanned by Netintelligence
http://www.netintelligence.com/email



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***