Using pictures in place of HTML

SRSound

macrumors 6502
Original poster
Jun 7, 2005
489
0
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

macrumors 6502a
Mar 20, 2005
576
0
Diddily Daddily...
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

Moderator emeritus
Mar 10, 2004
13,792
150
Bergen, Norway
SRSound said:
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

macrumors 6502
Original poster
Jun 7, 2005
489
0
pengu said:
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

macrumors 68020
Jul 31, 2006
2,462
224
Same country as Santa Claus
SRSound said:
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

macrumors 6502
Original poster
Jun 7, 2005
489
0
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

macrumors 68020
Jul 31, 2006
2,462
224
Same country as Santa Claus
SRSound said:
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

macrumors 6502
Original poster
Jun 7, 2005
489
0
heehee said:
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

macrumors 6502a
Mar 20, 2005
576
0
Diddily Daddily...
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

macrumors 6502
Nov 10, 2005
310
0
New South Wales, Australia
SRSound said:
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).
 

NoNameBrand

macrumors 6502
Nov 17, 2005
434
1
Halifax, Canada
hopejr said:
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.