Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Tutorial 47: iPhone Web Pages

Have you noticed how regular web pages look so small on the iPhone? By default the Safari browser shows you the whole web page which is supposed to be a LOT bigger than the iPhone display. But some sites have great 'mobile' versions of their site that fit and behave perfectly on the iPhone.

Now instead of learning all the javascript and browser detection scripting required to do that, you can just use psd2css Online and have your iPhone web app design coded and working in seconds.

Just name any one of the layers in your Photoshop PSD file with the new _iphone Layer Naming Convention and you'll automatically get all the iPhone javascript goodness that makes it work.

What's more is all the jQuery and regular psd2css Online features work there too - dynamic menus, multi-page sites, image galleries, even WordPress, Drupal and Joomla!

Check out this video tutorial about how to use it:

Here is the PSD file used in the video:

And you can see the generated code in action here (point your iPhone browser to this url):

How Does Auto Detect Work?

Is there code generated on my website's dekstop version that says if iPhone browser show page X? This tutorial shows how to create the iPhone browser page but I think I missed how the phone knows to bring it up instead of the normal desktop version. Thanks.

Mobile website for regular handsets?

Hi Sean
Great site! Is it possible to use the '_iphone' feature to build mobi sites for lower-end/regular handsets?

Amazing but how to do it for drupal or wordpress site

Let me start by saying this tool is just amazing.
I also wanted to know how do I apply this iPhone version to my drupal and WordPress sites.
Much help would be appreciated.

Thanks in advance



Thanks for sharing your knowledge with us.
I'm new in design world, i've spend a lot of time surfing in internet trying to get some good tutorials and when i sow you page my reaction was like: woooow this can't be true.

Take care and keep it up!.

Regards from Spain.

Nice! Thank you for the

Nice! Thank you for the share! This is somewhat new to me but I've learned fast and have adjusted the settings from my newly bought iPhone. The tutorial and instructions you've provided are easy to follow. Thanks again, I really learned a lot from here.<a href="">tampa web design</a>

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content