《响应式Web设计实践》一1.3 独立站点

简介:

本节书摘来异步社区《响应式Web设计实践》一书中的第1章,第1.3节,作者: 【美】Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 独立站点

响应式Web设计实践
在写这本书的时候,也许最普通的处理设备多样性问题的方法,就是为特定种类的设备(或者在被极端误导的情况下,为每一种特定的设备)开发一个独立的站点,通常这种做法会开发一个移动设备站点和一个台式电脑站点(如图1.2所示)。然而如果采用这种方法的话,站点无疑会变得越来越多:对于一个公司来说,需要有一个台式电脑站点、一个平板电脑站点、一个可触摸移动设备站点以及一个类似的却不支持触摸的移动设备站点。一个公司拥有四个不同的站点,这似乎有点不太合常理。


2

这种方法当然有其优点:为每一种设备创建独立的站点,使得站点从内容到行为上都更容易为提高使用体验而进行有效的裁剪。但这是否有效,还要取决于具体的项目——商业目的、用户、团队能力、预算以及所有其他有趣的商业因素都在共同起着作用。

但可惜的是,这种方法无法很好地进行扩展:四个站点需要分别进行更新、测试以及维护。通常而言,即使只创建一个站点就需要好几名工程师了——想象一下,当项目需要创建四个站点时,每个工程师肩膀上的负担有多重!更有甚者甚至建议还要为每个站点定制内容,这无疑又要求人们投入更多的时间和精力。

分歧
有时人们会问我是否想到过收敛的问题,即是否可以通过减少设备和平台的种类来解决上面这些复杂的问题,对于这些人,我只想对他们说一个词:僵尸。

作为Web上最好的文章之一,在“The Coming Zombie Apocalypse”(即将到来的僵尸启示录)一文中,作者Scott Jenson认为:设备的多样性将会加剧。他断言不仅科技会继续加剧多样性,成本的降低也会起到同样的作用:

“智能手机硬件的商品化仅仅是个开始,集成了‘片上系统’的设备以及免费克隆版Android Linux系统的价格暴跌,不但使设备的价格更加低廉,而且使基于云计算的设备的价格也进一步走低。这些设备已经被用在了索尼爱立信的LiveView,以及类似于Sonos家庭音乐系统这样的家庭应用当中。

这些例子还都仅仅是个开始,有迹象表明,新一轮数量巨大的廉价设备即将入侵我们的生活——电子僵尸启示录,如果你愿意这样叫的话。”

市场看起来好像的确是在迎合Scott Jenson的理论——智能手机变得越来越便宜,哪怕是那些长期以来一直算是比较昂贵的手机(比如某些版本的iPhone),现在也已经可以在签订合约之后免费获得了。

随着这些设备制造成本的下降,该领域的准入门槛也会随之降低,并向越来越多拥有更多系统和设备的厂家敞开了大门。事实上我们不会看到任何收敛:新设备会如洪水般涌现,而且它们会成为影响Web体验的因素。

即使今天我们可以跟得上独立站点的脚步,那么明天我们该怎么办?虽然这是个比较极端的例子,但是如果有一天冰箱也可以上网,难道那时的我们也要尝试去为冰箱创建独立的站点吗?

如果何物体都可以被当做屏幕会发生什么?2011年,微软发布了一款被称为OmniTouch的原型设备,它是一个可以放在你肩膀上的、沉重而丑陋的设备。无疑它在美学上是欠缺的,但它却在别的方面补偿了我们无数个惊讶——它可以将显示的内容投影到任何物体上——墙上、地板上、甚至是你的手上,如图1.3所示,你还可以与投影交互。OmniTouch去掉了所有显示器固有的限制,从而使得任何物体都可以是屏幕。我倒是很好奇,什么时候我能见到为人类手掌优化过的网站。


3

开发独立站点并不是一种未来友好型的方法,为了能在即将到来的海量设备大潮中生存下来,我们必须拥抱Web的灵活性。

相关文章
|
10天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
15天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
26天前
|
机器学习/深度学习 前端开发 算法
利用机器学习优化Web前端性能的探索与实践
本文将介绍如何利用机器学习技术来优化Web前端性能,探讨机器学习在前端开发中的应用,以及通过实际案例展示机器学习算法对前端性能优化的效果。通过结合前端技术和机器学习,提升Web应用的用户体验和性能表现。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
监控 前端开发 JavaScript
构建高性能Web应用:前端性能优化的关键策略与实践
本文将深入探讨前端性能优化的关键策略与实践,从资源加载、渲染优化、代码压缩等多个方面提供实用的优化建议。通过对前端性能优化的深入剖析,帮助开发者全面提升Web应用的用户体验和性能表现。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。

热门文章

最新文章