web应用程序和web网站

by Ben Cheng

通过本诚

Web应用程序和移动应用程序的基本启动清单 (The Essential Launch Checklist for Web Apps and Mobile Apps)

This is a simple launch checklist for web and mobile apps that I’ve prepared for product and project managers to quickly test performance of their apps. It also includes a list of commonly overlooked simple mobile app tests to confirm that the app behaves as expected.

这是针对Web和移动应用程序的简单启动清单，我已经为产品和项目经理准备了它们，以快速测试其应用程序的性能。 它还包括一个通常被忽略的简单移动应用程序测试列表，以确认该应用程序的行为符合预期。

Product managers on the client side can use the tools provided to see performance results when working with digital agencies or dev shops.

与数字代理商或开发商店合作时，客户端的产品经理可以使用提供的工具来查看性能结果。

网络应用 (Web Applications)

For web applications, the launch check list should cover the following:

对于Web应用程序，启动检查列表应涵盖以下内容：

1. Performance: Pass Google Page Speed Insights Test
   效果：通过Google Page Speed Insights测试
2. Security
   安全
3. Broken Links
   链接断开
4. Compatibility
   兼容性
5. SEO / Social
   SEO /社交
6. Nice to Haves
   很高兴

效果：通过Google Page Speed Insights测试 (Performance: Pass Google Page Speed Insights Test)

1. Plug the site into Google PageSpeed Insights to see your results

   将网站插入Google PageSpeed Insights以查看结果

2. If the site requires login / credentials, login to the site first and check the performance with Chrome Page Speed Insights Extension

   如果该网站需要登录名/凭据，请先登录该网站，然后使用Chrome Page Speed Insights Extension检查性能

3. Another useful tool is Pass GTMetrix Analysis

   另一个有用的工具是Pass GTMetrix Analysis

Why: Statistics have consistently shown that a few seconds in load time makes a huge difference in retention. 53% of site visits are abandoned if a site takes more than 3 seconds to load. Having a faster site helps retain visitors and increases engagement with your site. This in turn reduces your bounce rate and helps your SEO.

原因：统计数据始终显示，加载时间只有几秒钟，因此保留时间差异很大。 如果网站加载时间超过3秒，则会放弃53％的网站访问 。 拥有更快的网站有助于留住访客并增加与您网站的互动。 反过来，这会降低您的跳出率并帮助您提高SEO。

安全 (Security)

1. Use HTTPS only. HTTP should always redirect to HTTPS.
   仅使用HTTPS。 HTTP应该始终重定向到HTTPS。

2. Qualys SSL Server Test - Aim for a score of A and above

   Qualys SSL Server测试 -力争A及以上

3. Consider these free / open source scanning tools (among others): Qualys, OpenVAS, Nmap, OSSEC, Security Onion, OpenSSH

   考虑使用这些免费/开源扫描工具(包括其他工具)： Qualys ， OpenVAS ， Nmap ， OSSEC ， Security Onion ， OpenSSH

Why: It’s easy to forget if there is no checklist, because these features are usually not part of the UI and may not be caught in exploratory tests.

原因：很容易忘记是否没有清单，因为这些功能通常不是UI的一部分，并且可能无法在探索性测试中发现 。

链接断开 (Broken Links)

1. Check that all pages get no broken links on Monkeytest

   检查所有网页在Monkeytest上是否没有断开的链接

2. Check that all pages get no invalid links on Screaming Frog

   检查所有页面在Screaming Frog上是否没有无效链接

Why: it’s better for UX, and broken links can hurt your SEO.

原因：对于UX更好，断开的链接可能会损害您的SEO。

兼容性 (Compatibility)

1. Check compatibility with major desktop browsers and their versions (Chrome, Firefox, Safari, Opera, Internet Explorer)
   检查与主要桌面浏览器及其版本(Chrome，Firefox，Safari，Opera，Internet Explorer)的兼容性
2. Check mobile browsers too!
   还要检查移动浏览器！
3. Also, check how Safari (iOS) and Chrome (Android) perform on various screen sizes.
   另外，请检查Safari(iOS)和Chrome(Android)在各种屏幕尺寸下的效果。

In-app browsers can also behave differently. Since they are very common, you can try opening a link from Facebook, Reddit, Twitter, or even your Inbox app.

应用内浏览器的行为也可能有所不同。 由于它们很常见，因此您可以尝试打开来自Facebook，Reddit，Twitter甚至您的Inbox应用程序的链接。

Why: Not all desktop browsers render the same way, and you want to ensure a consistent and high-quality user experience. In addition, responsive websites or web apps should adjust to different screen sizes (but sometimes the rendered version does not behave as expected for a specific size).

原因：并非所有台式机浏览器都以相同的方式呈现，并且您想确保一致的高质量用户体验。 此外，自适应网站或Web应用程序应适应不同的屏幕尺寸(但有时渲染的版本的行为与特定尺寸不同)。

For example, check out a case we found with YouTube’s sticky header for Internet Explorer.

例如，查看我们发现YouTube带有Internet Explorer的粘性标头的情况 。

SEO /社交媒体 (SEO / Social Media)

1. Is it fetched correctly by Google? (Check with Google Webmaster Tools)

   Google正确提取了吗？ (使用Google网站站长工具检查)

2. Is it in the first page of Google Search Results Pages (SERPs)?
   它在Google搜索结果页(SERP)的首页中吗？
3. Does it contain correct OpenGraph tags for social sharing? Test by dropping the link into Facebook / Twitter / Pinterest to see what image, title, and description is generated
   它是否包含用于社交共享的正确OpenGraph标签？ 通过将链接拖放到Facebook / Twitter / Pinterest中进行测试，以查看生成了什么图像，标题和描述
4. Does the site or app have the correct Title / Meta Description Tag?
   网站或应用程序是否具有正确的标题/元描述标签？
5. Does it have a Favicon?
   它有Favicon吗？

Why: Ensure your app, service, or website is discoverable by completing the technical side of SEO and social media. SEO helps potential users find you using key search terms. Social optimization formats your site content so that your users and community can easily share to refer more users.

原因：通过完成SEO和社交媒体的技术方面，确保可以发现您的应用程序，服务或网站。 SEO帮助潜在用户使用关键搜索词找到您。 社交优化可格式化您的网站内容，以便您的用户和社区可以轻松共享以吸引更多用户。

According to Hubspot’s 2017 statistics, 61% of marketers say improving SEO and growing an organic online presence is their top priority for inbound marketing.

根据Hubspot的2017年统计数据 ，有61％的营销人员表示，改善SEO和发展有机在线业务是入站营销的重中之重。

好东西 (Things that are nice to have)

1. Validate HTML/CSS with https://validator.w3.org

   使用https://validator.w3.org验证HTML / CSS

2. Check basic Web Accessibility with WAVE or with tools at https://www.w3.org/WAI/ER/tools/

   使用WAVE或https://www.w3.org/WAI/ER/tools/上的工具检查基本的Web可访问性

3. Are the 404 pages informative?
   404页信息丰富吗？

4. Does your site need a print stylesheet?

   您的网站需要打印样式表吗？

5. Make sure your JavaScript is error free when your page loads (check from Google Chrome’s Developer Tools)
   确保页面加载时JavaScript没有错误(请从Google Chrome浏览器的开发人员工具中检查)
6. Are the URLs reasonable/descriptive? Reasonable URLs helps visitors and search engines understand your content.
   网址是否合理/具有描述性？ 合理的URL可帮助访问者和搜索引擎了解您的内容。

7. Does Canonical domain work? (www.abc.com vs abc.com, and so on)

   规范域是否有效？ ( www.abc.com与abc.com等)

对于移动应用 (For Mobile Apps)

This is a simple checklist for testing mobile apps. Here are some commonly overlooked problems with mobile apps:

这是测试移动应用程序的简单清单。 以下是一些与移动应用程序有关的常见问题：

1. Does input use the correct type of keyboard (for example, email or number inputs should use the related type of keyboards) and CTA? (for example, in a form, the keyboard CTA on bottom right in iOS should show next, and when tapped on, it should go to the next input of the form).
   输入是否使用正确的键盘类型(例如，电子邮件或数字输入应使用相关的键盘类型)和CTA？ (例如，在表单中，iOS右下角的键盘CTA应该显示下一个，点击该按钮时，它应该转到表单的下一个输入中)。
2. Does the app have a proper loading indicator when it is performing work that requires users to wait?
   该应用程序在执行需要用户等待的工作时，是否具有正确的加载指示器？

3. Test the app in poor network conditions, to check if it behaves as expected.

   在恶劣的网络条件下测试该应用，以检查其性能是否符合预期。

4. Test the app in airplane mode (if it is supposed to work offline).
   在飞行模式下测试该应用(如果应该离线运行)。
5. Test the compatibility of apps in different screen dimensions (especially small screens).
   在不同的屏幕尺寸(尤其是小屏幕)中测试应用程序的兼容性。
6. Test if the app asks for permissions with a proper explanation.
   测试应用是否要求权限并提供正确的解释。
7. Test if the app displays error messages that are easy to understand.
   测试应用程序是否显示易于理解的错误消息。
8. Test if the app works correctly during interruptions in Android (such as a call, or low storage).
   测试应用在Android中断(例如通话或存储空间不足)期间是否正常运行。
9. Test the app with different localization / time zones.
   使用不同的本地化/时区测试应用程序。
10. Test the app with different font sizes (especially in iOS).
    使用不同的字体大小测试应用程序(尤其是在iOS中)。

That’s about it. Please share if you found this post helpful!

就是这样 如果您认为这篇文章有帮助，请分享！

Oursky is an engineer-led digital agency based in Hong Kong that has worked with global brands and listed companies. If you have an app or would like to develop a digital solution for your product, get in touch!

Oursky是一家由工程师领导的数字代理商，总部设在香港，曾与全球品牌和上市公司合作。 如果您有应用程序或想为您的产品开发数字解决方案，请联系 ！

These notes are adapted from a workshop I held for project managers in an enterprise in Hong Kong and published on our blog on May 21, 2018.

这些说明改编自我为香港某企业的项目经理举办的研讨会，并于 2018年5月21日发布在我们的博客上。

翻译自: https://www.freecodecamp.org/news/the-essential-launch-checklist-for-web-apps-and-mobile-apps-a0d52c6014b5/

web应用程序和web网站