《移动优先与响应式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”链接,可是被遮盖了)

相关文章
|
1月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
37 1
|
1天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
4天前
|
SQL 安全 搜索推荐
Web安全-伪静态网页
Web安全-伪静态网页
15 3
|
27天前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
63 9
|
26天前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
53 7
|
3天前
|
Web App开发 编解码 前端开发
构建响应式Web应用的最佳实践
构建响应式Web应用的最佳实践
12 0
|
1月前
|
XML JavaScript 前端开发
哇塞!Web 前端惊现 DOM 元素神操作,一场惊心动魄的网页变革,你准备好了吗?
【8月更文挑战第23天】在Web前端开发中,熟练操作DOM元素至关重要。DOM作为一种编程接口,将HTML/XML文档表示为节点树,便于使用JavaScript访问及修改文档内容与结构。
46 0
|
22天前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
33 0
|
28天前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
61 0
|
28天前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
28 0