Andy Clarke关于新款320和Up

设计师,作家和演讲者安迪克拉克已发布重大更新320及以上,他的'小屏幕第一'移动样板。我们采访了Clarke(AC)关于修订,他对LESS的相对新发现的热情,以及为什么设计师应该考虑以移动为先。

.net:设计师在移动优先时有什么好处?
AC:对我来说,移动或内容优先设计是所有网页设计的起点。想想你几乎在每个网页上看到的元素 - 标题,列表,段落和引文的排版样式。框,表格,表格和按钮。这些元素的外观可能不会在屏幕尺寸或设备上发生变化。只有网格上那些元素的排列才会。

这就是将设计过程分为两个阶段的原因。第一个我称之为设计'氛围' - 排版,颜色和纹理,如边框样式,盒子和形状。第二个是设计一个网格 - 或几个 - 然后在这些网格上安排元素以用于不同的响应式设计断点。当我开始设计时,我专注于这种氛围,它成为内容/移动优先设计的基准。从那时起,只有在每个断点处需要它们时才添加文件和样式,这将使我们的代码更高效,页面更快。每个人都赢了。

.net:为什么你觉得需要更新320和Up?它原来的形式没有达到什么目的?
AC:我写了原版320和Up一年前。当时我们刚刚开始使用响应式网页设计和许多网站,例如我的和包括那些网站在内的着名网站西蒙科里森乔恩希克斯DConstruct 2010,加上框架和样板等HTML5 Boilerplate,从桌面向下构建他们的CSS3媒体查询,而不是小屏幕。为了把事情做好,我写了320和Up。

今天,内容优先框架是常态。 HTML5 Boilerplate及其移动表兄现在为小屏幕构建他们的样式表。但Twitter的引导无数其他框架包括流体网格,所以我想知道320和Up是否仍然相关。

我发现320和Up对很多人来说仍然非常相关,特别是对我而言。自从我编写它以来,我已经在我所使用的每个网站上使用过它的版本,当我开始任何新的响应式网页设计项目时,它已经成长为包含我需要的文件和样式。公开版,现在在GitHub上,需要更新以包含来自HTML5 Boilerplate的最新文件和样式以及与Bootstrap的更好集成。我还想包括一些我最喜欢的响应测试工具。

.net:新版320和Up有哪些重大变化?
AC:我几乎简化了一切。我已经删除了我在蓝色月亮中只使用过一次的文件和样式,有时根本没有。那包括Respond.js,一个用于在旧版本的Internet Explorer中启用CSS3媒体查询的polyfill,因为这些天我为IE7 / 8的用户提供固定和居中的布局,与以往一样。

在我的工作中,我正在靠近Bootstrap并远离HTML5 Boilerplate,320和Up反映了这一点。这就是为什么320和Up的排版样式,以及按钮,框,表格和表格都使用与Bootstrap兼容的类属性值。

我从未想过320和Up成为像Bootstrap或Zurb这样的开发框架基础。它们都很棒,但鉴于我对网格框架的广泛厌恶,我无法向320和Up添加网格 - 响应或其他 - 。也就是说,一次又一次地编写相同的代码(我听说)是一种疯狂的迹象,所以在过去的几个月里我一直在写'Upstarts'。

它们是我每天构建的东西的响应式设计模式和HTML和CSS。 Upstart使用非特定的HTML和CSS构建,包含HTML示例页面和upstart.less文件。我在这个版本中包含了两列,三列和四列响应模块和一些面板,我会在编写时添加新的Upstarts。我真的希望其他人也会通过贡献GitHub来做同样的事情,这样我们就可以为响应式网页设计构建一个非常有用的模式库。

.net:你似乎真的进入了最近-为什么你认为设计师学习和使用它是一件重要的事情?
AC:LESS完全改变了我编写CSS的方式。我不只是一个皈依者 - 我已成为一名狂热者!这有助于使我的样式表更加模块化和更有条理。当我在一段时间内接受一个项目以及当我与其他设计师和开发人员合作开展更大的项目时,这对我有所帮助。

我建造了新的320和Up on LESS。有一个新的变量文件,允许人们在一个地方定义网站的“氛围”风格。然后我整理了一些非常有用的CSS3混音,并在它们周围构建了排版,按钮,表格和其他LESS文件。它使得开发CSS非常有效。在响应式Web设计断点时,LESS处理从一个LESS文件到另一个LESS文件的样式的方式比纯CSS处理导入的方式要好。这就是为什么现在只有320和Up的单一样式表版本的主要原因。