Using pictures in place of HTML

Discussion in 'Web Design and Development' started by SRSound, Oct 2, 2006.

  1. SRSound macrumors 6502

    Joined:
    Jun 7, 2005
    #1
    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.
     
  2. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #2
    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?
     
  3. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #3
    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.
     
  4. SRSound thread starter macrumors 6502

    Joined:
    Jun 7, 2005
    #4

    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.
     
  5. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #5

    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.
     
  6. SRSound thread starter macrumors 6502

    Joined:
    Jun 7, 2005
    #6
    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!
     
  7. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #7
    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).
     
  8. SRSound thread starter macrumors 6502

    Joined:
    Jun 7, 2005
    #8
    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??
     
  9. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #9
    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?
     
  10. hopejr macrumors 6502

    Joined:
    Nov 10, 2005
    Location:
    New South Wales, Australia
    #10
    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).
     
  11. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #11
    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.
     
  12. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #12
    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.
     

Share This Page