Comments on: Fading-Out Containers http://fadtastic.net/2005/09/14/fading-out-containers/ thoughts on | comments about | examples of } web design trends. Sat, 06 Sep 2008 06:08:31 +0000 http://wordpress.org/?v=2.1.2 By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-41 Andrew Faulkner Thu, 15 Sep 2005 13:41:13 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-41 Terry, In addition to the fading container trend, I've spotted another up-and-coming trend in the design world. Take <a href="http://www.andyrutledge.com/" target="_blank">Andy Rutledge's site</a> for instance. It has a fade to white effect over all of the content at the bottom. This is increasingly popular amongst trendy designers - especially when using <em>iframes</em> or equivalent<em> div</em> setups it seems. It does throw up accessibility issues though. Terry,

In addition to the fading container trend, I’ve spotted another up-and-coming trend in the design world. Take Andy Rutledge’s site for instance. It has a fade to white effect over all of the content at the bottom. This is increasingly popular amongst trendy designers - especially when using iframes or equivalent div setups it seems.

It does throw up accessibility issues though.

]]> By: Terry http://fadtastic.net/2005/09/14/fading-out-containers/#comment-42 Terry Thu, 15 Sep 2005 14:50:06 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-42 I can certainly see that technique becoming a trend. It does add a nice touch, if used wisely, as <a href="http://www.andyrutledge.com" rel="nofollow">Andy</a> does. In terms of accessibility, I can't see any issues with what Andy has done. I don't think an extra div ever harmed anyone. Could you explain more? I can certainly see that technique becoming a trend. It does add a nice touch, if used wisely, as Andy does.

In terms of accessibility, I can’t see any issues with what Andy has done. I don’t think an extra div ever harmed anyone. Could you explain more?

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-43 Andrew Faulkner Thu, 15 Sep 2005 15:28:03 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-43 Adding a <em>div</em> probably wouldn't do any harm except where screen readers are concerned. I'm thinking of the sites that use this approach (and I'm looking for a good example) in an <em>iframe</em> or small content box - not in the main container. I think then it can make it extremely hard to read the text. Covering content is dangerous and can lead to a lack of contrast using this technique. Adding a div probably wouldn’t do any harm except where screen readers are concerned. I’m thinking of the sites that use this approach (and I’m looking for a good example) in an iframe or small content box - not in the main container. I think then it can make it extremely hard to read the text. Covering content is dangerous and can lead to a lack of contrast using this technique.

]]> By: Terry http://fadtastic.net/2005/09/14/fading-out-containers/#comment-44 Terry Thu, 15 Sep 2005 15:34:04 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-44 Dangerous might be a bit too harsh a term, but I see your point. Though I'd be interested to get confirmation on this from someone actually using a screen reade since, to be honest, I've never used one. Dangerous might be a bit too harsh a term, but I see your point. Though I’d be interested to get confirmation on this from someone actually using a screen reade since, to be honest, I’ve never used one.

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-45 Andrew Faulkner Thu, 15 Sep 2005 15:37:54 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-45 <a href="http://www.collylogic.com/scripts/scroll_fade.html" target="_blank">Here's an example</a> of usage in a small space. See how about 10% of the text isn't readable. And if you hide the borders (I've seen an example of this but can't find them) then it can really be an accessibility problem. Here’s an example of usage in a small space. See how about 10% of the text isn’t readable. And if you hide the borders (I’ve seen an example of this but can’t find them) then it can really be an accessibility problem.

]]> By: Terry http://fadtastic.net/2005/09/14/fading-out-containers/#comment-46 Terry Thu, 15 Sep 2005 15:44:27 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-46 Isn't the whole point hiding 10% of the text? Isn’t the whole point hiding 10% of the text?

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-47 Andrew Faulkner Thu, 15 Sep 2005 15:59:10 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-47 I know it's the point. It just seems like if you have content there then it should be easily readable. I know it’s the point. It just seems like if you have content there then it should be easily readable.

]]> By: Terry http://fadtastic.net/2005/09/14/fading-out-containers/#comment-49 Terry Thu, 15 Sep 2005 16:04:16 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-49 That's your opinion, and not a true accessibility issue then. All design is subjective, especially design aesthetics, so making the claim that this presents an accessibility issue does not seem fair to me. That’s your opinion, and not a true accessibility issue then. All design is subjective, especially design aesthetics, so making the claim that this presents an accessibility issue does not seem fair to me.

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-50 Andrew Faulkner Thu, 15 Sep 2005 16:07:44 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-50 It is my opinion, yes. I always choose accessibility over aesthetics when designing. This design trend looks excellent but I don't think it's suitable for some sites. It is my opinion, yes. I always choose accessibility over aesthetics when designing. This design trend looks excellent but I don’t think it’s suitable for some sites.

]]> By: Gavin http://fadtastic.net/2005/09/14/fading-out-containers/#comment-51 Gavin Thu, 15 Sep 2005 19:25:02 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-51 Can you set a different stylesheet for screen readers? I haven't read much up on making sites accessible for them, which is something I want to do. Am I right in presuming that it's the same style as the site, but in smaller space? Can you set a different stylesheet for screen readers? I haven’t read much up on making sites accessible for them, which is something I want to do. Am I right in presuming that it’s the same style as the site, but in smaller space?

]]> By: Terry http://fadtastic.net/2005/09/14/fading-out-containers/#comment-52 Terry Fri, 16 Sep 2005 02:24:27 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-52 Good question Gavin. From the looks of <a href="http://www.w3.org/TR/2004/WD-css3-reader-20040224/#reader" rel="nofollow">the w3c spec</a> you can, though I haven't seen it done very often. Good question Gavin. From the looks of the w3c spec you can, though I haven’t seen it done very often.

]]> By: Jase (lucidcreation) http://fadtastic.net/2005/09/14/fading-out-containers/#comment-53 Jase (lucidcreation) Fri, 16 Sep 2005 09:48:30 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-53 As far as I know it's almost exactly the same as using a print media style sheet. So should be very easy to implement and would give an answer to the issue raised about accessibility. I personally like the trend. As far as I know it’s almost exactly the same as using a print media style sheet. So should be very easy to implement and would give an answer to the issue raised about accessibility.

I personally like the trend.

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-54 Andrew Faulkner Fri, 16 Sep 2005 10:06:59 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-54 In theory, one shouldn't have to make a different stylesheet (or different pages) for access reasons. The site should be readable to all. My site is accessible using a screenreader but I don't offer an alternative like large text or different stylesheets. People with access issues often have their own over-riding stylesheet. Anyway - this is a little off-topic now. You can mail me for a discussion on accessibility. Back to the point: It's a nice trend with aesthetic appeal. Wouldn't like to see it everywhere though. In theory, one shouldn’t have to make a different stylesheet (or different pages) for access reasons. The site should be readable to all. My site is accessible using a screenreader but I don’t offer an alternative like large text or different stylesheets. People with access issues often have their own over-riding stylesheet.

Anyway - this is a little off-topic now. You can mail me for a discussion on accessibility. Back to the point:

It’s a nice trend with aesthetic appeal. Wouldn’t like to see it everywhere though.

]]> By: Gavin http://fadtastic.net/2005/09/14/fading-out-containers/#comment-63 Gavin Wed, 21 Sep 2005 21:30:24 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-63 Hey I found another good <a href="http://www.amkdesign.co.uk/project/fade_out/" rel="nofollow">example</a> of this, and he's been <a href="http://www.amkdesign.co.uk/project/view.php?ref=15" rel="nofollow">experimenting</a> with it a little. Hey I found another good example of this, and he’s been experimenting with it a little.

]]> By: Daniel http://fadtastic.net/2005/09/14/fading-out-containers/#comment-68 Daniel Tue, 27 Sep 2005 23:58:54 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-68 Sorry for the newbie question ... but could you "teach" me how to achieve such effect?? or direct me to a good tutorial? Thanks! Sorry for the newbie question … but could you “teach” me how to achieve such effect?? or direct me to a good tutorial?

Thanks!

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-70 Andrew Faulkner Wed, 28 Sep 2005 12:16:45 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-70 Daniel, We don't really do tutorials here. Sorry. Most of the time it's done with a simple gradient (5-10px wide) that's repeated over the central container. The gradient goes from a chosen colour and fades into the background colour. I don't know of a tutorial but I'm sure others here could help out if I didn't explain it in much detail. Daniel,

We don’t really do tutorials here. Sorry.

Most of the time it’s done with a simple gradient (5-10px wide) that’s repeated over the central container. The gradient goes from a chosen colour and fades into the background colour. I don’t know of a tutorial but I’m sure others here could help out if I didn’t explain it in much detail.

]]> By: Daniel http://fadtastic.net/2005/09/14/fading-out-containers/#comment-72 Daniel Wed, 28 Sep 2005 14:41:00 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-72 Andrew, Thank you for your time! I know you guys don't do tutorials (pitty!)! I didn't what to push the envelope! Even though ... thank so much for your explanation! Andrew,

Thank you for your time! I know you guys don’t do tutorials (pitty!)! I didn’t what to push the envelope!
Even though … thank so much for your explanation!

]]> By: Andrew Faulkner http://fadtastic.net/2005/09/14/fading-out-containers/#comment-116 Andrew Faulkner Mon, 10 Oct 2005 09:01:01 +0000 http://fadtastic.net/2005/09/14/fading-out-containers/#comment-116 http://www.seventytwo.co.uk/ Faded-out technique at bottom of the page. http://www.seventytwo.co.uk/

Faded-out technique at bottom of the page.

]]>