网站建设之如何通过移动优先设计优先考虑速度

到今年年底，全球智能手机用户数量有望达到35亿。在过去的12个月中，该数字大幅增长了9.3％。

在每个人都不断地连接到其移动设备的世界中，Web开发人员和设计人员将需要考虑有关如何创建引人入胜的体验的新规则。毕竟，我们大多数人都发现，每天使用智能手机进行浏览比每天坐在笔记本电脑上更加方便。

幸运的是，您已经在采取步骤来优化网站，但是标准一直在变化。为确保您的网站从头开始，请按照以下指南为网站定下优先顺序，以适应新的一年。

了解移动优先设计

更新您的Web设计和开发原则的第一步是了解移动优先设计的概念及其更改方式。

使用响应式网站，您可以创建适合任何设备屏幕尺寸的内容；通过以移动设备为先的网站，您将首先关注人们在移动设备上获得的用户体验，以此为出发点，并以此为基础。与其先在台式机上构建网站，然后再使用移动设备，不如从移动设备开始。

甚至Google最近都通过移动优先索引算法突出了对该过程的需求。如果您不能为移动优先而设计，那么您可能会冒客户无法提升搜索引擎排名的风险。

那么，您如何开始？

1.从正确的工具开始

没有出色的工具包，Web开发人员和设计师将一无所有。

好消息是，这里有解决方案可以帮助您掌握正确的技能，从而获得以移动设备为重点的用户体验。例如，Skeleton非常适合需要流体网格和最少编译的小型项目。

另外，Bootstrap可以为移动设备的前端开发提供一种万能的解决方案。有可用的默认网格系统，大量组件和可使用的JavaScript插件。

使用正确的工具，您可以最小化和优先考虑对您的网站项目最有价值的内容。这对于最大程度地提高网站速度并提高内容和图像的清晰度至关重要。

例如，请访问ESPN网站；它分为非常容易理解的内容类别，非常适合在智能手机上滚动。视频网格使您感觉就像在使用YouTube之类的工具。

网站建设

2.优先考虑移动优先元素

一旦有了合适的工具为您提供帮助，就可以开始从头开始构建移动优先网站。与其直接考虑最新的设计趋势，不如从基础开始。

例如，移动页面内的导航通常隐藏在汉堡按钮下方。但是，您也可以将此概念提升到一个新的水平。例如，Shojin移动网站仅在导航栏中显示了最重要的网站选项，以避免压倒用户。

这里的关键是要使事情尽可能简单，而不限制听众在访问您的网站时可以做什么。尽管您希望将站点上的交互式元素的数量保持在较小的水平，但还需要确保易于查找和使用这些元素。

所有按钮和CTA应清晰可见。字体必须足够大以便可以在任何屏幕上阅读，并且导航系统必须100％简单，且不会降低速度。

平均而言，我们建议使所有可点击元素的高度至少为48像素。

3.使用自适应图像和SVG

图片是任何网站的重要组成部分。它们为您的设计增加了背景并具有吸引力。但是，如果您不小心，它们也会严重降低您的网站速度。

请记住，不同的设备在成像方面有不同的要求。桌面页面可能需要1200像素宽的图像，而仅移动设备的页面最多需要400像素宽的图像。使图像正常工作的旧方法是加载高分辨率图像并在每个平台上使用相同的文件。不幸的是，这大大降低了下载时间。

相反，最好为您的移动和台式机解决方案使用同一图像的至少两个不同版本。您也可以考虑SVG。

SVG具有令人难以置信的可伸缩性-比位图更具扩展性。借助SVG，您可以确保任何图标或图形在所有设备上都能始终保持清晰可见和可点击的状态。由于这些文件通常较小，因此您的网站加载速度也更快！Hubspot非常擅长使用SVG。

网站建设

精美的插图是HubSpot品牌的重要组成部分。如果这些图像另存为PNG或其他替代文件，则将需要很长时间才能加载它们。由于它们都是SVG，因此您可以在台式机和移动设备上享受相同的一致体验。

4.正确排版

在移动优先设计方面，不仅仅是大型图形和图像对您的网站有巨大的影响。您还需要考虑所有设备和平台上网站的可读性和清晰度。如果人们无法理解您要为其设计的公司的价值主张，那么您将面临一个重大问题。

专注于使内容尽可能易于阅读。查看在各种设备上似乎最有吸引力的字体。

请记住，也要根据设备大小平衡正文和标题字体大小。您需要确保在用户滚动浏览每个页面时，体验始终如一且流畅。例如，仅查看IMPACT网站的移动版本。

网站建设

标题并不像网站的桌面版那么大，而是显示在下方，而不是在特色图片上方。但是，这有助于为移动用户提供更直接的醒目和结构化的体验。

甚至包括一个方便的“搜索引擎优化”标签，如果用户想查找更多相关文章，可以单击该标签。

在排版方面，请记住，不仅大小和清晰度很重要，而且整个网站的结构也是如此。您的类型自然应该引导您的访问者浏览页面。

5.掌握可用的设备功能

最后，在智能手机上，您可以完成一系列令人惊奇的事情，而这些事情在使用台式机设备时可能无法完成。您的用户可以在他们的移动浏览器中拨打电话，打开应用程序，发送消息等等。他们还可以利用AR和VR等概念在房间内移动智能手机。

充分利用智能手机设计所提供的独特功能，可以使您有机会获得独特的用户体验。

充分利用移动体验可能比您想象的要简单得多。例如，在桌面站点上，您可以在联系页面上列出您的电话号码。在移动网站上，单击该号码可以发起呼叫。您也可以对电子邮件地址和社交媒体图标采用相同的方法。

根据您的实验方式，移动功能还有很多超越性的机会。您可能决定创建网站的移动应用程序版本，客户可以将其下载到手机上。

另外，您可以研究类似AR技术的事物。这可以让您的用户练习将他们想从在线零售商那里购买的家具放入他们家中，这样他们就可以了解自己与其他室内设计选择的配合程度。

充分利用移动优先设计

最终，在现代世界中必须具有在移动设备和桌面设备上都可以使用的响应式网站。但是，超越移动优先的设计是超越游戏的绝佳方法。

如果您可以专注于建立一个将移动用户的体验放在首位的网站，那么您可以创建一种更有可能吸引观众注意力并提供出色体验的产品。

如果没有其他问题，向客户表明您具有移动设计所需的知识，这是确保您能够获得尽可能多的新项目机会的绝佳方法。