与之实现的内联网响应设计technique enables employees to access all intranet content on any mobile device or computer. A responsive-design intranet (or public-facing website) has only one codebase but typically has different user experiences for desktop and smaller-screen mobile displays, perhaps a third UX for tablets, and possibly even more user experiences for other devices and screen sizes. Since designers are able to choose how and where the content and features should appear on each device, a responsive intranet can create the best possible UX for employees no matter which device they are using.

这意味着intrane responsive-design方法t designers should:

  • research the relative importance of particular features and content to users and the organization
  • present and position that content to reflect the determined priorities.


我重新访问了我们赢取了我们赢取的Intranet设计团队的两个成员的内容优先级选择选择Intranet设计年度2014年ABT Associates.riptiC.。这些组织的内联网非常不同:第一个支持来自世界各地的数千个用户,而第二个支持大约有20名员工的员工。他们所拥有的共同之处是他们都是在内部网上使用响应设计的优秀例子



ABT Associates是一家全球研究公司,萨姆剑桥,但员工驻扎在全球各地,在该领域很多。在ABT切换到响应设计Intranet之前(名为“AGI”,它代表“ABT全球Intranet”)超过一半的公司员工(在没有可靠的Internet访问的发展中国家工作)无法访问Intranet。该组织决定重新设计,以便在任何地方为员工全球协作。自从部署他们的响应设计Intranet以来,Abt Associates Intranet团队recommends responsive design to other organizations that have staff around the world。They also recommend that rendering on mobile devices be a “first thought” not an “after thought.”



  • Most employees are exposed to it when they launch their browser.

  • 它为每个人提供了重要的内容。

  • 它充当了Intranet资源的其余资源的网关。

  • It can also direct employees to content that embodies the organization’s goals and culture.

Abt Associates的文化价值观包括思想of learning and that all employees around the world are important to the organization. The team wanted AGI to become a regular part of work life at Abt, not just a standalone resource, so the homepage had to offer staff the kind of content and functionality that would change how they work. Toward that goal, designers carefully prioritized and allocated space on the homepage to accommodate the categories of information sharing and learning, tools, and corporate information.

On the mobile homepage, designers highlighted theToday I Learned员工分享他们在全球各地的工作人员分享他们的见解,创新和成功案例的部分。设计师制作了这一点priority content when viewed on mobileby doing the following:

  • positioning it在第一个屏幕上(“折叠以上”)
  • 默认情况下显示部分中的所有内容没有任何卷轴
  • allocating it alarge proportion主页。


The entireToday I Learned部分在折叠上方的手机上出现,而无需任何滚动。

马上在下面Today I Learned部分,设计师放置了Activity Feed部分。此展示位置也支持One Global Abt学习文化在主页上。内容Activity Feed为登录的员工个性化,基于他的特定角色和位置。该部分包括ABT社交媒体职位和活动的自定义新闻源,在Intranet上,员工在AGI方面的活动以及AGI工作区的活动(专家可以共享方法并创建即时讨论),用户是一个成员。

As important as it is for employees to share information and learn directly from each other, company messaging and news are equally key. Designers positioned the新闻部分下面Activity Feed。这个可见的新闻部还强化了ABT的学习和信息共享文化。

A curated feed of need-to-know events—such as conferences and happenings—are sorted by date and link to a larger list. High-level events are featured in theABT事件新闻部分以下的区域。

下一个出现了CEO Cornersection where the President and CEO, Kathleen Flanagan, shares her personal perspectives about business, innovation and culture with staff. Stories in this section link to Flanagan’s blog and other pages.


Abt Associates的Intranet设计师优先考虑移动主页以反映其不同用户的常见需求。设计师指出,花时间为他们在整个项目中偿还的用户彻底了解,以及他们在移动显示器中的信息的优先级得到了极大的帮助,这是通过这种理解得到帮助。

The full Abt intranet homepage viewed on a smart phone shows


Comparing the homepage wireframes for phone and desktop shows that more is visible above the fold on desktop, but that the key features mentioned above are in prominent, visible positions when accessed on either device.

手机上的ABT Intranet主页的线框


Wireframe of the Abt Intranet homepage on desktop

The wireframe of the homepage on desktop demonstrates good use of the ample screen real estate.


ABT Associates.practiced a “mobile-first” mentality, with the specific goal of servicing staff stationed around the world that access AGI via mobile devices. The mobile presentation of AGI is optimized and selective to allow for a faster page load on devices. Although the mobile implementation is lighter, employees can still access everything they want via the homepage and menus.

AGI菜单使员工随时随地随时随地进行商业交易。例如,两个菜单Menu快速链接出现在移动主页的顶部;Menutakes users to key sections of the site, including新闻,项目,Proposals,和工具和资源; while快速链接lead to timesheets, the staff directory, forms, and search. Enabling staff to easily and quickly execute employee searches or transactions like timesheets from any device is a significant business benefit provided by the mobile AGI.


Don’t Downgrade the Design for One Device Just to Achieve Consistency Between Devices

The topic of designing menus for aresponsive intranet是从另一个获胜组织中迈进一个例子的好时机:riptiC.是来自荷兰埃因霍温的技术娴熟的在线通信机构。晶间Intranet设计师希望确保员工可以随时随地与Intranet(名为“Iris”)进行通信和检索信息。

Triptic’s responsive intranet displays its mobile navigation in a drop-down menu, accessible via a “hamburger” icon (an icon depicting three horizontal lines.) The menu is always available but takes little space on the small viewport on smartphones. A red rectangle overlaying the menu icon displays the employee’s number of notifications (updates, reactions, posts, and mentions;) because of this helpful status display, users can get information without clicking at all.


the menu on a smart phone is collapsed in an icon

The menu is collapsed in a “hamburger” icon, so takes up little space on the phone.

Desktops afford much more horizontal space than mobile phones, so the desktop menu is not collapsed under one icon. Rather, the topics are spread horizontally in a global-navigation bar. This flatter hierarchy displays more menu choices by default, which is why we recommend reserving a hamburger-style menu icon for mobile versions andretaining full global navigation in the desktop versionof a responsive design.

桌面上的riptic Intranet的菜单显示了第一级层次结构命令



不仅是晶状体的内联网使用设备适当的导航模式, but it also调整内容以容纳不同的设备。一个例子是riptic eviciente人如何为客户的设计项目传达他们的敏捷过程信息。设计师确定使用Scrum Burndown图表时,移动用户主要在寻找更新。因此,虹膜提供了一个非常适度的图表。极简主义不仅可以轻松地将图表的内容区分开在小视图端口,而且“亮度”(较少的细节)意味着数据较少downloads faster员工。

Shows basically just the scum burdndown chart on the related page on mobile

Minimal information displays on mobile so users can get a quick update at a glance, in this example, of the scrum burndown chart for a client project.

On a tablet, employees can view a more detailed version of the chart, which includes categorizations of the hours. Menus are also expanded on tablet, and available on the right side of pages. (In general, usability is enhanced byusing a third design for tabletsbecause this platform is different than mobile phones and desktop computers.)


Viewing on a tablet displays the chart, a project menu above it (circled in red in this image,) and navigation on the top and right.

The chart view on desktop is similar to the tablet one, except that the project-selection menu is expanded and visible as a list in the left rail, as opposed to a collapsed drop-down list above the chart.


The desktop view displays the chart, project links on the left, and navigation on the top and right.



Designers chose to skip displaying additional background information about a person in the mobile view. Instead, this design version simply directs attention to the details that most employees are looking for in the moment: whether the person is available, and what his phone number is.





内联网不必在响应设计竞技场后面延迟。从晶片和ABT Associates那样从诸如那些这样的大响应内网上提示,并遵循以下准则:

  1. 确定您的员工如何在移动设备上访问Intranet。
  2. Represent your organization’s goals and culture on the intranet homepage, in both mobile and desktop versions.
  3. 了解您的员工的任务和设备使用,并使用此信息以优先级功能。
  4. Place key applications and features in the global navigation where they can be quickly accessed.
  5. Don’t downgrade the design for one device just to achieve uniformity between devices. (While交叉设备一致性很重要,这并不意味着用户体验应该在任何地方相同。)
  6. Boldly arrange content based on the device.

For more information about the UX decisions for responsive design attend ourScaling User Interfaces full-day training course


I would like to extend my sincere gratitude to Arthur Turksma, Jos Rouw, and Willem van Berlo at triptic; Rob Grimmett and Mary Maguire at Abt Associates; and Glen Chambers at BrightStarr for sharing their insights and additional examples of their winning intranets for this article.