响应式Web设计:它在每个设备上下载相同数量的数据吗？

Question

我想重新设计我的博客和网站上的wordpress，以适应不断增加的移动用户和平板电脑用户。

我也听说有反应的设计。我想知道，响应性网页设计是否会在电脑屏幕和移动设备上下载相同数量的数据？

我还看到许多大的营销公司没有投资于响应式的网页设计，而且仍然在为移动设备进行单独的网站优化。那么，我应该选择什么呢，一个响应性的网页设计，还是一个为移动优化的单独的网站？

Answer 1

正如伊桑·马尔科特( Ethan Marcotte )在ALA 306中所定义的那样，“响应性设计”一词指的是根据用户屏幕大小对您的HTML应用不同样式规则的技术。关于响应性设计的更多解释，下面是一个迈克·博林格( )的漂亮甲板。

在此模型中，无论屏幕大小，您都会向客户端发送完全相同的HTML。但是，如果CSS中引用的资源(主要是图像)没有为某些屏幕分辨率显示，则可能无法下载它们。例如，对于大屏幕，您可以在CSS中使用high-res.png，对于小屏幕low-res.png，web客户端可以选择只下载活动样式的图像。(请参阅@DBUK的评论，其中至少有一个重要的客户端正在同时下载！希望客户们能精力充沛！)

这种技术在您的情况下可能是有意义的，或者创建一个单独的移动站点可能更有意义。

不同的设备可能意味着不同的使用上下文。手机总是在你的口袋里--用户如何在杂货店里使用你的网站？你想把整个网站都发给他们吗？或者只是几个特征？还是完全不同的特征？如果他们坐在沙发上，随意地看电视看他们的iPad怎么办？

移动设备往往拥有较慢的处理器、较少的内存和较慢的连接速率(所有这些“真理”每年都变得不那么真实)--出于性能原因，您可能希望发送一个单独的移动站点。

我敢说，一般来说，站点(即博客)越是静态、文本和内容驱动，就越有可能使用现有的HTML和响应性设计。越多的互动，多媒体和用户驱动的网站(即商店)，你应该更好的机会，您应该为不同的设备类型的单独的网站。

另外，不要忘记，在这个时代，移动体验应该是一个站点还是一个应用程序的问题。

Answer 2

响应设计不应该在每个设备上下载相同数量的数据，因为并不是所有设备都有相同的多媒体需求。移动站点应该使用lo图像，并且与台式机/膝上型计算机/平板电脑的站点相比，在本质上要少一些图形化。如果你想把你的移动站点和普通站点结合起来，那么你需要考虑到这一点，否则你的网站就没有很好的响应能力，是吗？

幻灯片peteorpeter链接到提及响应图像脚本的丝丝组，它允许您使用JavaScript为适当的设备提供适当大小的图像，理想情况下不需要下载多个版本。对于布局图像资产，这通常是通过媒体查询指定不同屏幕分辨率的不同样式来完成的。

Answer 3

我认为很多公司将需要很长时间来更新他们的网站，见鬼，还有一些在使用表格。响应性，以及移动第一的方法，绝对是当前流行的词汇。

正如上面的海报所提到的，你应该在你的手机/低分辨率设备上使用lower图像。媒体查询将帮助您针对所有较低的分辨率。然而，我听说移动safari会忽略显示:没有规则，也下载桌面版本的图像。而且，如果你沿着响应的图像路线走，它会给移动处理器带来很大的压力--每1像素3字节.我想。有很多解决方案可以绕过正在下载的额外内容--一些相当麻烦的- https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0。

有关响应性网页设计的缺点的一些信息，请查看http://www.webdesignshock.com/responsive-design-problems/。不过，别让那篇博文把你拖垮了。另一本书写了一本关于这一主题的绝妙书-- http://www.abookapart.com/products/responsive-web-design。这是绝对值得抓住电子书版本。