设计师张超越_超越响应能力–手机网站设计技巧

设计师张超越

Smartphones are now the primary way people access the internet. We use them for over 60% of our browsing and, since 2016, over half of the UK’s online shopping has been done on them. Their importance is such, that Google downranks websites that aren’t mobile-friendly and, since last year, uses mobile pages rather than desktop pages to rank sites in search results. These facts make it absolutely critical that when you create your website, you focus on the mobile version and in this post, we’ll look at some of the most important factors you should consider.

现在，智能手机是人们访问互联网的主要方式。 我们将它们用于超过60％的浏览中，并且自2016年以来，英国有超过一半的在线购物都在它们上进行。 它们的重要性如此之大，以至于Google降低了不适合移动设备访问的网站的排名，并且自去年以来一直使用移动页面而不是桌面页面在搜索结果中对网站进行排名。 这些事实绝对使您在创建网站时将重点放在移动版本上至关重要，在本文中，我们将研究一些您应考虑的最重要因素。

响应不够好 ( Responsive isn’t good enough    )

Google made the decision to downrank websites that didn’t render well on mobiles back in 2015. By that time, many websites were already responsive but the impact of Google’s ‘Mobilegeddon’, as it became known, caused most of those that were lagging behind the times to follow suit.

Google决定降低2015年在手机上表现不佳的网站的排名。到那时，许多网站已经做出了回应，但众所周知，Google的“ Mobilegeddon”的影响导致大部分落后紧跟时代的步伐。

That, however, was over three years ago and things have moved on since then. While responsive websites are an absolute must, today, they are the bare minimum of what you should do.

但是，那是三年多以前的事情，此后一直在发展。 尽管响应式网站是绝对必须的，但今天，它们只是您应做的工作的最低限度。

速度至关重要 (Speed is crucial)

While a responsive website will adapt the content to fit mobile screens, it won’t help it load any faster. And loading times are highly important for mobiles because, when not connected by wi-fi to the high-speed broadband of the user’s home, they are often left with much slower connections, such as public wi-fi and patchy 3G and 4G networks. Sites that load slowly are much more likely to be abandoned by impatient users. Not only does this cause a loss in traffic and sales, it also produces negative analytics data (short session times, high bounce rates, etc.) that signals to Google that your site might not be worth ranking highly.

虽然自适应网站会根据移动屏幕调整内容，但不会帮助其更快地加载。 加载时间对于移动设备而言非常重要，因为当不通过wi-fi连接到用户家中的高速宽带时，它们通常会保持慢得多的连接速度，例如公共wi-fi和斑驳的3G和4G网络。 加载缓慢的网站更有可能被急躁的用户所抛弃。 这不仅会导致流量和销售损失，还会产生负面的分析数据(会话时间短，跳出率高等)，向Google发出信号，表明您的网站可能不值得高排名。

How do you counter this? There are a number of things you can do, which when done together can have an impact on page loading times. Moving to a faster hosting package, i.e., upgrading from shared hosting to VPS or using servers with SSD drives instead of HDD can ensure that data is processed and served more quickly.

您如何应对？ 您可以执行许多操作，这些操作一起执行会对页面加载时间产生影响。 迁移到更快的托管包，即从共享托管升级到VPS或使用具有SSD驱动器而不是HDD的服务器可以确保更快地处理和提供数据。

Reducing the size of the data needed to load your site can also help. This can be done through compression, caching, image optimisation, script minification and the use of content delivery networks. If you have a site that relies on endless numbers of plugins or add-ons, getting rid of any unnecessary ones or using lighter versions can also help.       

减少加载网站所需的数据大小也有帮助。 这可以通过压缩，缓存，图像优化，脚本最小化和使用内容交付网络来完成。 如果您的网站依赖于无数的插件或附加组件，那么摆脱任何不必要的插件或使用精简版本也可以有所帮助。

设计用于移动 (Designing for mobile use)

To make your website truly mobile-friendly you need to think beyond how something looks on a mobile screen and consider how someone uses their phone to interact with your site. When using a desktop device, people generally use a keyboard and mousepad to interact and have both hands available to type, click and scroll. On a mobile, there is a much smaller touch screen that is operated using one hand and with interactions often done just by thumb. This invariably means that things which are easy to do on desktop devices are generally much more challenging on a mobile. If these things are too challenging, exasperated users will just go somewhere else.  

为了使您的网站真正适合移动设备，您需要思考的是移动屏幕上的外观如何，并考虑有人如何使用手机与您的网站进行交互。 使用台式设备时，人们通常使用键盘和鼠标垫进行交互，并且双手可以键入，单击和滚动。 在移动设备上，有一个更小的触摸屏，它可以用一只手进行操作，而交互操作通常仅靠拇指即可完成。 这总是意味着，在台式机设备上易于执行的操作通常在移动设备上更具挑战性。 如果这些事情太有挑战性，那么激怒的用户只会去别的地方。

经验法则 (The rule of thumb)

Three-quarters of smartphone users do most of their mobile interactions with their thumb. When designing your page, you need to consider how easy you make it for the thumb to do things. Placing key touch elements, like menus, near the bottom can help make your site more friendly as the user won’t have to stretch their thumb as far or be inconvenienced by having to use another digit.

四分之三的智能手机用户使用拇指进行大部分的移动互动。 在设计页面时，您需要考虑使拇指做事情变得容易的事情。 将关键的触摸元素(如菜单)放置在底部附近，可以使您的网站更加友好，因为用户不必将拇指伸得太远，也不必因使用其他数字而感到不便。

Another way to cater for how we hold a phone is to present content using cards. These rectangular layouts are simple to use with a thumb as they are easy to tap on or swipe. They also break up content into discrete, uncluttered sections that can be easily seen on a small screen.

迎合我们如何握住电话的另一种方式是使用卡来呈现内容。 这些矩形布局易于用拇指使用，因为它们易于点击或滑动。 它们还将内容分解为离散，整洁的部分，可以在小屏幕上轻松查看。

Thumbs are not the most precise of digits for typing and tapping and when you have to do this on a small screen the result is a constant series of errors. Hence why auto-text and autocorrection can be so helpful. When creating a mobile page, therefore, take into consideration how you can make it easier to tap on afield, input information and click on links and buttons without making an error. This includes putting enough room between things so that users don’t accidentally click on the wrong one. How many times do people accidentally ‘like’ things when all they wanted to do is scroll down? 

拇指并不是用于键入和轻敲的最精确的数字，当您必须在小屏幕上执行此操作时，结果将是一连串的错误。 因此，为什么自动文本和自动更正会很有帮助。 因此，在创建移动页面时，请考虑如何使点击区域，输入信息以及单击链接和按钮更容易而不会出错。 这包括在事物之间留出足够的空间，以使用户不会意外单击错误的事物。 当人们只想向下滚动时，人们有多少次意外地“喜欢”事物？

结论 (Conclusion)

With smartphones becoming the predominant way to surf the internet, businesses need to go beyond responsive design to create the truly mobile-friendly sites that both users and search engines are asking for. This means creating sites which are super fast at loading no matter what kind of connection a phone has and designing the layout of the page to take into consideration how a user holds the phone and uses their hands to carry out tasks.

随着智能手机成为上网的主要方式，企业需要超越响应式设计来创建用户和搜索引擎都要求的真正的移动友好型网站。 这意味着创建一个站点，无论电话具有哪种连接，其加载速度都非常快，并且在设计页面布局时要考虑到用户如何握住电话并动手执行任务。

If you are looking for high-performance hosting to help your site load faster on mobile devices, take a look at our VPS packages.

如果您正在寻找高性能的托管服务来帮助您的网站在移动设备上更快地加载，请查看我们的VPS软件包 。

翻译自: https://www.eukhost.com/blog/webhosting/beyond-responsive-website-design-tips-for-mobile/

设计师张超越