Web design experience < nine > teach you 5 ways to test your mobile Web page

We know that the use of mobile browsers is growing every day, according to StatCounter statistics, the use of mobile phones and tablets accounted for about 30% of network traffic, which means consumers spend more time on mobile pages than ever before. Even with a responsive design such as mobile-first , because of the size and variety of the current equipment, testing the terminal screen before loading is also a big pressure mountain.

1. Test on a real mobile device

It's always best to test your mobile page on a real device, after all, the simulator's fidelity is always limited, and some of the details of the experience cannot be completely imitated. The user experience contains a lot of factors, the impact of the network, pixel density brings visual effects, the actual size of various visual elements, the actual loading time of the Web page, waiting for the actual device to come true.

Of course, thorough testing is unrealistic, and time and money are important determinants of each project. However, investing in a mobile device test suite is always the right thing to do, especially if you're faced with a set of customer-facing services that are necessary. Typically, such a test suite consists of the most popular hardware devices. As a result, the test-oriented situation and the user facing the situation is 1:1 completely corresponding. Brad Frost once wrote an article devoted to how to do this kind of testing, although the article is slightly older, but the idea of the article is completely no problem.

If such a test suite is more than your budget, then you can at least take your own and your friends ' mobile phone to test it, generally, it's enough to cover iOS and Android platforms.

2. Virtual machine testing using iOS and Android

The software simulator is pretty good in the absence of a suitable hardware device. These simulators were originally used to test native apps for iOS and Android, and the built-in browsers restored their usage on real devices as much as possible. As much as possible, it is because it is still unable to fully simulate real network conditions, load times, touch experiences, the visual size of each element, and other details. Fortunately, the built-in rendering engine functionality is still the same, and it can still help you find cross-browser problems.

The iOS simulator is built into Xcode and can be easily invoked by iOS developers. The Android emulator is included in the Android SDK, which is available on all three platforms. There are even third-party independent simulators available for you to use, but whether you can achieve the effect of the native simulator, you will need to judge according to the actual product.

3. Test in Bowserstack

If you don't have enough equipment, and you don't want to install a huge SDK suite and then call the simulator to test it, there's still a way to help you solve the problem. Browserstack is such a network service, it can help you to test the Web page in the desktop and mobile-side browsing effect, convenient for professional web developers.

Currently, the full service provided by Browserstack is charged, and its free portion is for you to test and save. Once you've paid for it, you'll be able to interact and take control of more details as you test your page's browsing effects on different devices. Even if you have a complete suite of test suites, the Browserstack service can help you find more details that are easy to ignore.

4. Using Responsinator test

Developers always try to test the effect on a real device, at least by running it inside the simulator. But the real life is always incomplete, the above two kinds of situation may not have the opportunity to realize. Fortunately there are many other programs available on the Web that can be tested, usually by resizing the desktop browser. In these fancy services, we mainly recommend Responsinator.

You just have to go to the Responsinator website, enter the URL of the page you want to test, and it will produce a real-time preview that includes a preview of the current mainstream hardware device . Frankly, it's closer to a "health check" of the Web page, which is helpful, but says it can't solve all the problems. Strictly speaking, all similar services will not be able to achieve the simulator effect, let alone the actual device testing, because essentially, a service like Responsinator is based on your desktop browser, which is fundamentally different from your mobile browser and its emulator.

5. Adjust the browser

As stated in 4, these third-party services are essentially resizing the browser and then displaying the rendered effect of the adjusted page. Therefore, many developers will directly adjust the browser size to test these responsive mobile Web pages. This way, you can write code while testing, also good. But this approach is inherently not "mobile", which is more convenient for testing Web pages to respond correctly or even to the four "methods" described above. As with 4, browser differences are a fatal flaw in this mechanism.

Original:http://www.rankingex.com/nd.jsp?id=881&_np=541_891

Web design experience < nine > teach you 5 ways to test your mobile Web page