他们说小事会建立或打破人际关系。确实如此，特别是对于网络开发，简单的代码行可能会有所作为并改善用户体验以及访问者与您的网站的联系。
在本文中，我们将查看需要一两行代码的五件事，这将改善用户对您的网站的看法。他们中的一些人可能不会产生重大的积极影响，但他们的缺席可能会产生负面影响。不要低估它们。
这些是本文中解释的小细节：
- 主题颜色
- 重音颜色
- 输入类型
- OpenGraph
- 文本包裹
1.主题颜色
theme-color值表明颜色浏览器在导航站点时应使用颜色浏览器来自定义显示。这意味着调整浏览器颜色以匹配指定的主题颜色。例如，在移动浏览器或桌面浏览器中的默认背景颜色中更改地址栏颜色。
这更像是一项移动功能，尽管它也来台式机。目前，它得到了Mobile和Safari在Desktop上的Safari和Chromium浏览器的支持（在国旗后面有Chrome）。使用<meta>标签实现非常容易：
<meta name="theme-color" content="#f00" />
我已经演示了这个trick when creating a clone of a McDonald's app。然后，我需要顶部的酒吧是黑暗的，因为游戏应该在昏暗的房间中使用。
它如何改善体验？
我们可以通过将一种颜色与我们的网站相关联（并摆脱规范和默认工具栏颜色）或将颜色与部分相关联，从而创造出连续性和独特性的感觉，从而提供更流畅的体验。
这最后一部分是我在my personal website上使用的小细节。顶部菜单为每个部分都有彩色按钮，并且在网站导航时，主题颜色会更改以匹配所选选项。这样，我的菜单选项是流入地址栏的选项卡，突出显示了当前选项。
额外的技巧
theme-color不必在页面中唯一。它可以使用media属性来个性化，以根据浏览器/计算机的配置更改颜色。
<!-- theme color is white unless in dark mode, then it's black -->
<meta name="theme-color" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
2.口音颜色
您的网站将带有调色板和一套颜色，在中间，突然之间有一个带有不同天然颜色的输入。它看起来不合时宜，打破了体验。设计系统可以帮助您解决此问题，但并非每个站点都有一个设计系统或框架来处理此类产品。
浏览器为某些表单控件（例如复选框和无线电按钮）提供默认UI。这很好。我们不必担心自己设计某些东西，但是除非我们几乎完全想重建它们，否则我们对它们的风格没有太多控制。
。 The koude4 property comes to the rescue! with accent-color您可以为复选框，无线电按钮，范围甚至进度条指定主要的颜色。
它如何改善体验？
一致性和可访问性。上面描述的方案是一个完美的例子。我们希望我们的形式控件与整个站点的UI和颜色保持一致，而accent-color正是这样做的。除此之外，我们还将获得一些跨浏览器的一致性，因为所有浏览器都会以相同的颜色显示控件（而不是蓝色的铬，边缘在边缘等等）
此外，accent-color的一个特权是浏览器会自动调整一些UI以使组件可访问。例如，复选框中的复选标记将是黑色或白色，具体取决于accent-color值的浅色或黑暗。没有犯错的风险，需要在Checkmark和背景之间进行更多对比。
3.输入类型
每个人都熟悉文本输入，无线电按钮和复选框，但是开发人员可以使用的HTML has 22 different input types（加上弃用的abiaqian11）。他们中的大多数看起来像常规文本输入，但提供了不应忽略的其他功能：
- 电子邮件
- 数字
- date
- 颜色
- 电话...
浏览器为这些输入提供了验证，输入条件，甚至为唯一的控件和弹出窗口。简化访客的生活和自己的生活：在浏览器上代表代表，而不是为本地可用的物品提供过度工程的解决方案。
它如何改善体验？
这是访客可能不会注意到的那些事情之一，但是如果不存在，他们会被它烦恼。我不会说我喜欢键入整个约会并遇到错误，因为格式不正确。
如果发生在移动移动设备上的事情发生：点击字段，将键盘从字母更改为数字，输入日期的一部分，转到符号键盘，添加更多数字，然后回到符号，然后返回数字键盘。这是您的访客不必经历的麻烦。移动设备根据输入的类型显示出非常出色的显示不同键盘的工作。
最重要的是，如上一节中所述，浏览器提供了许多功能，例如字段验证：无法输入日期或数字字段，颜色选择器具有不错的显示，电子邮件字段检查格式等
额外的技巧
在移动设备中，对于每种类型的输入，您可以获得与不同键盘的效果，但在textarea和contenteditable的元素上。诀窍是使用property koude11并指定要显示的键盘类型：数字，电话，电子邮件等...
<textarea inputmode="url"></textarea>
<div contenteditable inputmode="decimal"></div>
4.打开图
此更改不会在视觉上影响您的网站，但会影响其他网站共享页面（主要是社交媒体网站）时的显示方式。作为开发人员，您想控制这些事情，这就是OpenGraph和社交媒体标签（Twitter拥有自己的）的地方。
使用OpenGraph，您可以指定许多内容：
- 要在卡上显示的图像。
- 标题
- 描述
- 一个简短的视频（对Skype创建很酷的效果）
- 与网站相关的一段音频
- 网站的颜色...
代码很简单，它将进入页面的<head>。这是一个示例（还有更多）：
<meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of the page.">
<meta property="og:url" content="link.to.be.displayed.when.shared">
<meta property="og:image" content="link.to.thumbnail.image">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of the page.">
<meta name="twitter:url" content="link.to.be.displayed.when.shared">
<meta name="twitter:image" content="link.to.thumbnail.image">
作为网络开发人员，我们必须整体关心我们的产品（网站）。这不仅仅是编写代码对访客看起来不错的问题。这是一个整体体验，包括其他网站，例如Facebook，Twitter或LinkedIn。
它如何改善体验？
如上所述，这不会影响您的网站；它改变了其他网站“查看”您的网站的方式。他们必须加载的其他文本对您的访客有最大的影响（这是一个可忽略的价值。）
社交媒体和专业网站将在共享内容时引导您的网站流量。但是，如果看起来很差，人们会不会对单击它感到不吸引。打开图允许您个性化如何共享内容。请利用它。视觉内容比文本更令人难忘。添加吸引人的图像！您想突出的文章中有一个句子吗？将其添加到描述！
额外的技巧和警告
Open Graph非常适合个性化社交媒体网站。其他技术将使您的网站更易于处理和识别机器（例如搜索引擎或网络爬网）。使用Microdata来增强HTML代码的语义是一个很好的例子，尽管增益可能不像其他技巧那样可见。
和一个谨慎的词：不要只是为整个站点设置开放的图形值并继续前进。这将导致稍后出现问题，因为所有页面都将在社交媒体上确定为相同（某些网站在处理此数据时比其他网站更明智）。这些值应特定于页面，并且在页面之间导航时应进行更新。
5.文字包装
这是文本的实用技巧，尤其是标题和标题。您多久写一次标题，只是发现它看起来很差？它可能有两条长线和一个小词或一个长词，奇怪地打破了线条。 The property koude13 can help with that!
text-wrap告诉浏览器如何将文本包裹在元素内部。特别是我们感兴趣的价值是balance，它将平衡文本，因此当其包裹成多行时，它们的宽度或多或少相同，使其看起来更加平衡
它如何改善体验？
平衡文本可提高可读性。高密度的文本正在累人（看起来像是可怕的文本墙），低密度可能会使很难遵循文本（例如，当我们有一条长线后面是短线时）。
平衡的标题将更容易阅读，并且在视觉上将更具吸引力。 text-wrap的双赢。这种方法的主要问题是it's not well supported by all browsers yet。尽管如此，它仍在牵引力，铬浏览器支持它，因此现在可能是开始使用它的最佳时机。
额外的技巧
虽然text-wrap: balance目前是在线大肆宣传，因为它正在获得越来越多的支持；在所有浏览器上将（最终）降落另一个有趣的价值：pretty。
有时，您写了一个标题，只有一个单词落入新线路。这看起来不太好，平衡文本也可能不是一个不错的选择。一种解决方案是将一个单词移至新行。这样，行中不会有一个单词。
不幸的是，在撰写本文的那一刻，pretty不受任何浏览器的支持。
Brooke Cagle上的Unsplash的封面照片