响应性和自适应网页设计是创造这两种方法多设备浏览的网站,可以在多种屏幕尺寸的工作。虽然响应的网页设计由谷歌推荐,是目前比较流行的两种方法,这两种方法对多设备的网页设计有自己的长处和自己的短处。
让我们来看看响应和自适应网页设计之间的差异,特别关注这些关键领域:
- 易于开发
- 您对设计的控制水平
- 设备的广度/屏幕支持
- 今后如何友好的解决方案
- 总体下载速度和网站性能
一些定义
在我们进入我们的身边并排的响应性和自适应网页设计的比较,让我们花点时间来看看这两种方法的高层次的定义。
网站的响应有一个流体布局,改变和适应,无论所使用的屏幕尺寸。媒体查询允许响应网站甚至改变“对飞”如果浏览器被调整。
自适应设计,采用基于预先确定的断点固定尺寸为客户提供最合适的布局版本因为这是当第一次加载页面发现屏幕尺寸。
有了这些广泛的定义,让我们来谈谈我们关注的重点领域。
易于开发
响应和自适应网络设计之间的最显著不同的是在这些解决方案被应用于一个网站的方式。由于响应式设计创建了一个完全流动布局,最好是在哪里你项目中使用重新设计从地上爬起来的网站。
试图改造现有网站的代码,成为响应往往是一个艰苦的事情,因为你根本就没有控制的水平,如果你是从头开始开发这些代码,并采取响应的设计考虑到了这一过程的最早阶段,你将不得不。这意味着,当你改造一个网站响应,你不得不做出妥协,以保持现有的代码库中。
如果您正在使用现有的固定宽度的网站工作,自适应方法意味着你可以离开该网站是专为完整的尺寸,并根据需要额外自适应添加断点。在某些情况下,如果一个项目的预算是小,如果它只会容纳的开发工作少量的,你可以选择只为小屏幕/移动为中心的大小增加新的自适应断点。这意味着您将允许更大的屏幕,都使用相同的布局 – 也许一个960断点的版本这是什么网站很可能是最初设计为。
上攻到自适应方法是,你可以更好地利用现有网站的代码,但缺点之一是,你正在创建你选择支持每个断点不同的布局模板。这必将对开发和维护的长期本解决方案所需的工作量产生影响。
设计控制
一种响应网站的优势之一是,他们的流动性使他们适应并支持所有的屏幕尺寸,而不是只在一个自适应的方法确定的预先设定的断点。然而事实是,响应网站可以看一些关键的屏幕尺寸(对应于市场上流行的设备一般大小)很大,但视觉设计往往打破了这些流行的分辨率之间。
例如,一个网站可能在1400像素,960像素中间的屏幕尺寸,屏幕看起来很小的480像素,但什么宽屏幕布局很好看这些尺寸的介于两者之间的状态?作为设计师,你有一点无法控制这些介于两者之间的大小和页面的那些大小视一眼往往不太理想。
具有自适应网站,你有被使用过的各种布局更设计控制,因为它们是基于已建立的断点固定的大小。这些尴尬的状态在两者之间是没有问题的再因为你精心设计的每一个“看”(即每个断点的显示屏)将交付给参观者。
至于因为这级设计的控制可能听起来诱人,你一定要知道它是要付出代价的。是的,您对每一个断点的外观完全控制,但是这意味着你必须投资设计为每个独特的布局所需要的设计时间。你选择以设计为,更多的时间越断点,你需要在这个过程花费。
支持的广度
这两种反应和适应性网页设计欣赏相当强劲的支持,尤其是在现代浏览器。
自适应网站需要对屏幕尺寸的检测无论是服务器端组件或Javascript。显然,如果一个自适应网站需要JavaScript,这意味着浏览器需要有它启用,以使该站点正常工作。这可能不是一个大问题给你,因为大多数人都会有使用Javascript在他们的浏览器,但任何时候一个网站有上的任何一个关键的依赖,应该注意。
网站的响应和动力他们媒体查询将在所有现代浏览器正常工作。你将有唯一的问题是用最古老的版本的Internet Explorer自8及以下版本不支持媒体查询。要解决此,一个Javascript填充工具经常使用,这意味着有JavaScript的依赖在这里为好,至少在IE浏览器的那些过时的版本。同样,这可能并不多你一个问题,特别是如果你的网站的分析表明您没有收到使用这些旧版浏览器众多参观者。
未来的友好
网站的响应的流体性质让他们在适应网站的优势,当谈到未来的友好性。这是因为这些网站的响应不建,以适应只有先前建立一套转折点。他们适应,以适应所有的屏幕,包括那些实际上可能不是当今市场。这意味着响应站点将不需要被“固定”,如果新屏幕分辨率突然变得流行。
看着在设备景观令人难以置信的各种(截至2015年8月,有超过24,000名不同的Android设备在市场上),有一个网站,会尽力适应这种广泛的屏幕是未来友好至关重要。这是因为横向不可能得到任何在将来,这意味着,在设计用于特定的屏幕或大小将变得不可能,如果我们尚未达到这一现实更少多样化。
在这种情况下比较的另一边,如果一个网站是自适应的,它不适合新的决议,可能会在市场中变得重要,那么,你可能会被迫断点添加到您所创建的网站。这增加了设计和开发时间到项目和它意味着那些自适应网站必须一致监测,以确保没有新的中断点已被引入必须添加到网站上的市场。再次,与设备的多样性是它是什么,不必不断地用新的断点检查新的尺寸和可能容纳它们是会对工作产生影响,你必须支持一个位点和保养的费用一个持续的挑战公司或组织对他们来说,网站是为。
性能
自适应网页设计早已被从一个贫穷的解决方案被告(不公平所以在很多情况下),下载的速度/性能的角度来看。这主要是由于这样的事实,在这种方法中的初期,许多网页设计师只需上涨小屏幕媒体查询到网站的现有CSS。这迫使用于大屏幕图像和资源传递到所有的设备,即使这些小屏幕没有在最终的布局中使用它们。因为这些天响应式设计已经走过了漫长的道路,但现实是,今天的质量响应网站不从性能问题的困扰。
下载速度慢和臃肿的网站是不是一个负责任的网站的问题-它是一个可以在所有网站上发现了一个问题。图片过于沉重,从社交媒体,过度的脚本和更饲料和权衡下来的网站,但都反应和适应性网站建成后可快速装载。当然, 它们也可以以一种不会使性能优先构造,但是这不是解决方案本身的性状,而是参与网站本身的发展团队的一种反映。
除了布局
一个自适应网页设计中最引人注目的方面是,你不仅在网站设置断点的设计控制,还以为是为那些网站版本提供的资源。例如,这意味着视网膜图像可以仅发送到视网膜的设备,非视网膜屏幕获得更适当的图像是在文件大小更小。其它网站资源(JavaScript文件,CSS样式等)需要,将用于当他们被巧妙地只交付。
这种利用自适应网页设计远远超出“如果你是改造一个网站,自适应可使用一个更简单的方法。”所有的网站,包括彻底的重新设计,对简单的公式可以从一个更聪明的方法中获益,以更有针对性的体验。
此方案显示了这种“有求必应与适应性”的争论的细致入微的性质。虽然这是事实,自适应的方法可能更适合较敏感的部位改造,它也可以是全重新设计的最佳解决方案。同样,在某些情况下,一个负责任的做法可以被添加到现有网站的代码库,使该网站的充分响应方法的所有优点。
哪个方法更好?
当谈到与响应自适应网页设计,没有明确的“赢家”,虽然反应肯定是比较流行的做法。事实上,“精益求精”的方法取决于具体项目的需要。此外,这并不需要是一个“要么/或”的情况。有许多网络专业人士谁正在建设,结合了最好的响应网页设计(流体宽度,未来支持)与自适应设计(更好的设计控制,站点资源的智能负载)的优势点。
俗称RESS(自适应网页设计与服务器端组件),这种做法表明,真的有没有“一刀切的解决方案。”无论是响应网页设计和适应性都有自己的长处和他们的挑战,所以你需要确定哪一个将工作最适合你的特定项目,或者如果一个混合的解决方案实际上可能最适合您。