新媒体环境下政务网站的重构

张　雷　　熊　贲　　李佐斌(.长江水利委员会 宣传与出版中心 ，湖北 武汉　43000；.长江水利委员会 网络与信息中心，湖北 武汉　43000)



运行与管理

新媒体环境下政务网站的重构

张雷1熊贲2李佐斌2(1.长江水利委员会 宣传与出版中心 ，湖北 武汉430010；2.长江水利委员会 网络与信息中心，湖北 武汉430010)

摘要：为了适应政务网站移动互联网Web设计需求，以长江水利网为例，描述了该政务网站现有的架构特点以及重构的策略，提出了响应式Web设计的观点，为实现"一源多屏"Web设计提供了网站重构的方案。可为移动互联网设计和重构提供技术框架和思路。

关键词：响应式；HTML5; CSS3；Web 设计; 政务网站

1问题的提出

新媒体是新技术支撑体系下出现的媒体形态，如数字杂志、数字报纸、数字广播、手机微信、移动电视、桌面视窗、触摸媒体等。新媒体首先必须有革新，包括技术革新、形式革新和理念革新。笔者认为理念革新更为重要，因为它是新媒体定义的核心内容，具有“数字技术、互联网技术、移动通信技术”的技术维度和“双向传播、用户创造内容”的传播维度两个指标。

我国政务网站都具有普遍共性，本文试以长江水利委员会(以下简称长江委)政务网站为例，针对这类网站存在的问题，在理念革新的前提下，通过HTML5+CSS3技术手段，使用响应式网页设计重构政务网站，努力从架构设计上最大程度地解决其存在的问题。

2政务网站架构现状

2.1　网站主体架构

长江水利网作为长江委的主体网站，以快速反映长江流域水事新闻、委内日常行政管理工作为己任。网站内容由新闻中心、政务之窗、在线服务、互动平台组成，技术架构以Linux平台下Nginx提供Web服务，网页设计采用内容与样式分离的方式(DIV+CSS)的方式，系统已安全运行多年。TRS WCM提供内容管理平台，以提供信息服务为主，部分互动功能还有待完善，没有真正意义上移动互联网应用，不能满足新媒体应用的要求。然而通过改造可以很容易地过度到高性能的HTML5，与具有媒体感知能力的CSS3(Cascading StyleSheet)巧妙结合，重构具有媒体感知能力的水利政务网站。

2.2　主站嵌套网站

2006年12月长江委为提高公共服务能力和事权管理效能，构建行为规范、运转协调、公开透明、廉洁高效的流域水行政管理体制，按照中办、国办以及水利部《关于进一步推行政务公开的意见》的要求和部署，开通了“长江委政务公开网”。网站开通以来一直使用IP地址加端口的方式对外提供服务，不便于基于域名管理的搜索引擎收录，致使新闻信息大多引用长江水利网的稿件、界面风格样式多年未更新，内容样式混合不清等。为满足政务网站测评的要求，将网上办事功能及公开目录以嵌套的方式在长江水利网上呈现。此外，采用嵌套方式的还有长江委水文局的实时水雨情信息等。此类嵌套网页外链后会影响用户体验，降低对长江水利网的综合评价。

2.3　微信公众号链接

2014年7月，长江水利网开通了微信公众号“美丽长江”。坚持每日一期图文并茂的微信推送，以关注长江的生态与建设，为公众提供更生动更贴近更精彩的长江新闻资讯，致力于打造一个互动性更强的交流沟通平台。目前粉丝数量超过1 000。

同时，在该网策划的多期专题中都对微信公众号进行了宣传。在2014年举办的“寻找最美一线职工”网上投票活动中，实现了桌面与移动互动投票，职工反响很好。美中不足的是微信与该网网页的链接效果不理想，需要手机用户不断拖拽网页或者缩放大小，才能正常显示。为此，本文致力于研究响应式网页设计重构政务网站的建设。

3政务网站的重构策略

3.1　门户网站与部门网站职能划分

首先，规范各类政府网站的界定与分工，分别建设以信息服务和以网上办事为主的政府网站；其次，信息服务类网站应尽可能由较高级别政府部门建设，并整合所有下属机关和下级政府机关的信息；最后，网上办事类网站由具有一定行政管理职能或相关专业背景的部门或单位建设[1-2]。

按照国办发〔2015〕15号文的要求，关闭长江委机关所有的部门网站，所有稿件统一由长江委宣传出版中心负责内容管理。通过一系列专业的采编审流程，强化长江水利网的权威、规范、有序的信息服务，发挥网络宣传阵地优势，为治江事业营造更好的舆论氛围。网上办事类依托原政务公开网有关行政许可及网上办事功能板块，归并原来重复建设的信息服务板块，机关各职能部门可以集中精力为政务公开提供更好的在线服务。

3.2　移动优先重构政务网站

根据CNNIC第36次互联网络发展状况调查结果，截止2015年6月，中国手机网民的总规模达5.94亿，较2014年12月增加了3 679万人，其中使用手机上网的人群占比由 2014年12月的85.8%提升至88.9%，农村地区新增网民中，使用手机上网的达69.2%，而且在未来数年，手机上网依然是带动农村地区网民增长的主要动力。通过台式电脑、笔记本电脑和平板电脑接入互联网的比例均有下降。随着手机终端大屏化及其应用体验的不断提升，手机作为网民主要上网终端的趋势进一步明显[3]。

3.3　一站式融合重构网站数据库

对政府网站的相关评估调查表明，我国政府网站中有48%尚未提供搜索服务或者搜索功能不可用，47%网站的站内搜索只能够搜到有关工作会议的相关动态信息，只有5%的网站能够在搜索结果的前几页查找到相关办事服务资源[4-5]。第一次全国政府网站普查发现，一些网站便捷性、实用性亟待提升。部分网站没有提供规范清晰的服务流程，缺少可供下载的必要表格和文件，不能提供实用有效的申报、查询等办事服务；14.7%的网站互动功能缺失，政府与公众交流缺少有效途径；还有一些网站结构混乱、页面繁多、不便使用，给公众查找政府信息、网上办事带来较大困难[6]。

上述问题与现有政务网站架构存在的问题有关，从头梳理需要很长的周期和大量的投入，而依托先进的政务网站管理平台整合迁移相关数据库是解决问题的途径之一，也可分步实施将嵌入的功能站点相关内容在现有内容管理平台上作标题链接引用，这样在本站标题检索中可以很容易查询到相关内容；为便于必要表格和文件下载，在保证及时更新的前提下，转载原文到主站。

利用HTML5跨系统跨平台的特性，在被引用嵌套网页增加主站统一规范的CSS3样式表，为响应式设计打下基础。这类方案投入少、见效快，有的仅需负责前端开发的工程师配合即可，如果将来系统迁移，仅对样式表这部分代码作少量修改还可以重复使用。政务服务功能分类检索项目内容可控，基本上可快速融合具有引导功能的政务服务信息到主站数据库，便于搜索引擎收录以及本站集中检索。

4响应式设计技术

响应式网页设计最先由伊桑·马科特(Ethan Marcotte)提出。他将3种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来，并命名为响应式网页设计。该术语还有一堆表意相同的其他名称，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计[5]。

响应式网页设计(后节描述概念)要求优先考虑手机移动网页，这种“移动优先”思想很适宜采纳最简洁、最有效和最具语义的代码。在响应式Web布局设计时，媒体查询顺序为从移动端向上设计，优先建立移动设备用户体验，然后针对更大屏幕显示器进行调整，以避免移动终端对媒体查询的支持不完善，即在样式表的开头定义基本样式，然后使用媒体查询，从低分辨率到高分辨率来重写样式，以覆盖前面定义的样式。

本文描述的响应式设计是基于HTML5丰富语义的网页标签组织网页，应用CSS3媒体查询功能配合一组不同分辨率的样式表，使网页感知不同媒体(判断是移动终端还是桌面终端)的分辨率，作出相应合理的布局调整。

何军：是的，尤其是阿里旗下的菜鸟一直在这方面进行运作，包括今年的参股香港枢纽建设等等。深层次的原因我不愿意进行过度的解读，但是我想说的是阿里很明白物流对于阿里未来发展的意义，尤其是大物流概念，包括同城配送、外卖市场、供应链等。包括阿里打造国家智能物流骨干网络的提法，都表示了阿里对物流领域的高度看中，以及深度参与的决心。阿里的很多并购逻辑都是由此而展开。

4.1　HTML5

HTML5即万维网的核心语言，是标准通用标记语言下的一个应用超文本标记语言(HTML)的第5次重大修改。2014年10月29日，该标准规范终于制定完成。

在创建可以通过W3C标准验证的页面时，HTML5强调简化标签，仅链接必须的图片文件。智能手机用户也只能使用有限的带宽访问页面。而响应式设计的一个主要目标就是，网站不仅要对用户有限的视窗作出响应，还要以最快的速度加载网页。

较之上一个版本HTML(HTML 4.0.1)，HTML5 进行了很大的改进，提供了许多新特性。HTML5含义丰富的新语义更利于搜索引擎收录，也可以在表单提交等基本网页交互场景中对用户做出反馈，一般不再需要复杂的JavaScript表单处理流程，可为响应式设计创建更加简洁和快速的代码。

4.2　CSS3

CSS即层叠样式表，在网页制作时采用层叠样式表技术可有效实现对页面的布局、字体、颜色、背景和其他效果更加精确的控制。只要对相应代码做一些简单修改，就可以改变同一页面的不同部分，或者页数不同网页的外观和格式。CSS3是CSS技术的升级版本，其语言开发为模块化。以前的规范作为一个模块确实太庞大且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来，包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

前端工程师可使用响应式前端开发框架，简化开发过程，确保开发网站具有跨浏览器、一致性、响应式等特点。如果需要一种快速搭建响应式网站结构的方法，可以考虑响应式前端开发框架(如Columnal 这样的CSS 网格系统)。笔者不建议使用该框架，熟练掌握CSS3语法，使用起来将更灵活自由。

4.3　至关重要的媒体查询

如果没有CSS3媒体查询模块，就不能针对设备特性(如视窗宽度)设置特定的CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性条件表达式组成，它是根据媒体类型、屏幕宽度、屏幕比例、设备方向(横向或纵向)等各种功能特性来改变页面布局。使用媒体查询可以在不改变页面内容的情况下，为特定输出设备定制显示效果。

媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成，可以将其想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答“否”，则不应用样式。相对于CSS2，媒体查询可能要问更多问题。

5网站重构几个关键点

5.1　依可访问性选择界面布局与元素

从用户的角度入手，从社会心理学层面对政府网站的可访问性进行研究探讨。通过对30个国内重点省市政府网站以及20个较常见的国外国家级和市级政府网站的网站界面布局与元素的放置位置进行调研及统计分析，概括出在政府网站中采用最多的4种界面布局和常见的5种网站界面元素，及其在4种界面布局中可能的分布位置。通过偏好调研及分析，给出了最佳网站界面布局与界面元素放置位置组合方案(见图1)，可为政府网站的优化设计提供参考[7]。

图1　网站界面布局与界面元素放置位置组合方案

长江水利网现有布局表现为分类目录不在首页呈现，容易使用户迷惑；搜索引擎位置不规范，不便于移动界面设计搜索引擎位置漂移，因此需要将“信息搜索框”提到上部较醒目的位置，将“分类目录”移到左侧比较醒目的位置。

5.2　从移动端网页设计开始思考桌面设计

正如伊桑·马科特等人所表述，真正的响应式设计方法不仅仅是根据视口大小改变网页布局，相反，它要从整体上颠覆当前的设计网页。以往先是对桌面电脑进行固定宽度设计，然后将其缩小并对小屏幕进行内容重排；现在首先应对小屏幕进行设计，然后逐步增强对大屏幕的设计和内容[8]。

此外，在设计网页之初，要跟美工设计充分沟通，比如合理布局，有的研究者认为应该从适应最小分辨率设备开始设计线框模型，然后测试图片素材。相比传统的Web视觉设计过程，Web设计师必须时刻保持警惕，关注功能性组件的可用性、保证图文信息在所有设备中都容易辨读[8]。笔者认为，这样反倒使美工困惑；若能避免一些不必要的设计，即可提高工作效率。比如上述“分类目录”和搜索引擎位置不规范问题，在平面设计时给予注意即可。

5.3　抛弃固定宽度设计想法

仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。伊桑·马科特采用的(流动布局、弹性图片和媒体查询)技术并不新颖，但基于一套完整统一的方法论，将这些理念进行应用则很有创造性。而且，这种网页设计新方法在实际应用中可以做到：①使用百分比布局创建流动的弹性界面;②使用媒体查询来限制元素的变动范围。这两者相组合即构成响应式设计的核心，可以创造出真正完美的设计。

固定宽度设计不仅是指传统网页设计中常用的以像素为单位的宽度设计，还包括字号，在宽度设计里应该换算成百分比，字号换算缩放。一个简易可行的公式可将固定像素宽度或文字缩放转换为对应的百分比宽度：目标元素宽度/上下文元素宽度=百分比宽度。例如，#header(目标元素)被包裹在#wrapper(上下文元素)中。因此，用#header 的宽度(940 像素)除以上下文元素(#wrapper)的宽度(960 像素)，结果是0.979 166 667。将小数点向右移动2位转换为百分比值，就得到头部的百分比宽度，即97.916 666 7%，在CSS样式表里描述为width: 97.916 666 7%; /* 940 ÷ 960 */。

同样地，目标元素尺寸/上下文元素尺寸=百分比尺寸,该公式也适用于将文字的像素单位转换为相对单位。值得注意的是，现代浏览器的默认文字大都是16 像素(显式声明的除外)。例如，body的font-size是16px就是1em，则#logo原来的font-size的48px可改为3em; /* 48 ÷ 16 = 3*/。

6问题讨论

(1) 政务网站重构不是简单的新技术标准在网页设计中的运用，而是理念上的革新。在革新层面上，响应式设计与“互联网+政务服务”有着异曲同工的作用，政务网站服务公众与响应网页设计适应移动应用同样重要，便于媒体查询即便于移动应用，符合互联网应用中新增网民的特征，适应社会发展趋势，用技术手段打造更加亲民的阳光政务。

(2) 渐进增强以恪守Web 标准的标签为基础，意味着它在所有浏览器中均可用。通过CSS 样式和必要的JavaScript，为更先进的浏览器提供渐进式的增强体验。标准浏览器如Chrome、Safari、Firefox 在渲染使用HTML5 和CSS3制作的网页时，效果基本一致。目前，大多数智能手机使用的是和桌面版Safari、Chrome 一样的Webkit 内核，所以其渲染效果满足要求，唯有IE8以下的微软浏览器不完全识别CSS3标准需要补丁应用。然而目前国内使用IE8的用户仅有8%左右，它即将退出历史舞台。

7结语

对长江水利网采用响应式网页设计技术重构网站进行了一些试验性探索, 为政务网站的建设提供了一种新的解决方案。该方案具有一次开发就能适应所有移动终端的扩展性, 相对于以前专门为移动设备创建一套网站更为灵活、便捷,提升了网站在不同设备上内容的一致性和用户体验的流畅度。由于长江水利网站链接到的外部数据库系统还没实现响应式, 给移动端使用带来不良体验。但随着响应式网页设计技术应用越来越广泛, 技术也在不断成熟和完善, 未来将会有广阔的应用和发展空间。

参考文献：

[1]刘合翔. 政府网站用户行为特征及其应用研究[D].北京：北京大学，2012.

[2]王婷. 精简与整合中国政府网站的构想[J]. 现代交际，2011, (6):99.

[3]中国互联网络信息中心. 第36次中国互联网络发展状况统计报告 [R]. 北京：中国互联网络信息中心，2015.

[4]中国软件评测中心.2012 年中国政府网站绩效评估结果[R].北京：中国软件评测中心，2013.

[5](英)Ben Frain. 响应式Web设计：HTML5和CSS3实战[M].北京：人民邮电出版社，2013.

[6]国务院办公厅. 国务院办公厅关于第一次全国政府网站普查情况的通报[R].北京：国务院办公厅，2015.

[7]孙铭丽，吴鹏，张红. 基于用户心智模型的政府网站可访问性研究[J]. 情报理论与实践，2012, (10): 75-80.

[8]赵建保. 响应式Web设计关键技术及设计流程[J]. 电脑知识与技术，2014,(2):10.

(编辑：李慧)

作者简介：张雷, 男，长江水利委员会宣传与出版中心，馆员.

收稿日期：2015-12-05

中图法分类号：TP3

文献标志码：A

文章编号：1006-0081(2016)01-0035-04