IE9网站模式技术白皮书

  • Article

IE9固定网站简介

简单来说，就是通过几行HTML代码(<meta>标签)，将网站应用访问方式提升为Windows客户端应用访问方式，增强用户体验，提升网站品牌标识度，并大幅提高用户使用粘性。

image实现代码示例：

<meta name="msapplication-task" content="name=我要付款;action-uri=https://abc.com/;icon-uri=https://imgabc.com/abc.ico " />

image

 

为什么使用固定网站？

1. 全面提升用户使用体验。 通过整合用户体验，用户可以通过鼠标a.左键快速打开网站b.右键弹出网站应用跳转列表c.获得网站更新通知提示

image

2. 提升网站品牌标识度。 IE9可实现让站点变成Windows 7的一个应用程序固定在任务栏，用户可快速通过任务栏图标快速访问目标站点。锁定的站点会具备统一颜色的IE9界面，进一步增强网站品牌形象。

image

3. 大幅提高网站访问及用户停留时间。 通过IE9网站模式，用户对网站的访问频率及单用户停留时间显著增加，页面跳出率明显降低。

a. hi5(https://hi5.com) 社交网站。通过网站分析显示，IE9网站模式用户，访问页面数量(discoverability) +15% ，用户活动信息(new friends, game invites, messages)请求 +200%

b. Flixster(https://www.flixster.com/) 电影社交网站。通过网站分析显示，IE9网站模式用户相比其它浏览器用户，页面访问(PV) +34% ，平均停留时间 +57%

c. Business Insider(https://www.businessinsider.com/) 商业评论类网站。通过网站分析显示，IE9网站模式用户相比其它浏览器用户，页面访问(PV) +95% ，平均停留时间 +57%

d. Huffington Post(https://www.huffingtonpost.com/) 新闻类网站。通过网站分析显示，IE9网站模式用户相比其它浏览器用户，页面访问(PV) +11% ，跳出率(bounce rate) -14% ，平均停留时间 +49%

 

实现方法代码示例

1. 高清图标引用

IE9全面支持64X64的高清图标显示，通过引用高清图标，最终用户将获得和应用程序一致的快速启动图标标识。美团网使用高清图标前后对比：

imageimage

引用高清图标代码示例：
<link rel="icon" href="/favicon.ico?v=3" type="image/x-icon" />

高清图标在线制作及预览工具X-icon Editor https://www.xiconeditor.com/

2. 实现快速跳转列表

通过IE9实现快速跳转列表，最终用户可以快速访问网站相关频道，获取相关资讯。

快速跳转列表实现代码示例及各字段含义：

<meta name="msapplication-task" content="name=ABC;action-uri=https://abc.com/;icon-uri=https://imgabc.com/abc.ico" />

3. 自定义图标覆盖

覆盖图标是一个小型的 16x16 像素的图形，它显示在任务栏按钮图标的顶部。通过自定义图标覆盖可以提示用户注意网站更新信息。

例如：新浪微博使用网站模式，通过自定义图标覆盖提示有新微博通知。

image

显示自定义覆盖图标代码示例：

window.external.msSiteModeSetIconOverlay('https://host/images/overlay1.ico', 'Overlay 1');

移除自定义覆盖图标代码示例：

window.external.msSiteModeClearIconOverlay();