Develop a website for an iPhone without having iPhone/Mac

Question

I need to develop a website which will be used exclusively on iPhone and iPad. I don't have those devices, neither do I have a Mac.

What are the possible free solutions for me to be able to test the website during development?

The most obvious one would be to use an iPhone SDK, but since it costs $100/year but since it is available only for Mac, it is not a solution in my case.

Answer 1

Recommend you use jsconsole

Remotely debug a mobile web app

jsconsole.com is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.

In fact, mobile web app debugging is so damn tricky, that I gave up, and decided to build this very tool instead. See the videos examples if you'd rather see this in action now.

Creating a session

To create a new session, in the jsconsole prompt, simply run:

:listen

This will yield a unique key along the lines of FAE031CD-74A0-46D3-AE36-757BAB262BEA. Now using this unique key, include a anywhere in the web app that you wish to debug:

<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>

Now any calls to console.log from your web app will display the result in the jsconsole session that is listening to your key. Equally, if you run a command in the jsconsole session, the code will injected in to your web app and the result returned to jsconsole.

In addition to generating a new code with :listen, you can also ask jsconsole to listen to a predefined code (but for your own security, try to chose something unique that only you know):

:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA

Now I can use the same remote key in my web app to avoid having to regenerate a new code each time. Note that only the last remote client (i.e. your web app) to connect to jsconsole will recieve remote debug calls - previous windows will be ignored.

To know when the web app has connected, jsconsole will notify you by showing your the userAgent string for the device:

:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Creating connection...
Connected to "FAE031CD-74A0-46D3-AE36-757BAB262BEA"
Connection established with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8

A word of warning

Note that this technique is also injecting code directly in to your web app - this tool should only be used for debugging. I can't take respibility for how you use this tool, basically: take care!

Current known support

Remote debugging has been developed to work on all platforms, even if the technology isn't supported. However, jsconsole remote debugging has specifically tested and working on the follow mobile devices (feel free to add to this list):

• iOS 4.2.x - iPad, iPhone 4

• Andriod 2.2.2 - Nexus One

• webOS - Palm Pre

There are some Video examples too

More detailed information please see this links: http://jsconsole.com/remote-debugging.html

Answer 2

Download Safari 5 for Windows, enable the Developer Menu features and change the User Agent to Mobile Safari iPad or Mobile Safari iPhone. This will let you see how your website looks when an iPad or iPhone renders it. Just make the window smaller to get the full experience.

If analyst predictions are right, there will soon likely be an abundance of iPhone 3G devices on eBay as lots of people are eligible to upgrade to iPhone 4 tomorrow. Picking up a cheap 3G may be the best solution to your testing requirements.

Or you can test it out at an Apple Store if your website is accessible over the internet or available on a laptop with an ad-hoc WiFi connection.

Answer 3

Websites should not be tied to specific devices.

This is not 1998 : Best viewed in I.E. In fact your suggestion is worse than that.

If you really want a website that only works on those devices then you'll need to check the user-agent string, but otherwise html is html and unlike what Apple may want you to believe, works just as well on Symbian, Blackberry, Android, S40, Windows, Windows Mobile, etc etc..

(In fact, it works better on Symbian as Symbian actually supports Flash.)

Answer 4

I need to develop a website which will be used exclusively on iPhone and iPad

This seems a bad idea. if it's only used on iPad/iPhone, surely you should write an App and get all the benefits of UI, etc.

Answer 5

There are some obvious things here:

1)Work very hard to make your site work on all major browsers - including Safari and any other mobile devices other than iPad... this will let you make sure it works on smaller screens well.

2)Read up on known glitches in these browsers and see if you can avoid them.

3)Whenever you are with friends showing off their iPad, or who have an iPhone, ask to test your site on it.

Answer 6

You could try using something like:

www.testiphone.com/

Answer 7

You can test your website in any browser, but yes, mobile browser probably behave different at some points.

If you cannot find a mobile web browser simulator for iPhone than the "cheapest" alternative would probably be an iPod touch.

Update:

You might want to have a look at iBBDemo:

iBBDemo2 - Cross Platform iPad and iPhone Simulator