Journal
Tattered Fly Re-launch
25 June 2006 › 13 comments
Update: Tattered Fly now uses ThickBox instead of the deprecated Lightbox.
It is with great pleasure, and a sigh of relief, that I present the newly re-designed version of TatteredFly.com. It is a blog entirely devoted to the topic of fly fishing (seriously) that was recently inducted into the 9rules Network, and is written by my boss Dan Bachman. Despite what you might think, this site was not developed under any sort of coercion (no, really).
While I wish I could take credit for the design, that priviledge goes to my coworker Hugh Griffith, who is the Sr. Interface Designer at Albertsons. I did all the XHTML and CSS along with most of the Textpattern implimentation, which is why I’ve basically been a ghost online for the past week or so. The previous version had also been designed by Hugh, with the XHTML / CSS and TXP work done by Cody Lindley who has since moved on to run Micron.com. Between his new job and newborn baby, he’s short on free time, so I was happy to step in and pinch-hit for the new version of this site.
As far as bells and whistles, there are a few things I want to point out: First, the PNG transparencies throughout the site work in all major browsers. This was an especially big pain to get working in both Internet Explorer 6 and 7. By using the proprietary Microsoft DirectX filter, I got it working in IE6, only to have it break in IE7 since it handles PNG’s just like any other decent browser. Essentially, there would be two backgrounds because IE7 still recognizes the filter. So, what I ended up doing was let IE7 also use the filter, and got rid of backgrounds for each div containing a PNG via [if IE] conditionals.
Instead of have multiple sets of conditionals, I simply have one ie_fixes.css file for both browsers, and just use the * html hack to give styles specifically to IE6. So, this is a controlled hacking environment, so to speak. I know that some of you may be wondering why I didn’t address the PNG issue with JavaScript. To me, this doesn’t seem like a more “pure” way of doing it, and here’s why: HTML is for content, CSS for presentation, and JavaScript for behavior. So, whether you use proprietary filters or JavaScript, either way you’re mis-using a non-presentational layer to fix what should be CSS.
That brings me to my next feature: Lightbox 2.0. You could say I took the “easy” way out in addressing the PNG issue, but I also didn’t want to add any more JavaScript to the mix, since Lightbox already takes 4 files. Obviously, I am aware of Cody’s Thickbox solution, since I did the loading animation for it. Reluctantly, I implimented Lightbox because of the ability to group photos by sets, and navigate between them with the keyboard. This was a key feature that Dan wanted for his visitors (maybe in Thickbox 2.0? – pester Cody).
Since I am picky, I tweaked Lightbox ever so slightly. I added a solid black 1px outline to each image, and also to the Previous / Next tabs. This keeps the white from getting lost when coupled with brighter photos. I also added a grey text background with keyboard instructions: P = Previous | N = Next.
Let me see, what else. Oh yeah – No doubt you will wonder why the navigation bar is two-tiered, when there is really not much to the site. Well, if you peek under the hood, you will see quite a bit commented out in the source code. While the new look and feel is ready, Dan still has a lot planned for other site sections. There will eventually be an interactive map showing off various rivers around Idaho. That part is still being conceptualized by Hugh.
There will also be a community forum so that fishermen can lie to share stories with one another. I had planned on using the Vanilla forum by Lussumo, but when I went to download it I saw that they have taken the site down while they work on their official 1.0 release. I think it will be worth the wait though. I have always liked the way Alex integrated it into the SkillShare area of CSS Beauty, and have been meaning to try it out for awhile now.
I guess that about wraps it up. Go ahead and check out the site, and leave Dan some feedback, so he doesn’t feel like he’s the only one who cares about fly fishing. Also, bear in mind that he is still converting many old articles over, so if you see anything messed up, tell him about it and don’t bother me!
Discussion + Dissension
Comments closed after 2 weeks.
#1 Elliot Swan
Pretty sweet…Nice work. I like what you did with Lightbox.
For the PNG transparencies, why didn’t you do something like this?
html > body #something {
background: transparent url(theimage.png);
}
* html #something {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’theimage.png’,sizingMethod=’scale’;
}
That way IE6 gets its filter, and everybody else (IE 7 included) can use their normal PNG support? You could even hide the IE6 filter in your ie_fixes.css file.
Or perhaps I missed something?
#2 anon
http://lussumo.com/download.php?Get=Vanilla.1.pre-release-3
#3 Yannick
Awesome job Nathan and Hugh. I definitely digg the tweaks you did with lightbox also. Keep up the good work.
#4 Jeff Croft
Nathan, the site looks great—way to go! I’m curious about your PNG problem, as it actually relates to a chapter I’m writing for an upcoming book!
Did you happen to try using the “less than or equal to” conditional to target only IE 6 and lower? This is what I advocate in my chapter, and I’ll have to change it if it doesn’t really work! :)
#5 Jeff Croft
Nathan, just realized the code in my comment got commented out, you know, since it’s a conditional comment and all. hah. I’ll try again:
[if lte IE 6]
#6 Nathan Smith
Elliot: I had tried putting it in the CSS file initially, but was having issues with IE6 not recognizing the filter unless placed in the HTML. As far as I can tell, that was the only way to get it to work correctly. Re-reading the old ALA article, I don’t see any examples given of being in the CSS file, just HTML. The CSS would be fed to good browsers, but the filter doesn’t work that way:
http://www.alistapart.com/articles/pngopacity/
Jeff: Yeah, that would probably work fine too. Since the fix I was implimenting had to be in the HTML, I knew that future versions of IE would support the filter for backwards compatibility. So, IE8 for instance, when there is one, would suffer from the same dual-personality as IE7 is now – handling both the filter and the PNG transparency. This was the best way I could think of to handle all versions of IE in one fell swoop. I agree though, that checking for specific versions makes more sense if it’s only IE6 that’s the problem.
Yannick: Thank you! + Anonymous: Also thanks, for the pre-release link.
#7 matthew
Nathan,
clicking the thumbnails starts the lightbox for me, but then it kicks it out and delivers the direct url of the image and I land on a http://someimage.jpg.
Firefox 1.5.0.4
working in Safari though?
Thought you’d like to know. GREAT GREAT WORK here though, to you and Hugh. Very strong.
#8 Elliot Swan
Well regardless of what their examples show, it does work. :) Use it myself quite often. You can see it in action on my blog, I’ve got this in my main CSS file:
html > body div#header_left h1 {
background: transparent url(http://www.elliotswan.com/wp-content/themes/so2/images/elliotswan.png) top left no-repeat;
}
Then I’ve got an IE-only CSS file (http://www.elliotswan.com/wp-content/themes/so2/ie.css) with this in it:
div#header_left h1 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=’http://www.elliotswan.com/wp-content/themes/so2/images/elliotswan.png’);
}
Works like a charm. :)
#9 Nathan Smith
Elliot: Cool, I’ll have to give that another try. Maybe I was just messing it up before, since I hadn’t removed the backgrounds for IE 6 + 7 yet.
Matthew: That problem was being created by Mint’s download counter pepper / plugin. We had set it to track JPG’s, since Dan has so many photos on the site, but the PHP intercept of that file-type was causing Lightbox not to launch in some instances, since it wasn’t hitting a *.jpg extension. It’s fixed now.
#10 Jon
Awesome work as usual, Nathan. I’m actually out of town at the moment but hope to really get a better look under the hood once I’m back.
I am a huge sucker for customized lightboxes and your implementation came out really sharp. I also dig your choice of typeface, as I’m trying to pay more attention to the various implementation of fonts. Great job.
#11 Nathan Smith
Jon: Thanks, I appreciate it. Though, I should reiterate that all the design decisions were made by Hugh on this one. In fact, we ended up having to go with a different font for the headers, because sIFR and Lightbox don’t play well together. sIFR kept showing through the Lightbox.
#12 brian warren
I didn’t have much luck with the alpha filters working in the css file either. That’s why i gave up on it. Now it works fine, thanks Nathan!
Jeff, I’ve always used [if lt IE 7.], i’ve never considered using [if lte IE 6]. Is there a reason to use one rather than the other?
#13 Ulco
I could care less about fly fishing but the site is gorgeous… I’d never seen those lightboxes before but experimenting with them is now definitely on my to-do list :-)