11 mar 2011
Preview mobile sites on your pc
If you visit the CreOFF site with a recent mobile phone you'll notice the layout looks simpler and lighter. Making it look nice on a mobile phone requires tweaking of the layout and changing the stylesheets.
The Opera Mobile Emulator turns out to be a big help with this. It's a desktop version of the Opera Mobile browser which allows you to preview the site as it would be rendered on a real mobile phone.
The emulator has several mobile phone profiles which let you mimic the viewport size and pixel density of that particular phone. The profiles also behave like the phone would behave, including menus, swiping etc...
Unfortunately, right now the list of profiles seems to be limited to HTC phones only. Would be nice to see Opera add other phone types as well (iPhone for one) But there's a "custom" profile that lets you customize all the settings so you can mimic other phones as well.
Works with Dragonfly
Dragonfly is Opera's DOM inspector tool that helps developers inspect and interact with the page's internals, similar to Firebug on Firefox.
The Emulator allows you to establish a connection with Opera Dragonfly so you can see in real-time what's happening your page as if you were looking at it via a normal browser, making this tool even more useful.
The emulator is available for Windows, Linux and Mac.