Using pictures in place of HTML

[SRSound]

Just a random question for pro web designers. I like to design sites by looks first and functionality second. As a result, I prefer to design websites in photoshop to get them to look exactly how I want and simply use JPGs with hot spots for functionality in the actual site. Is there anything wrong with this? Any problems I might run in to? Is this amature of me? Thanks!

EDIT: I should note that this after struggling and failing to make a couple sites cross compatible with different browsers/OSes.

 

[pengu]

um. yes. this is quite bad in practice. it means your readers/viewers are downloading an image all the time, instead of text. it also means people with images turned off see NOTHING instead of ugly text. also, screen readers wont read an image, so blind/vision impaired people wont be able to "view" your site.


lastly. how can you possibly design a site by appearance first and function second?

 

[Mitthrawnuruodo]

Just a random question for pro web designers. I like to design sites by looks first and functionality second. As a result, I prefer to design websites in photoshop to get them to look exactly how I want and simply use JPGs with hot spots for functionality in the actual site. Is there anything wrong with this? Any problems I might run in to? Is this amature of me? Thanks!

Nothing wrong... and I don't think there will be any problems... just make sure you optimize the images down to a fair weight and use proper alt tags all the way. And you could also offer a simple text version in a well marked link from the front page...

On the other hand, if you want to make stylish web pages that also are functional, check out the css Zen Garden.

Good luck.

 

[SRSound]

um. yes. this is quite bad in practice. it means your readers/viewers are downloading an image all the time, instead of text. it also means people with images turned off see NOTHING instead of ugly text. also, screen readers wont read an image, so blind/vision impaired people wont be able to "view" your site.


lastly. how can you possibly design a site by appearance first and function second?

what about websites like this one: SuperSonicStudios? I think it's beautifully designed with a simple layout but I'm pretty sure it's not much more then images.

 

[heehee]

what about websites like this one: SuperSonicStudios? I think it's beautifully designed with a simple layout but I'm pretty sure it's not much more then images.

It's nicely done, but you would want to put plain text where possible. Images takes longer to load, search engine can't pick up the text in images and it's much easier/faster to edit html than a picture.

 

[SRSound]

I think you're all right. It's time to move up to something more sophisticated. CSS? Flash? We'll see. Thanks for the advice!

 

[heehee]

I think you're all right. It's time to move up to something more sophisticated. CSS? Flash? We'll see. Thanks for the advice!

Flash is the same as images, takes longer to load (in most cases), search engine can't pick it up and it takes longer to edit (in most cases).

 

[SRSound]

Flash is the same as images, takes longer to load (in most cases), search engine can't pick it up and it takes longer to edit (in most cases).

Wait a second. So if I used CSS to do a website page and then added a scrolling flash text box, the text in the flash box wouldnt be searchable??

 

[pengu]

correct. search engines can't index the images in Flash, images etc, because it isnt text anymore, its just an image that looks like text.

what do you want to do that can't be done with CSS/XHTML?

 

[hopejr]

what about websites like this one: SuperSonicStudios? I think it's beautifully designed with a simple layout but I'm pretty sure it's not much more then images.

Looks to me like that's one big picture with hotspots (just checked by turning off styles and images). Things like that can be easily done with CSS/XHTML though.

I also design sites in photoshop first before creating them, however, I make sure that links and text are in fact text and not images. Only the column backgrounds (1px high), header, and footer are images, and if necessary the backgrounds on the nav bar links. I write it in such a way that it's functional without images or styles and that it degrades nicely (alt text used on all images too). CSS Zen Garden (mentioned above) was my inspiration for this technique since I first saw it in 2003. It took a while to work out but I use it for everything now (gone are the disgusting tables and images with hotspots that I used to use years ago). The only real issue is getting it to work in all browsers the same way, but I usually manage to without hacks (only one of my sites uses anything like a hack in the CSS).

 

[pengu]

If you go anything beyond very simple layouts with CSS, i suggest downloading /IE7/

then, using MSIE conditional comments include the /IE7/ javascript for explorer, which should resolve most if not all of your cross-browser rendering issues, so long as you have standards compliant CSS/(X)HTML.

 

[NoNameBrand]

I also design sites in photoshop first before creating them, however, I make sure that links and text are in fact text and not images. Only the column backgrounds (1px high), header, and footer are images, and if necessary the backgrounds on the nav bar links. I write it in such a way that it's functional without images or styles and that it degrades nicely (alt text used on all images too). CSS Zen Garden (mentioned above) was my inspiration for this technique since I first saw it in 2003.

This is the method I use as well; I create the page(s) in photoshop, then save out various flattened versions to get the elements I need (rollovers, etc), which I then chop up and discard the left-overs. I tend to have page, header, footer, and content area backgrounds, and sometimes navigation. Sometimes I need little elements like bullets and trim for headers/blockquotes too.

I also create a flattened image on which I scribble in measurements with my Wacom tablet, which I refer to as I create the markup (how many divs, etc) and then the CSS.

I have yet to use one CSS hack and still have good results in all browsers, but it took some doing to figure it all out.