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

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

刘欢,卢蓓蓉

(华东师范大学信息化办公室,上海 200062)

摘要:为适应日益增长的校园移动浏览需求,高校门户网站需要进行相应改进,使之能够在各种移动设备上有良好的表现。响应式设计作为一种新的设计概念,能够使网站针对不同设备环境进行响应和调整,实现一个网站对多种设备的兼容。经实践证明,基于响应式设计创建的网站能够使校园用户在移动设备上获得更好的使用体验,是高校构建新型门户网站的重要技术手段。

关键词:响应式设计;高校门户网站;HTML5

Building New Type of College Portal Website with

Responsive Web Design

Liu Huan, Lu Beirong

(Network & Information Center, East China Normal University, Shanghai 200062)

【Abstract】Requiring good performances on a variety of mobile devices, college portal websites should be improved to meet the growing demands of campus mobile visiting. Responsive web design is a new design concept, which enables websites responsive for different devices, makes a website compatible with several kinds of devices. It has proved that campus users can get better user experience when navigating responsive design websites on mobile devices. Responsive design will also be an important technology for colleges to build new type of portal websites.

【Key words】Responsive design; College portal website; HTML5

一、概述

随着移动设备在校园师生中的日益普及,高校网站来自移动端的浏览量越来越大。以华东师范大学门户网站为例,2012年移动设备访问量为2011年的3倍,占总访问量的6.71%,且该比例正在迅速上升中。为了适应日益增长的校园移动浏览需求,高校门户网站需要进行相应改进,使网站能够在各种移动设备上有良好的表现。其中,响应式设计(Responsive Web

[1]Design)作为一种新型技术手段,能够使网站针对不同设备环境进行响应和调整,实现同一个网站对多种设备的兼容。这对于高校构建适应移动设备的新型门户网站具有重要应用价值。

在响应式设计之前,高校网站的移动端服务通常是通过专门的移动版网站来实现。移动版网站是常规网站的内容复制,其对页面内容和功能进行了精简,以提升移动设备上的网站载入速度,同时调整了页面外观以适应移动设备屏幕显示。当网站检测到用户访问来自于移动设备时,将跳转至移动版页面进行显示。移动版网站的优点是页面呈现效果好、节省流量,最初在手机端体现了良好的效果。然而,近年来移动设备的种类越来越多,至今移动版网站不仅要适应iPhone、Android、Windows Phone等手机平台,还需要考虑诸如iPad、Kindle、Galaxy Note等平板设备。如果为每种设备都定制开发相应的移动版网站,其开发和维护成本都非常高昂,一旦主站点有任何修改,移动版网站的修改工作量将会成倍增加。 相比之下,响应式设计使用了更加具有弹性的机制。只需要设计和开发一个网站,就能够在各种不同分辨率的电脑和移动设备端实现自适应显示。对于高校门户网站而言,这是一种既节省开发和维护成本,又能够获得良好表现效果的移动端解决方案。目前,华东师范大学、复旦大学等国内高校已经在其门户网站中使用了响应式设计。

二、响应式设计简介

Word文档免费下载Word文档免费下载:使用响应式设计构建高校新型门户网站 (共6页,当前第1页)

你可能喜欢

  • 考博专家推荐书
  • 网站架构设计方案
  • 网站策划
  • 大型网站架构
  • 系统架构
  • 网站方案书

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

最新文档

返回顶部