[译]响应式Web设计十年记
本文作者是响应式设计创始人，《网站重构：应用Web标准进行设计网站重构》的联合作者。作者的几本重要著作改变了前十年的互联网前端开发环境和各公司的岗位设置，也对SEO行业有重大影响。本文原文发表于2020年5月25日
大家好，我突然想起高兴的事情。
十岁了，响应式设计，生日快乐！
时光荏苒，距离当年我的这篇文章——《响应式Web设计》付梓，已经过去整整十年了。一篇文章，在网上挂十年，不容易。更不容易的是，这篇文章，在随后的十年里，居然还引起了一些动静。
值得纪念。于是，我正在撰写和整理一些文章，想看看响应式设计在过去十年里到底引起了哪些动静，以及，展望下，不知道这个概念在未来还会不会引起动静。如果你是好奇宝宝，可以点这里订阅。
虽然，这些整理工作还没结束，但是，现在，我想和大家聊聊，现在的响应式设计，是个什么样子的情况。功劳簿中，我只占小部分，我也会记录这些年为这个概念付出努力的同仁的心水。信笔由缰，诉诸文字，定有不妥，无碍观瞻。
那么，然后，其实吧，严格地说，5月25号，也不算是响应式设计的十周年生日。那篇旧文诞生于2010年5月25日，但是早在之前一个月，这个概念就已经有雏形了。首先，我最早提出这个概念，是在2010年4月6日。那天，西雅图召开了一次会议，我在会议上做了题为《灵敏之道》的一次分享（点此看视频，点此看拙文）。在那次分享中，我展示了我是如何利用流动栅格、自适应图像和媒体查询来创建具备跨平台适应性的Web设计的。上面三种技术，就是响应式设计所包含的最基础的三个要素。
我那次分享的题目《灵敏之道》，实际上借鉴了John Allsopp的《Web设计之道》的名字。在我还是一名刚入行的年轻设计师的时候，John的这篇文章对我影响甚巨。我总觉得，这篇文章塑造了我对于Web的看法。作为一名Web设计师，我总觉得，Web是一个潜力无限的设计媒介。
但是这些思考，我一直没有整理起来。在我做那次西雅图的分享之前，我一直疲于应付各种大大小小的设计项目。这些设计项目需求，往往是针对一个个特定的屏幕单独进行设计，比如做个iPhone页面，做个安卓页面之类的。但是，为什么做一个Web页面，要为了各种设备单独写？重复劳动下，设计师容易烦躁，再加上我一直对创建灵活美好的网页有兴趣，所以，我去了西雅图，想告诉甲方们，你们还有别的选择。
在做PPT前，我写了一个可流动的，基于栅格布局的Web页面，以观察这个页面在各种设备及不同分辨率下的适应效果。其实吧，之前早有类似的，但是基于JavaScript的解决方案，但是，我想试试用CSS能不能实现同样的效果。一番摸索之后，我从Craig Hockenberry的文章《把你的内容装进我的口袋》中获得灵感，发现了媒体查询这个神器可以用于我的方案之中。有了媒体查询，整个设计过程就非常顺畅了。
但是，我依然不知道这种设计方案，应该起个什么名字。
其时，我的朋友Elizabeth去新开业的纽约高线公园玩，尽兴归来后，跟我分享说公园里安放了一些带轮子的休闲椅。几个朋友想靠近呢，就把椅子挪近点。如果大家都是陌生人呢，就把椅子挪开点。有轮子嘛，一切都很方便。闲聊之后，我突然觉得，Web中的图片，是不是也可以再灵活一些，比如，图片的形状，乃至图片之间的空隙可以因访问者而进行自适应的调整。
我记得我花了一个晚上的时间用来研究家具和建筑的动态形式设计；我读了一些使用抗拉材料和嵌入式传感器砌墙的文献，以研究墙体如何在人们靠近时进行自适应弯曲；我读了关于玻璃墙体如何通过传感器在被人按下开关或者接近时变成不透明形态的交互说明；我甚至买了一本很有意思的专业书籍——《交互式建筑》，这本书专门描述如何在空间与人，或实体与人之间创造人机对话。
琢磨了几天之后，我找到了一些文献。虽然它们描述的是同样的对象，但是采取的是不同的名称。一些文献中描述的交互式建筑，在另一些文献中，被叫做响应式建筑。
我豁然开朗。“响应式”这个词语，对于我想要描述的概念而言，恐怕更为确切——一种更懂用户的布局，即让布局去适配用户的屏幕。用户用不着在手机或平板电脑上通过点击或触碰来触发任何交互行为，布局就会自动“响应”用户的设备变化。
关于西雅图那场分享，我其实不太记得清楚细节，因为对于演讲这件事来说，那时的我就是生瓜蛋子，怯场，紧张到不行。我觉得我的分享中规中矩，听众好像还挺买账的？讲完后，我在大厅后面的走廊里遇到Mark Boulton，他跟我聊了聊方案的可行性问题。Mandy Brown听了我的分享，把概念传播了出去，要是他不在，估计这个概念的影响力，也就局限于当时大厅里的几百人了吧。
Mandy当时是A List Apart的编辑，同时也是A Book Apart的创始人。当我懵懵懂懂讲完下台，她径直找到我，郑重告诉我说：“你的这个分享需要形成文章。”于是，当我回家后，我二话不说下笔就写了一个草稿，顺带还做了一个新的设计demo。三周后，紧跟着Jeremy Keith的那本《写给设计师的HTML5书》（中译名为《HTML5+CSS3网页设计入门必读》）之后，我的那篇文章——《响应式设计》也在A List Apart上发表了。
自此之后，动静来了。
如果没有Elizabeth和Mandy的帮助，响应式设计不会有这么大的影响。那场分享，那篇文章，乃至后来出的书，都是在她们帮助下，才得以面世的。深深感谢。
当然，我也深深感谢读者朋友们。如果你读过我的文章，读过我的书，或者使用响应式设计的思想做过一些东西，我要向你致谢。我所做的是微小的事情，随后的这些年里，是你们为这个概念添砖加瓦，构成了一个设计体系。十年了，那么，今后呢？基于我的一个小概念，我期待着看到你们建设的鳞鳞大厦。
谢谢你读到这里。谢谢你在这里。
原文：Ethan Marcotte: "Responsive web design turns ten."，翻译：bennyzhai 2020年5月25日
