MOBILE FIRST: HOW TO APPROACH MOBILE WEBSITE TESTING? 移动优先：如何处理移动网站测试？

Smartphones seem to have taken over desktop computers in terms of usage. The number of smartphone users has increased tremendously in the last few years and by 2016, there will be more than 2 billion smartphone users. In addition, half of the internet’s usage comes from mobile devices.

This development affects also web design for some years. InVision recently stated in one of their blog posts:

“Responsive Design is no longer a luxury, but a necessity.”

Especially when it comes to testing, mobile website testing still is in its child’s shoes and developers face a hard time getting the best result out of their work.

In this blog post we are going to show how to set up the perfect mobile website testing workflow and how to easily conduct browser tests for mobile.

智能手机似乎使用方面已经接管了台式电脑。智能手机用户的数量在过去几年有了很大的提高，到2016年，将有超过20十亿的智能手机用户。此外，互联网的使用的一半来自移动设备。


这种发展也影响网页设计有些年头了。 INVISION最近在其博客文章中的一个说：


“响应式设计不再是奢侈品，而是必需品。”


尤其是当它涉及到的测试，移动网站的测试仍然是在其孩子的鞋子和开发人员面临一个很难得到最好的结果了他们的工作。


在这篇博客文章中，我们将要展示如何建立完善的移动网站测试的工作流程和如何轻松地进行浏览器测试手机。

What does RWD mean?

This means that developers should be creating their websites so a user can access it from any smart device, be it iPhone, smartwatch, Kindle or notebook, without running into problems.

Responsive Design: A perfect all-in-one solution?

The screen size, platform and orientation and even all the elements of a design adjust to make it compatible for viewing on that particular device.

That way, the size of the smart device doesn’t matter. For example, if the user switches from their computer to the iPad, the website automatically switches to accommodate for the change in resolution, image size and scripting abilities. It has become so common and so important that designing with mobile in mind has earned its own name: Responsive Design.

Since responsive web design eliminates the need for a custom design and development for each new gadget that’s released, the concept can save you quite a lot of time.

But, since it’s supposed to support virtually any type of device, the techniques used should be as robust as possible.

Why mobile testing matters.

However, when designing websites, developers still face some hard time in getting the best results out of their work.

Website developers and designers often do not invest a large enough amount of resources in testing the compatibility of their sites on different mobile devices.

Testing for mobile usage is still at a nascent stage but with the help of a proper testing workflow, the methods of testing and the right mobile testing tools, testing your website for responsiveness is going to become a lot easier.

How to get started with mobile website testing?

Since there are so many different devices to view a website on today, there’s a lot to take into account.

They come with different screen sizes and resolutions, operate on different network speeds and have different hardware capabilities.

All these differences make it important that a website is tested thoroughly before it’s made available on different platforms.

According to Guy Podjarny’s research, regardless of the screen size, 72% of responsive websites require the same resources, even on slow mobile network connections regardless of what needs to be displayed.

And since users expect short load times, it won’t be long before they head over to a competitor’s page. When testing sites for mobile devices, there are 4 basic things to look out for. These are:

1. Does the site look great on each device
2. Is it free of bugs on each device
3. Is the interface user-friendly on each device
4. Is the site optimized for each device

Now, there are a lot of different devices out there.

The goal of mobile website testing is to deliver a consistent but relevant experience to users across all those different devices, and that can be really hard to manage.

So, where do you even begin? Well, your testing should take place in five areas to cover everything properly.

Validate your HTML and CSS code

You should first try to validate the HTML code of your page. It’s not because the website works for you that it’ll work for everyone. So the most important step is to make sure you’ve covered the basic and the website is on par with all HTML and CSS standards.

W3C mobileOK Checker

W3C is a web based automated validation tool and is one of the best tools to check the compatibility of your site on mobile devices. The tool offers several tests that determine the user-friendliness of the mobile website.

这是什么意思RWD？


这就意味着，开发者应建立自己的网站，这样用户就可以从任何智能设备访问它，无论是iPhone，智能手表，Kindle 或笔记本电脑，而不会遇到问题。
响应式设计：完美的所有功能于一身的解决方案？
屏幕尺寸，平台和取向，甚至所有设计的元素调整以使其观看该特定设备上兼容。
这种方式，智能设备的尺寸并不重要。例如，如果用户从他们的计算机到iPad切换，网站自动切换，以适应在分辨率，图像尺寸和脚本能力的变化。它已成为如此普遍和重要，所以在考虑移动设计赢得了自己的名字：响应式设计。
由于自适应设计，省去了定制设计和开发该公司发布的每一个新的小工具的需求，这个概念可以为您节省了不少时间。
但是，由于它应该支持几乎任何类型的设备，所用的技术应该是尽可能稳定。
为什么移动测试事宜。
然而，在设计网站时，开发商仍然面临着在获得最好的结果了他们工作的一些困难时期。
网站开发者和设计者往往不测试其在不同的移动设备的网站的兼容性投入资源足够大的量。
对于测试移动应用仍处于起步阶段，但有一个正确的测试工作流程的帮助下，测试的方法和正确的移动测试工具，测试你的网站的响应速度将变得轻松很多。
如何开始使用移动网站测试？
既然有可以查看今天一个网站那么多不同的设备，有很多考虑。
他们都具有不同的屏幕大小和分辨率，在不同的网络速度运行，并有不同的硬件功能。
所有这些差异使得重要的是，它是由可在不同的平台之前，网站是全面测试。
根据盖伊Podjarny的研究，不管屏幕尺寸的响应的网站72％所需要的相同的资源，即使是在不管需要显示什么缓慢移动的网络连接。
而且，由于用户期望短的加载时间，它不会自己头部到竞争对手的页面之前很长。当测试用于移动设备的网站，有4个基本的东西看出来的。这些是：
网站是否每个设备上很好看
它是免费的每个设备上的bug
在接口方便用户在每台设备上
是网站为每个设备进行了优化
现在，有很多不同的设备在那里。
移动网站测试的目标是在所有这些不同的设备提供一致的，但相关经验的用户，那可真是难以管理。
所以，你在哪里甚至开始？那么，您的测试应该在五个方面正确面面俱到。
验证您的HTML和CSS代码
你应该首先尝试验证自己的网页的HTML代码。这不是因为该网站为你的作品，它会为每个人的工作。所以，最重要的一步是要确保你所投保的基本和该网站是在同水准与所有的HTML和CSS标准。
W3C mobileOK检查
W3C是一个基于Web的自动验证工具，是检查移动设备上你的网站的兼容性的最佳工具之一。该工具提供了多种测试，确定移动网站的用户友好性。

Chrome Developer Tools – the mobile testing allrounder

The Chrome Developer tools which you probably all know are a great place for fixing those HTML and CSS issues. Through the whole testing workflow, the Chrome Developer Tools are your home base. Whether you’re checking the behavior of your website on various screen resolutions or you’re testing the loading times with Network throttling.

The Chrome Dev tools are the place to be.

Chrome开发人员工具 - 全能的移动测试
Chrome开发人员工具，你大概都知道是固定的HTML和CSS问题的好地方。通过整个测试工作流程中，Chrome开发者工具是你的大本营。无论您是在检查你的网站在不同的屏幕分辨率的行为或你与网络限制测试加载时间。
在Chrome开发工具是要去的地方。

Test on different browsers and operating systems

You should then test your website on multiple browsers, especially the ones which are most popular in your target audience. This probably means testing in Firefox, Chrome, Safari or Internet Explorer.

In addition to this, also check your site on different operating systems like Mac or Linux. It might happen that a site looks completely fine on one of the browsers but break completely on some other browser, or work on one browser on one OS but not the same browser on a different OS.

Testing on BrowserStack

Browserstack is a web service that allows access to desktop and mobile devices and can be used by professionals to test their sites. It is a paid service. Though a part of the service is available in a free version, the paid version has a lot more features.

在不同的浏览器和操作系统测试
然后，您应该测试在多个浏览器，尤其是这是最流行的在你的目标受众的那些网站。这可能意味着火狐，Chrome，Safari浏览器或Internet Explorer的测试。
除此之外，还要检查在不同的操作系统，如Mac或Linux操作系统您的网站。它可能会发生一个网站看起来对浏览器的一个完全正常，但一些其他的浏览器彻底打破，或在不同的操作系统上的一个浏览器上运行一个操作系统，但不一样的浏览器。
测试上BrowserStack
Browserstack是一个Web服务，它允许访问桌面和移动设备，可以由专业人士用来测试他们的网站。它是一种有偿服务。虽然服务的一部分，是在提供免费版本，付费版本有很多更多的功能。

Test for different mobile devices

This is where it gets difficult. After testing your site on your desktop, resize the browser window and check the appearance on different preset sizes.

Test on real mobile devices

The best way to test the responsiveness of any site is by simply testing it on different mobile devices. The user experience varies depending on the page loading time, pixel densities and the size of the tap targets.

测试不同的移动设备
这是它变得困难。在桌面上测试您的网站后，调整浏览器窗口，检查不同的预设尺寸的外观。
真实的移动设备测试
测试任何网站的响应速度，最好的办法就是通过简单的测试它在不同的移动设备。用户体验取决于页面加载时间，像素密度和抽头目标的大小。

Since comprehensive testing on each mobile device is often not possible due to cost and time limitations, a mobile device testing suite works best in testing. A suit consists of many popular web browsing devices and helps in physical testing under real conditions.

Testing with Android Emulator and iOS Simulator

Other than testing on the real mobile devices, you can also use an emulator. Emulators are software that are mainly designed for testing apps and default web browsers.

However, because of the slow speed of emulators, they’re not very good for testing mobile sites. They don’t even show all the features of a physical hardware device. But if you don’t have any other testing options, an emulator works pretty ok by ensuring basic testing.

Responsinator

Responsinator is great tool for testing your responsive web design. It’s free of any cost and works great for performing a quick layout check.

因为每一个移动设备上全面的测试往往是不可能的，因为成本和时间的限制，在移动设备的测试套件最适合在测试。西装是由许多流行的网络浏览设备，并在实际条件下的物理测试帮助。
与Android模拟器和iOS模拟器测试
除了对实际的移动设备进行测试时，你也可以使用的仿真器。仿真器是被设计主要用于测试应用程序和默认的Web浏览器软件。
但是，由于仿真器的速度慢，他们不是用于测试移动网站很不错。他们甚至不显示物理硬件设备的所有功能。但是，如果你没有任何其他的测试选项，仿真器的工作原理是确保基本测试相当确定。
Responsinator
Responsinator是用于测试你的响应性网页设计伟大的工具。这是免收任何费用，并用于执行快速布局检查的伟大工程。

Am I Responsive?

Am I responsive is a web based tool that will show you if a certain website has an responsive web design. Though it’s more a tool for a quick and simple check, than for testing and bug tracking purpose.

我是响应？


我是响应是一个基于Web的工具，它会告诉你，如果某个网站有一个响应的网页设计。虽然它更多的是一个快速而简单的检查工具，比用于测试和缺陷跟踪的目的。

MobiReady

MobiReady is basically an online testing tool. It performs a number of tests and provides a comprehensive result for the compatibility of your website for the mobile use. It also sends error report so that you know the areas where you can bring improvement.

MobiReady


MobiReady基本上是一个在线测试工具。它进行了一些测试，并提供了一个全面的结果，为您的网站为移动应用的兼容性。它还发送错误报告，让你知道在哪里可以带来改进的领域。

Connectivity options

Websites rely on network connectivity to provide the required functionality. In a test environment, set up wi-fi network and test the site’s load speed under different conditions.

Although nothing new, responsive web design isn’t about being able to be displayed well in different scenarios, it’s about being usable in different scenarios.

Unfortunately, being responsive usually means an increase in loading time as more assets need to be loaded. Thankfully, RESS is there to help with that.

RESS (=Responsive Web Design + Server Side Components) is basically the addition of server side components that get loaded dynamically, and according to what a specific device requires. There’s no use to load a full resolution image on a small cell phone, but it might be on a desktop.

Mobile testing after deployment

As with all things development related, there’s no guarantee that after deployment, your website will be flawless. In fact, there will be bugs, always.

So, after deployment, you’re going to want to keep an eye on your responsive website. Your users will be bumping into them from time to time as they’re spending way more time on the site then you’ll ever be able to.

So aside from checking and testing for bugs and issues with each new deployment, you should also be catching bugs that still linger in your current deployment.

But, here’s the great news. There are tools for that as well.

Pingdom

We talked about optimizing load time. But how about uptime? We’re not just referring to entire sites being offline. It can just as well be that a single asset is offline as well. That’s where pingdom comes in. This tool monitors how the user experiences the website and where they might find potential hiccups.

连接选项


网站依靠网络连接，以提供所需的功能。在测试环境中，设置了Wi-Fi网络，并在不同条件下测试网站的加载速度。


虽然什么新鲜事，响应网页设计是不是能够在不同的场景中显示良好，这是关于是在不同情况下使用。


不幸的是，是响应通常意味着在加载时间的增加为更多资产需要加载。值得庆幸的是，ress是有帮助这一点。


RESS（=自适应网页设计+服务器端组件）基本上是在加入该获取动态加载的服务器端组件，以及根据什么特定的设备需要。有没有用小小的手机上加载全分辨率图像，但它可能是在桌面上。


部署后移动测试


如同所有的事物发展的关系，有没有保证部署后，你的网站将是完美的。事实上，会有错误，始终。


因此，在部署之后，你会想盯紧你的回应网站。你的用户会被撞到他们不时为他们在网站上花费的方式更多的时间，那么你永远可以。


因此，从检查和每一个新部署测试的错误和问题之外，你也应该发现bug，在当前的部署仍挥之不去。


但是，这里的好消息。有该工具为好。


Pingdom的


我们谈到了优化加载时间。但如何对正常运行时间？我们不只是指整个网站脱机。它可以一样好是一个单一资产处于脱机状态以及。这就是Pingdom的用武之地。此工具监视用户如何体验的网站，在那里他们可能会发现潜在的打嗝。