6网页布局神话被破坏了

+$Jen Simmons – the author of this article – will be exploring the new possibilities in web layouts at Generate New York (April 24-25). To book your ticket to this award-winning conference for web designers, visit+$www.generateconf.com

+$From the archive: This article was originally published in Summer 2016. Please be aware some specifications may have changed since then.

当网络最初发明时,没有页面布局技术。每个背景都是灰色的。每一页都是一列文字,从一边到另一边填满整个空间。多年来,我们已经创建了一个又一个黑客来解决页面布局问题。

黑客已经变得不那么混乱,但我们今天所做的一切仍然是一个黑客。要手动编写页面布局,您必须掌握清除浮动的技巧,使用负边距重新排列顺序,并避免浏览器怪癖。这是痛苦的。我们许多人放弃了,而是使用第三方框架; Bootstrap,Foundation或其众多竞争对手之一让我们将痛苦外包出去。

+$We've shipped a lot of work using layout frameworks. We've been more efficient and suffered through fewer bugs. But now every website feels the same. Every网站布局+$reaches for an identical 12-column symmetrical grid. Every site uses the same user experience, shapes and patterns over and over. And we are totally bored.

一个新时代

但是有好消息。最后,我们正在获得页面布局的真正工具。我们可以创造性地代替手工编码的拉毛或无聊的公式框架。 Flexbox,CSS形状,面具,剪辑路径,首字母,旋转,多列,视口单元,对象适应等等已经开辟了一个新的可能性世界。

最重要的是,CSS网格布局将在明年的某个时候到来,彻底改变我们在网络上进行页面布局的方式。

我们应该开始问自己,哪种页面布局最适合这个项目?

问题将不再是“我们应该使用哪个框架?”我们不再需要它们了。事实上,一旦CSS Grid到来,使用框架将比在vanilla CSS中手动编码自己的布局效率低得多。第三方框架 - 甚至是基于Flexbox或Grid的新框架 - 将会阻碍。

我们应该开始问自己,哪种页面布局最适合这个项目?我们如何利用百年的平面设计实践通过我们的布局进行沟通?

战斗代码将不再是创建布局最难的部分。我们面临的最大挑战将是克服想象力的局限。在过去的十年里,我们养成了强大的习惯。我们在“网络无法正常工作”和“你不能那样做”的情况下压制我们的创意。嗯,事情发生了变化。可能和不可能之间的界限发生了巨大变化。是时候放下长期存在的习惯和神话了。

误区1:一切都必须是浮动的肥皂

任何基于浮动的网页布局就像一个装满数百条肥皂的浴缸。页面上的每个元素都是一个矩形,可以上升到顶部。标题是顶部的一个栏,后面是一个导航栏,后面是一个英雄栏,一个侧边栏,一个内容栏。每当视口调整大小并且不同的媒体查询启动时,肥皂条就会自行重新排列,争夺顶部的位置。

浮动不允许空白。花车鼓励繁忙的网页挤满了拥挤的内容。浮动要求我们人工创建相同长度或宽高比的内容。

虽然它仍然基于列网格工作,但CSS Grid与我们一直使用的布局框架有不同的心理模型。最大的变化之一:它有行。行!这些允许我们水平排列,但也让我们分配垂直空间。行让我们创造白色空间。我们的默认设置将不再是填满页面顶部的所有内容。

当我们有能力垂直控制空间时,有一个世纪的杂志设计的想法成为可能。我一直在收集关于网格和布局设计的书籍。在其中一个中,我看到林肯中心2007年爵士音乐节的海报,并想知道设计是否可以作为网页完成:图1显示了结果

CSS Grid lets us place things in vertical space, instead of cramming everything against the top of the page

CSS Grid允许我们将事物放在垂直空间中,而不是将所有内容塞进页面顶部

神话2:矩形;只有矩形

默认情况下,网页上的所有内容都以矩形开头。我们一直使用的工具保持这种方式 - 我们一个接一个地排队。框。框。框。

现在我们有工具来帮助我们分解盒子。您可以使用“剪辑路径”,“蒙版”或“渐变”将框切割为不同的形状。三角形,钻石,梯形 - 内容可以切割成各种各样的轮廓。使用粗体背景颜色创建标题,并使用对角线在该框的底部切片。拍摄一系列生物照片并将它们全部切成六边形。

CSS Shapes允许您将元素浮动到一侧,并将后面的内容以不是矩形的形状流动。将已切割成边框半径的圆形照片浮动,然后使用形状外部将伴随文本以圆形形状围绕照片流动。

或者创建具有许多奇怪形状的复杂插图,并使用该图像作为蒙版,以使浏览器围绕插图中的形状流动文本。在图2,葡萄的照片向左漂浮,而文字围绕多边形流动。

使用旋转,您可以逃避对页面方形的所有内容的完美。提示标题有点歪斜。倾斜照片给它一些角色。把照片放在边缘边上。

The photo is floated left, while the text flows around it in a non-rectangular shape

照片向左浮动,而文本以非矩形形状围绕它流动

神话3:我们无法控制折叠

在网络上,我们无法控制屏幕底边切断布局的位置。我们暂时假装所有屏幕都是1024x768像素(或800x600),但实际上我们从未控制过屏幕的下边缘。尽管在会议结束后人们坚持认为他们的特殊雪花必须出现在“首屏”之上,但我们还没有办法知道“折叠”的位置。到现在。

+$With viewport units, we can size or place items in relation to the viewport. If we want to style an item so it's a certain proportion of the viewport, we can.Img {身高:50vh;宽度:50vw}将调整图像大小,使其在每个方向上填充视口的一半。

在过去,定义图像的高度和宽度是一个可怕的想法。图像最终会被压扁。但现在,物体贴合:封面告诉浏览器保持图像的纵横比,并裁剪它以适合定义的框。

图3举一个例子。无论浏览器窗口的大小如何,Grace Hopper的照片总是宽度的一半和所有高度。开始滚动,文章只显示在“折叠下方”。此布局通过Viewport Units和Flexbox完成。

No matter the size of the window, the photo is half-width and full-height

无论窗口大小,照片都是半宽和全高

神话4:12列是最好的

在2006年,该行业开始倡导使用12列对称网格。我们并不打算成为规范性的,我们只想简单的数学手工编码固定宽度的网站。

在1024px宽的屏幕内可以很好地安装960像素,并允许我们创建60px的色谱柱单元,排水沟为20px。此外,有12列意味着我们可以轻松地将空间分成一半,三分之二或四分之一。

使用Visio模板启动新项目使得UX设计看起来更合法。当你指向一个受欢迎的网站并说'每个人都在使用这个工具时,我们应该这样做'时,更容易对团队施加标准。我们需要驯服混乱。但是,经过10年的几乎每个网站使用相同的网格,网页设计变得令人难以置信的无聊。

12列对称网格传达了稳定性和坚固性的感觉,我们使用它而不会问这是否真的是我们想传达的感觉。我们通过选择字体学会了艺术指导,但还没有通过我们的布局。

通过响应式网页设计,没有理由保持基于960网格的数学比率。多年来,Mark Boulton一直倡导使用奇数列(如9或11),并尝试使用不同大小的列的网格,而是基于类似于黄金比例

这种网格是印刷中伟大图形设计的主要部分。创建自定义网格将使我们能够通过其设计传达更多关于每个项目的信息,但不知何故,这些想法还没有起飞。

为什么不?我认为这是因为当底层技术是浮动时,数学太难了。 Mark Boulton Design的团队创建了一个名为Gridset的应用程序,使这样的设计工作更容易,Sass社区已经建立了一个接一个的库来抽象出复杂网格的数学,但无论哪种方式,它仍然感觉太棘手和脆弱。

CSS Grid将使设计自定义网格变得微不足道。创建11列就像在12中一样容易。创建基于比率的数组将是一块蛋糕。浏览器将处理大部分数学,我们只需要创造我们想做的事情。

没有理由保留12列。做一些新的事情,让你的网站焕然一新。我们有数十年的平面设计实践来指导我们。

A brief look at how layouts have evolved; we are at the beginning of a new era in web design

简要介绍一下布局如何演变;我们正处于网页设计新时代的开端

神话5:我们必须使用布局框架

实际上,使用新的Grid语法编写CSS比应用框架更容易,使用CSS Grid更新旧式框架只会让生活更艰难。摆脱寻求框架的习惯。编写自己的vanilla CSS。

神话6:由于RWD,我们陷入了困境

我不相信一分钟。这个行业很难卷入其中响应式网页设计,所以我们倾向于使用工具来帮助我们快速重新启动我们的网站。但是RWD没有什么固有的东西要求我们都使用相同的六种布局模式。

我们可以使用CSS创建任何我们想要的东西,并在任何断点处将其更改为我们想要的任何内容。停止使用千篇一律的工具,你将不会有切割成果。

这里有一个令人惊讶的CSS网格等待的味道:它可以重新排列内容的顺序,使其适合可用空间使用网格自动流动:密集;属性。图4显示了结果

Apply grid-auto-flow: dense and the browser rearranges the order of content to make it fit

应用grid-auto-flow:密集,浏览器重新排列内容的顺序以使其适合

放开

如果你能解开这些神话,你的工作就会脱颖而出。你可以引起轰动,并产生强烈的影响。在机会仍然新的时候利用优势。开始玩这些属性,看看有什么可能。

An image promoting Jen Simmons' closing keynote 'Everything You Know About Web Design Just Changed' at Generate New York April 24 - 25

+$Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

+$Eager to hear more from Jen Simmons, designer and developer advocate at Mozilla, on ways to describe layouts directly rather than simply hacking them together? She'll be presenting 'Everything You Know About Web Design Just Changed' at Generate New York on April 25, in which she will help you understand how layouts have changed, plan your way through multiple layers of flexibility and put the days of plugging in pixel constraints behind you.

+$Generate New York runs from April 24-25 –+$get your tickets now

相关文章:



翻译字数超限