Responsive mobile testing - Is resizing the desktop browser adequate?

Question

Other than touch events, is there any appreciable difference between testing a responsive design by resizing a desktop browser and testing it on a mobile device? There are a plethora of mobile devices that could be potentially tested and I'm trying to weigh cost vs. benefit. How do others go about testing for mobile?

Edit: To be clear, I'm talking about a mobile website or web app, not a native mobile app. Also, is there a list or a website has mobile browser differences? The best I could find Quirksmode, which actually has quite a lot of good info on it, though some of it is older:

• A tale of two viewports 1, 2
• The Great WebKit Comparison Table

Answer 1

From my experience, I will test by resizing a desktop browsers to screen out some bugs first, and then test on my mobile devices, such as an iPad and iPhone, because some bugs happen only in mobile devices as mentioned above. I focus on popular devise first. It is impossible to test on all devises, because there are a lot of versions and resolution of devices. Thus, I did an open beta to test with limited number of users to get some defects from users' devises. Many native applications were tested by these steps below, so I used these techniques to test mobile websites. The popular tool to tes beta test for mobile applications is https://testflightapp.com/ and http://try.crashlytics.com/.

My suggestion steps

1. Test by resizing desktop browsers
2. Test in browsers in popular devises which you have
3. Test by an open beta with limited numbers of users' to get users' feedback and bugs reports (You should inform users that they help you to test your products and may encounter some bugs)
4. Deploy and get some users' feedbacks

It is impossible to test all devices, because of time and money constraints.

Thank icc97 for pointing out some additional information.

Answer 2

I would say there is nothing better than testing on a device. In terms of layout and appearance a site can sometimes appear different on older browsers and older OS's.

I would use this for that though:

http://www.browserstack.com/

However, if it's an experience your want to test there's nothing better than testing on a device as hardware capabilities can sometimes make or break a particular design especially in the Android market

Answer 3

While developing, resizing the browser helps you to quickly try out different things and see if your media queries are working. Additionally, Chrome and Safari both have decent emulation options.

https://developer.chrome.com/devtools/docs/device-mode

http://3qilabs.com/safari-inspect-element-mobile-device-emulator/

But on an actual device, some things will work out differently, for example:

• The keyboard might take up more screen real estate than you'd expect (if you are allowing user input).

• Font rendering might be different on different devices.

• Scrolling on a touch device feels different.
• iOS Safari zooms when you focus on certain elements (like inputs), which can break your lay-out
• Decisions about things like (not) allowing user zoom are hard to make based on desktop/laptop browser testing.

If you're working on OSX, you could install Xcode. It has a built in iOS simulator that will be of great help. You can also add it to your dock so you can start it in stand-alone mode.

But the best way to test is obviously on real devices. If they are on the same network as your development machine you should be able to reach your site by navigating to the correct ip & port.

If you use something like Livereload, any change made to your codebase will automatically reload your site on all devices.

Development Bliss!

Answer 4

Test for mobile on mobile. Any kind of prototype will do, even if it's just images in your photo gallery, or a full blown coded product, or pieces of paper glued to a brick of wood.

Just start soon and keep testing as it gets more and more polished. Basic stuff.