Transform photoshop image into working page

This site is best viewed in a modern browser with JavaScript enabled.

Transform photoshop image into working page

mparker1113

Hi,

I have a photoshop mockup, psd file and would like to use that as a background image on the site and have the buttons which are etched into that image be hotspots that react to mouse clicks. What do you think is the best approach for doing this? Can i just use the image as a body background image, and use css created hotspots?

For mobile, i am thinking of doing the same approach, but using different sized images depending on the screen size. But then, the expand option of the mobile device wont respond, will it ... ?

I would really appreciate some practical guidance to get me started. I have been developing as a day job for a long time, but this is my own contract and i am having to think of things others do for me during the daytime.

Thanks for replying.

jedaisoul

mparker1113;1213908 wrote:
I have a photoshop mockup, psd file and would like to use that as a background image on the site and have the buttons which are etched into that image be hotspots that react to mouse clicks. What do you think is the best approach for doing this?

I think that the best approach is to use Photoshop as a creative guideline, but to develop the web site using HTML, CSS etc... Why? see below...

mparker1113;1213908 wrote:
For mobile, i am thinking of doing the same approach, but using different sized images depending on the screen size. But then, the expand option of the mobile device wont respond, will it ... ?

The zoom option is only disabled if you chose to disable it. However, I would suggest that this approach will only work if you are going for a niche market, like iPhones. Why? Because IE8 (and below) do not obey media specific code, and they still account for 16% of global web usage. Which is an awful lot of users. So, if you instruct one graphic to be displayed on high res screens, and another on low res ones, IE8 will display both! Which will make a right mess of your carefully crafted layout.

The alternative of dynamically scaling a single graphic might get round that, but involves sending a large image to mobile devices which:
a) Is likely to be slow (even on 3G).
b) May fail, depending on the bandwidth available.

Then there is the alternative of setting up different sites, which is a nightmare unless you have an army of staff to do the donkey work. Even then, you still have the problem of how many screen sizes to support?

So what is left? Fluid design, with media specifics limited to suppressing content on "handheld" devices, (i.e. not providing alternative content). Even then, you may need to be careful with image sizes. I've not yet been able to test whether suppressing output of large graphics with "display: none;" stops the graphics from being downloaded. That is work in progress...