《响应式Web设计全流程解析》一1.6 压死骆驼的稻草

简介:

本节书摘来异步社区《响应式Web设计全流程解析》一书中的第1章,第1.6节,作者: 【美】Stephen Hay 译者: 余果 , 等 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.6 压死骆驼的稻草

对于本书理念的思考开始于四年之前,那时我正在跟进一个客户项目,在Photoshop模板中创建设计。Photoshop模板能表示对应的Web页面和页面中包含的元素。我们需要对这些页面进行清晰的描述才可以做设计稿。我们一般也是这么做的。但在这个项目里,做前端的公司要求每个元素必须在Photoshop文件里精确描述。如果链接是蓝的,那Photoshop模板文件里所有用到这个链接地方都得有所体现。我们不能简单标注下"链接是蓝色的",因为Photoshop模板文件就是他们的文档。好吧这也是一般的做法,但是紧接着一件令我不爽的事发生了,客户反馈需要在段落间添加元数据,并且头部的尺寸要改,虽然这些在当时也很常见。接下来的两天,我所做的只是打开一个Photoshop模板文件,增加所需改动部分的高度,手工移动每一个像素,最终对每个Photoshop模板文件依法炮制。

如果这个项目是个该死的"响应式"设计项目会怎样?在100个Photoshop文档上做了相同的操作后(假设每个文档20页,五屏大小),我宁愿像个胎儿一样蜷缩在某个黑暗的角落。

当我意识到两天的工作量用两行CSS代码就能搞定时,我立刻决定再也不用Photoshop做模板了,并开始创造一种全新的、省时省力省脑细胞的工作流程。

2010年我成为了一名独立顾问,可以有机会实践我的新工作流程:客户必须无条件接受我的工作方式。我发现,不论对客户还是对我自己,这种方式效果都很好。并不是说这种方法没有自己的问题(这些问题现在仍然存在),但和瀑布流程相比,它更快、更简单、更有趣,客户也更喜欢看见从结构化内容到成品的整个设计演化流程。另外,无需我多言,他们也能看到并欣赏我们为一份设计稿的诞生所做的努力。

相关文章
|
6月前
|
存储 算法 安全
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
316 41
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
190 3
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生,在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲,涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点,并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性,同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
1011 11
|
安全 前端开发 Java
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域,本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS,介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF,提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略,开发者可以构建更安全的Web应用。
632 4
|
安全 Go PHP
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS,介绍了输入验证与净化、内容安全策略(CSP)和HTTP头部安全配置;针对CSRF,提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法,帮助开发者有效保护网站和用户数据安全。
440 2
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
308 5
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
1月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
166 4

热门文章

最新文章

推荐镜像

更多
  • DNS