[Objective] To solve the problem that library portals cannot automatically adapt to different devices such as the PC and mobile terminals. [Context] Except PC, access devices include smart phones and tablets with different resolutions and operating systems, that brings great challenges to library portal development. [Methods] Using responsive Web design to build Yunnan University Library mobile portal in Drupal platform, combined with HTML5, CSS3, JavaScript. [Results] Once developed, the site is able to automatically adapt to the normal use of the PC, tablets and smart phones. It plays well on the IE7+, Chrome5+ and Firefox3.6+, and automatically adapts to Apple, Samsung, Mi and other different mobile devices. [Conclusions] The official website with stable operation and low maintenance costs is popular, and has good scalability for future equipment.
毕剑, 刘晓艳, 张禹. 使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例[J]. 现代图书情报技术, 2015, 31(2): 97-102.
Bi Jian, Liu Xiaoyan, Zhang Yu. Using Responsive Web Design to Build a Library Mobile Portal ——Taking Yunnan University Library as an Example. New Technology of Library and Information Service, 2015, 31(2): 97-102.
[1] 中国互联网络信息中心. CNNIC 发布《第34 次中国互联网 络发展状况统计报告》 [EB/OL]. (2014-07-21). [2014-07-25]. http://cnnic.cn/gywm/xwzx/rdxw/2014/201407/t20140721_47439.htm. (China Internet Network Information Center. The 34th Statistical Report on China Internet Network Development[EB/OL]. (2014-07-21). [2014-07-25]. http://cnnic. cn/gywm/xwzx/rdxw/2014/201407/t20140721_47439.htm.)
[2] Marcotte E. Responsive Web Design [EB/OL]. (2010-05-25).[2014-07-21]. http://alistapart.com/article/responsive-web-design/.
[3] Why 2013 is the Year of Responsive Web Design [EB/OL]. (2012-12-11). [2014-07-22]. http://mashable.com/2012/12/11/responsive-web-design/.
[4] 刘欢, 卢蓓蓉. 使用响应式设计构建高校新型门户网站[J]. 中国教育信息化: 高教职教, 2013 (5): 71-74. (Liu Huan, Lu Beirong. Building New Type of College Portal Website with Responsive Web Design [J]. The Chinese Journal of ICT in Education, 2013 (5): 71-74.)
[5] Knight K. Responsive Web Design: What It is and How to Use It [EB/OL]. (2011-01-12). [2014-07-12]. http://www. smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/.
[6] Drupal [EB/OL]. [2014-07-23]. https://www.drupal.org/.
[7] 960 Grid System [EB/OL]. [2014-07-25]. http://960.gs/.