I'm looking for a way to test my web layouts for mobile devices without having to buy the actual hardware. I'm primarily interested in testing for the iPhone and the iPad. I own an iPhone and so can do a proper test there. But I'm unable to know for sure what it looks like on the iPad. Either way: it would be nice to check the visual output on my Mac as I'm building it for productivity sake.
testiphone.com is supposed to simulate the appearance of a website, but there is a difference in rendering the layout scale: On my iPhone hardware, the content's width is scaled to fit the left and right margins of the screen. In the testiphone.com simulator, the content is not scaled at all.
So does there exist a method that can test visual layouts consistently?
(I'm not opposed to subscribing to the Developer SDK, but if there's a faster and easier way to get the viewport and scaling to behave consistently, I would prefer it!)
You can download an SDK with a free developer account. You will not have access to beta versions, but you won't need them for testing web layouts. Go to http://developer.apple.com/ios and click the link for "XCode and iOS SDK". It will ask you to log in with your apple id, and set up a free developer account if it isn't registered with one. Then, use the iPhone Simulator application to test your website.
Related
Can I successfully do iPhone/iPad web development (not native apps) on Windows, and without having an iPhone/iPad device?
I.e. work like PSD-to-iPhone-optimized XHTML/CSS layout.
I’m interested to learn about and make iPhone/iPad optimized websites. Any tips? How different will it be from desktop? What’s different other than the smaller screen?
From experience I will say the only true way to test for the iPad is to test on an iPad. I have been developing a site in html5 specifically for an iPad and we initially used the iPhone to test. The drag function we had implemented with jQuery had worked almost perfectly on the iPhone but after the client had tested on the iPad they came back to us and said the function did not work period and they were correct.
I guess this could change depending on what type of development you are doing. From experience I would say either A. Make some trips to the apple store B. Make friends with iPad owner C. Buy and iPad
yes for an ipohne emulator... try MobiOne.
It's a good application to test the pages in iphone like environment.
http://www.genuitec.com/mobile/
I don’t think you can really do iPhone/iPad development successfully without an iPhone/iPad at all, whether on Windows, Mac or Commodore 64.
If you’re serious about iPhone/iPad development, how could you not try your software out yourself on the devices it’s going to run on? Your clients are going to want code that works on the iPhone/iPad. You need an iPhone/iPad to check that it works.
if your developing a web app then i think you can use this: http://ipadpeek.com/
The answer is: Yes you can absolutely do iPhone and iPad website development on a Windows PC.
However, you really should/must test the result on an actual iPhone/iPod Touch/iPad. Especially if you are integrating in any way with special device features like the dialing feature of the phone. (Yes you can have phone numbers in a webpage trigger dialing when you tap on them.)
However, you can do the bulk of the development on Windows, testing the WebApp in Safari or Chrome, which are the most fully compliant HTML5 WebKit based browsers out there.
Also highly recommend using an HTML5 touch framework like jQuery Mobile or Sencha Touch. This will go a long way to ensuring that your WebApp is optimized for the screen size and touch gestures of the mobile devices.
Remember that you can't deploy a pure WebApp to the app store, only download it from a website. You'll need a native wrapper like PhoneGap for that. And to compile a PhoneGap wrapped WebApp you'll need XCode on a Mac.
But there's a lot of power in adding your WebApp to the home screen on iOS. No native code involved and you get a full screen webapp with a home screen icon, loading image and no browser toolbars. Highly recommended.
I've been using Safari on Windows and the iBBDemo Blackbaud iPhone Browser Simulator to emulate an iPhone but I have noticed that Safari does not render form elements using the default control styles. Safari on iPhone supplies default control styles that are specific to iPhone. This means my web forms look nothing like they do on an actual iPhone.
Are there any style sheets or iPhone Web Design Tool Kits that will style the form elements exactly as they should appear? Or is there an online service that provides screenshots of how a web page looks on an iPhone?
If you have a Mac, then the easiest way is to use the iPhone Simulator. It might not be suitable for your purposes, though.
There are a lot of things which you'd need to do to get the rendering right (there are a lot of rounded rects, and the user can scale the page to an arbitrary size, and strange things sometimes happen when you rotate the device).
I'm looking to create a mobile version of our website/web app. What's a good way to provide the best, most fully featured version.
Part of the reason for creating it is instead of an iPhone app, so I'd like to offer an iPhone web app that takes full advantage of the iPhone's version of WebKit (so CSS animations, being able to rely on good javascript support etc). However, I'd also like the site to work well on other smart phones as well as more basic mobile phones as well.
Do I create two sites (Mobile WebKit and basic mobile web) and redirect based on User Agent? Can I create one site that degrades well? What are the possibilities, and how do other people handle it?
Also: are mobile web simulators worth a damn? I have an iPhone, so can test easily on that. If I want to test on Blackberry/Palm Pre do I really need a device or are there reliable simulators?
These are some of the iPhone specific libraries that provide a native look and feel on webkit:
iUi
jQTouch
Sencha Touch
iWebkit
Getting it to work on most phones will definitely be an issue with most libraries as they are built around with the iPhone's screen size (320x480) in mind.
To get a wider coverage of devices including Android and J2ME phones, checkout Yahoo Blueprint. It's a markup language that translates for various platforms and devices.
You could either get the mobile view based on User Agent by dynamically switching the stylesheet on your server when spitting the page. This is not a recommended approach though for heavy-duty pages as you will still be sending huge chunks of data that would not be rendered. Alternatively, if you have a clear separation of your views, you can templatize the view based on User Agent and/or other parameters. This has the advantage of keeping your controller logic in one place with only changing views. You could use the above libraries for iPhone/iPod Touch and switch to a simpler mobile version for other smartphones or tweak it as you want.
Creating a separate mobile version of the site can be painstakingly difficult to maintain when changes arise.
The iPhone and Android simulators are as close as it gets to the real deal. The iPhone won't let you do stuff like make calls on the simulator for obvious reasons, but the Android provides mock implementations for basically everything on the device.
I'm looking at prototyping with a HTC Advantage, which runs Windows Mobile 5 and has a screen resolution of 640x480 (or the other way if in portrait).
Before anyone jumps in and suggests developing as a native Windows mobile app, we're prototyping as a Java midlet because we also want to find out what restrictions/limitations/design considerations there are if we decide to then take the code to run on other mobile platforms: Java allows us the largest mobile-base with fewer code changes.
I'm using Netbeans 6.8 for the development, and I can't see any way to change the "Device Screen" view of a midlet from a typical mobile-phone sized screen, nor change the view from Portrait to Landscape; similarly, the emulator doesn't have a large-resolution device.
I'm using the default mobile device of ClamshellCldcPhone1. I've looked at some of the other device profiles, but none of them seem to be targetting larger screen devices from what I can see. And I can't find any documentation that tells me the difference between, say, ClamshellCldcPhone1 and DefaultCldcPhone2.
Has anyone any experience of this? Most of the existing things I've read have said to design for the smaller resolution and use anchoring to ensure controls stay in place; however as I've got a screen that's twice the resolution, I want to write for that resolution (given this is currently in prototype world). I can copy the code over to the HTC device to test, but this will (probably) get painful, especially during the early stages.
Any advice welcome :-)
What you need is a new emulator configuration for your handset form factor.
The emulator in Netbeans is the same as the J2ME SDK (formerly Wireless ToolKit, hence the WTK acronym) from SUN Ltd.
You can make a copy of the ClamshellCldcPhone1 folder that is presumably located inC:\Program Files\NetBeans 6.8\mobility8\WTK2.5.2\wtklib\devicesand modify the images and .properties file in your new configuration to match the device you want to emulate.
You can add/remove physical keys, resize the screen and make it touchscreen that way.
This should all be explained in the J2ME SDK documentation.
It's been a very long time since I did any of this, but I think you can just copy one of the existing profiles, rename it, and change the settings to what you want.
I want to test a website to see how it works with the iPhone but I don't own an iPhone or an iPod touch. Is there a way I can test how the site works on them without owning one?
What I'm really after is fixing how Stackoverflow's WMD markdown editor works on the iPhone. I hear that the hyperlink and image prompts are created too high. I think I know how to fix that but it's pretty tough to develop blind.
If you own a Mac, you can download the iPhone SDK which comes with an iPhone simulator. It works not only for debugging a native app but also for browsing the web.
If you have Safari on your computer, you can enable the "Develop" menu under Preferences > Advanced > Show Develop Menu in Menu Bar.
With this enabled, you can go to Develop > User Agent, and change the user-agent string to the device you want your browser to report to the web server as.
By resizing the window to the appropriate width, you can emulate what the site will look like on the iPhone.
The upside of this is that it's quick, it works on both Windows and Mac, and you don't need the iPhone SDK installed. You can also browse iPhone-specific versions of websites that catch user-agent strings directly from your PC.
The downside is obviously your Safari browser on your PC will behave quicker than on the actual device (especially in regard to javascript performance); it displays plugins and shows fonts that may not be available on the actual iPhone OS; a lack of multi-touch support and "snapping" to columns while scrolling; no auto-rotation; no multi-touch/pinch-zoom; widgets will look different; etc.
Just a notice on this old thread - we have now enabled live testing on iPhones and iPads via vnc at CrossBrowserTesting.com.
Ken - Founder
There is a free app on the mac that emulates the iPhone browser: iPhoney
I don't purport to have done more than a web search, but the problem seems to be solved by several products that are "iPhone web app emulators."
http://www.testiphone.com/
http://marketcircle.com/iphoney/