If you haven’t seen the Mobile Emulators in CQ5 before, the intent is to show the author how content will look on different devices, using groups such as Feature Phone, Smart Phone, Touch Phone etc. You can create your own groups and then use the device detection capabilities to route a device to the content optimized for the device capabilities.
From a developer perspective, the components on the page can detect the capabilities and adapt the generated code, and to the author the components have the same drag & drop use.
To create a new emulator, first of all you need the imagery. Thanks to the team at Teehan + Lax for their iOS 6 / iPhone 5 PSD, I was very quickly able to get started. From there I cheated a little and hacked away at an existing iPhone 4 emulator, and just adjusted the CSS to suit the new screen size. After a bit of testing (and thanks to @NextByte for being the quickest response to my tweet request for a screencap of iOS6 Safari on iPhone5) I had things running in less than 45 minutes. Full details on how to create an Emulator from scratch are here, but again its easy just to copy an existing one and hack at it.
Grab my Apple iPhone5 Emulator-1.0. Start up CQ5.5, navigate to Package Manager, upload the zip you just downloaded, and finally click “Install” and you are done!
