Developing Responsive Designs With Opera Mobile Emulator

Advertisement

This is our seventh article in a series that introduces useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and later we’ve announced Erskine’s responsive grid generator Gridpak and Remy Sharp’s debugging tool JS Bin.

Back in 2009, when coding version 10 of Opera Mobile, my Opera colleagues decided to tune the Opera Mobile build machine so that it would churn out builds not only for common mobile platforms, but for Windows and Linux as well. Originally intended for quality assurance and testing, these desktop builds proved also to be useful for Web development; being able to use Opera Mobile on a desktop machine took away the need to do all testing on a phone, and the mobile browser window was suddenly only an Alt/Command + Tab away from our text editor — exciting!

So, we decided to iron out the wrinkly bits, added a Mac build channel, and turned it into a publicly available developer tool, called Opera Mobile Emulator. Coming in at a fairly small size, Opera Mobile Emulator can be downloaded for free from Opera’s developer website or from the Mac App Store, and installing it is straightforward. The engine and UI are exactly the same as when you run Opera Mobile on a phone, while desktop-specific hooks, such as the profile selector, keyboard shortcuts and command-line flags, give you a bit of extra debugging power.

Opera Mobile Emulator Profile Selector and Opera Mobile Instance

In this article, we’ll look at how you can use Opera Mobile Emulator to create responsive designs, and we’ll cover some of its more exotic settings.

Disclosure: I work for Opera Software and am the product manager of Opera Mobile Emulator, among other things.

Basic Usage

When launching the emulator, you are greeted with a profile selector. Using the profiles on the left side, you can launch one or more Opera Mobile instances with device-specific settings. For example, selecting the “HTC Desire” profile will launch Opera Mobile in WVGA (480 × 800 pixels) portrait mode with a zoom level of 150%, just like it would on an actual HTC Desire phone. If you select a different profile, a separate Opera Mobile instance will launch with settings to match that profile.

Profile Selector

Pages can be loaded by typing in the URL in the address bar (obviously!), or else by dragging and dropping any file or URL onto the browser window. In-page navigation is similarly easy: clicks match to taps, and you can use pinch gestures on the trackpad to zoom in and out of pages. If the latter does not work on your machine, you can zoom by using the scroll wheel on your mouse or by clicking the “+” and “-” overlays that appear in the browser window when you pan around.

You’ll notice that spawned Opera Mobile instances can be resized from all sides, and the loaded website’s layout will alter accordingly. This is, of course, different from the experience on devices where the browser is a full-screen app, but it comes in very handy when you want to test how your viewport meta tag or media query settings work at different screen sizes. In fact, resizing an Opera Mobile instance to test different layouts will give you a more realistic feel of viewport behavior than doing the same on a desktop browser, because the latter will not respond to different viewport settings, and so viewport-related bugs might get overlooked.

Two Opera Mobile instances

It’s worth noting here that the device-width media query in Opera Mobile Emulator is not querying the width of the computer screen, but rather the width of the launched Opera Mobile instance. Also, if you’re only interested in checking the differences between portrait and landscape orientation, you can use the Alt/Option + R key combo, or click on the “Rotate screen” button in the bottom-right corner.

Of course, everyone’s workflow is different, and I’m here to help make yours more efficient, not dictate to you. Obviously, nothing beats testing on actual devices, because you’ll get an accurate idea of the feel of your website in a mobile setting, on a device with limited CPU and so on. However, actual device testing is finicky, so I prefer to leave it until my project has reached at least alpha quality, preferring a rapid (1) develop, (2) test with Opera Mobile Emulator, (3) debug iteration while getting the project off the ground.

Advanced Launch Options

On the right side of the profile selector, you’ll find a number of profile options.

The “Resolution” drop-down menu gives you a choice between a number of common screen sizes and orientations, with the option to add your own as well. The “Pixel Density” drop-down menu is a list of PPI values: for the HTC Desire, this is 252, which will result in a 150% default zoom and a devicePixelRatio of 1.5 when launched. Selecting a PPI of, for example, 285, on the other hand, will result in a zoom level of 200% and a corresponding devicePixelRatio of 2.

In short, this combination of resolution and pixel density values will differ per profile and affect how the viewport behaves, as well as determine which media queries are applied.

Finally, the “Input” drop-down menu allows you to choose between three input modes to which certain UI and UA changes are tied:

  • “Touch”
    This option will launch Opera Mobile with a UI that is optimized for use on touchscreen phones, and will give it a UA string with Opera Mobi in it.
  • “Keypad”
    This option will launch Opera Mobile with a UI and shortcut keys optimized for non-touchscreen phones — for the developer’s convenience, mouse clicks, panning and zoom gestures will still work, though. The UA string will contain Opera Mobi.
  • “Tablet”
    This option will launch Opera Mobile with a tablet-optimized UI. In this case, the UA string will contain Opera Tablet.

Opera Mobile instances with tablet, touch and keypad input

Launching With Arguments

The last option in the profile selector is the Arguments field, which is arguably the most powerful one of the bunch. In it, you can type a number of arguments or flags, which will be used to launch a new Opera Mobile instance. For example, -displaysize 320 × 480 -url www.opera.com will launch Opera Mobile with a window size of 320 × 480 pixels and will load www.opera.com.

These flags also work from the command line. By default, the Opera Mobile Emulator is executable from the following locations:

  • Mac
    /Applications/Opera Mobile Emulator.app/Contents/Resources/Opera Mobile.app/Contents/MacOS/
  • Windows
    C:Program FilesOpera Mobile Emulator
  • Linux
    /usr/bin/

Repeating our last example would then look as follows:

  • Mac
    ./Opera Mobile -displaysize 320x480 -url www.opera.com
  • Windows
    OperaMobileEmu.exe -displaysize 320x480 -url www.opera.com
  • Linux
    operamobile -displaysize 320x480 -url www.opera.com

Two arguments that come in very handy when testing responsive designs are -displayzoom and -monitorppi:

  • -displayzoom
    This is useful if you want to reduce the size that an Opera Mobile instance takes up on your desktop, while preserving its reported width and height values, devicePixelRatio and so on. In other words, if you want to try out the “Samsung Galaxy Note” profile, which results in a browser with a size of 800 × 1280 pixels, then you can add a -displayzoom 50 flag to launch it with a quarter-sized surface of 400 × 640 pixels — a much better match for the 900-pixel-high screen of, for instance, a MacBook Air.
  • -monitorppi
    This, on the other hand, allows you to set the PPI of your computer monitor (for example, -monitorppi 128 for a 13-inch MacBook Air) and launch an Opera Mobile instance with a zoom factor adjusted to match the physical dimensions of the profiled phone’s screen. This will give you a better idea of how big, say, the clickable areas really will be when the page loads on an actual device, but remember that the PPI you get on the screen won’t be representative of what you’ll see on the device.

Note that -displayzoom and -monitorppi are mutually exclusive and thus cannot be used together.

For a full list of possible arguments, click on “Help” in the profile selector, or run the emulator from the command line with the --help argument.

In-Browser Settings

One thing to keep in mind is that, even when launching an Opera Mobile instance with an Android profile, the UA might be different. You can change the UA string after launching Opera Mobile by clicking on the red “O” and going to Settings → Advanced → User Agent, where you can choose between five options, including “Android.” If you need to set a completely custom UA string, go to opera:config in the URL field and search for “Custom User-Agent.” In this field, you can set a custom UA string, which will override any other set UA string.

Other settings worth highlighting are the options for clearing the cookies, cache and shared locations, found under Settings → Privacy, and the toggle to turn off the on-screen keyboard, found under Settings → Advanced → Opera keyboard.

Connecting To Opera Dragonfly For Advanced Debugging

In any Web project, there is a point when you absolutely need to look under the hood of the browser to see what precisely is going on. That’s why Opera Mobile Emulator can talk to Opera Dragonfly, Opera’s built-in Web debugger.

Connecting Opera Mobile to Opera Dragonfly

You can easily set this up as follows:

  1. Download, install and run Opera for desktop.
  2. Load a page in Opera for desktop, right-click anywhere, and click “Inspect Element” to launch Opera Dragonfly.
  3. In Opera Dragonfly, click on the “Remote debug configuration” button (third button in the top right), and click “Apply” (the default settings are fine)
  4. Then, open Opera Mobile Emulator and launch an Opera Mobile instance.
  5. Go to opera:debug in Opera Mobile, and click “Connect” (the default settings are fine)
  6. You are now connected and can load any page you want to investigate in Opera Mobile. Be sure to select the correct debugging context (fourth button in the top right) in Opera Dragonfly when you change tabs.

Under Opera Dragonfly’s Network → Network log, you can, for instance, inspect whether your media queries are written correctly and whether image files referenced in the style sheet are not unnecessarily downloaded to devices with small screen sizes. If done right, you should see them only pop up towards the bottom of the waterfall chart when expanding the Opera Mobile browser window’s dimensions.

Also worth noting are the features under Network → Network options. There is a checkbox to disable all caching (which you may want to do when testing), and there is an option to set global header overrides — this is particularly handy when you rely on browser sniffing (careful!) or particular headers to optimize your content for, and you want to test out different header variations without opening up different browsers.

For an overview of other Opera Dragonfly features, including those related to inspecting the DOM and scripts, CSS profiling, picking colors, and using the command line, I recommend looking at the Opera Dragonfly documentation.

So, that’s a wrap! I hope you’ve enjoyed this introduction to how Opera Mobile Emulator can help you optimize your responsive designs. Try it out for yourself, and let us know what you think and how you want to see it improved.

(al)

↑ Back to top

Andreas (@andreasbovens) joined Opera Software in 2007, and worked first as a QA engineer, then as a web evangelist in Tokyo. Since 2009, he's based in Oslo and leads Opera's Dev Relations and Site Compatibility team. He likes to drink espresso and is developing a passion for bachata.

  1. 1

    Oguzhan Cansever

    August 30, 2012 6:36 am

    Remote debugging tool looks very good but extremely slow (on Mac).

    -16
  2. 2

    Great tool! But why no iPhone or iPad?

    1
  3. 6

    I literally just hit send on this weeks http://www.responsivedesignweekly.com otherwise it would have been front and center.

    Next week you’re in for sure!

    It’s such an important yet often overlooked testing platform for responsive designs, and usually the browser that renders the worse.

    -3
  4. 7

    “You must be at least 17 years old to download this app. Frequent/Intense Sexual Content or Nudity” – Mac App Store says. Now that’s my kind of developer tool :)

    13
  5. 8

    Seems like a great tool. I might give it a try when working on my next responsive site.

    3
  6. 9

    BadiuzzamanFolkgraphein

    August 30, 2012 12:40 pm

    Really, great read. Thanks

    -3
  7. 10

    It’s a great tool and it is made to work easily without b/s. Too bad there are no SDKs like this for more popular browsers, i.e. Safari.

    4
  8. 11

    Why only Opera?? And can somebody recommend an application for testing on other platform?

    0
  9. 13

    I’m already using this tool in my first responsive website. Great tool. Nice article. Thanks.!!!

    0
  10. 14

    We build a lot of new websites and this tool for testing on mobile devices on the fly would be brilliant. Often mobile devices differ slightly in how they display web content, has this got multiple profiles for say Apple or Blackberry devices?

    -5
    • 15

      James, as the article explains, it comes with multiple profiles, but only for the platforms Opera Mobile runs on. So, no iPhone, Playbook, etc. but plenty of Android and Symbian profiles.

      0
  11. 16

    Firefox 15 has a similar tool, under Tools > Web developer > Responsive Design View

    Check it out :)

    3
  12. 17

    Inside Google Chrome, you will find something similar clicking on the “settings” icon of the Web Inspector (bottom right): from there you can set the user-agent, screen-size and something called “font-scale factor” – i find it fairly accurate for both iPhone and Android phones, and it ships with the default Chrome installation

    a-

    3
  13. 19

    I am building a responsive website with Foundation 3, and just started to use this new opera tool, and is just awesome!

    2
  14. 20

    sorry if spam.
    heres ones emulator too :D
    http://mobello.github.com/demo/
    not mozilla :(
    ty

    -1
  15. 21

    Great tool, without support for iPad nor iPhone and proper rendering useless.

    -1
  16. 22

    No 64bit linux deb?
    Shame on you Opera?

    -1
  17. 23

    it’s wonderful,and fast.

    -2
  18. 24

    http://teston.me is a iPhone and iPad responsive design testing tool

    0
  19. 25

    is it possible to install and run multiple instances of opera mobile 12 on symbian belle platform. ?

    -1
  20. 26

    How does opera mini operates?

    0
  21. 27

    giwan taden julius

    July 6, 2013 10:58 am

    i like the tool because it is easier to use and provide more information

    1
  22. 28

    still waiting for a glitch to moan about. SR.

    0
  23. 29

    THANKS ALOT OPERA’S

    0
  24. 30

    This is an invaluable tool – I have been searching for a while for a tool which would allow me to see how my mobile webpages look before uploading onto the server. G+ share to follow…

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top