ThisIsLeon.co.uk

While creating mock-ups of sites its often useful so see what it will look like in a browser window. For this reason I have created a png of a desktop and mobile safari interface.

I find that this is useful for clients to get a better feel of what a site will look like and also as a designer to scale images and element blocks.

Below is also a simple script that will detect if a user if viewing the site from an iPhone/iPod touch and redirect them to a optimised version. It is always good practice to offer a link to the full desktop experience.

<script language=javascript>
<!–
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.href=’http://www.iphonefriendlyurl.com’;
}
–>
</script>

Also, check this out for creating iPhone user interface templates.

Download the templates here.