We have the markup in place for the Treehouse ad on the top of the page, but we have some styling work to do. We start with the tree graphic itself.
We’re thinking that using vector and outputting as SVG might be cool because it will look sharp and be of small file size. Watch me flail around in Illustrator trying to get a nice clean version of it in all vector and ultimately fail. For now we decide to forget it and just make it an image.
Turns out, Treehouse doesn’t use that branding anymore anyway, so I’ll need to update it anyway soon, and I’ll definitely be taking the time to make it SVG, even if I have to re-draw it.
For now, we make PNG and drop it into the design with a CSS background. We size it way down with background-size (although I confused myself yet again by using percentages — remember when you use a percentage it is a percentage of the partent element not a percentage of the size of the image itself).
We get the coloring and sizing and positioning all set. Now the last step is making it work in the responsive design.
Is this video not saved/recorded in HD or is the vimeo embed has it turned off?
(Great stuff so far btw)
That was weird. I re-uploaded it and it’s way better now. Thanks for reporting! I’m gonna bury this comment just because it was a temporary thing.
I’m still having a problem with the download file. Its really low quality compared to the other stuff so far.
Yeah the file size for that is weirdly small. I’ll upload a better copy.
Maybe you talk about this at a later time, but why background-size?
I guess you haven’t talked about what browsers you’re targeting, but IE8 doesn’t support background-size, and so this ad won’t degrade very gracefully.
Is there a particular reason you didn’t use an
imgtag with explicit height and width set to half the actual size of the image? (Is that suitable to get Retina displays? That would you wouldn’t have to mess with the image size changing as you change the width of the container, too.As far as I know, they are both pretty much the same speed-wise, right? Both require an additional http request, and because your have width and height set on your image, it shouldn’t cause repaints from reflow when the image loads.
Fair points all around but…
1) Not supporting IE 8. I can get away with that on a site like this.
2) I think of
<img>as content-in-the-form-of-images where this is just a background design feature thing, perfectly suited for CSS background imagery.Yay, screw IE8! I love it.
For an image like that clearly with less than 256 colors, you should probably save it as an indexed png-8 (gif replacement). You can also have up to 256 levels of alpha transparency (as opposed to gifs which are indexed transparency).
The only think you have to be careful of is that older versions of photoshop (v5 still didn’t do it!!!) don’t save the alpha transparency them properly (as far as I remember).
Fireworks does it properly, though… because Fireworks is awesome like that.
Chris, your screen casts are amazing. I know this is coming a few years late but I thought you should be reminded if you ever do take a look at these comments. “Thats Kevin im’ing me, hes a very nice man.” hahaha. Anyways, I have learned so much just up until this point, and i look forward to what comes in the future!