一系列邮票,每一枚邮票上都有一个女王,根据邮票的不同长宽比在其外围有其他东西。
插图by

为意外而设计

你公司的生存取决于它生产的产品能否在你想象不到的情况下,在还不存在的设备上发挥作用。< / p >

— 杰弗里泽尔德曼< / p >

我不确定我第一次听到这句话的时候,这是多年来一直在我的东西。如何为您无法想象的情况创建服务?或设计在尚未发明的设备上工作的产品?< / p >

继续下面的条

Flash、Photoshop和响应式设计# section2

当我第一次开始设计网站时,我的Go-to软件是Photoshop。我创建了一个960px的画布,并设置了创建一个布局,即我稍后会丢弃内容。开发阶段是通过固定宽度,固定高度和绝对定位实现像素完美的精度。< / p >

Ethan Marcotte在一个活动分开和随后的文章中谈论“响应式网页设计“ 在一个列表2010年改变了这一切。我一听到这件事就被卖给了响应式设计,但我也很害怕。我以前为自己制作的充满神奇数字的像素完美设计已经不够好了。< / p >

我对敏感设计的第一次经验没有帮助。我的第一个项目是采取现有的固定宽度网站并使其响应。我学到了艰难的方式是你不能只是在项目结束时添加响应。要创建流体布局,您需要计划整个设计阶段。< / p >

一种新的设计方式# section3

设计响应或流体部位一直是关于去除限制,产生可以在任何设备上观看的内容。它依赖于使用基于百分比的布局,我最初使用本机CSS和Utility等级实现:< / p >

.column-span-6{宽度:49%;浮:左;margin-right: 0.5%;margin-left: 0.5%;} .column-span-4{宽度:32%;浮:左;margin-right: 0.5%;margin-left: 0.5%;} .column-span-3{宽度:24%;浮:左; margin-right: 0.5%; margin-left: 0.5%; }

然后用Sass,所以我可以利用@inCludes来重复使用重复的代码块并返回更多语义标记:< / p >

.logo {@include colspan(6);} .search {@include colspan(3);} .social-share {@include colspan(3);}

媒体查询#第四单元

响应式设计的第二个要素是媒体查询。如果没有它们,内容将会缩小以适应可用空间,而不管内容是否保持可读性(游戏邦注:与此相反的问题是,引入移动优先方法)。< / p >

线框显示三个大尺寸的盒子,以及三个移动尺寸的非常窄的盒子
组件在移动断点变得太小

媒体查询阻止了这一点,允许我们添加设计可以适应的断点。像大多数人一样,我开始有三个断点:一个用于桌面,一个用于平板电脑,一个用于移动设备。多年来,我越来越多地为PhableTet,屏幕屏幕等添加。< / p >

多年来,我很高兴地工作,并在过程中提高了我的设计和前端技能。我遇到的唯一问题是对内容进行了更改,因为通过我们的SASS网格系统到位,网站所有者无法在不修改标记的情况下添加内容 - 一个小企业所有者可能会挣扎。这是因为网格中的每行使用a定义div作为一个容器。添加内容意味着创建新行标记,这需要一定程度的HTML知识。< / p >

行标记是早期响应式设计的主要内容,出现在所有广泛使用的框架中,如Bootstrap和Skeleton。< / p >

<节课= "行" > < div class = " column-span-4 " > 1的7 < / div > < div class = " column-span-4 " > 2的7 < / div > < div class = " column-span-4 " > 3的7 < / div > < / >节<节课=“行”> < div class = " column-span-4 " > < / div > 7投4中< div class = " column-span-4 " > < / div > 7投5中< div class = " column-span-4 " > 6 7 < / div > < /节> <节课= "行" > < divClass ="column-span-4">7 of 7
. Class ="column-span-4
线框显示三排盒子
组件放置在Sass网格的行中

另一个问题是,我从一家为中小型企业建立网站的设计机构搬到了一个更大的内部团队,在那里,我在一系列相关的网站上工作。在这些角色中,我开始更多地使用可重用组件。< / p >

我们对媒体查询的依赖导致组件与共同视口大小相关联。If the goal of component libraries is reuse, then this is a real problem because you can only use these components if the devices you’re designing for correspond to the viewport sizes used in the pattern library—in the process not really hitting that “devices that don’t yet exist”目标。< / p >

然后是空间问题。媒体查询允许组件根据视口大小进行调整,但如果我将一个组件放入侧边栏中,如下图所示,会怎么样呢?< / p >

线框图显示了三种不同尺寸的盒子的不同配置
通过媒体查询响应视口宽度的组件

容器查询:我们的救主或假黎明?# section5

容器查询长期以来一直被吹捧为对媒体查询的改进,但在编写本文时,大多数浏览器都不支持容器查询。有一些JavaScript的变通方法,但是它们会产生依赖性和兼容性问题。容器查询的基本理论是,元素应该根据其父容器的大小而不是视口宽度进行更改,如下图所示。< / p >

线框,显示不同尺寸的盒子的不同配置
使用容器查询响应其父容器的组件

支持容器查询的最大参数之一是它们帮助我们创建了真正可重用的组件或设计模式,因为它们可以被拾取并放置在布局中的任何位置。这是朝向任何设备上任何尺寸工作的基于组件的设计形式的重要一步。< / p >

换句话说,响应性组件替换响应布局。< / p >

容器查询将帮助我们从设计页面移动,该页面响应浏览器或设备大小,以设计可以放在侧边栏或主内容中的组件,并相应地响应。< / p >

我的担忧是我们仍在使用布局来确定设计需要适应。这种方法始终是限制性的,因为我们仍然需要预定义的断点。出于这个原因,我的主要问题包含容器查询,我们如何决定何时更改组件使用的CSS?< / p >

从上下文和实际内容中删除的组件库可能不是做出这个决定的最佳位置。< / p >

正如下面的图表所示,我们可以使用容器查询为特定容器宽度创建设计,但如果我想根据图像大小或比率更改设计呢?< / p >

线框显示600px和400px的不同布局
用容器查询响应他们的父容器的卡片
线框显示不同尺寸的不同内容配置
卡基于自己的内容响应

在这个例子中,容器的尺寸不是应该决定设计的尺寸;相反,图像是。< / p >

在我们有可靠的跨浏览器支持之前,很难确定容器查询是否会成功。响应式组件库肯定会改进我们的设计方式,并提高重用和大规模设计的可能性。但也许我们总是需要调整这些组件以适应我们的内容。< / p >

CSS是变化的# section6

虽然集装箱查询辩论摸索,但CSS有许多进展,改变了我们对设计的看法。在像素中测量的固定宽度元件的日子并浮动div用来拼凑布局的元素早已消失,与表格布局一起成为历史。Flexbox和CSS Grid为网络布局带来了革命性的变化。现在,我们可以创建元素,当它们耗尽空间时,而不是当设备改变时,将它们包装到新行上。< / p >

.wrapper{显示:网格;grid-template-columns:重复(auto-fit 450 px);差距:10 px;}

重复()函数与自动装配或者自动允许我们指定每个列应该使用的空间有多少,同时将其留给浏览器来决定何时将列溢出到新行上。使用Flexbox可以实现类似的事情,因为元素可以在多行上缠绕和“Flex”以填充可用空间。< / p >

.wrapper {显示:flex;Flex-Wrap:包装;证明 - 内容:空间 -}。} .Child {Flex-Basis:32%;边缘底:20px;}

所有这些的最大好处是您不需要在容器行中缠绕元素。如果没有行,内容不会以相同的方式与页面标记相关联,允许删除或添加内容而无需额外开发。< / p >

显示较大容器中七个盒子的线框
没有常规行容器的传统网格布局

当涉及到创建允许内容演进的设计时,这是一个很大的进步,但灵活设计的真正游戏规则改变者是CSS Subgrid。< / p >

还记得制作完美对齐的接口的日子,只为客户几乎可以在给予CMS访问后立即添加令人难以置信的长标题,比如下面的插图?< / p >

卡片无法响应兄弟姐妹的内容变化

Subgrid允许元素对自己的内容和兄弟元素的内容的调整做出响应,帮助我们创建更适应变化的设计。< / p >

显示多个框的线框,其内容跨框对齐
响应同胞卡片内容的卡片
.wrapper{显示:网格;网格模板列:重复(自动拟合,最小值(150px,1fr));网格模板行:自动1fr自动;间隙:10px;}。子网格{显示:网格;网格行:跨度3;网格模板行:子网格;/*将行设置为父网格*/}

CSS网格允许我们分隔布局和内容,从而实现灵活的设计。同时,子耕地允许我们创建可以适应的设计以适应变形内容。写作时的子篇图仅在Firefox中支持,但上面的代码可以在@Supports功能查询后面实现。< / p >

内在布局# section7

我不必说了内在布局,Jen Simmons创建的术语来描述用于创建响应可用空间的布局的新和旧CSS功能的混合。< / p >

响应式布局使用百分比具有灵活的列。另一方面,内在布局使用fr单元创建灵活的列,永远不会缩小这么多,他们呈现的内容难以辨认。< / p >

fr单位是一种说明我希望你以这种方式分发额外空间的方式,但是......不要让它比在它里面的内容小。

-Jen Simmons,“设计内部布局”

内部布局也可以利用固定和灵活单元的混合,允许内容决定它所占用的空间。< / p >

演示文稿中的幻灯片显示两个最大内容框和一个自动框
Jen Simmons的“设计内部布局”幻灯片

内在设计的突出之处在于,它不仅创造出能够承受未来设备的设计,还有助于在不丧失灵活性的情况下扩大设计规模。组件和模式可以被提升和重用,而无需具备与前一个实现中相同的断点或相同数量的内容。< / p >

我们现在可以根据它们所拥有的空间、里面的内容和周围的内容来设计。通过一种内在的方法,我们可以在不依赖容器查询的情况下构造响应性组件。< / p >

又一个2010年的时刻?# section8

这种内在方法应该在我的观点中,每一位作为响应网页设计的次数是十年前的。对我来说,这是另一个“一切变化”时刻。< / p >

但它似乎并没有像快速移动;尽管如此,我还没有同样改变同样的职业变化的时刻广泛分享和灿烂的谈话这引起了我的注意。< / p >

其中一个原因可能是我现在在一个大型组织中工作,这与我在2010年的设计代理角色不同。在我的代理日,每个新项目都是一个干净的石板,有机会尝试新的东西。如今,项目使用现有的工具和框架,并且通常对具有现有代码库的现有网站进行改进。< / p >

另一个可能是,我觉得现在对改变准备得更充分了。2010年,我还不太熟悉设计;这种转变是可怕的,需要大量的学习。此外,内在方法并不是全新的;它是关于以不同的方式使用现有的技能和现有的CSS知识。< / p >

您无法将您的方式框架框架框架# section9

对内在设计采用较慢的另一个原因可能是缺乏快速修复框架解决方案来启动更改。< / p >

响应的网格系统在十年前遍布这一地方。使用像引导或骨架等框架,您的指尖您有一个响应的设计模板。< / p >

内在设计和框架并不能很好地结合在一起,因为在创建布局模板时,单元选择的好处是一种阻碍。内在设计的美妙之处在于将不同的单元组合在一起,并尝试各种技术以获得最适合你的内容。< / p >

然后有设计工具。我们可能都在我们的职业生涯的某些时候,使用了桌面,平板电脑和移动设备的Photoshop模板,以删除设计,并展示该网站将如何看待所有三个阶段。< / p >

现在,每个组件都在需要时对内容和布局做出响应,你该怎么做呢?这种类型的设计必须出现在浏览器中,我个人非常喜欢浏览器。< / p >

关于“设计人员应该代码的辩论的辩论是多年来一直崩溃的另一个。在设计数字产品时,我们应该至少设计了满足内容时的最佳和最坏情况的情况。要在基于图形的软件包中执行此操作远非理想。在代码中,我们可以添加更长的句子,更多的单选按钮和额外标签,并在设计适应时实时观看。它还有工作吗?设计是否依赖于当前内容?< / p >

就我个人而言,我期待着有一天,内在设计是设计的标准,当一个设计组件可以真正灵活地适应其空间和内容,而不依赖于设备或容器的尺寸。< / p >

内容第一#第10.

内容不是恒定的。毕竟,为了设计未知或意外的内容,我们需要考虑到内容更改,比如我们之前的Subgrid卡片示例,它允许卡片对自己的内容和同级元素的内容做出响应。< / p >

值得庆幸的是,CSS比布局更多,并且充足的属性和值可以帮助我们首先填充内容。子地图和伪元素::一线::第一个字母帮助将设计与标记分离,以便我们可以创建允许更改的设计。< / p >

而不是像这样的旧标记hack -< / p >

不同样式的第一行文本…< / p >

- 我们可以根据出现的位置定位内容。< / p >

.Element ::第一行{font-size:1.4em;} .Element ::第一字母{颜色:红色;}

CSS的更大补充包括logical属性,哪个改变我们使用逻辑维度(开始和结束)而不是物理维度(左和右)构建设计的方式,CSS Grid也使用类似的功能min ()max ()夹钳()。< / p >

这种灵活性允许根据内容进行定向更改,这是我们需要用多种语言呈现内容时的常见需求。在过去,这通常是通过Sass mixins实现的,但通常仅限于从左到右切换到右到左。< / p >

在Sass版本中,需要设置方向变量。< / p >

$方向:RTL;$相反方向:LTR;$开始方向:右;$终点:左;

这些变量可以用作值 -< / p >

Body{方向:$方向;text-align: start-direction美元;}

- 作为属性。< / p >

边缘 - #{$终点}:10px;填充 - #{$开始方向}:10px;

但是,现在我们具有本机逻辑属性,删除对SASS(或类似工具)的依赖性,并预先计划在码库中使用变量。这些属性也开始分解设计和严格的物理尺寸之间的紧密耦合,从而为语言和方向的变化产生更多的灵活性。< / p >

边缘块端:10px;填充块启动:10px;

属性也有本机启动和终端值文字对齐,这意味着我们可以取代text-align:对文字对齐:开始。< / p >

与前面的示例一样,这些属性有助于构建不受一种语言限制的设计;设计将反映内容的需求。< / p >

线框显示不同的文本对齐选项

固定和流体#第11节

我们简要介绍了将固定宽度与流体宽度与内部布局相结合的能力。这个min ()max ()函数是类似的概念,允许您使用灵活的替代方案指定固定值。< / p >

为了min ()这意味着设置流体最小值和最大固定值。< / p >

.元素{宽度:最小值(50%,300px);}
线框图显示一个300px的盒子在一个800px的盒子里,一个200px的盒子在一个400px的盒子里

只要元素的宽度不超过300px,上面的图中的元素将是其容器的50%。< / p >

为了max ()我们可以设置灵活的最大值和最小固定值。< / p >

.element {width: max(50%, 300px);}
线框显示800px盒内部400px盒,400px内部的300px盒子

现在,只要元素的宽度至少300px,该元素将是其容器的50%。这意味着我们可以设置限制,但允许内容根据可用空间做出反应。< / p >

夹钳()函数在此基础上构建,它允许我们使用第三个参数设置首选值。现在,我们可以允许元素在需要的情况下收缩或增长,而不会达到不可用的地步。< / p >

.element {width: clamp(300px, 50%, 600px);}
线框图显示一个800px的盒子在一个1400px的盒子里,一个400px的盒子在一个800px的盒子里,一个300px的盒子在一个400px的盒子里

这次,元素的宽度将是其容器的50%(优选值),但从不小于300px,而不是超过600px。< / p >

通过这些技术,我们具有响应性设计的内容 - 首先方法。我们可以将内容与标记分开,这意味着用户的更改不会影响设计。我们可以通过规划语言或方向的意外变化来开始未来的设计。我们可以通过将所需的尺寸与灵活的替代方案设置所需的尺寸来提高灵活性,允许正确显示更多内容。< / p >

形势第一#第12部分

由于到目前为止,我们可以通过更改我们的方法,设计内容和空间而不是迎合设备来介绍设备灵活性。但是杰弗里·塞尔德曼的最后一点呢?“......你没有想过的情况”?< / p >

对于在桌面计算机上坐在桌面计算机上的某人而言,这是一个非常不同的事情,而不是使用手机的人,并在闪光的阳光下穿过拥挤的街道。情况和环境很难规划或预测,因为他们改变了人们对自己独特的挑战和任务作出反应。< / p >

这就是为什么选择如此重要。一个尺寸从不适合所有人,因此我们需要设计多种方案来为所有用户创建平等的体验。< / p >

值得庆幸的是,我们可以做很多可以提供选择。< / p >

负责任的设计#第13条

“世界上有些地方的移动数据成本高得令人望而却步,而这些地方几乎或根本没有宽带基础设施。”< / p >

我用50mb的预算上网了一天“< / p >

克里斯阿什顿< / p >

我们最大的假设之一是,与我们的设计交互的人拥有良好的wifi连接和宽屏幕显示器。但在现实世界中,我们的用户可能是乘坐火车或其他交通工具的通勤者,他们使用的是较小的移动设备,这些设备可能会导致连接下降。没有什么比无法加载的网页更令人沮丧的了,但我们可以通过一些方法帮助用户使用更少的数据或处理零星的连接。< / p >

srcset属性允许浏览器决定要服务的图像。这意味着我们可以使用较少的带宽和更少的数据来创建较小的“裁剪”图像以在移动设备上显示。< / p >

Image alt text

预加载属性还可以帮助我们思考如何和何时下载媒体。它可以用来告诉浏览器需要高优先级下载的任何关键资产,从而提高感知性能和用户体验。< / p >

<--标准样式表标记--><--预加载样式表标记-->

还有本地人延迟加载,它指示只有在需要时才应该下载的资产。< / p >

srcset预加载,以及延迟加载,我们可以开始根据用户所处的环境来定制他们的体验。然而,这些都不允许用户自己决定他们想下载什么,因为这个决定通常是由浏览器做出的。< / p >

那么,我们如何让用户掌控局面呢?< / p >

媒体查询的返回#第14部分

媒体查询始终超过设备大小。它们允许内容适应不同的情况,屏幕尺寸只是其中一个。< / p >

长期以来,我们一直能够检查媒体类型,如打印和语音,以及功能,如悬停,分辨率和颜色。这些检查允许我们提供适合多个场景的选项;它不是一刀切,而是提供适应性更强的内容。< / p >

就像这种写作一样,媒体查询第5级规格仍在开发中。它引入了一些非常令人兴奋的查询,这些查询将在未来帮助我们设计多种其他意想不到的情况。< / p >

例如,如果用户在阳光下或黑暗中,有一个光级特性允许您修改样式。搭配自定义属性,这些功能允许我们为特定环境快速创建设计或主题。< / p >

@media(光级:正常){ - 留下颜色:#fff;--text-颜色:#0b0c0c;@Media(光级:Dim){ - 守色:#EFD226;--text-颜色:#0b0c0c;}

另一个关键特征5级规范是个性化。用户可以选择适合自己的设计,而不是为每个人设计相同的设计。这是通过使用像prefers-reduced-data喜欢配色方案,及更喜欢减少运动,后者已经享有广泛的浏览器支持。这些功能通过操作系统或浏览器轻拍设置的首选项,因此人们不必花时间制作他们访问的每个站点更具可用性。< / p >

这样的媒体查询超越了浏览器为用户提供更多控制的选择。< / p >

期待意外#第15部分

最后,我们应该总是期待的一件事是为了改变事情。特定更改的设备比我们可以跟上的速度更快,可在市场上进行可折叠屏幕。< / p >

我们无法以与这种不断变化的景观相同的方式设计,但我们可以设计内容。通过将内容置于首先并允许内容适应其围绕它的任何空间,我们可以创建更强大的灵活设计,从而提高产品的寿命。< / p >

这里讨论的很多CSS是关于远离布局并将内容放在设计的核心。从响应组件到固定和流体单元,我们可以做得更多的是采取更加内在的方法。更好,我们可以通过设计浏览器和观看我们的设计如何实际适应设计阶段在设计阶段进行测试。< / p >

当出现意想不到的情况时,我们需要确保我们的产品在人们需要的时候,无论何时何地都是可用的。我们可以通过让用户参与到我们的设计决策中来,通过浏览器创造选择,并通过基于用户偏好的媒体查询将控制权交给用户来实现这一目标。< / p >

对于意外的好的设计应该允许改变,提供选择,并控制我们服务的人:我们的用户自己。< / p >

关于作者

凯西·达顿

Cathy Dutton是一名高级互动和服务设计师,目前在英国环境、食品和农村事务部(Defra UK)工作。在过去,她曾与多个公司和品牌合作,包括巴克莱(Barclays)、任天堂(Nintendo)、森宝利(Sainsbury’s)的Mobile和EE。在网络方面,她热衷于易访问性、CSS和以用户为中心的设计。

没有评论

有什么要说的吗?

我们已经关闭了评论,但在我们这样做之前,你可以看到人们不得不说什么。< / p >

从阿拉巴马州

语音内容和可用性

在这摘录语音内容和可用性中,作者普雷斯顿如此讨论了人类言语的凌乱,原始性质,并使用编程计算机来处理这些复杂性的挑战。

异步设计批评:获得反馈

收到反馈可能是一种紧张的经历:一个开放式的问题会吸引有用的指导或严厉的批评吗?Erin“Folletto”Casali通过一个过程指导我们,以确保反馈始终优雅地落地。

异步设计批评:提供反馈

你听到了“建设性批评”一词无数次,但你知道如何送货吗?来自Erin'Folletto'卡萨利的这个系列中的一部分给你一个框架!炫耀您的反馈肌肉,并练习这些技能来赋予并激励其他人而不会缩小或混淆它们。