《移动优先与响应式Web设计》一第1章 响应式网页

简介:

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第1章,作者: 【美】Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 响应式网页

移动优先与响应式Web设计
“有一样东西,它大概是不喜欢墙……”

——罗伯特·弗洛斯特《修墙》

在开始写这本书时,我就能意识到无法确保你会拿着这本小小的书,阅读印刷版。你或许会在台式计算机屏幕阅读电子版;或许会在坐车上班时,在手机上翻页;或在平板电脑上滑动页面;或许根本不会阅读这段文字,而是由计算机为你朗读此书。

总之,我并不了解你,不知道你如何阅读这本书,根本没可能知道。

出版业终于承袭了网页的一大特色——灵活性。图书设计师和出版人克雷格·莫特认为出版业正迅速进入“后人工”时代——数码时代正在重新定义“图书”。

当然,网页设计师一直都要顾及这个问题。事实上,网页设计这个行业从来不是“人工物品”。到头来,网页设计师都不会造出东西。没有有形的对象,不能拿着,不能珍藏,不能传给下一代。纵使作品多么五光十色,网页设计师用的词汇都离不开“报头”、“留白”、“行间距”,甚至颇为荒谬的“折叠”(fold)。这些词汇都是来自印刷设计的,只不过是取出翻新,重用于崭新的数字媒介。

对于其中一些词汇,重用是理所当然的。事实上,人类都会习惯过去。每当我们搬到一个城市,或者换了一份新的工作,我们都会对应以前的经验,应用至新的、外来的事物,以逐渐适应。由于网页是新兴媒介,很自然地,设计师会借用既有用词。平面设计历史悠久,不下数百年,它为网页设计师提供了一套语言,若我们不用以构建自己的行业,那就未免太过大意了。

网页界取自印刷界的还不止于此。事实上,即使不以为意,我们还借用了另一个概念——画布(见图1.1)。


1

对于任何创意媒介,艺术家在进行创作时,首先都会选择画布。画家会选用纸张或布料,雕塑家会选用矿石。不论媒介如何,选择画布都是非常关键的,并且充满创意。未画第一笔,未凿第一刀,画布早已为作品赋予了维度与形状,宽与高,为作品定下了界限。

网页设计也尝试模仿这个步骤,就连叫法也一样:在图像编辑软件上设定画布——空白文件的宽与高,维度与形状。以上方法有个问题,那就是我们面对的根本不是真正的画布,而是浏览器窗口,它们各不相同,各有瑕疵(见图1.2)。请面对现实。一经网上发布,所有设计都将受用户支配,由用户来设定字体、屏幕颜色、窗口的形状和大小。


2_3

为了解决上述问题的不确定性和多样性,设计师会设下限制:以像素设定字形,或使用定宽界面,指定屏幕像素下限。设下如此限制有点像选择画布——让自己了解作品设定,以不变应对网络的万变。

然而,最好(有时候最坏)的是,网页能违反简单定义(感到气愤时,我真的想豁出去,不去理会种种限制)。网页设计师所定的限制也不外如是,很容易就会被违反。若浏览器窄于预期下限(见图1.3),水平滚动条和被掩盖的内容就会改变用户体验。除此之外,业务和客户亦会受影响(见图1.4)。受最低屏幕分辨率的限制,重要的链接或组件会变得脆弱,用户设定的视域会裁去这些组件,而不受我们的控制。


4


图1.4 影响业务和客户体验的细节(什么是“Reg”?其实是“Register Now”链接,可是被遮盖了)

相关文章
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
271 3
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
370 0
|
11月前
|
人工智能 搜索推荐 IDE
突破网页数据集获取难题:Web Unlocker API 助力 AI 训练与微调数据集全方位解决方案
本文介绍了Web Unlocker API、Web-Scraper和SERP API三大工具,助力解决AI训练与微调数据集获取难题。Web Unlocker API通过智能代理和CAPTCHA绕过技术,高效解锁高防护网站数据;Web-Scraper支持动态内容加载,精准抓取复杂网页信息;SERP API专注搜索引擎结果页数据抓取,适用于SEO分析与市场研究。这些工具大幅降低数据获取成本,提供合规保障,特别适合中小企业使用。粉丝专属体验入口提供2刀额度,助您轻松上手!
584 2
|
移动开发 前端开发 API
鸿蒙web加载本地网页资源异常
在鸿蒙NEXT Api 12中,为解决Web组件加载本地资源(如图片、CSS等)失败的问题,我们采用拦截机制。具体步骤如下: 1. **替换路径**:通过正则表达式将HTML和CSS中的资源路径替换为带有标记的URL(如`http://local`),以便后续识别。 2. **拦截与返回**:在资源加载时,拦截带有标记的URL,读取对应的本地文件并返回给Web组件。此过程确保了本地资源能正确加载和显示。 代码实现包括路径替换、资源拦截及响应构建,确保Web页面能够顺利加载本地资源。
648 7
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
JavaScript API 开发工具
(H5-Web3D-ThreeJS)在网页三维CAD中绘制窗户模型
本文介绍了如何使用mxcad3d在网页中创建一个简单的三维窗户模型。通过官方教程搭建环境,编写绘制窗户模型的代码,并在点击按钮后展示模型效果。最终模型包括窗框和玻璃部分,具备丰富的三维建模功能和便捷的API支持。
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
422 5
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
Web App开发 前端开发 网络性能优化
Web网页端IM产品RainbowChat-Web的v7.2版已发布
RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。
242 1
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序