Re: [WSG] Photo gallery markup & semantics
You are right about the links, they shouldn't be side by side, the div solution is clearly not best. Rob mentioned that if the page is viewed with CSS off, the images would stack up and create a rather long page. That's definitely something to consider, but most likely something worth compromising to achieve semantic enlightenment. Now the choice of UL or OL... a little user testing will go a long way indeed. Jason Robb www.eleventy72.com Thierry Koblentz wrote: On Behalf Of Jason Robb Unless my client needs to show a number with each image, an ordered list would be my second choice. I still think a DIV will be the right markup for the task. Thanks for the input everyone, I really appreciate it. What's wrong with the UL? And what about adjacent links: http://www.w3.org/WAI/wcag-curric/sam82-0.htm --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
[EMAIL PROTECTED] wrote: I think the primary issue you have here is the assertion that Images, however artistic they may be, qualify as 'data'. I cannot see that connection, and therefore cannot agree with the use of a table. Further, the 'relationship' between two images may change if they are moved, but the 'meaning' of those images does not change, ever. Mike Hi Mike, We're getting way OT here (interesting though it is!) but the 'meaning' of an image is dependent entirely upon the context in which it is seen/displayed. Consider an image showing a pretty landscape with no title. Then duplicate it, and title it 'Picture of radiation falling over the landscape'. Then title it 'Area where the body of John Doe was found' etc etc. See what I mean? -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
I think the primary issue you have here is the assertion that Images, however artistic they may be, qualify as 'data'. I cannot see that connection, and therefore cannot agree with the use of a table. Further, the 'relationship' between two images may change if they are moved, but the 'meaning' of those images does not change, ever. Mike *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Patrick H. Lauke wrote: Quoting Designer <[EMAIL PROTECTED]>: A significant number of photographers regard a 'collection of photographs' as being 'the work', and the way that work is shown (the relationship between one image and it's adjacent images, and indeed, to the whole) is of paramount importance. What I'm saying is best illustrated by considering the case where the photographer is having a show at a gallery : he doesn't just throw the images at the wall (so to speak) - he spends ages deciding which image goes where, etc etc. My point is that, in this case, Patrick's excellent rule of thumb that " moving cells around changes the meaning of the data" applies to this case also, and the work can be considered as tabular data. As I said, it is subtle. I think, though, that this is stretching the idea of "tabular". As I said, the source order itself can be used to determine sequence. And, if it's spatial relationship (what's above, what's below, etc...rather than just what came before/after), then HTML is probably not a suitable language to define that relationship in a satisfactory and semantically unambiguous manner - perhaps other technologies like SVG (provided they can encode the relationship in a non-visual manner as well) may be more suited, not sure. In any case, I'd say that this is stretching both the idea of what is "tabular" and of what can be unequivocally represented by HTML alone. It's also a slippery slope because, following the same rationale as a photographer, a designer doesn't just "throw text and images on the webpage", but carefully chooses their placement/layout...so a designer may also claim that, because they spatial relationship conveys meaning, a table would be appropriate for their layout. Very muddy territory, P --Patrick H. Lauke Muddy indeed! However, A web page is not a presentation of data in the same way. Using the same analogy as before, the gallery is equivalent to the web page, and the images are a small section of what appears in (on) it. So, using tables for layout would be semantically equivalent to changing the decor of the gallery, not the works that are being shown in it. The works remain 'tabular', unless, of course, the exhibitor doesn't care about where the pictures go, relative to each other. This is fun! :-) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Quoting Designer <[EMAIL PROTECTED]>: A significant number of photographers regard a 'collection of photographs' as being 'the work', and the way that work is shown (the relationship between one image and it's adjacent images, and indeed, to the whole) is of paramount importance. What I'm saying is best illustrated by considering the case where the photographer is having a show at a gallery : he doesn't just throw the images at the wall (so to speak) - he spends ages deciding which image goes where, etc etc. My point is that, in this case, Patrick's excellent rule of thumb that " moving cells around changes the meaning of the data" applies to this case also, and the work can be considered as tabular data. As I said, it is subtle. I think, though, that this is stretching the idea of "tabular". As I said, the source order itself can be used to determine sequence. And, if it's spatial relationship (what's above, what's below, etc...rather than just what came before/after), then HTML is probably not a suitable language to define that relationship in a satisfactory and semantically unambiguous manner - perhaps other technologies like SVG (provided they can encode the relationship in a non-visual manner as well) may be more suited, not sure. In any case, I'd say that this is stretching both the idea of what is "tabular" and of what can be unequivocally represented by HTML alone. It's also a slippery slope because, following the same rationale as a photographer, a designer doesn't just "throw text and images on the webpage", but carefully chooses their placement/layout...so a designer may also claim that, because they spatial relationship conveys meaning, a table would be appropriate for their layout. Very muddy territory, 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 __ Co-lead, Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ Take it to the streets ... join the WaSP Street Team http://streetteam.webstandards.org/ __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
John Faulds wrote: > As I said, I couldn't say for certain what the relationship might be, but my guess with the example given, as it's a photo gallery site, would be that the photographer/artist feels like the photos should be in a certain sequence, perhaps to facilitate the telling of a story through images. That's only a theory without any back-up info from the original poster, but I think illustrates that there could be occasions when adding an order to images might be important. --Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 Absolutely John! A significant number of photographers regard a 'collection of photographs' as being 'the work', and the way that work is shown (the relationship between one image and it's adjacent images, and indeed, to the whole) is of paramount importance. What I'm saying is best illustrated by considering the case where the photographer is having a show at a gallery : he doesn't just throw the images at the wall (so to speak) - he spends ages deciding which image goes where, etc etc. My point is that, in this case, Patrick's excellent rule of thumb that " moving cells around changes the meaning of the data" applies to this case also, and the work can be considered as tabular data. As I said, it is subtle. Interestingly (well, I think it is) there must be other subtle examples where the relationship between items can be considered 'tabular', even when there are no obvious connections. -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Quoting John Faulds <[EMAIL PROTECTED]>: I was talking about an ordered list over an unordered list. I never said anything about using tables. Ah, yes, I missed how the argument moved on to ordered vs unordered lists. I was under the impression that this branch of the discussion (the order thing) was sparked by the example of using a table for photographs which have some form of spatial relationship to each other (can't find the original message that started this angle of discussion...it was the one with nature photos that, supposedly, had a logic in their visual arrangement that implied order/grouping and therefore, the author argued, were "tabular data" and a case of a valid use of tables for photo galleries). Then again, I may be getting my conversations confused here... :) 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 __ Co-lead, Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ Take it to the streets ... join the WaSP Street Team http://streetteam.webstandards.org/ __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
I was talking about an ordered list over an unordered list. I never said anything about using tables. On Wed, 23 May 2007 17:00:31 +1000, Patrick H. Lauke <[EMAIL PROTECTED]> wrote: John Faulds wrote: As I said, I couldn't say for certain what the relationship might be, but my guess with the example given, as it's a photo gallery site, would be that the photographer/artist feels like the photos should be in a certain sequence, perhaps to facilitate the telling of a story through images. That's only a theory without any back-up info from the original poster, but I think illustrates that there could be occasions when adding an order to images might be important. Again, I'd say that source order is enough of "an order", without the need to drag out a table to hold the whole layout of the thumbnail gallery together. P -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Nick Fitzsimons wrote: I'm assuming here that a screen reader imparts the additional information implied by the distinction between ol and ul, such as specifying "Three" rather than "Bullet". I haven't checked, but I believe that is the case from previous tests. Ah, gotcha...from your original message, it wasn't clear that you meant "so it should be OL rather than UL". From that perspective, I was thinking in terms of the situation where a blind user, having heard the description of something they like, might find it easier to phone the company to place an order. If the screen reader said something like "List item: Three: blue sweater" instead of "List item: Bullet: blue sweater", then rather than the user having to count and remember that the blue one was the third item description they heard on that page, they would be able to tell the person taking the order that the thing they want is "the third one on the sweaters page". Sometimes people's interaction with web sites can lead to interaction with the rest of reality :-) Would they not be more likely to say that the thing that they want is "the blue sweater" (plus, if necessary, some other distinguishing information they read in the description, such as price), rather than resorting to counting? 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 __ Co-lead, Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ Take it to the streets ... join the WaSP Street Team http://streetteam.webstandards.org/ __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
John Faulds wrote: As I said, I couldn't say for certain what the relationship might be, but my guess with the example given, as it's a photo gallery site, would be that the photographer/artist feels like the photos should be in a certain sequence, perhaps to facilitate the telling of a story through images. That's only a theory without any back-up info from the original poster, but I think illustrates that there could be occasions when adding an order to images might be important. Again, I'd say that source order is enough of "an order", without the need to drag out a table to hold the whole layout of the thumbnail gallery together. 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 __ Co-lead, Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ Take it to the streets ... join the WaSP Street Team http://streetteam.webstandards.org/ __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
It amazes me that they would rather spend money on solicitors than web design. I am tracking this sites as well, only 500 html validation errors today. The web design team are Bullseye Design which is a trademarked Target Brand. Maybe they have in-house solicitors sitting around with nothing to do? http://www.hereticpress.com/Dogstar/Publishing/USAweb.html#targetstore It is a fantastic site to ridicule, I want to see the solicitors defend it. Target stated that: "We believe our Web site complies with all applicable laws and are committed to vigorously defending this case. We will continue to implement technology that increases the usability of our Web site for all our guests, including those with disabilities" Tim On 23/05/2007, at 2:16 PM, Steve Green wrote: "when the oh-so-clever designer has abused CSS to make the seventh item appear in third place" We had a classic case of this yesterday while doing one of our JAWS demos for a group of developers (www.accessibility.co.uk/free_jaws_demo.htm in case anyone is interested in coming to the next one). The website was www.target.com and among the many horrors were a group of image maps containing maybe a hundred links or more. None of us was able to work out which link had focus at any time because it jumped around all over the page, and often the 'alt' attributes were not the same as the corresponding graphical representation of text. It's a fantastic site for the demo because it includes every example of "don't ever do it this way". My guess is they PhotoShopped the design then turned the whole thing into an image map with a random tab sequence and no 'alt' attributes for half the links. And they wonder why they're getting sued! Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Fitzsimons Sent: 23 May 2007 03:04 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Photo gallery markup & semantics On 23 May 2007, at 02:15:30, Patrick H. Lauke wrote: Nick Fitzsimons wrote: Although it might be important from an accessibility perspective that an unsighted user be able to say "the third one on that page" without having to count the preceding list items - hmm, now that's something to think about.. Not quite sure how they'd say "the third one" without actually having counted, though...am I missing something? Or do you mean in situations where a sighted user and a blind user discuss the page? If that's the concern, then *any* CSS that visually changes position of things on screen would be a problem (just thinking about sighted users saying "the X that comes before Y" not realising that X was absolutely positioned above Y, for instance)...which I'd say is an edge case anyway. I'm assuming here that a screen reader imparts the additional information implied by the distinction between ol and ul, such as specifying "Three" rather than "Bullet". I haven't checked, but I believe that is the case from previous tests. From that perspective, I was thinking in terms of the situation where a blind user, having heard the description of something they like, might find it easier to phone the company to place an order. If the screen reader said something like "List item: Three: blue sweater" instead of "List item: Bullet: blue sweater", then rather than the user having to count and remember that the blue one was the third item description they heard on that page, they would be able to tell the person taking the order that the thing they want is "the third one on the sweaters page". Sometimes people's interaction with web sites can lead to interaction with the rest of reality :-) It seems to me possible that the use of an ordered, as opposed to an unordered, list might offer an additional affordance to a blind user. Of course, that's just speculation on my part - but it could be something worth checking out in user testing. The next problem then arises when the oh-so-clever designer has abused CSS to make the seventh item appear in third place. I seem to recall a blind friend of mine bitching and whining (with excellent reason) about some similar usability nightmare in the past... something to do with being asked if he meant the one on the right or the left of the third row. It was impossible for him to determine what came from which row, or on what side it appeared, because the person on the phone saw the page with some too-clever-by-half CSS applied, and he just had SuperNova. FWIW, that's a good reason not to hide the numbers on an ordered list just to make things look nice. (And if anybody was wondering, blind people do have preferences in the colours they wear.) Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *
RE: [WSG] Photo gallery markup & semantics
> On Behalf Of Jason Robb > Unless my client needs to show a number with each image, an ordered > list > would be my second choice. I still think a DIV will be the right markup > for the task. Thanks for the input everyone, I really appreciate it. What's wrong with the UL? And what about adjacent links: http://www.w3.org/WAI/wcag-curric/sam82-0.htm --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
I think I agree, as a result of certain ponderings on the context of this particular gallery being that of a fashion collection, and therefore having a pretty close relationship to the idea of presenting goods for sale. I've written about it more in my reply to Patrick Lauke, and I'm beginning to think that the accessibility aspect could be quite important here. Then again, I'm up very late :-) I would be completely for the ordered list, as it is quite nice to have a numerical reference, however, the site is more of a showcase for wholesale, than a display for retail purchases. The order/sequence of images within the group might be important to the (fashion) designer, but not so much to the buyers. The image title attribute will hold the style and color information for each piece, eliminating any need to group images within each collection. Unless my client needs to show a number with each image, an ordered list would be my second choice. I still think a DIV will be the right markup for the task. Thanks for the input everyone, I really appreciate it. Jason Robb www.eleventy72.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
"when the oh-so-clever designer has abused CSS to make the seventh item appear in third place" We had a classic case of this yesterday while doing one of our JAWS demos for a group of developers (www.accessibility.co.uk/free_jaws_demo.htm in case anyone is interested in coming to the next one). The website was www.target.com and among the many horrors were a group of image maps containing maybe a hundred links or more. None of us was able to work out which link had focus at any time because it jumped around all over the page, and often the 'alt' attributes were not the same as the corresponding graphical representation of text. It's a fantastic site for the demo because it includes every example of "don't ever do it this way". My guess is they PhotoShopped the design then turned the whole thing into an image map with a random tab sequence and no 'alt' attributes for half the links. And they wonder why they're getting sued! Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Fitzsimons Sent: 23 May 2007 03:04 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Photo gallery markup & semantics On 23 May 2007, at 02:15:30, Patrick H. Lauke wrote: > Nick Fitzsimons wrote: >> Although it might be important from an accessibility perspective that >> an unsighted user be able to say "the third one on that page" >> without having to count the preceding list items - hmm, now that's >> something to think about.. > > Not quite sure how they'd say "the third one" without actually having > counted, though...am I missing something? Or do you mean in situations > where a sighted user and a blind user discuss the page? > If that's the concern, then *any* CSS that visually changes position > of things on screen would be a problem (just thinking about sighted > users saying "the X that comes before Y" not realising that X was > absolutely positioned above Y, for instance)...which I'd say is an > edge case anyway. I'm assuming here that a screen reader imparts the additional information implied by the distinction between ol and ul, such as specifying "Three" rather than "Bullet". I haven't checked, but I believe that is the case from previous tests. From that perspective, I was thinking in terms of the situation where a blind user, having heard the description of something they like, might find it easier to phone the company to place an order. If the screen reader said something like "List item: Three: blue sweater" instead of "List item: Bullet: blue sweater", then rather than the user having to count and remember that the blue one was the third item description they heard on that page, they would be able to tell the person taking the order that the thing they want is "the third one on the sweaters page". Sometimes people's interaction with web sites can lead to interaction with the rest of reality :-) It seems to me possible that the use of an ordered, as opposed to an unordered, list might offer an additional affordance to a blind user. Of course, that's just speculation on my part - but it could be something worth checking out in user testing. The next problem then arises when the oh-so-clever designer has abused CSS to make the seventh item appear in third place. I seem to recall a blind friend of mine bitching and whining (with excellent reason) about some similar usability nightmare in the past... something to do with being asked if he meant the one on the right or the left of the third row. It was impossible for him to determine what came from which row, or on what side it appeared, because the person on the phone saw the page with some too-clever-by-half CSS applied, and he just had SuperNova. FWIW, that's a good reason not to hide the numbers on an ordered list just to make things look nice. (And if anybody was wondering, blind people do have preferences in the colours they wear.) Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
On 23 May 2007, at 02:19:42, John Faulds wrote: Does it even have that relationship? Does it matter to anybody other than some twonk from merchandising whether the blue sweater comes before the red dress? If a list is to be used (and I don't disagree with the use of a list in this case) then it seems to me that an unordered list should be sufficient - unless the aforementioned twonk insists that it's *really* important that yellow clothes come before green ones. As I said, I couldn't say for certain what the relationship might be, but my guess with the example given, as it's a photo gallery site, would be that the photographer/artist feels like the photos should be in a certain sequence, perhaps to facilitate the telling of a story through images. That's only a theory without any back-up info from the original poster, but I think illustrates that there could be occasions when adding an order to images might be important. I think I agree, as a result of certain ponderings on the context of this particular gallery being that of a fashion collection, and therefore having a pretty close relationship to the idea of presenting goods for sale. I've written about it more in my reply to Patrick Lauke, and I'm beginning to think that the accessibility aspect could be quite important here. Then again, I'm up very late :-) Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
On 23 May 2007, at 02:15:30, Patrick H. Lauke wrote: Nick Fitzsimons wrote: Although it might be important from an accessibility perspective that an unsighted user be able to say "the third one on that page" without having to count the preceding list items - hmm, now that's something to think about.. Not quite sure how they'd say "the third one" without actually having counted, though...am I missing something? Or do you mean in situations where a sighted user and a blind user discuss the page? If that's the concern, then *any* CSS that visually changes position of things on screen would be a problem (just thinking about sighted users saying "the X that comes before Y" not realising that X was absolutely positioned above Y, for instance)...which I'd say is an edge case anyway. I'm assuming here that a screen reader imparts the additional information implied by the distinction between ol and ul, such as specifying "Three" rather than "Bullet". I haven't checked, but I believe that is the case from previous tests. From that perspective, I was thinking in terms of the situation where a blind user, having heard the description of something they like, might find it easier to phone the company to place an order. If the screen reader said something like "List item: Three: blue sweater" instead of "List item: Bullet: blue sweater", then rather than the user having to count and remember that the blue one was the third item description they heard on that page, they would be able to tell the person taking the order that the thing they want is "the third one on the sweaters page". Sometimes people's interaction with web sites can lead to interaction with the rest of reality :-) It seems to me possible that the use of an ordered, as opposed to an unordered, list might offer an additional affordance to a blind user. Of course, that's just speculation on my part - but it could be something worth checking out in user testing. The next problem then arises when the oh-so-clever designer has abused CSS to make the seventh item appear in third place. I seem to recall a blind friend of mine bitching and whining (with excellent reason) about some similar usability nightmare in the past... something to do with being asked if he meant the one on the right or the left of the third row. It was impossible for him to determine what came from which row, or on what side it appeared, because the person on the phone saw the page with some too-clever-by-half CSS applied, and he just had SuperNova. FWIW, that's a good reason not to hide the numbers on an ordered list just to make things look nice. (And if anybody was wondering, blind people do have preferences in the colours they wear.) Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Does it even have that relationship? Does it matter to anybody other than some twonk from merchandising whether the blue sweater comes before the red dress? If a list is to be used (and I don't disagree with the use of a list in this case) then it seems to me that an unordered list should be sufficient - unless the aforementioned twonk insists that it's *really* important that yellow clothes come before green ones. As I said, I couldn't say for certain what the relationship might be, but my guess with the example given, as it's a photo gallery site, would be that the photographer/artist feels like the photos should be in a certain sequence, perhaps to facilitate the telling of a story through images. That's only a theory without any back-up info from the original poster, but I think illustrates that there could be occasions when adding an order to images might be important. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Nick Fitzsimons wrote:
Does it even have that relationship? Does it matter to anybody other
than some twonk from merchandising whether the blue sweater comes before
the red dress? If a list is to be used (and I don't disagree with the
use of a list in this case) then it seems to me that an unordered list
should be sufficient - unless the aforementioned twonk insists that it's
*really* important that yellow clothes come before green ones.
Which can all be determined by source order, which also intrinsically
carries this relationship ("this came before that in the source code").
Although it might be important from an accessibility perspective that an
unsighted user be able to say "the third one on that page" without
having to count the preceding list items - hmm, now that's something to
think about..
Not quite sure how they'd say "the third one" without actually having
counted, though...am I missing something? Or do you mean in situations
where a sighted user and a blind user discuss the page? If that's the
concern, then *any* CSS that visually changes position of things on
screen would be a problem (just thinking about sighted users saying "the
X that comes before Y" not realising that X was absolutely positioned
above Y, for instance)...which I'd say is an edge case anyway.
Generalising this whole case, I think that the suggestion here is that
tables can be used if the author wants to define a spatial relationship
between the various images (above, below, to the left, to the right).
Here I'd argue that tables are still the wrong technology, and maybe
plain vanilla HTML in general is the wrong choice to convey this, as it
lacks the appropriately rich semantics to convey both content *and*
spatial relationship.
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
__
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
Take it to the streets ... join the WaSP Street Team
http://streetteam.webstandards.org/
__
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Photo gallery markup & semantics
On 22 May 2007, at 22:32:06, John Faulds wrote: I don't really see the relationship between those thumbnails but your correct choice here is an ordered list, not a table. The thumbnail in the bottom right corner doesn't have any direct relationship with the thumbnail in the top right corner (which it would if it were tabular data), it only has a relationship with what comes before and what comes after, i.e. in the 'ordering' of the photos. Does it even have that relationship? Does it matter to anybody other than some twonk from merchandising whether the blue sweater comes before the red dress? If a list is to be used (and I don't disagree with the use of a list in this case) then it seems to me that an unordered list should be sufficient - unless the aforementioned twonk insists that it's *really* important that yellow clothes come before green ones. Although it might be important from an accessibility perspective that an unsighted user be able to say "the third one on that page" without having to count the preceding list items - hmm, now that's something to think about.. Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Sometimes a collection images can indeed be tabular. If the relationship between the images is important (like when you want to group like with like), moving them around does alter the meaning of the images as a collection. Sometimes the relationship is very subtle - I have a number of examples of this : see www.kernowimages.co.uk , for example, and look at the thumbnail pages. The position of each thumbnail is important, and changing it changes the relationship between the images. I don't really see the relationship between those thumbnails but your correct choice here is an ordered list, not a table. The thumbnail in the bottom right corner doesn't have any direct relationship with the thumbnail in the top right corner (which it would if it were tabular data), it only has a relationship with what comes before and what comes after, i.e. in the 'ordering' of the photos. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
> On Behalf Of Patrick Lauke
> Can't guarantee how robust this would be in all situations, but I've
> just been playing with word-spacing to override the space without
> having to change the HTML itself. Seems to work ok in IE 6, IE 7,
> Firefox 2.0, Mozilla 1.7, Opera 9.2 on WinXP. Not sure how Safari would
> handle it...
>
> div { word-spacing: -.3em; }
> ul, li { word-spacing: -.3em; }
>
> I'd probably say that it's still worth fixing this at the HTML level,
> but I thought it would be an interesting little tidbit to share...
Interesting use of "word-spacing" here.
I believe negative margin would work too:
div a, li a {margin-right:-.3em}
---
Regards,
Thierry | www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Photo gallery markup & semantics
Patrick Lauke wrote: Andrew Maben This may be heresy, but I think this might be a perfectly legitimate use of a (properly marked-up) table? Tables are for tabular data (where rows/columns have a very strictly determined relationship, and moving cells around changes the meaning of the data). The data in this case(the images) isn't tabular. Ergo, no, it's not legitimate if you want to go by the standards. P Sometimes a collection images can indeed be tabular. If the relationship between the images is important (like when you want to group like with like), moving them around does alter the meaning of the images as a collection. Sometimes the relationship is very subtle - I have a number of examples of this : see www.kernowimages.co.uk , for example, and look at the thumbnail pages. The position of each thumbnail is important, and changing it changes the relationship between the images. In this case I haven't actually used a table, but I would have no qualms about doing so because I consider the 'data' to be 'tabular'. Tabular data doesn't have to be mathematical, or even involve any words. :-) Just my 2p's worth. -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
> Andrew Maben > This may be heresy, but I think this might > be a perfectly legitimate use of a (properly > marked-up) table? Tables are for tabular data (where rows/columns have a very strictly determined relationship, and moving cells around changes the meaning of the data). The data in this case(the images) isn't tabular. Ergo, no, it's not legitimate if you want to go by the standards. P Patrick H. Lauke Web Editor / University of Salford http://www.salford.ac.uk Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
> Peter Leing
> I think the issue may be with how the browser is handling
> spaces/tabs/carriage returns in the html file. Removing the
> spacing in your page through firebug produced a similar
> affect as the table display.
Can't guarantee how robust this would be in all situations, but I've just been
playing with word-spacing to override the space without having to change the
HTML itself. Seems to work ok in IE 6, IE 7, Firefox 2.0, Mozilla 1.7, Opera
9.2 on WinXP. Not sure how Safari would handle it...
div { word-spacing: -.3em; }
ul, li { word-spacing: -.3em; }
I'd probably say that it's still worth fixing this at the HTML level, but I
thought it would be an interesting little tidbit to share...
P
Patrick H. Lauke
Web Editor / University of Salford
http://www.salford.ac.uk
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Photo gallery markup & semantics
You are all awesome. I'm going with fixed width div row's. The layout is fixed, so the size of the images is no guess work. I need to make it very easy for my client to update on their own. I'm thinking a's and img's in a div, instead of a's and img's inside li's, will be one step simpler for him. Cheers, Jason Robb www.eleventy72.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
On 22 May 2007, at 15:35:34, Jason Robb wrote: The main reason I even considered a table is because the anchors leave an empty space between the images. This may be heresy, but I think this might be a perfectly legitimate use of a (properly marked-up) table? Andrew 109B SE 4th Av Gainesville FL 32601 Cell: 352-870-6661 http://www.andrewmaben.com [EMAIL PROTECTED] "In a well designed user interface, the user should not need instructions." *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
Jason Robb wrote: Hello friends, I'm marking up a group of (maybe 25-50) anchored images. They need to be held tight to a grid, and I want about 6 or 8 to a row. Here is the (lazy) table based solution: http://bws.jasonrobb.com/collections/ I've considered a few different approaches. I want to know: What is the most semantic way to go about this? [Note: trimmed down code] 1) Using DIV's to hold the anchored images: 2) Another method with a UL: 3) My least favorite (and likely wrong) choice - with a table: It's been pickin' my brain for days. The main reason I even considered a table is because the anchors leave an empty space between the images. I've set up a test page here: http://bws.jasonrobb.com/content/image-test.html What do you think is causing that extra space? How can I avoid/remove it? What browser(s) do you get the space in? At a glance it looks fine to me in FF. And I would stick with the div for display, while lists are fun it looks odd with CSS off (my opinion of course, i hate lng pages), my preference is to keep imgs and anchors inline and then use vertical-align: middle; so they stretch across their container and stack fairly well in any situation. If you need captions and the like you'll need to use floats and if you need a solution for any situation e.g. if you don't know the aspect ratio/size of the images etc... etc... unfortunately a table is the only thing that really keeps a tight layout together. I figure a table of images isn't too big a travesty because it will read out sensibly but it's certainly not ideal. I guess what I'm saying is it depends on the particular job you're doing, work out what is constant about the images you display and what might change then use whichever method is most appropriate. Hope thats some use to you. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
2) Another method with a UL: It's been pickin' my brain for days. The main reason I even considered a table is because the anchors leave an empty space between the images. I've set up a test page here: http://bws.jasonrobb.com/content/image-test.html What do you think is causing that extra space? How can I avoid/remove it? - Hi, I'd definitely go with a UL as you do essentially have a list of images here. To get rid of the space between the images doing this just replace the display:inline with float:left and it should all work perfectly. To format the rows nicely, you will probably want to apply a fixed width to the UL tag, which should give you control over how many images appear in each row. Hope that helps James *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
On 5/22/07, Jason Robb <[EMAIL PROTECTED]> wrote: What do you think is causing that extra space? How can I avoid/remove it? The spacing is caused by the white space in the code, line breaks, etc. Remove those and you remove the space - or float your anchors instead of display: inline. I would use a UL - the data isn't tabular. Matthew. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Photo gallery markup & semantics
On 22 May 2007, at 15:35:34, Jason Robb wrote: The main reason I even considered a table is because the anchors leave an empty space between the images. I've set up a test page here: http://bws.jasonrobb.com/content/ image-test.html What do you think is causing that extra space? How can I avoid/ remove it? Both anchors and images are inline elements, so the whitespace in your markup is regarded as a significant space. If you set the anchors to have "display:block" and "float:left" then the gap will disappear. You'll then want a "clear:left" on the containing the second row. Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Photo gallery markup & semantics
I think the issue may be with how the browser is handling spaces/tabs/carriage returns in the html file. Removing the spacing in your page through firebug produced a similar affect as the table display. Peter Leing -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jason Robb Sent: Tuesday, May 22, 2007 10:36 AM To: wsg@webstandardsgroup.org Subject: [WSG] Photo gallery markup & semantics Hello friends, I'm marking up a group of (maybe 25-50) anchored images. They need to be held tight to a grid, and I want about 6 or 8 to a row. Here is the (lazy) table based solution: http://bws.jasonrobb.com/collections/ I've considered a few different approaches. I want to know: What is the most semantic way to go about this? [Note: trimmed down code] 1) Using DIV's to hold the anchored images: 2) Another method with a UL: 3) My least favorite (and likely wrong) choice - with a table: It's been pickin' my brain for days. The main reason I even considered a table is because the anchors leave an empty space between the images. I've set up a test page here: http://bws.jasonrobb.com/content/image-test.html What do you think is causing that extra space? How can I avoid/remove it? Thanks in advance, Jason Robb www.eleventy72.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ** NOTICE: The information contained in this message is intended for the addressess(s) only and may be confidential, proprietary, or legally privileged. If you have received this message in error or there are any problems with the transmission, please immediately notify us by return e-mail. The unauthorized use, disclosure, copying, or alteration of this message is strictly forbidden. The sender will not be liable for any damages arising from alteration of the contents of this message by a third-party or as a result of any virus being transmitted. This notice is automatically appended to each e-mail message transmitted from the sender's e-mail domain. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Photo gallery markup & semantics
Hello friends, I'm marking up a group of (maybe 25-50) anchored images. They need to be held tight to a grid, and I want about 6 or 8 to a row. Here is the (lazy) table based solution: http://bws.jasonrobb.com/collections/ I've considered a few different approaches. I want to know: What is the most semantic way to go about this? [Note: trimmed down code] 1) Using DIV's to hold the anchored images: 2) Another method with a UL: 3) My least favorite (and likely wrong) choice - with a table: It's been pickin' my brain for days. The main reason I even considered a table is because the anchors leave an empty space between the images. I've set up a test page here: http://bws.jasonrobb.com/content/image-test.html What do you think is causing that extra space? How can I avoid/remove it? Thanks in advance, Jason Robb www.eleventy72.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
