营销为AEC.

Courtenay Adams. 张贴了 Courtenay Adams. on January 22, 2019

五个AEC公司网站完全移动响应

五个AEC公司网站完全移动响应

需要一些移动设计灵感吗?以下是五个架构,工程和建筑公司网站,在所有设备上看起来令人惊叹

2018年移动网络使用情况统计出来了,并且—surprise surprise—they’re up again: Over Web流量的50% 现在通过移动运行。当你认为五年前,它在徘徊在15%以上时,这个数字是疯狂的。

在efelle,移动响应率一直是我们的“default mode”多年。我们还喜欢与建筑,工程和建筑(AEC)行业的客户合作。仅在2018年,我们推出了超过15个网站设计和开发项目,为在这些行业运营的公司。

我们为所有网站提供了大量的移动友好的事情,并且在很多情况下,我们超越基本最佳实践。下面列出的五个AEC项目适合在这个营地,所以为了您的移动灵感快乐,我们’ve列出了几个细节,描述了为什么这些网站是如此移动 - 真棒。

安德森建筑

efelle-blog-aec-mobile-1-anderson.jpg

  • 大文。 在桌面和移动相似的网站上的文本尺寸完美。它’像字体选择的金发姑娘一样:占据整个屏幕不是那么大,而不是那么小’在较小的设备上无法读取。 网络可访问性 书呆子会自豪。
  • 易于使用的滑块。 本网站上的图像和文本内容滑块充分配备大箭头,用户可以在浏览时轻松单击或触摸—因为我们知道那里’没有比联系的对象更令人沮丧’S这么小,它需要完美的拇指垫精度来激活。
  • 嵌套菜单项。 We don’T通常建议加载带有大量嵌套物品的导航菜单(这些通常以形式显示出来“drop-down”在桌面上查看网站时的物品),但安德森建设向我们带来了很多内容到杂乱—特别是他们的投资组合。在汉堡菜单中使用井大小箭头可以在移动上探索的嵌套菜单项,使得导航到站点的所有区域CNCH。

协同作用 Construction

efelle-blog-aec-mobile-2-synergy.jpg

  • 滚动动画。 通常,使网站从桌面上脱颖而出的功能’T缩小到移动设置。这是一个’与协同作用的情况—特别是与他们的主页有关。从Masthead区域的移动像素网格到灰色内容块边框“draw themselves”在滚动到页面底部的自计统计信息,无论设备如何,都没有牺牲或页面负载速度。
  • 易于操作的画廊。 We’re not going to lie—Synergy’桌面上的S组件页面非常甜蜜。它们在滚动上交换图像,具有可扩展/可收缩的信息文本块,以及更多。但他们也看起来很漂亮。特定于移动的布局给图像库和内容区域都足够有效地在自己的权利中有效。放置良好的箭头通过项目画廊翻转微风和下方 - Masthead导航选项使其简单地在不同的项目之间切换或返回投资组合概述页面。
  • 一个巧妙缩放的时间轴。 Synergy赢得了奖项和认可—足以让他们献给他们“Awards”页。在桌面上,协同作用’S令人印象深刻的奖励时间表占据屏幕的全宽。在移动设备上,由于智能设计和开发选择,它会缩放精美:“active”内容呈现在仅其他两个日期(而不是几个)之间(而不是几个),在子弹点列表区域下方的图像堆栈,并且用户具有大型的蓝色箭头可用于在日期之间切换,所有这些都可以最大限度地提高可视内容,同时最小化a内的可视杂乱单视口。

韦弗建筑师

efelle-blog-aec-mobile-3-weaver.jpg

  • 可见信息块。 并非桌面上的所有功能都带到移动设备。悬停效应尤其如此。我们设计并开发了Weaver站点,以便在桌面上悬停在桌面上出现的项目列表信息 默认,在移动设备上可见。更好的是,内容并未’t just stack—移动视图具有一些这些元素略微重叠,为设计添加了视觉兴趣和UI友好的信息线索。
  • 缩放内容。 虽然是桌面和移动版本的织布工’S网站从相同的内容池中绘制,移动版Weaver’S站点智能地减少了一些内容,在它有益于该网站。例如,桌面上的主导航菜单配有图形元素和图像。鉴于在移动设备上的简单性和页面加载速度的重要性,当从较小的设备查看网站时,这些图像不存在,而是用干净,简单的汉堡菜单替换,既具有吸引力,又称。同样地,主页上的博客部分仅具有单个帖子而不是三个,其中链接到特色帖子下方可用的更多内容。该决策允许主页上的博客空间保持不变在单个屏幕的大小范围内,并且不需要过多的滚动。
  • 项目过滤选项。 虽然它有时会在某些地区缩减移动设备上的内容,但它’重要的是做什么’在尊重用户体验的同时,在设备上保持某些功能的必要性。在移动设备上,织布窗项目概述页面保留了桌面站点上的过滤选项,堆叠下拉菜单选项并适当地调整它们’易于使用而不占用整个屏幕。

门户网关 Construction Services

efelle-blog-aec-mobile-4-gateway.jpg

  • 高对比度和空白的使用。 Gateway’初级品牌颜色是红色和深灰色,两者都突出了鲜明的白色背景。这种并置在整个网关网站上,使用户能够轻松阅读内容’在移动或桌面上浏览;鉴于信息的金额与访问者分享,这种设计选择尤其重要。
  • 有吸引力的Sans-Serif字体。 与高对比度的颜色一样,SAN-Serif字体可以在较小的数字设备上更轻松地阅读。设计选择,如这些确保网站’S用户体验在智能手机上强大,因为它在笔记本电脑上。
  • 可下载的项目PDFS。 为用户提供在PDF表单中查看其项目的机会,以网关’S Web产品进一步一步:用户可以将这些PDF下载到他们的智能手机上以享受’脱机,删除设备和连接障碍。考虑到许多门户尤其重要’S网站用户可能会在远程作业站点找到,其中发生连接问题的可能性更高(与平均办公室设置相比)。

Barghausen. Consulting Engineers

efelle-blog-aec-mobile-5-barghausen.jpg

  • 动画功能。 Barghausen’由于仔细保留了一些关键动画效果,因此移动主页与桌面版本一样抢劫。一个,“self-typing”Masthead中的文本功能在全屏幕上的较小框架内也可以在较小的框架内。
  • 上面折叠自滚动按钮。 Barghausen网站功能的几个主题“self-scroll”用户可以激活的桅顶区域中的按钮,以便进一步向内进入锚定点。桌面上有一个有吸引力的功能,这对智能手机更有用,因为移动用户不’T始终具有全方位的运动,拇指滚动;在某些情况下,攻丝比滑动更容易,以便在您想要去的地方。
  • 金发姑娘的内容块。 返回设计元素的概念“just the right size,”Barghausen的手机造型’s site doesn’只需堆栈内容并调用一天—it’s唯一的开发,使得整个站点中的许多内容部分填充了视口,只有没有溢出的视口。例如,在查看主页时’S Projects块在移动设备上,您可以看到项目图像的顶部,介绍项目副本,滑块按钮导航到其他项目, the “View Portfolio”CTA都在一个空间中—其他部分没有可视杂乱,一切都可以访问。这有助于将用户焦点并提供清晰的视觉线索,如在哪里’re at in the page’S叙述(页脚菜单是完整视口内容块的另一个优秀示例)。

想要改进您的网站’移动响应值?你’走到正确的地方

在efelle creative,我们’自2005年以来一直在设计和开发网站。我们有手指对最新的网络趋势的脉搏,并认识到跟上Joneses的重要性—不仅仅是来自美学的立场,而且来自SEO和功能的角度。您的网站应该良好,加载很快,很容易找到和乐趣遍布所有设备。如果你觉得你’由于移动响应差,我们可以帮助解决领先优势。今天打电话给我们 206.384.4909 或伸手 我们的在线联系表格.