响应式Web设计及其在图书馆门户网站中的应用——以“211”高校图书馆为例

曹树金 吴育冰

（中山大学资讯管理学院 广州 510006）

响应式Web设计及其在图书馆门户网站中的应用
——以“211”高校图书馆为例

曹树金 吴育冰

（中山大学资讯管理学院 广州 510006）

介绍响应式Web设计的概念及关键技术，分析其优缺点，然后通过台式电脑、安卓手机、Ipad分别访问国内112所“211”高校图书馆门户网站，以期了解响应式Web设计在国内高校图书馆网站移动化建设中的应用情况。调查结果表明，仅有云南大学图书馆和中国科学技术大学图书馆的门户网站采用了响应式Web设计。最后，提出在未来，响应式Web设计并非最好的方式，也不是唯一的方式。未来高校图书馆门户网站建设不会仅局限于某一种平台，可采用未来友好的思维，顺应潮流，确保灵活，能够适应未来的一切变化。

响应式Web设计 高校图书馆 图书馆门户网站

1 研究背景

近年来，移动技术无处不在，移动智能设备层出不穷，出现了以下两个特点[1]：

一是PC互联网加速向移动端迁移。根据CNNIC的第35次中国互联网发展状况统计报告，截止2014年12月，中国网民规模达6.49亿，互联网普及率为47.9%；其中，手机网民规模达5.57亿，较2013年底增加5 672万人，手机网民规模超越传统PC网民规模；通过笔记本电脑接入互联网的比例为43.2%，手机上网和平板电脑使用率分别为85.8%、34.8%[2]。这不仅验证了Wisniewski的预言“到2014年，移动互联网的使用将超过桌面web使用”[3]，也说明智能手机、笔记本电脑和平板电脑等移动设备的普及改变了人们使用互联网的方式。

二是移动终端体验效果迥异。具有相同内容的一个网页，在屏幕大小不一的设备上，呈现的效果也不尽相同。当用户希望通过移动设备（如手机、Ipad等）来完成PC页的操作时，如果该页没有做响应式处理的话，出现的页面体积大、请求多、体验性差、兼容性差等缺陷最终会导致用户放弃操作。不采用响应式处理的网站容易导致用户分别使用PC和移动设备访问相同的网站时，体验到不一致的效果。

如何让网站尽可能地兼容不同类型的设备同时确保良好的用户体验，成为越来越重要的问题。于是，响应式Web设计应运而生，采用响应式Web设计，用户无论使用哪种移动设备，都能够很流畅的浏览和体验。

2 响应式Web设计概述

2.1 响应式Web设计的概念

2010年5月25日，美国著名网站设计师伊桑·马科特（Ethan Marcotte）在“A List Apart”发表题为“Responsive Web Design”的文章，提出了“响应式Web设计”（Responsive Web Design，简称RWD，也称“自适应网页设计”）的概念，指的是可以自动识别屏幕宽度、并做出相应调整的网页设计[4]。响应式Web设计旨在实现一个网站能够兼容多个终端。Ethan Marcotte将三种已有的开发技巧，即媒体查询（media queries）、流式网格布局（fluid grids）、弹性图片（scalable images）整合创建一个在不同设备上都能漂亮显示的网站。响应式Web设计能够使网站适应于任何设备（各种智能手机、平板电脑、PC显示器、kindle等）的屏幕（横向、纵向），并且根据不同宽度的屏幕自动调整布局、图片尺寸等。也就是说，通过响应式Web设计，我们不再需要为移动设备设计单独的网站。

2.2 响应式Web设计的关键技术

Ethan Marcotte认为网页设计不应只是为了配合指定设备或浏览器而设计，不同版本应能够在不同设备或工具上有同样的体验。也就是说，网页设计不应是为每一个终端做一个特定的版本，而是能够满足用户所使用的不同设备。此外，Ethan Marcotte指出只针对前台界面，响应式Web设计需要三种核心技术，分别是：媒体查询、流动布局、弹性图像和媒体。

（1）媒体查询。媒体查询（Media Queries）是实现响应式Web设计的核心技术。它是CSS3的一种新特性，用于设置某种媒体特征下的显示规则。RWD设计布局时，媒体查询顺序采用移动端向上设计，首先优先建立移动用户体验，然后使用媒体查询调整大屏幕[5]。媒体查询不仅可以向不同设备提供不同的样式，为不同类型的用户提供最佳的体验，还允许设计人员基于各自不同类型的设备属性（如：屏幕宽度、方向、分辨率等）来确定目标样式。媒体查询支持IE9、Firefox3.5、Safari3以及它们的更高版本，同时支持大部分智能手机和其他基于屏幕的设备。

（2）流动布局。在传统网站中，固定布局的页面宽度会使用特定大小的像素，虽然我们可以通过手指在屏幕上缩放页面，但这样的操作会让我们感到繁琐。然而，在响应式Web设计中采用了流动布局，流动布局以百分比为单位，如果我们设计分别占页面1/4的左右栏，只需要定义它们的宽度为25%，而不用再去考虑用户到底是使用多宽的浏览器，因为元素的宽度会根据屏幕大小来调整自身的布局，使页面具有可变的特性，能够更好地适应不同的用户。

（3）弹性图像和媒体。弹性视觉媒体设计的本质是保证视觉媒体能够灵活地适应不同的布局及其可读性。在响应式Web设计中通过使用一些CSS技巧，使图像和媒体比例限制在其父元素范围之内，相应于布局的其他部分按比例缩放，以适应其设备的大小。通过弹性图像和媒体，不仅可以调整网站，让它在手机、平板电脑上与在桌面上同样表现；还可以识别用户的设备并完成分类，为各类型的设备提供最佳内容。

2.3 响应式Web设计的优缺点

响应式Web设计虽然可以让用户在不同设备上获得相同的体验，但是它的实际操作并不一定完全可行，也并非适合所有类型的网站。只有真正的了解响应式web设计的优缺点，才能更好地发挥其优势，更好地提升用户体验满意度。Ali Qayyum[6]全面地归纳了响应式Web设计的优缺点，如下所述：

（1）响应式Web设计的优点。响应式Web设计的一些优点如下：

①用户友好。用户友好不仅是响应式Web设计的最大优点，还是响应式Web设计的主要目的。响应式Web设计能够适应几乎所有设备的屏幕，提供友好的界面，使用户能够保持与网站一致的体验。

②移动段。在响应式Web网站的帮助下，你可以获得你的网站流量的完整视图。而你所需要做的就是创建一个移动频段，就可以获得与你的网站流量相关的所有必要的信息。通过统计流量来分析网站的性能及采取必要的措施对改善网站是非常有用的。

③累积分享。响应式Web设计能够使网站的拥有者通过单一的URL地址收集所有社交分享的链接，来创建更友好的网站。

④搜索引擎最佳化。搜索引擎最佳化不仅能够智能地完成桌面网站与移动网站的链接，还通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更加友好，从而更容易被搜索引擎收录及优先排序[7]。

⑤重定向。通过响应式Web设计，设计师不需要任何重定向，也不涉及任何代理目标。因此，当你不需要解决重定向和定向用户时，这是一件很了不起的事情。

⑥成本低、维护少。开发一个独立的移动网站，会增加工作量。如原生应用虽然可完全利用系统的API和平台特性，但是在不同的平台需要独立开发App，开发成本高。而响应式Web App具有可访问不同终端浏览器、一次开发多处分发、迭代快等优点，并且响应式网站虽然只有一个布局，但是其能在所有类型的设备上工作，这样明显地减少了工作量、降低了维护的成本。

（2）响应式Web设计的缺点。响应式Web设计的一些缺点如下：

①需要一定的时间加载。在响应式web设计中，用户需要下载一些并不十分必要的HTML/ CSS，并且图片也没有真正调整适合设备屏幕的尺寸，这需要加倍时间进行加载。

②优化搜索引擎。通过响应式Web设计，确定搜索引擎关键字不是一项容易的任务。相对于普通的桌面用户，移动用户使用不同的关键词，使响应式Web设计修改标题及其他事项都是很困难的。

③不支持老版本浏览器。响应式Web设计使用的是CSS3，不幸的是大多数移动设备不兼容CSS3媒体查询,而且并不是所有的浏览器(如IE）都支持CSS3。

④并非适合所有的网站。响应式Web设计仍处于发展阶段，并不是所有的网站都适用。如一些小游戏网站仅仅是网页采用了响应式Web设计，但游戏内容只能通过PC端打开的话，那么这时候就要考虑是否继续使用响应式Web设计，还是修改游戏。

3 国内“211”工程高校图书馆网站现状调查

高校图书馆的大多数服务是通过其网站提供的，因此，图书馆网站也被认为是高校图书馆的一张脸。随着移动通信技术的发展，高校图书馆也在不断地使用这些移动技术为用户提供服务。Griffey曾在2010年指出“在过去的五年里，图书馆通过移动技术高度集中于提供数字化服务,尤其是参考咨询服务”[8]。但是随着智能手机、平板电脑等移动设备的出现，越来越多的大学生通过移动设备检索信息，高校图书馆不再局限于参考咨询服务，开始关注移动图书馆网站的建设。

3.1 调查方法

移动互联网潮流的到来，国内高校图书馆面对层出不穷的移动设备，是持续分别建设PC网站、移动网站、开发App，还是采用响应式Web设计满足用户任何设备的网站？“211”工程高校是我国重点建设的高校，具有一定的代表性。本文通过调查国内112所“211”工程高校图书馆网站的建设情况，并对其网站进行对比分析，以了解其网站是否采用响应式Web设计。

本文采用网络调研法，在2015年6～7月期间对这112所高校图书馆主页进行访问，主要调查以下信息：PC端网站、Wap端网站、App、响应式设计的网站。具体方法是通过电脑访问每个图书馆的完整网站，并浏览其是否有Wap端网站、App、响应式Web设计的网站，如有则使用智能手机、Ipad等进行验证。

3.2 调查结果与分析

3.2.1 总体情况分析 由于第二军医大学、第四军医大学、对外经贸大学、东北师范大学这4所高校的图书馆网站无法链接，因此本文实际调查了108所“211”高校图书馆的网站。调查结果显示，“211”高校图书馆中仅有2所高校利用响应式Web设计网站，分别是云南大学图书馆、中国科学技术大学图书馆，约占2%。而约98%高校图书馆都是通过非响应式Web设计建设网站，为不同设备建设不同的网站，主要建设电脑PC端网站、Wap端网站和开发App。由此可见，非响应式Web设计尚未在高校图书馆中得到广泛地推广，与其所需的成本有关。2010年非响应式Web设计才开始出现，当时许多高校图书馆已经建设了PC端网站、Wap端网站和开发App以满足移动服务的需求。如果高校图书馆利用响应式Web设计重新建设网站，则需要耗费大量的时间、人力、物力与财力。此外，经费有限、技术匮乏等也是限制高校图书馆利用响应式Web设计门户网站的重要因素。

3.2.2 响应式Web设计的图书馆网站分析 在本文调查的“211”高校图书馆的网站中，仅有云南大学图书馆和中国科学技术大学图书馆利用响应式Web设计其网站。2014年6月20日,云南大学图书馆网站建成并正式使用响应式Web设计的网站，该网站的应用效果显著，其PC端不仅在IE9+、Chrome5+、Firefox3.6+浏览器上有良好显示，还兼容了IE7、IE8浏览器，移动端能够自动适应各种智能手机和平板电脑，给用户带来流畅的体验[9]。该网站上线4个月，读者访问量已达89 593次，并且没有因网站性能、功能等原因受到读者投诉，好评如潮[9]。中国科技大学图书馆通过响应式Web设计建设的网站于2015年初正式投入使用，因为该网站推出时间不长，尚未得到读者使用该网站的数据。

读者无论是使用台式电脑，还是使用笔记本电脑、Ipad、智能手机等移动设备访问这两所高校图书馆网站，其页面都能够自动切换分辨率、

图片大小等，并且在保持内容的一致性的前提下，读者在移动端也能很流畅地浏览。但是使用响应式Web设计建设网站的图书馆也面临着一个挑战：如何对数据库供应商、馆际互借系统、联机公共检索目录等外部链接实现响应式。

3.2.3 非响应式Web设计的图书馆网站分析

“211”高校中有106所高校图书馆采用了非响应式Web设计建设其网站，分别建设有PC端网站、Wap端网站和开发App。其中这106所高校图书馆都建设了PC端网站，81所高校图书馆建设了Wap端网站，88所高校图书馆开发了App（见表1）。这说明了PC端网站是高校图书馆在互联网发展下的产物，而Wap端和App则是适应移动互联网时代的产物。

表1 使用非响应式设计网站的图书馆数量及比例

表2 建设PC端、Wap端和App应用的高校图书馆数量及比例

由表2可见这106所高校图书馆中建设PC端网站、Wap端网站和App的情况。其中，河北工业大学、延边大学和国防科学技术大学等10所高校图书馆仅建设了PC端网站，占非响应式Web设计的图书馆网站的9%。这说明了还有少数“211”图书馆尚未建设移动图书馆网站。同时建设了PC端网站和Wap端网站的高校图书馆共有81所，占76%；同时建设了PC端网站和开发App的高校图书馆共有88所，占83%；同时建设PC端网站、Wap端网站和开发App的高校图书馆共有75所，占71%。因此，我们可以看到大部分图书馆积极筹建不同访问方式的网站，以满足用户对移动检索的需求。此外，在调查过程中我们发现同时建设了Wap端和开发App的高校图书馆网站都是仅支持平板电脑、阅读器和智能手机等移动设备。

4 结论

前文调查结果表明，“211”高校图书馆网站中仅有2所图书馆的门户网站采用了响应式Web设计。在调查中我们还发现，上海大学图书馆也在2015年正式启动并实施了基于响应式Web设计的图书馆门户网站的工作[10]。虽然目前采用该技术建设网站的图书馆很少，但是面对技术不断地进步发展，移动设备和浏览器类型越来越丰富，与建设专门移动网站的高校图书馆相比，采用满足不同设备、不同浏览器和用户不同需求和环境的响应式Web设计的高校图书馆或许在未来能走得更远。为了满足移动服务的需求，特别是目前仅建设了PC端网站的10所高校图书馆，利用响应式Web设计建设其网站会是一个理性的选择。但是，值得关注的是，当图书馆的各个门户网站及资源平台都采用响应式Web设计时，是否还需要为不同移动设备建立专门的图书馆网站？

响应式Web设计就是最好的？回答是否定的。因为目前响应式web设计仅关注了台式电脑、平板电脑和移动设备，然而各种联网设备汹涌而来，如智能电视机、联网汽车、支持Internet的冰箱等，因此Web设计也将不会仅局限于某一种平台。所以，高校图书馆网站是分别建设PC网站、Wap网站和开发App，还是向响应式网站设计发展，关键是要学会“随波逐流”，掌握不确定性，用一种未来友好的思维，顺应潮流，确保一定要灵活，能够适应未来的一切变化[11]。

［1］龙 哥.响应式网页设计［EB/OL］.［2015-05-28］.http：// isux.tencent.com/responsive-web-design.html.

［2］中国互联网网络信息中心.第35次中国互联网发展状况统计报告［R/OL］.［2015-06-01］.http：//www.cnnic.net.cn/ hlwfzyj/hlwxzbg/hlwtjbg/201502/P020150203548852631921. pdf.

［3］Wisniewski J.Mobile that works for your library［J］.Online，2011，35（1）：54-57.

［4］Marcotte E.Responsive Web Design［EB/OL］.［2015-06-01］. http：//www.alistapart.com/articles/responsive-web-design/.

［5］［美］卡德莱茨.响应式Web设计实践［M］.侯鸿儒，译.北京：人民邮电出版社，2013：198-207.

［6］Qayyum A.Responsive Web Design：An Ultimate Guide［EB/ OL］.［2015-06-01］.http：//smashinghub.com/responsiveweb-design-an-ultimate-guide.html.

［7］搜索引擎最佳化［EB/OL］.［2015-06-01］.http：//baike.haosou. com/doc/1995066-2111213.html.

［8］GriffayJ.MobileTechnologyandLibraries［M］.NewYork：Neal-Schuman Publishers，2010：93.

［9］毕 剑，刘晓艳，张 禹.使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例［J］.现代图书情报技术，2015，31（2）：97-102.

［10］冯春英.基于响应式Web设计的新型图书馆门户网站构建［J］.图书馆学研究，2015（15）：34-40.

［11］［美］加德纳，［美］格里格斯比.Head First Mobile Web中文版［M］.林 琪，刘晓兵，等，译.北京：中国电力出版社，2013：357-415.

（责任编校 田丽丽）

Responsive Web Design and Its Application in the Library Web Portal：Taking the Case of the Libraries of“Project 211”Universities

Cao Shujin,Wu Yubing
School of Information Management,Sun Yat-sen University,Guangzhou 510006,China

The present article gives a brief introduction to responsive Web design and its key technology,and analyzes its advantages and disadvantages.The authors visited library portals of 112“Project 211”universities by PC,android phone and Ipad separately,in order to understand application of responsive Web design in the mobile construction of these library websites.Results show that only the portals of Yunnan University Library and Library of University of Science and Technology of China adopt responsive Web design.Finally,it is concluded that responsive Web design will neither be the optimal way nor the sole way in the future.The construction of university library portals in future will not be confined to only one kind of platform,and future-friendly thinking should be employed to go with the historical trend of the time,ensure flexibility and fit in with any change in the future.

responsive Web design;academic library;library web portal

G250

吴育冰，女，1990年生，2014级图书情报学硕士研究生，发表论文1篇。