在短短几年中,“响应”已经从一个时髦词网站设计的行业标准,而且有很好的理由。响应设计提供了显著的优势,超过传统设计,允许搜索引擎优化改进流线型的发展,当然,在不同的设备更好的用户体验。
为什么你的网站需要响应
谷歌的目标之一是提供一个更好的用户体验的所有人搜索他们的移动设备上。把你上次访问一个网站在你的手机上,想点击一个按钮来浏览但打错了。然后你必须点击返回键和放大来点击正确的链接,只有再次错过,点击旁边的人。超级令人沮丧的,对吧?
因此,几年前,谷歌推出了智能手机和平板电脑上的变化,改变搜索结果,试图改变网页设计的最佳实践,包括移动显示和可用性。作为回应,许多企业设计他们的网站查看响应能力在不同大小的平板电脑和手机。
今天比以往任何时候都更,B2B用户期望他们做生意的公司提供相同的数字体验他们店的个人网站如亚马逊和沃尔玛——它的直接向消费者销售的转变和你的网站需要响应的另外一个原因。
帮助制造商和工业企业吸引更多买家,工程师,采购经理在线我们分解反应的基础设计和提供一些证明的最佳实践。
1。关注的内容
内容与网站设计什么?一大堆。
当潜在客户访问您的网站,他们不是寻找一个漂亮的旗帜或伟大的图形;他们正在寻找您提供的内容。
确保你所有的有价值的内容很容易找到,即使屏幕空间是有限的。为此,确保内容的标题和内容本身是可见的在移动设备上而不需要滚动。(你有一些回旋余地更大的屏幕上,但不要滥用)。
记住用户真正寻找-强大的内容帮助他们完成他们的工作,很容易找到和导航一样简单。
2。了解媒体查询
响应的支柱设计是能够转变和格式内容取决于屏幕的大小。从技术角度讲,这就是所谓的“媒体查询。”
这个术语从“媒体类型”,这是一个样式表,决定了块内容是如何在不同的物理介质,如屏幕,纸,或盲文设备。
媒体查询类似的工作。然而,而不是检测物理介质的类型,媒体查询检测屏幕的大小。网站然后决定渲染特定的样式表的特定的屏幕大小。
当考虑一个网站设计,请记住,你不想限制你的网站只是三个大小——桌面,平板电脑和手机。相反,你会希望你的网站规模适当的屏幕大小,不管他们的维度。这就是一个媒体查询完成。
3所示。“手机第一”的心态
当设计一个响应网站,开始移动样式作为基础,还可以添加更多的列和风格与媒体查询。这样,如果有人落在你的网站使用设备或浏览器不支持媒体查询,他们将能够看到网站的移动版本。
这被认为是最佳实践是有原因的:
- “手机第一”的设计可以帮助你专注于真正重要的和占有限的屏幕空间和有限的注意力。也许这随机一辆卡车在公路上的形象并不是必要的。
- “手机第一”的设计有助于拓宽你的设备不支持媒体查询。
学习波纹金属反应网站更新后就增加了285%
4所示。创建一个灵活的基础
你熟悉宽度和流体网格?两者之间最大的区别是他们网站上计算元素的宽度。
- 由像素宽度的网格计算元素的大小。
- 流体网格计算元素的大小的百分比。
与响应设计你的主要目标之一是确保你的图像不超过集装箱的宽度,他们保持符合流体网格。(你可能会遇到网站,声称自己是积极,但是如果你看到一个水平滚动条,他们不是。刚性图像是最有可能的罪魁祸首。
在早期的响应网页设计,开发人员将使用流行的屏幕尺寸,相应调整设置宽度。这并不工作了——除非你计划来调整你的网站的宽度无数类型的设备和电脑(和成百上千的其他人,每个月发布)。添加代码将迫使页面到屏幕的大小可用,这意味着文本将包装,不会出现水平滚动条。
5。不要忽略导航
导航是一个网站最重要的资产之一。不幸的是,它也是一个最“响应网站”出错。不要掉入这个陷阱!
你不想让你的导航菜单的重要内容,但你也要确保访问者很容易导航,不管他们使用的是什么设备。所以,你需要平衡,使你的网站尽可能直观的导航没有阻碍。
最佳实践的隐藏导航菜单在较小的屏幕上,同时允许游客在必要时访问它。这是完成的“汉堡图标”,已成为普遍象征的导航。访问者了解时,他们将看到完整的导航菜单点击这个图标。看到bret、OEM纸转换设备,设计他们的导航下面反应——另外,更多的网站设计例子。
你会很容易想要阅读你的文本在所有设备。字体大小,有一些网站设计建议。默认大小是16 px至少12 px。行高,谷歌的材料风格指南建议1.5行高。
6。优化你的资产
我们不能强调足够确保你所有的重要性内容——图片、视频、pdf等。-完全针对所有屏幕和设备进行了优化。拥有大型资产可能花太多时间负载是游客反弹来自网站的首要原因。
托马斯小费!我们提供免费的视频制作服务一个广告计划,我们将确保它的优化你的网站和在线渠道了解更多。
今天的更新的技术能力使工程师能够在网上找到并建立他们所需要的部分,下载一个3 d模型,它直接插入他们的设计,并立即评估其健康。不要让你的客户等着下载6-megabyte产品形象当一个300 kb版本会做和花费少得多的时间。他们在你的网站,因为他们有工作来完成——不要让缓慢的加载时间是为什么他们继续一个竞争对手。同时,请记住,许多移动游客有有限的数据计划,你不想麻烦他们(以及他们的预算),提供超大号的文件。
您可能还感兴趣:CAD模型驱动铅一代如何
7所示。让你的网站”网站“
浏览的人越来越频繁地在移动设备上,他们牺牲的准确性鼠标使用手指或手写笔为方便。
因此,每一个网站的互动元素链接、按钮、cta、等等。——需要”网站。“用一个适当的大小按钮的高度。我们建议至少10毫米。你足够大的目标,和足够的流动性使浏览你的网站尽可能无缝的和容易。
8。选择正确的内容管理系统(CMS)
自从“响应设计”进入营销词汇,公司不断推出新的响应CMS平台速度似乎不间断。
虽然这些新CMS的发行可能有一些诱人的特性,我们不推荐他们,因为这些公司如雨后春笋一样迅速,他们还可以关闭。
确保你与拥有大量观众的一个灵活的、信誉好的CMS和良好的开发人员。这将确保你的网站得到了支持它需要几年。考虑一个强大的平台WordPress提供移动模板供你选择。
趋势:爱游戏ayx电竞
9。投资于测试工具
仅仅因为你的反应网站看起来伟大在你的电脑和智能手机并不意味着其他人将有相同的经验。
你需要保持手头的工具,以确保你的网站准备好每个人,无处不在。你可能已经预览,您构建的能力,但是为什么不测试,以确保你在其他地方?的关键一个成功的网站,可以帮助你得到更多的业务是定期更新和测试你的努力。
了解更多:A / B测试例子的制造商
外包您的网站设计
你可以支付它,但你的网站并不适合你。这是对你的前景和客户了解贵公司的全部价值和质量。买家是否发现你的网站从网上搜索或者在采购Thomasnet.com,他们应该被接纳的优化,高质量的网站。
在托马斯制造公司档案网络让工程师和采购经理与合适的供应商合作快。
以下九个步骤不会让你一夜之间设计专家,但他们将指导您创建一个面向内容,用户友好,反应和优化网站,帮助您的买家完成他们的工作。
在响应网站上如果你有任何问题,或者对数字营销的建议感兴趣,感到自由联系我们的团队的工程师,技术作家和网络战略家们帮助你的网站设计。我们将建立基于内容和设计你的网站角色你想做生意你希望你的客户和经验。,问我们关于我们的自由数字健康检查让你知道如何提高你的网站如何与竞争对手。
更多网站设计参考资料,请查看:
- 10个步骤清单开始你的网站设计
- 9最佳工业网站的例子
- 制造商:我为什么要更新一个响应网站
- 25个网站必备生成线索
- 经销商、OEM和工业公司网站设计的例子
- 网站基本制造企业
- 如何销售工业产品在B2C的世界
行业网站资源更多的灵感:
你找到这个有用吗?
