随着互联网时代的发展，高校的教学模式和日常管理也在悄然间发生着日新月异的变化。传统的定尺寸网站和手机版网站已经无法满足高校不同用户人群的访问需求，特别是使用移动端访问网站的用户已经无法感受到高校网站带来的便捷性和高效性。网站页面错乱、图片挤压、文字错位使得用户在使用移动设备访问传统网站时体验极差。

使用场景发生的改变，导致老师和学生们使用移动设备浏览网站，处理事务的频率远超PC端。智能手机和Pad已经改变了人们传统的学习、工作和生活方式。高校急需一套能满足不同用户访问需求，能根据屏幕大小进行自动适配的全新网站设计布局形式。为了有效解决这个问题，响应式网站设计应运而生，近几年来深受众多高校用户的重视和青睐。开发一套响应式网站已被众多高校列入教育信息化建设的发展纲领中，对于高校来说，开发一套响应式网站，不仅大大节省了管理成本和建站成本，最重要的是贴近用户需求，符合时代潮流，顺应了科技发展趋势，是高校网站改革进程中迈出的具有里程碑意义的重要一步。

响应式网站的概念在2010年被美国网页设计师Ethan Marcotte特提出，之后响应式布局的概念在国际上被广泛应用。直至2015年才被中国重视，很多高校相继着手打造响应式的网站，适应日益增长的屏幕尺寸和访问设备类型，为广大用户提供更加优质的上网浏览体验。

固定宽度：20世纪初期，网站都是固定宽度的页面，最开始的PC显示器的分辨率种类不多，因为当时电脑普及度不高，即使有变化也是 800、960、1024、1280等几种。后来随着显示器越来越多，笔记本，智能手机的普及，采用固定尺寸的页面就出现了大问题。在大屏显示器上整个页面显的特别小，在小屏显示器上网页又出现滚动条导致用户体验极差。

多版本网站：最开始的解决方法，是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做虽然保证了效果，但同时需要高校相关部门投入更多的人力和精力去维护好几个版本的站点。而且网站有多个入口，会大大增加系统架构的复杂度。

自适应：后来人们就开始想能不能"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。

响应式： 采用自适应布局的话，如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚。为了解决这个问题而衍生出来的一种全新的设计布局方式，那就是当下最受欢迎的响应式布局。

响应式网站又被称为HTML5网站、H5响应式网站。响应式网站是为了让网站更好的兼容移动设备、确保良好的用户浏览体验而生。响应式网站是网站建设的风向标，是未来网站建设的发展趋向。

设计理念

主要是CSS根据屏幕宽度，自动调整网页DIV显示和布局，以适应不同尺寸屏幕优化浏览体验。页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是Pad，或者手机。我们的页面都能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同访问设备。响应式网站设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。大大节省的资金成本和人力运营成本，一套代码，实用不同的终端。

三站合一，维护简单：

PC、Pad、手机、三个网站使用的是同一个网址，同一个后台管理，数据同步更新，所有图片和内容只需要上传更新一次即可，维护简单轻松，大大节省高校信息中心的人力成本和管理成本。

节省开发成本：

摒弃传统网站，选择响应式网站，单从开发阶段就能为高校节省大量时间和资金投入。如果采用传统开发模式，就得为不同的设备同时开发多个版本的网站，意味着后期也需要更多的开发支持费用和维护成本。

节省管理成本：

由于响应式网站上需要管理的内容少，耗时也少，管理起来也更为简便。除此之外，在不同工作流程和布局工具的帮助下，使用适用于不同设备的样板来管理内容也显著简化了管理界面的操作优化。由于应用基本业务逻辑带来管理的单一化，可以明显改善网站在不同设备上的用户体验。

用户体验好，响应时间快：

响应式网站的最大优势在于能兼容各种设备，而非使用传统方式将用户跳转至设备专用网站，响应式网站无需在网站设置跳转，也不用更换IP和域名，从而极大完善了用户上网体验和站点相应时间

页面风格和效果更多样化：

响应式网站可以使用集成式设计和CSS表单，使网站无论在何种设备上都能营造出风格一致的感觉和外观。使用新的设计技术，例如：滚动视差网页设计、平面化视觉设计、一页式网页设计... 区别与传统网站，可以使用户留下更好的印象，提升高校品牌文化在网站的应用落地。

聚合的数据统计功能：

若使用传统网站，您就需要多个网站来适应不同浏览平台。这让网站运维人员跟踪网站的访客总数、单个和总体转换率以及从一个网站移至另一个网站的访客数量变得十分困难。与之形成鲜明对比的是，响应式网站配有优化的分析程序，可处理响应式报告并应对多台设备，把所有分析和报告整合为一份，在简化监控和维护的同时继续保证网站正常运行。

提升搜索排名：

具有响应式设计布局的网站更符合搜索引擎收录规则。首先，维护此类网站所需的时间缩短，只需一组超链接来优化该网站在搜索引擎中的排名；其次，站点管理员将有更多时间拟定全面的搜索引擎优化策略。毫无疑问，响应式网站让高校网站维护人员能集中精力维护管理一个兼容所有设备的网站，从而节省大量时间和资金的投入。

提升离线用户体验：

网站响应式设计让网络管理员可以抽出更多时间和精力为不同设备的各种用户提供更优质的内容，而 HTML 5 的非凡处理能力使网站访问更为轻松，因为启用 HTML 5 的智能手机和平板电脑将会迅速普及，成为市场的主流。HTML 5 混合应用程序有能力容纳电子邮件、新闻邮件，用户无需将设备接网即可读取的其他内容。

1.维护成本不同

响应式网站只需要维护一个网站的内容，如果PC网站与移动端网站分开，则需要至少两次的维护。

2.避免内容重复：

响应式网站在移动端和Web使用相同的网址,而移动端网站是根据客户提供的域名指向不用的网址，对于搜索引擎来说是不友好的，它认为你的内容有抄袭的嫌疑。

3.用户体验不同：

响应式网站可以解决几乎所有主流屏幕的自适应，达到最佳的视觉效果。而移动端网站需针对于每个屏幕尺寸单独制作，访问不同网址，不同页面效果，体验感差，且工作量大。

4.用户的互动体验不同：

由于创建账号需要输入大量信息，用户更喜欢在PC端创建个人账号，而访问又趋向于在移动端完成。然而移动端网站访问独立移动站的内页一般是重新定向到首页，就这导致用户在访问某个社交平台发布的某个产品的内页会产生自动跳转，造成跳出率非常高。响应式网站却能很好的解决这个问题。

1、背景大图+简单多列布局

背景大图和简单多列布局算的上是黄金搭档。一方面，背景大图可以充分吸引用户的注意力，激发用户的兴趣，另一方面，多列布局将次级元素以简洁、明了的方式呈现出来，更进一步让用户有点击浏览的欲望。除此以外，使用这种布局模式的网站不仅看上去很干净、清爽，有足够强劲的视觉表现力。

相关趋势：

现在使用这种布局的网站越来越多地采用色彩丰富的图标或插画，让网页更显丰富和多彩。另外，这种风格也常与扁平化设计风格结合在一起。

2、单页单栏布局

如果没有太多的内容，或者只是想做一个主题页面，在近几年很火热的单页式设计就非常适合你。它非常适宜于展现极简的内容。单页式设计最适合于小网站或者小型项目的设计。它可以让介绍页面更简洁，也能让简单的信息更突出，更有分量。

相关趋势：

和单页单栏设计布局结合最紧密要数动画效果和视差滚动。这些效果可以让略显沉闷的单页式设计变得生动有趣，增添一些不一样的色彩。

3、不规则栅格

我们还可以在网站中使用自定义的不规则栅格布局，将栅格分成多个整齐的行和列或是经典的4*4格局等。自定义栅格布局可能在设计师的作品集中最为常见，不同设计师通常会对栅格系统有不一样的理解和运用。除了视觉化元素以外，不少设计师还在栅格中填充色彩或文本信息。它可以在呈现大量内容的同时不显冗余、繁琐，它具有规律性和可预见性，用户能够更加快速获取想要的信息。

相关趋势：

不少设计师开始将平铺的网格与动画结合起来，比如设置点击按钮让网格翻转显示额外的信息。另外，栅格系统也可以和卡片式设计很好的结合在一起，更好的整合图片、文字等多种元素。

4、经典的F式布局

用户在浏览网页时习惯沿着F式的阅读轨迹。这也就是说，用户喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。这种F式的阅读模式对应的网页布局就是F式布局，将最关键的信息沿着字母F的形状放置。这迎合了用户的阅读习惯，便于用户与网站进行交互。

相关趋势：

提到F式布局，设计师常会想到侧边栏。有时，他们会翻转侧边栏的位置，或是将侧边栏与导航菜单结合在一起。还有，不少设计师在F形状区域使用超大背景图吸引用户的注意力。

5、极简分层

极简主义的设计一直都很受欢迎，极简主义提供了充分的留白，能够营造轻松愉悦的氛围，同时也会让网站的重点内容更容易被聚焦。而在极简化的页面中添加几个分层，可以让信息更有层次，也使得这个页面拥有更多细节、更生动有趣。

1、要有专业水准的美工：

一个好的美工，可以优化网站的功能和管理，他能够准确的给出数据，调整网站的内部结构。所以，建设响应式网站需要一个技术成熟，专业技能过硬的美工支持。

2、准确的定位：

一个网站需要有准确的定位，让网站的内容看起来简洁明了，也能让用户快速找到自己需要的信息，从而提高网站的知名度。有了准确的定位，研发人员才能更好的开发网站功能，管理员才能更有目的的去丰富网站内容。

3、把握整体的结构：

制定响应式网站，大家需要打造不同的板块，对于板块的内容，大家要统一协调，不可重复内容。否则，会给用户带来繁琐的印象，不方便用户浏览。

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。