网页设计师只需要担心格式适用于台式电脑的网站。大多数显示器和显示器都易于设计,并且尺寸最合适。然后是移动网络的兴起。
自移动网络出现以来,一个重要的争论是,是否要设计一个自适应的响应式网站,该网站将改变以适应不同的门户网站或设计一个独立的移动网站[已知俗称为m(点)设计,用于熟悉的http://m.site.com
URL结构]。
为了我们今天的讨论,我们将m(点)设计视为过去,因为它不再被认为是最佳实践,因为它涉及创建一个内容更少,图像更少,导航更简单的全新网站。
因此,考虑到这一点,让我们来看看为多门户生活方式设计的不同方法。
什么是响应式网页设计和自适应网页设计?
早在本世纪初,网页设计的争论就在固定布局与流畅布局之间。流体设计布局设置为百分比,并且它们被拉伸以适合浏览器的框架,而固定布局被锁定在由设计者设置的像素宽度确定的单个布局中。
这些方法都没有完美无缺。虽然流体模型适用于多种屏幕尺寸,但它们在宽屏显示器上看起来很瘦,没有吸引力。固定设计在他们设计的屏幕上运行良好,但几乎不可能在小屏幕移动设备上使用。
近年来的两个主题是响应式网页设计和自适应网页设计。虽然这两种方法都有助于满足Google建议,即移动设备可以访问网站,同时具有良好的用户体验和强大的性能,但每种方法都有其优缺点。
首先,自适应网页设计(AWD)就像旧的固定设计一样,它使用基于断点的静态布局。AWD用于检测屏幕大小并为其加载适当的布局。这涉及设计(至少)六个屏幕宽度。对于多种不同的屏幕尺寸,设计和开发具有AWD的站点可能是额外的工作。
这种方法确实可以让您对样式和内容策略进行一定程度的控制,而您无需使用响应式设计。但从长远来看,设计至少六个“新网站”形式是一项很多工作,你不一定要与响应式网页设计有关。
Carrie Cousins在The Next Web上说你应该“考虑使用自适应设计:
- 特定于设备的体验是必要的;
- 实际上,您可以为每个设备创建不同的体验;
- 您可以处理和维护自适应模板和资源; 要么
- 您的用户群正在许多不同的设备上访问您的信息(如果分析显示70%的用户在一台设备上,那么自适应用户界面可能不值得花时间)。
另一方面,响应式网页设计(RWD)并没有像AWD那样对内容和样式进行过多的控制,但是构建和维护的工作量确实要少得多。RWD就像流体设计的后代。无论目标设备是什么,它都适应屏幕的大小。响应使用CSS媒体查询根据目标设备更改样式,然后根据设备的屏幕大小加载页面布局。
“响应式设计在构建和维护方面的工作要少得多。”
因为RWD在屏幕上移动并移动内容以便流畅地适应设备窗口,所以在转换时,您需要特别注意设计的视觉层次结构。这是在多个设备和多个浏览器上进行测试时派上用场的地方。
许多设计师认为响应式设计是更具挑战性的设计方法,因为他们必须规划几乎无限数量的屏幕尺寸。即使有这种皱纹,RWD几乎总能产生更清晰的代码和更好的适应性,因此它是建立在未来的基础上的。
为什么响应式设计是网络的未来
仍然没有出售为什么响应设计负责任地设计?这个怎么样:
- 这对你的读者来说更愉快。与AWD一样,屏幕尺寸没有固有的限制。虽然响应式网站设计可以保证在任何屏幕尺寸上都能很好地工作,但自适应设计只能在布局能够使用的屏幕上工作。
- 响应式设计加载速度更快。自适应网站需要加载所有可能的布局,而响应式网站只需加载适用于所有平台的网站。
- 它具有前瞻性。因为它不限于您指定的屏幕尺寸,所以无论屏幕尺寸如何,您的页面都会在下一个三星或iPhone(更不用说平板电脑和智能手表)上加载和显示效果。
最重要的是,响应式设计会自动整合到您的InVision Studio项目中(因此您没有任何借口)!响应式工具是Studio本身的核心原则。这允许用户利用组件和响应约束容易且快速地创建相同屏幕的各种版本。
欢迎来到这样一个世界,在这个世界中,您的iPad,iPhone,Android和可穿戴设备版本都可以轻松地集中在一个集中设计文件中。Studio的飞镖靶允许您在调整尺寸时实时查看更改,而不必通过反复试验查看潜在的断点。