使用响应式设计构建高校新型门户网站

刘 欢，卢蓓蓉

（华东师范大学 信息化办公室，上海 200062）

一、概述

随着移动设备在校园师生中的日益普及，高校网站来自移动端的浏览量越来越大。以华东师范大学门户网站为例，2012年移动设备访问量为2011年的3倍，占总访问量的6.71%，且该比例正在迅速上升中。为了适应日益增长的校园移动浏览需求，高校门户网站需要进行相应改进，使网站能够在各种移动设备上有良好的表现。其中，响应式设计（Responsive Web Design）作为一种新型技术手段，能够使网站针对不同设备环境进行响应和调整，实现同一个网站对多种设备的兼容。[1]这对于高校构建适应移动设备的新型门户网站具有重要应用价值。

在响应式设计之前，高校网站的移动端服务通常是通过专门的移动版网站来实现。移动版网站是常规网站的内容复制，其对页面内容和功能进行了精简，以提升移动设备上的网站载入速度，同时调整了页面外观以适应移动设备屏幕显示。当网站检测到用户访问来自于移动设备时，将跳转至移动版页面进行显示。移动版网站的优点是页面呈现效果好、节省流量，最初在手机端体现了良好的效果。然而，近年来移动设备的种类越来越多，至今移动版网站不仅要适应iPhone、Android、Windows Phone等手机平台，还需要考虑诸如iPad、Kindle、Galaxy Note等平板设备。如果为每种设备都定制开发相应的移动版网站，其开发和维护成本都非常高昂，一旦主站点有任何修改，移动版网站的修改工作量将会成倍增加。

相比之下，响应式设计使用了更加具有弹性的机制。只需要设计和开发一个网站，就能够在各种不同分辨率的电脑和移动设备端实现自适应显示。对于高校门户网站而言，这是一种既节省开发和维护成本，又能够获得良好表现效果的移动端解决方案。目前，华东师范大学、复旦大学等国内高校已经在其门户网站中使用了响应式设计。

二、响应式设计简介

响应式设计是一种技术路线而非单纯的网站设计，其主要原理是在页面流式布局的基础上，通过CSS3的Media Queries调整页面元素在不同屏幕分辨率下的显示，并结合JavaScript实现页面交互功能。响应式设计在设计理念、技术路线等方面都与传统网站有所差异。

1.设计理念

响应式设计的网站设计理念和传统网站有着很大区别。传统网站的设计通常是固定布局，设计元素的大小和内容的显示位置都精确到像素，网站的内容主体有着具体的宽度。特别是在设计传统网站时，设计师通常会先固定一块特殊尺寸的画布，作为虚拟的浏览器屏幕区域，然后在该区域中设计和定位各种元素。在某个特定屏幕分辨率下，传统网站通常能够获取最佳的浏览效果，但在更大或更小的分辨率下，网站可能产生横向滚动条，或在页面两侧产生空白区域。

相比之下，响应式设计更强调设计的灵活性。网站内容的排布不局限于某个特殊的浏览器窗口大小，而是根据窗口大小进行灵活的布局，其中每个页面元素的位置、大小甚至表现形式都是动态的。如菜单栏在较大分辨率的屏幕中为横向显示，在较小分辨率屏幕中则为纵向显示，在更小分辨率屏幕中甚至被折叠起来。相应地，在响应式设计中通常会准备多个分辨率下的设计稿，以体现各种页面元素的动态定位。

2.Media Queries

Media Queries是实现响应式设计的核心元素，又被称作媒体查询。它是CSS3的一种新特性，用于设置某种媒体特性 （Media features）下的显示规则。如以下的Media Queries定义了屏幕宽度最大为480像素的所有设备中，

元素的字体大小。

媒体特性的种类非常多，但在响应式设计中主要使用的是max-width、min-width等判断屏幕尺寸的特性，以及用于判断设备方向的orientation特性。通过对不同的屏幕尺寸范围设置CSS样式，就能够在一个CSS样式表中定义所有设备中的显示。其范围划分的精细程度决定了响应式设计能够兼容设备的广度。同时，Media Queries也可以直接写在页面的CSS链接中，使页面根据屏幕分辨率选择加载不同的CSS文件。

Media Queries是基于HTML5的技术，几乎在所有移动设备上都能得到很好支持，但它在IE6、7、8等不支持HTML5的浏览器中将无法执行。解决方法是使用JavaScript来实现相同的效果，如css3-mediaqueries.js。[2]

3.流式布局

仅靠Media Queries并不能很好地实现页面的响应式设计，网页本身的布局结构也影响并决定了响应式设计是否能够顺利显示正确的效果。如用表格进行定位的传统网站，就很难使用Media Queries对冗繁的表格元素设置响应样式。而根据响应式设计的理念，元素的定位应该是动态的，并非固定不变，因此最佳的方式是对网页中的所有元素使用浮动，当页面宽度无法容纳某个元素时，元素将自动浮动至下方显示，根据这样的规则使所有的页面元素都获得合理的定位和布局。这样的布局方式又称为流式布局（fluid grid）。流式布局对于屏幕分辨率较小的移动设备有着重要的意义，用户不需要再横向滚动页面来浏览超出浏览器宽度的内容。

在传统网站中，页面元素的大小都精确为某个绝对数值。然而，在响应式设计中，为了配合流式布局，需要对页面元素的大小进行百分比设置，因此某种意义上流式布局也可以称为百分比布局。

4.Viewport

在移动设备中，网页被放在虚拟的窗口中显示，即viewport。由于普通网页宽度大于移动设备的屏幕宽度，viewport通常被移动设备自动缩放以显示整个网页，浏览者需要对页面进行放大和平移才能够进行浏览。而在响应式设计中，由于采用了百分比布局，网页内容的宽度最大为100%，即屏幕宽度，因此不需要对网页进行任何缩放就能够在横向显示出整个网页。解决方法是在页面部位添加meta标记，如：

以上代码将设备的宽度和初始缩放值、最大缩放值进行了固定，并去除了浏览时设备屏幕的缩放功能。使移动设备在不同分辨率下，或在同一分辨率的纵向、横向状态下都能够忠实地呈现网页内容。

5.JavaScript

响应式设计还体现为针对不同设备的不同交互功能，如在小屏幕设备中添加菜单的折叠效果，或是根据屏幕大小、方向的改变来触发某个事件等。这不可避免地需要在前端页面中使用到JavaScript。其中jQuery作为一款非常流行、轻量级的JavaScript类库，是响应式设计前端开发的首要选择。在jQuery中，可以非常方便地检测用户的设备类型，侦测屏幕大小的改变，并且根据设备屏幕大小进行响应。

6.常见开源框架

对于需要快速开发响应式设计网站的人员来说，可以选择在开源框架的基础上进行开发。常见的响应式设计开源框架包括 Foundatiton、BootStrap、The 1140 CSS Grid等，这些框架都有样式和组件丰富、兼容性好、开发简易等优点。目前，许多国内外高校已经使用了开源框架来开发其门户网站，如芝加哥大学网站基于BootStrap[3]开发，复旦大学网站基于Foundatiton开发等。[3][4]

三、响应式设计在华东师范大学新版主页中的实现

鉴于移动化浏览的未来趋势，华东师范大学门户网站在2012年进行了改版，在改版中确定了实现响应式设计的技术目标。以下为响应式设计在华东师范大学新版主页中的实现过程。

综上所述,已有研究多着重于降水的函数型统计建模,或者不同高度层不同气象指标的影响分析,对逐日降水的非线性自适应统计模拟研究鲜见。基于SOM的蒙特卡罗方法能模拟天气模态与逐日降水之间的关系,不需要预先明确影响因子之间及其与降水量的具体函数关系,具有自学习和自适应的特点。另一方面,对东北地区春夏期逐日降水的相关研究还比较缺乏。因此,本文利用1997—2012年4—7月吉林省地面气象观测资料,建立站点逐日降水量的统计模型,并由独立样本检验期(2013—2015年4—7月)的观测资料评估该模型的适用性,为进一步利用SOM下的天气分型模拟未来降水、服务于吉林省的人工增雨业务打下基础。

1.前期规划

高校主页的外在设计需要符合高校的形象塑造，其内在设计需要使代码和功能可以灵活而富有弹性，适应响应式设计的需求，同时兼顾后台维护。因此前期的站点规划非常重要，需要协调和兼顾外在和内在、前端和后台的需求。在华东师范大学新版主页规划中，删除了原有网站多余的元素，对页面内容模块和功能模块进行了确定，最终将页面元素归纳为头部导航区、内容区、功能区、页脚导航区四个主要部分。其中，头部导航区包括身份页面导航、语言导航、LOGO、搜索条、主菜单等；内容区包括大图展示、新闻快递、媒体视点、讲座报告等；功能区包括邮箱登录框、常用链接等；页脚导航区则为简单的文字和图片组合。

2.美术设计

响应式设计的原则通常是优先满足移动设备，并在此基础上确定网页在电脑等较大屏幕的显示，这导致设计稿常常更倾向于移动端，弱化了非移动端用户的视觉体验。由于高校主页的访问环境目前仍主要为非移动设备，其形象塑造主要基于电脑版本，在移动设备上的显示优化更多来源于实用性考虑。因此，在华东师范大学新版主页的设计过程中采用了电脑版本优先，兼顾移动设备的理念。最终的设计简稿如图1、图2所示。

图1 华东师大门户网站电脑版设计简稿

图2 华东师大门户网站移动版设计简稿

3.构建HTML结构

美术设计稿确认后，下一步将使用HTML5构建相应的DOM结构。由于页面各个内容区块在前期规划中有了清晰的划分，因此可以按一一对应的关系确定HTML的层级结构。在编写代码时，尽量使用HTML5的语义化标签，以便于代码的阅读。门户首页的结构大致如下：

使用HTML5的问题在于，低版本的IE并不支持HTML5，新的标签元素不能被这些浏览器识别。为了确保所有浏览者都能够正常使用网站，需要使用JavaScript来使低版本IE支持HTML5标签。其中，html5shiv是一种比较好的解决方案。[5]

4.编写 Media Queries

在CSS3的Media Queries中，可以对同一元素编写多套样式，但多套样式的编写通常并非同时进行，而是首先制作通用版本的样式，再在该样式基础上扩展其他媒体特性下的样式。华东师范大学门户网站的通用CSS版本针对1024*768以上的电脑制作。由于考虑到后台内容维护的方便，没有在该版本中采取百分比定位，而是采用固定定位的方式。如大图展示模块中，使用了980×386像素的图片做多图切换效果，内容维护人员能够较容易根据这个固定尺寸准备相应图片，而如果为百分比定位，图片将被显示为100%宽度，内容维护人员需要考虑在较大屏幕下的图片显示效果，准备图片素材的难度将因此增加。

在通用CSS版本基础上，创建较小的分辨率的Media Queries，将页面各种元素重写为百分比定位，并根据设计稿对位置、大小和外观进行调整。最终确定的Media Queries的规则种类如下：

@media screen and(max-width:980px){/*屏幕宽度小于内容主题宽度时的样式*/}

@media screen and(orientation:portrait){/*iPad等移动设备纵向时的样式*/}

以上的Media Queries种类虽然不多，但是已经能够基本针对iPad、iPhone和主流安卓手机进行响应。在今后可以进一步细化，如为屏幕宽度在480px、320px、240px等范围区间的设备设置更细化的响应样式。

Media Queries另一个问题是虽然从外在进行了响应，但移动设备加载的内容和电脑版本是相同的，特别是需要在手机中加载数张980×386像素的滚动大图，非常耗费流量。目前的解决方法是使用Filament Group的Responsive-Images，通过JavaScript检测当前设备的屏幕分辨率，并据此选择合适尺寸的图片进行下载。[6]

5.前端优化及前后台结合

要实现人性化的响应式设计，网站还需要进行细致的前端优化。例如，华东师大主页中主菜单条目较多，在手机屏幕上显示时将占据较大区域，致使用户第一时间无法浏览到网站的主要内容。从网站的易用性来说，更佳的使用方式是在较小屏幕设备中隐藏主菜单，并提供菜单切换按钮，供浏览者控制菜单的展开和隐藏显示。具体的解决步骤是，在主页中嵌入一个空白Div，并为其赋予id，以便通过jQuery为其设置各种事件。在CSS的通用样式中设置该Div为不显示。在移动设备样式中，将Div显示为按钮现状，并使用jQuery为其添加点击事件，点击该Div将触发菜单的展开、折叠切换效果。通过以上途径，使手机用户在直观阅览网站内容的同时，能够方便地对主菜单进行操作。

经过优化后的前端页面已经初具雏形，但页面中的内容还是静态的，需要将网站的前后台进行结合，使前端页面能够动态显示来自后台数据库的信息。华东师范大学主页使用了网站群系统作为网站后台。首先，在网站群中为主页开设站点，将之前制作好的前端文件，包括HTML文件、CSS文件、JavaScript文件、图像文件和其他资源文件等进行打包，上传至后台并设置为默认站点模板。其次，在网站群后台中进行栏目和频道的绑定，在模板中配置频道的输出类型，使数据能够对应显示到相应的页面位置。最后，将站点进行静态发布，生成所有静态页面。

6.调试

响应式设计网站不仅需要兼容Chrome、Firefox等主流浏览器，同时要兼容低版本IE，更需要兼容多种移动设备，否则“响应式设计”本身便无从谈起。这意味着响应式设计网站的调试是一件值得重视且需要投入大量精力的工作，仅靠简单的测试难以发现设计中可能存在的问题。一般来说，需要准备Chrome、Firefox、IE6、IE7、IE9、Safari等数种浏览器，同时至少需要准备一台iPad设备。由于在iPad上可以安装iPhone的浏览器app，所以iPhone上的调试可以在iPad中同时进行。如果测试设备的种类越多，调试和站点优化的效果也会越好。

在有限的条件下，也可以使用Firefox中面向Web开发者的“自适应设计视图”工具。该工具可以模拟各种分辨率下的手持设备，并在设备的横向和纵向之间进行切换。但其调试效果可能会与移动设备上的呈现有所出入。

四、总结和展望

经过约4个月的设计开发，华东师范大学最终于2013年元旦正式推出新版网站，如图3所示。使用响应式设计开发新版网站令人耳目一新，使师生在手机、平板电脑上查阅学校新闻、通知公告、讲座报告等信息时有了更好的使用体验。比起传统的移动版网站，响应式设计体现了较低的成本、较快的开发速度和较强的可拓展性。可以预料在不远的未来，将有更多国内高校门户网站使用响应式设计。同时，响应式设计也必将成为高校构建新型门户网站的关键技术。

图3 华东师大门户网站运行效果

[1]http://www.alistapart.com/articles/responsive-webdesign/

[2]http://code.google.com/p/css3-mediaqueries-js/

[3]http://twitter.github.com/bootstrap/

[4]http://foundation.zurb.com

[5]http://code.google.com/p/html5shiv/

[6]https://github.com/filamentgroup/Responsive-Images