基于响应Web设计的图书馆门户网站建设_响应式网页设计论文

基于响应式Web设计的新型图书馆门户网站构建，本文主要内容关键词为：门户网站论文,图书馆论文,Web论文，此文献不代表本站观点，内容供学术参考，文章仅供参考阅读下载。

       在移动设备日益普及，移动学习方式被普遍接受的环境下，图书馆也需要正视“移动”带来的巨大机遇和挑战。随着移动图书馆的发展，读者使用移动设备访问图书馆资源的需求和频率越来越高。以上海大学图书馆为例，自2013年5月推出手机图书馆服务开始，手机端访问量呈逐年上升的趋势。如2013年的最高峰为9月，访问量为115次，2014年每月相较于2013年同月都有较大涨幅，月最高访问量为418次，而到2015，仅1月份的访问量就已达到了458次。读者对移动图书馆的需求在不断增长，然而，相较于图书馆门户网站的访问量还有相当大的差距。究其原因，主要是由于手机图书馆网站内容和功能较为单一，且由第三方定制，无法与自主开发的图书馆门户网站等同。因此，我们需要积极构建一种新型图书馆门户网站，使读者在使用各种终端访问时都能够有良好的呈现效果，展示相同的内容和功能。利用响应式设计(Responsive Web Design)技术可以实现同一网站在不同设备环境下给用户带来的良好用户体验。

       自网页设计师Ethan Marcott在2010年最早提出响应式设计概念以来①，这项技术就被广泛地关注和推广，且日益发展成熟。它最早应用于企业网站，后被应用于图书馆门户网站，如美国国会图书馆、纽约公共图书馆、康奈尔大学图书馆等。响应式设计技术可以使同一网站根据访问终端设备屏幕尺寸的不同，自动流动式调整网站布局，而这一切完全不涉及网站的后台代码，仅仅需要进行前端设计。图书馆无需再针对不同屏幕尺寸和多种手机平台开发相应的手机网站、PC端网站等多个应对不同终端设备的网站，从而大大降低开发和维护成本，提高用户的访问体验。

       1 图书馆门户网站现状及发展需求

       1.1 图书馆门户网站发展需求

       现代信息技术发展迅速，各种设备层出不穷，我们需要适应目前的环境变化，为读者提供最佳用户体验。目前图书馆门户面临的变化主要有以下两点：

       1.1.1 设备市场变化

       Gartner公司做了一份研究报告②，该报告预测了2012～2017年(见表1)的智能手机、平板电脑，超移动设备和个人电脑③的出货量。到2013年，平板电脑和手机的综合出货量预计将比2012年增长9％，总计达24亿台，台式机和笔记本电脑的销量预期将下降7.6％。最显著的增长预计为平板电脑：到2013年，全球出货量预计达197万台，比2012年的出货量116万台增长了69.8％。到2017年将继续增长达到超过29亿台。而2013年设备市场的统计数据证明了这一趋势预测的正确性。

      

       随着时间的推移，除了具有更多的设备总量，不同设备的比重也将显著改变，会有更少的电脑和更多的平板电脑和智能手机。预测将会有一个从PC机到移动设备的显著转移，国际数据公司(IDC)也进行了类似的研究与预测④(见表2)。正如他们的预计，平板电脑的出货量在2013年已超过台式电脑的出货量，在2014年超过笔记本电脑出货量。

      

       尽管IDC公司和Gartner预测的数字有小的差异，但对设备市场变化趋势的预测是一致的。随着设备市场份额的变化，各种移动设备将成为我们日常生活、通讯的主流工具。

       1.1.2 网页浏览，移动电子商务和用户体验

       2012年5月的数据表明，通过移动设备浏览网页已达到网站页面访问量的10.11％⑦，移动互联网使用量持续增长。据TechCrunch⑧和Gartner⑨分析，在2013年，在全球范围内，越来越多的人将通过移动设备上网，而不是通过台式电脑。IDC预测，到2015年，在美国通过移动设备访问互联网的人数将多于通过个人电脑访问的人数⑩。谷歌的研究表明，90％的人会依次使用多种屏幕(11)。

       根据谷歌研究，用户对移动网站体验期望和反应如下：67％的用户更有可能从适用移动设备的网站购买产品，所以适用移动设备的网站可以将用户变成客户(12)。如果一个网站没有为移动应用优化，移动用户放弃任务的可能性提升5倍，79％的移动用户将搜索另一个网站来完成任务(13)。如果一个公司没有一个适用移动设备的网站，这个公司的声誉和潜在的利润将受到影响，客户就会转向竞争对手的网站。尽管这是商业网站的调查数据，但是对于图书馆门户来说，这在很大程度上说明了移动网站的重要性。

       综合以上分析，图书馆的确需要在移动端增加更多的关注和投入。移动设备的快速发展需要我们跟上步伐，良好的用户体验在很大程度上决定了图书馆未来的发展。图书馆门户作为涵盖绝大部分数字资源和数字图书馆功能的站点，也应主动跟进形势，而不是要求读者被动适应图书馆门户的滞后发展。

       1.2 图书馆门户网站现状及面临的问题

       由于学习理论与信息技术的日趋进步，人们对于移动学习、移动阅读的需求也越来越旺盛。图书馆作为重要的资源提供中心，必然需要适应其发展需求，移动图书馆应运而生。目前移动图书馆主要以短信、WAP网站和APP三种方式为主(14)。然而，短信的信息推送形式虽然能快速便捷地发送图文信息，但是费用高昂，并且对于读者来说，被动接收与自己无关的信息不利于用户体验；WAP网站在4G网络日益普及的今天，重要性逐渐削弱，专门针对移动端开发WAP网站意义不大；APP由于开发成本高，需要投入大量人力财力，很少有图书馆专门开发APP软件来提供服务。并且由于图书馆技术能力的限制，移动图书馆服务往往由第三方提供，使得各图书馆的移动图书馆服务同质化严重、界面相同、功能类似、定制化个性内容稀缺等问题突出。图书馆门户网站集中了图书馆的绝大部分信息，并且具备一定的数字图书馆资源服务功能，如果使其在各种尺寸设备下都能完美呈现良好的效果，很多问题都将迎刃而解。

       因此，我们需要构建一种新型图书馆门户网站开发模式，即在同一访问地址下，在不同终端都能呈现良好的显示效果。作者通过对38所“985”高校图书馆门户网站进行调查，以2010年为参照，截至2015年1月，38所“985”高校图书馆进行网站改版的有33所。利用火狐浏览器的User Agent Switcher工具进行检测后发现，38所高校图书馆门户中开发手机版的仅有上海交通大学图书馆1所，开发自适应或响应式门户网站的为中国科学技术大学1所。值得注意的是云南大学图书馆作为“211”院校，已经推出响应式网站门户，并且是同步响应式的馆藏查询系统。

       1.3 图书馆门户的三种供选模式

       面对当前多种终端并存的形势，图书馆门户有三种可供选择的生存模式：

       1.3.1 被动要求读者适应当前门户

       目前，几乎任何人在任何地点都可以访问互联网，大多数移动设备也可以浏览网页，因此，在图书馆技术开发能力有限的情况下，很多图书馆直接利用移动端的触屏缩放功能来实现图书馆门户网站的展示。这样做的好处就是不必为实现不同设备的兼容而投入人力财力，缺点是无法使用户得到良好的用户体验。尤其是小尺寸设备如480X320手机端用户需要手动调整、缩放页面才能确定触点。

       1.3.2 开发WAP或移动网站门户

       在2G时代，由于受到网络流量的限制，很多网站都开发了小网络流量的WAP网站，也有一些图书馆开始进行WAP网站的设计和开发。随着4G网络的发展和普及，WAP网站的优势逐渐削弱，WAP网站也逐渐出现负增长，更取而代之的是移动网站门户的发展。移动网站门户的开发需要较高的技术开发能力和资金投入，图书馆门户属于中型网站，从人力和财力投入来看，往往比较困难。并且面对多个版本的网站时，需要同时对多个版本网站进行更新和维护，工作量增大，出错率也更高。

       1.3.3 开发自适应或响应式网站

       既适用于目前存在的所有设备和分辨率，又能适用于未来的设备。一旦写定代码，它可以在任何设备上运行，这是相较于为每个设备单独建立网站更好的选择。自适应或响应式网页只需要改进前端技术，而无需涉及后台代码，这就带来了两大好处：无需维护多个后台、网站地址的唯一性。

       虽然自适应或响应式网页都是通过网站的前端设计使同一网站自动识别屏幕宽度，在不同设备上呈现不同的展示效果，从而提高用户体验，但自适应是针对几种特定的设备尺寸进行单独设计、布局，相较于响应式设计它的优点是投入更小，测试更容易，缺点是无法包含多种状态，容易出现断点。由于现在各种终端的屏幕尺寸越来越多样，且从开发成本来看，响应式并不比自适应的开发成本高出太多，因此能兼容更多尺寸状态的响应式设计备受青睐。

       2 响应式设计简介

       2.1 响应式Web设计的发展现状与优势

       在一些讨论网页设计发展趋势的文章和热门网站(15)(16)(17)中，2013年已被宣布为响应式网页设计年。“2013年，一个巨大的趋势将是，大多数电子商务零售商将使用响应式网页设计。”(18)响应网页设计是一种新的网页设计方法，它使网站能灵活地适应于任何设备。“响应式网页设计”这一词最早由网页设计师Ethan Marcott在2010年使用和解释(19)。“响应的网页设计是一种网页设计方法，该方法建议网页的设计和开发应根据画面尺寸，平台和取向，响应用户的行为和环境。”(20)

       2.2 响应式设计的关键技术

       响应式设计的关键技术是媒体查询、弹性视觉媒体和流动布局(21)。媒体查询技术实现了按设备特性来分级控制页面布局，弹性视觉媒体技术能够使视觉媒体按照特定布局进行动态调整，流动布局能创建可缩放、可流动的弹性版式，这三者构成了响应式设计的核心技术。

       2.2.1 Media Queries

       媒体查询是CSS3规范中的一个模块，它允许建立使用相同的HTML文件的多个布局。它们不仅是可以识别媒体类型(屏幕)的条件语言，而且还可以检查该设备的物理特性和使用的浏览器属性，例如浏览器的宽度、方向。基于设备和浏览器的特点，样式表被选择性地供应。每个媒体查询有两个组成部分：媒体类型和查询。查询由该特征的名称和相应的值构成。所有的浏览器都支持CSS3媒体查询。一些较老的Web浏览器缺乏媒体查询的支持，但也有可能被用于这些特定的浏览器(JavaScript)的一些替代方案。

       最常用的媒体特性是宽度。图1示出一个简单的媒体查询例子。用最大宽度和最小宽度来检查分辨率范围低于或高于某一断点，使设计用于那些范围的CSS有条件地使用。断点即时刻，即某像素宽度范围上，一个响应尺寸范围内相应的布局改变到另一个布局(22)。通常，考虑到的是视口尺寸，而不是设备的屏幕尺寸。

      

       当网页浏览器的宽度变化，网站内容的风格、布局和比例也会变更，这样用户就可以在任何设备上(23)享受无缝体验。

       2.2.2 流式布局

       流式布局是利用浮动和百分比宽度来实现网页布局的“流动”。浮动使布局区块动态重组，百分比宽度实现未到达断点时的区块宽度调整，从而减少创建的断点数(24)。浮动可以根据媒体查询和CSS设置来实现，百分比宽度可以利用960网格系统来实现。960网格系统是以百分比的方式分配内容，当视口大小变化时，网页内容占屏幕百分比的比例不变，而当视口变化达到一个临界值时，网页内容产生浮动，从而实现流式布局，使得不同屏幕尺寸的设备都能展现出最好的布局呈现效果。在此基础上需要在网页〈head〉部分进行申明，即〈meta name=“viewport” content=“width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.O，user-scalable=no”〉禁止用户缩放网页。

       2.2.3 弹性视觉媒体

       视觉媒体包括文字、图片、视频、动画等可视媒体，要实现响应式网页效果需要对各种视觉媒体进行弹性化处理。比如弹性文本，在给body标签设置font-size属性值后，给其他文本都使用相对单位em，这样显示文本就会是基于body的字体大小。公式为弹性文本大小(em)=实际需求文字大小(px)÷上下文字体大小(px)。图片的弹性化处理方式可以分为以下几种：img｛width：100％；max-width：100％；｝，通过设置图片最大显示阈值来控制最大尺寸；设置外层盒子max-width属性，通过限定外层盒子来间接控制内部媒体缩放尺寸；利用、JavaScript判断当前设备的分辨率，并根据预设的加载规则显示不同尺寸的图片文件。

       2.3 响应式设计的原则

       响应式设计需要遵循许多设计原则，QA公司首席技术专家David Walker在实际开发技术层面提出了响应式网站设计的原则(25)，也有很多人提出过其他的一些原则(26)。现代网站，比以往任何时候，在为更多的设备和更多的分辨率而设计，因此，我们需要关注响应式设计在宏观上需要遵循的原则。

       2.3.1 移动设备优先原则

       在移动优先的方法中，在默认情况下，布局适合于小屏幕是很清楚的，然后随着分辨提高，设计逐步增强。台式优先方法考虑则以桌面分辨率为出发点，分辨率降低，设计逐渐降低。以上两种方法设计开始于参考分辨率和使用媒体查询适应其他分辨率。主分辨率断点和内容将在确定的各种分辨率范围的网页上显示。随着用户使用移动设备越来越频繁，台式开发技术已相当成熟，移动设备优先成为响应式开发者的共识。

       2.3.2 弹性化原则

       弹性化应该说是响应式的基本原则。利用媒体查询技术，网页布局能够在不同尺寸设备中流动式呈现不同的显示效果。所有网页内容的显示位置是弹性化的，根据视口大小自动调整显示位置。

       2.3.3 宏观性原则

       由于终端设备尺寸越来越多，要想每一种设备都能呈现完美的效果，并且完全按照开发者的想法来进行会相当困难，因此，在设计之初就需要权衡利弊，选择一种网页在众多设备中都能达到理想效果的最佳方案。响应式设计过程中也会遇到许多取舍的问题，遵循宏观性原则，考虑全局，不失为一种最佳处理方案。

       3 基于响应式设计的新型图书馆门户网站构建

       上海大学图书馆在综合分析目前读者行为特点、各种终端设备使用频率以及自身技术现状的前提下，于2015年正式启动并实施了基于响应式设计的图书馆门户网站改版工作。

       3.1 前期规划

       前期规划对于网站制作来讲是非常重要的一个环节，前期规划处理是否到位，在很大程度上决定了未来的工程进度与网站效果。基于响应式设计的图书馆门户网站与传统PC版网站在前期规划上最大的区别是它需要兼顾多种尺寸设备上运行的效果。以上海大学图书馆门户网站为例，现行版的门户网站是基于drupal开发的，drupal已经有相当数量的响应式主题可供用户选择，并且主题改造也相对简单，因此从成本上来考虑，我们仍将选择drupal平台来开发新版响应式的上海大学图书馆门户网站，并利用Bootstrap平台辅助开发。在响应式设计中一般使用javascript、jquary和CSS来实现动画效果而不是flash，因此在规划布局时需要考虑执行难度。在功能上需要考虑平台融合难度，最大限度地集成图书馆门户应有的功能，栏目设计方面做到逻辑清晰，名称恰当简洁。

       3.2 前端设计、开发与优化

       响应式网站的前端设计包括界面设计、HTML布局结构设计、Media Queries规划、CSS设计、动画设计等，其中HTML布局结构设计和Media Queries规划都涉及视口尺寸问题。由于技术和时间上的限制，上海大学图书馆门户采用首页和二级页面分离开发的模式。首页单独用Bootstrap框架来搭建，PHP调用drupal相关的部分，比如新闻信息、讲座信息等，二级页面利用drupal平台构建，采用CorporateClean响应式主题来实现。参考CorporateClean的CSS结构(如图2所示)，首页部分我们也是采用在通用版本样式的基础上进行拓展，制定Media Queries规则如下：

      

      

       图3 上海大学新版图书馆门户网站效果图

       3.3 相关平台整合与优化

       图书馆门户由于涉及众多数字资源、相关服务系统，如馆藏目录检索系统、数据库导航系统、教参系统、离校系统、文献检索课系统等，在进行图书馆门户网站的响应式处理时也应尽量对相关平台进行整合与优化。由于很多平台的源代码并不在图书馆内服务器上，无法做到全部进行响应式处理。因此，我们对其中的数据库导航系统、opac馆藏目录查询系统等进行了整合与优化，由于只涉及前端改造而不涉及后台部分，对平台功能并无影响。

       3.4 调试

       调试在响应式设计中是非常重要的一环，只有在调试过程中才能更好地发现问题并进行及时调整与解决。我们的测试方式是先通过调整浏览器窗口大小进行初步测试，然后利用viewport resizer(http://lab.maltewassermann.com/viewport-resizer/)工具进行测试，最后再在各种终端设备上进行测试。由于我们选用的是drupal平台，前端变化对后台基本没有影响，各部门提交相应内容的操作跟老版本完全一致，因此对图书馆门户网站进行响应式处理后，我们无需对后台功能进行测试。

       4 响应式设计应用于新型图书馆门户网站面临的问题

       以美国为参照，响应式设计在国外图书馆门户网站中的应用相较于国内明显且更加积极。美国国会图书馆、纽约公共图书馆、康奈尔大学图书馆等都是响应式图书馆门户，并且在功能上几乎不受响应式设计技术要求的约束。就目前来看，国内图书馆界正式上线的图书馆只有中国科技大学图书馆和云南大学图书馆，他们开发了响应式或自适应网站。结合上海大学图书馆门户网站响应式改版过程中遇到的困难与工作实践，笔者认为，响应式设计应用于新型图书馆门户网站的制约因素主要有以下几点。

       4.1 重视程度问题

       手机的触屏缩放功能在很大程度上可以缓解移动终端访问图书馆网站时给用户带来的困扰，通过缩放用户也可以阅读访问图书馆门户上的内容。在新事物袭来之时，人们往往由于重视程度的不同而选择不同的应对方式。在面对新形势时，图书馆需要充分的勇气和认知敏感度去迎接机遇和挑战。

       4.2 成本问题

       与普通网站相比，创建响应式网页设计项目会耗费更多的时间，而且前期需要投入超出约10％～20％的费用(27)。从图书馆的角度来讲，原本匮乏的技术力量要进入最前沿的技术阵地，可能需要更多的支持。成本问题、技术人才缺乏是图书馆界必须面对的现实问题，也是响应式图书馆门户网站发展缓慢的重要原因。

       4.3 平台融合问题

       由于数字图书馆资源的日益丰富，图书馆功能逐渐增强，馆藏系统、数据库系统、整合资源检索系统、教参系统、离校系统等都被包含到图书馆门户网站中，仅仅是门户网站本身实施了响应式改造意义并不大。因此，要实现图书馆门户网站的响应式处理，就必然面临门户网站所涉及的诸多系统平台的前端响应式处理，统一融合为响应式，这将是一个大工程，技术实现上相当复杂。

       目前，上海大学图书馆门户网站的响应式改版技术框架已经完成，进入后期测试与完善阶段。笔者认为要解决以上问题，关键在于领导的重视和图书馆技术人才的培养，这是推动新型图书馆门户发展的动力和基础。在平台融合方面，由于图书馆的相关系统分布在本地服务器，而响应式改造无需更改后台代码，只需进行前端改造，在拥有相关技术与人才实力的情况下，改版可以逐步实现。对于远程服务器上的系统，可以利用移动端的触屏缩放功能进行过渡。随着响应式设计的日益流行与普及，相信在不久的将来，系统提供商能满足我们的响应式改造需求。

       5 结语

       比起传统的移动版网站，响应式设计体现了较低的成本、较快的开发速度和较强的可拓展性(28)。图书馆门户网站拥有强大的功能和大量的信息资源，用户的熟悉度高，利用响应式设计构建图书馆门户网站，使其能在手机、平板、PC机等多种设备上有良好表现，创造最佳用户体验，有助于提高读者的满意度。随着响应式设计技术的不断发展，国内各种企业门户网站、高校门户网站等纷纷推出响应式网站门户，上海大学图书馆也已积极投身于响应式设计技术的不断探索和实践当中。相信在不久的将来，响应式设计将会被更多的图书馆门户网站应用，为读者提供更加人性化的服务和更加完美的用户体验。

       注释：

       ①(19)Ethan Marcotte.Responsive Web Design[J/OL].[2010-05-25].http://alistapart.com/article/responsive-web-design.

       ②S.

.Implementing Responsive Web Design for Enhanced Web Presence[C].Information & Communication Technology Electronics & Microelectronics(MIPRO),2013 36th International Convention on IEEE,2013:1206-1210.

       ③⑤Gartner Says Worldwide PC,Tablet and Mobile Phone Combined Shipments to Reach 2.4 Billion Units in 2013[EB/OL].[2013-04-04].http://www.garner.com/newsroom/id/2408515.

       ④⑥Worldwide Smart Connected Device Market Crossed 1 Billion Shipments in 2012,Apple Pulls Near Samsung in Fourth Quarter,According to IDC[EB/OL].[2013-03-26].http://www.idc.com/getdoc.jsp? containerld=prUS24037713#.UWG9CZNTB8E.

       ⑦(13)Nathaniel Seevers.Mobile Internet and the Death of Desktop[J/OL].[2012-11-20].http://www.shoutoutstudio.com/mobile-internet-takeover/

       ⑧C.R.Venkatesh.Infographic:Responsive Web Design[J/OL].[2012-08-29].http://www.artofdeveloping.com/2012/09/infographic-responsiveweb-design.html.

       ⑨M.Bishop.The Post-PC Revolution Is Here-Don't Panic![EB/OL].[2013-02-13].http://blog.moovweb.com/2013/02/the-post-pc-revolution-is-heredont-panic/.

       ⑩(14)IDC:More Mobile Internet Users Than Wireline Users in the U.S.by 2015,2012[EB/OL].[2011-09-12].http://www.businesswire.com/news/home/20110912005213/en/IDC-Mobile-Internet-Users-Wireline-Users-U.S.

       (11)M.Fisch.Mobile-friendly Sites Turn Visitors into Customers[EB/OL].[2012-09-24].http://googlemobileads.blogspot.com/2012/09/mobile-friendlysites-turn-visitors.html.

       (12)刘智惠，薛晶晶，卢倩芸.面向不同设备的响应式网页设计——Web移动图书馆[J].现代图书情报技术，2014(11)：95-101.

       (15)P.Cashmore.Why 2013 Is the Year of Responsive Web Design[J/OL].[2012-12-11].http://mashable.com/2012/12/11/responsive-web-design.

       (16)J.A.Sanchez.Infographic:2013 the Year of Responsive Design[EB/OL].[2012-12-19].http://www.uberflip.com/blog/infographic-2013-the-yearof-responsive-design.

       (17)J.Krenz-Kurowska.Web Design Trends for 2013[EB/OL].[2013-02-21].http://99designs.com/designer-blog/2013/02/21/web-designtrends-for-2013/.

       (18)M.Chowdhary.Responsive Web Design Will Be Expected on All Devices[J/OL].[2012-09-15].http://multichannelmerchant.com/crosschannel/responsive-webdesign-will-be-expected-on-all-devices-15092012/.

       (20)K.Knight.Responsive Web Design:What It Is and How to Use It[J/OL].[2011-01-12].http://coding.smashingmagazine.com/2011/01/12/guidelines-forresponsive-web-design.

       (21)邢希，田兴彦，王世运.响应式Web设计方法的研究[J].琼州学院学报，2013(2)：36-38.

       (22)The Savvy Marketer's Guide to Responsive Web Design[EB/OL].[2012-08-07].http://www.enablingideas.com/wpcontent/uploads/SavvyMarketersGuide-ResponsiveWebDesign-Aug-7.12.pdf.

       (23)S.Pastore.The Role of Open Web Standards for Website Development Adhering to the One Web Vision[J].International Journal of Engineering and Technology,2012,2(11):1824-1834.

       (24)赵建保.响应式Web设计关键技术及设计流程[J].电脑知识与技术，2014(5)：1066-1068.

       (25)Abel Avram.Guidelines for Responsive Website Design[EB/OL].[2014-06-12].http://www.infoq.com/news/2014/06/responsive-website-design.

       (26)J.Mazzei.Responsive Web Design[J].Business NH Magazine,2012(9):22-23.

       (27)(28)刘欢，卢蓓蓉.使用响应式设计构建高校新型门户网站[J].中国教育信息化，2013(9)：71-74.

标签：响应式网页设计论文;  图书馆论文;  响应式布局论文;  移动开发论文;  电脑论文;