From Photoshop To HTML

Hey Bob, Great podcast! I was wondering why the audio seem so out of sync with the video of you? Just curious. Thanks!

Hey Grumpling... Which feed are you seeing this on? I just looked at the iPod version and it seems like it could be slightly off, but nothing major. Not sure why this happened, maybe a small latency in the recording software. Are you seeing a big sync difference? Or do you think it's just this slight difference I saw in the iPod version? I'm down to using one piece of software (screenflow) to produce these, so there's not alot of troubleshooting I can do besides just letting the software do it's thing.... More input would be helpful...anyone else seeing this issue? Does it bug ya?

Hey Bob, Great job. Why do you prefer CSS image offset to something like sIFR which is also accessible? Thanks! -NP

Good question. When deciding between sIFR and Image replacement, I really think there's a few issues that come into play beyond accessibility: 1. First, you have to ask yourself if you're just replacing text or if you're doing 'design'. If font replacement is your only concern, by all means use sIFR. However, I almost never am just doing font replacement. I am almost always 'designing' what I'm replacing, which means more than replacing one font with another. 2. I've had many issues in the past with sIFR and particular fonts. Not all the fonts I'm using are sIFR friendly. I've had many use cases where the fonts I want to use aren't compatible or don't size or display properly with sIFR. 3. I find images much more universal than flash yielding a more consistent design. There are WAY more times when flash won't display than when images don't display. If I want my design to show up properly most often, images are going to succeed more than flash replacement. 4. From my perspective, I don't like running more technologies on a site than I need. I will always be using images and image replacement on my sites...so why add another technology just to replace some things with flash? It adds complexity, manageability, an additional module, and more that I don't really need. 5. Many more reasons I won't venture into.... I think there IS a time to use sIFR. If you want to auto-replace a font sitewide without creating each thing as an image (for example in content that's updated frequently) i think sIFR is just fine....I just haven't done this very often. To me, you always have to ask what the right tool for the job is...and for me, usually, it's CSS image replacement....but that doesn't mean I rule out sIFR (or dislike it always)...I just have to choose when the time is right to use each particular tool. Good question!

You already know I was into this one. Thanks for re-doing the first one. Much more detail in this one. Thanks man. Much appreciated.

Hi Bob, Thanks for the podcast. It's always nice to learn some Photoshop-tricks. I think your way of doing things isn't that strange. It used to be because everyone used tables and then slicing is a natural compliment to that. But in this standards-based webdesign game we're all playing now, I think your approach is more common. I wanted to give a hint on Web Developer Toolbar, to view your site without the image replacement you can go to "Images-->Disable Images-->All images" so you can view any site without the image replacement technique. This has been quite enlightening for me sometimes. Also turning off CSS is one way to test if your site is accessible, which I think is pretty important. Lastly: if you use a lot of image replacement techniques, that hits your server a lot for relatively small files and that makes the site slower and your server more stressed. A good technique to overcome this is using Sprites. http://www.alistapart.com/articles/sprites

I just tested turning off images on mustardseedmedia.com but I couldn't see the text below, I guess this is because of the type of image replacement that is used there. Here is a great list with pros and cons, in short: there is no holy grail. http://mezzoblue.com/tests/revised-image-replacement/ With kind regards, Niels Bom

Hey Niels... Thanks for the comments...good stuff. I agree with you that sprites are 'da bomb. Anytime I'm doing any dynamic image replacement (ie. images changing on hover, etc) I always use sprites so it cuts down on server access times (and avoids preloading issues). For example check out the main navigation on this site...Sprites, baby! Maybe I should do an episode on creating sprites next.... That's a crazy link on different image replacement methods. I think there's probably something we can all learn from there...thanks for sharing! But, as you say, there's no ideal way. Just like we can't possibly support every browser ever made on all sites, we also can't account for every 'images off, css on' type of situation...at least not without additional cost to the client. But, I think it's always important to reassess our methods to make sure they're compatible with the most cases possible.

hey Bob, just watched this vidcast, and inspected the html markup of your site with firebug. i noticed that in certain areas you choose to use 'div class=' as opposed to 'div id=' wondering specifically why this is [other than to allow for inherited CSS attributes] --why certain divs and not others? --does this have to do with how you are building your drupal backend? much appreciated! blessings, theWatts

Hey theWatts.... Rather than retyping it all here, check out this link on class vs. ids. Let me know if that answers the question. Mostly, this has to do with 'reuse' of that particular style. If you want to use it more than once on a page, it has to be a class because IDs can't be used more than once on a page.

hey Bob, thanks much for the replies - i appreciate it quite a bit! i have another question to ask you [if you dont mind] i see that you use drupal6 [at least i assume you do]. im wondering what you use as an alternative to the imageField module for drupal6 [for use with CCK]. ive searched google and can't find anything! i leave in only a few days for school [i go to www.247worldwide.org], and need to finish up this site before i leave. i tried porting the theme i created for 6 over to 5, and it exploded! haha... so my options are bust my butt to re-theme a drupal 5 install, or find an alternative to imageField. thanks again bro! blessings .theWatts

Hey theWatts... Yeah, I'm in the same boat...I've relied on imagefield + imagecache to do all my images, but since it's not ported to 6, I've been forced to find another solution. As of now, I'm using IMCE CCK Field. it's part of IMCE module which I'm already using within BUEditor...so it sorta makes sense. It's not as easy/clear for the user, but it works.

:) Bob, dude... thanks. i'm fairly positive that you saved my tail. may you be blessed brother, truly blessed. .theWatts

Bob, Great Vidcast. I'm self taught with basic websites and create my websites exactly how you said you don't do it. You said 5 or 6 slices... i go like 20 slices. I basically slice up my whole design and use Dreamweaver tables to match those slices. I like your approach better and makes it a lot easier. I'll have to remember these tips for the next website. Thanks!

I have been learning photoshop for the last one month. Recently our tutor taught us how to make a template in photoshop. But as far as slicing the image is concern, the background consist of single color is much more easier than the background having gradient effect.

Thanks Bob for helping out....Your replies are helpful..brainstorming.. kate,

Mustardseed Media Inc.

mustardtweets

featuredproject

clientsspeak

Carl Thomas Gladstone