需要戒掉的 Web 开发坏习惯

封面照片由 Pexels 上的 mohamed abdelghaffar 拍摄

1. 没有优先考虑移动设备

你知道什么很难吗？把一个在 24 英寸显示器上看起来像素完美的复杂设计放到 300 像素宽的屏幕上。

你如何决定删减哪些内容？如何确保最重要的信息仍然在首屏？你需要先回顾一下，先设计移动端的页面。

如果您没有针对移动设备优化设计，则可能会为大多数用户提供低于标准的体验。

从一个简单的原型开始，让用户轻松访问页面上最重要的信息。随着页面规模的扩大，可以添加更多设计元素以适应更大的设备。

如果您不是设计师，请利用Bootstrap等工具。

2. 不一致

一致性可以帮助用户了解您的网站内容，并帮助他们学习如何使用您的网站。不一致会导致用户感到沮丧、绝望，并导致高跳出率。

不一致的链接

您应该对同一类型的链接一视同仁。如果您的某个外部链接在新窗口中打开，则所有外部链接都应在新窗口中打开。（别忘了考虑使用屏幕阅读器的用户。请查看这些关于如何让target=”_blank” 更易于访问的建议）

这包括媒体链接！不要在一个地方显示链接打开PDF，却忘记在所有地方都添加该信息。

风格/设计不一致

虽然您很可能会有多个页面模板和设计，但用户在打开新页面时不应该认为他们已经导航到了一个新网站或正处于主题更新之中。

您应该使用基本的主题颜色，并在适当的位置添加页眉、导航和页脚。（例如，如果您正在构建 JavaScript SPA 浏览器游戏，则可能不需要页脚。）

使用一整套颜色和六种不同的 Google 字体可能很诱人，但少用一点……能减少混乱。定义字体系列、颜色和大小的 CSS 样式，然后使用它们。

3. 硬编码完整路径

别再这样了。你喜欢重复做一件事吗？安装一个实际上只能完成一项功能的插件，会给你带来乐趣吗？别再硬编码完整路径了！

我无法向您表达有多少次有人要求我解决网站问题，而结果却是图像源属性或外部样式表的硬编码完整路径。

客户可能会改变对域名的看法，生产和开发域名也有所不同。使用部分路径可以让您自由地进行更改并推送到生产环境，而无需返回查找对先前域名的引用。

4. 不使用图片 Alt 标签

说真的，都2021年了。给图片添加 alt 标签，实际上是我们提升网站或应用可访问性最基本的措施。对于任何包含文本的图片来说尤其如此。目标是向所有用户传达图片的功能、含义或信息。

查看此alt 决策树，以帮助您决定如何使特定环境中的图像更易于访问。

5. 享受 Div 快乐

听着，我们都喜欢 div。它们是有趣的小盒子，几乎可以用于任何用途。但可以，并不意味着你应该这么做。

我们应该仅在没有更合适的（语义化的）元素时才尝试使用 div。您可以将 div 用于菜单，这样一切都会正常运作。但是，使用 div<nav>元素可以帮助任何使用屏幕阅读器的人以及非人类用户（例如搜索引擎）理解代码背后的含义。这不仅仅是一个包含链接的框，而是一个包含菜单的导航元素，可以引导我浏览网站的其余部分。

不要使用 div 来...
将文本放在图像下方...使用<figure>并<figcaption>
制作一个执行操作的链接（例如，使用 JavaScript 通过多页表单打开模式或页面）看起来像一个按钮...使用<button>
对页面的主要部分进行分组...使用<main>

你在 Web 开发中有哪些坏习惯？你最常遇到的是哪些？