我正在提出一个新的流行语来取代所有其他网页设计的流行语。忘记“优雅的退化”，失去“进步的增强”，放弃“语义网络”，最终抛弃“web x.0” - 我建议我们把它们合在一起，称之为现代网页设计。简单和干净你不觉得吗？
我正在提出一个新的流行语来取代所有其他网页设计的流行语。忘记“优雅的退化”，失去“进步的增强”，放弃“语义网络”，最终抛弃“web x.0” - 我建议我们把它们合在一起，称之为现代网页设计。简单和干净你不觉得吗？有点像html5文档类型。
目前，在网页设计领域有如此多的移动部件，如html5和css3的缓慢浏览器实现，移动浏览的快速增长，jquery和script.actulo.us等javascript库的兴起，flash的死亡，以及从移动电视到电视的不同屏幕尺寸和分辨率 - 它们越来越难以接近一个新的网络项目。
一些设计师相信渐进增强的方法，而另一些设计师则是优雅的降级的传道者，或者安迪·克拉克（andy clarke）所规定的侵略性的优雅降级。 - 这两种方法都与浏览器呈现网站的方式有关。与其争夺是否设计最低公分母还是最尖端的技术，我提出采取一种不同的但相似的方法，即网站在任何给定的浏览器中都可以看起来，行动和感觉不同，显示。我们的用户，我们的客户和我们自己接受浏览器的流畅性，并接受我们网站将被浏览的许多不同大小，分辨率和设备。
等式
我并不是说我们放弃将相似的，如果不是精确的设计元素从一个显示器传到另一个显示器。我们显然不想失去品牌的力量。但是，这里的主要想法是利用每个浏览器和显示器可以做的事来增强设计或设计，以显示优势而不是弱点。这基本上是编码方法的混搭，并接受这样一个事实，即您的网站看起来不一样。
这种新的现实对于我们许多设计师来说将是一个艰难的过程。尤其是那些从印刷世界热捧的人物，每个展示都设定了尺寸。我知道它会对我很难，因为我喜欢我的网站，以适应一个没有任何变化的固定的盒子; 我喜欢让我的网站在每个浏览器和每个显示器上看起来完全一样。但是，这种旧的刚性设计方法需要改变，以适应新的技术和显示。我并不是建议固定布局的死亡，但我相信我们需要考虑改变布局和设计元素，以更好地适应现代显示器和浏览器的优势。
我突破了我的数学恐惧，并定义了一个小视觉方程来更好地说明我的观点：
现代网页设计=（渐进式增强x优雅降级）+有意义的标记+以用户为中心的设计+浏览器设计
现在，让我们分解这个等式。以下各节将重点介绍这些变量中的每一个，以及它们作为强大的网页设计师与我们的特定关系。
（渐进增强x优雅的降解）
对我来说，这两种方法都是一样的，只是你从哪里开始。渐进增强方法是围绕内容进行设计，并根据每个浏览器的功能添加功能和增强功能。优雅的退化是相反的，你设计的最好的功能和功能，然后根据缺乏浏览器的兼容性来降低它们。两者的结果往往是相似的，但真正的区别在于设计过程。
我相信更好的设计过程是利用两者所能提供的优势。我们应该总是设计最好的技术，但是当我们设计和构建时，我们需要做出必要的改变以适应每个浏览器和显示器的优势。这意味着不断思考和测试元素如何在每个步骤被渲染和权衡。思考如何在某人的imac或高清电视屏幕或其移动平板电脑上查看每个设计难题。
一些设计元素对于网站的意义是至关重要的，而另一些则是装饰，或者锦上添花。这可能意味着，在某些情况下，我们根本不显示浏览器显示结冰，这没关系。在android手机上的表现应该不同于52“三星高清等离子电视上的表现，因为它们是不同的。在做出设计决策时，不要考虑如何使设计适合所有平台，而是要考虑如何在每个浏览器或显示器上呈现设计。这样你就可以利用每种媒介的继承优势和细微差别。
+有意义的标记
也被称为语义标记，它是通过其标记传达您网站的意义的方法。经典的例子是使用和（强调）标签来代替和标签来显示重点。这些标签将意义附加到他们的内容上，和标签就在那里以改变内容的风格。基本上，只要使用适当的标签来正确的内容，破解你“p-itis”。
在渐进式增强关注内容的地方，在现代网页设计中，我们也应该关注这个意义。对标记进行编码以表达意义，允许浏览器和显示器无论何种风格都可以解释该含义; 这有助于将您的网站的含义移动到用户。即使样式表，图像和javascript被关闭，你的意义仍然会保留。另外，屏幕阅读器和其他辅助技术更易于使用语义标记。
+以用户为中心的设计
当您在设计一个网站的时候，考虑到用户的需要 - 在整个过程中，您将不会过度设计。使用新技术是很棒的，但是不要只用它们，在有意义的时候使用它们，不要让用户迷失在技术战中。请记住，他们可能不关心你建立网站的html版本，对他们无关紧要。
另外，如果您正在考虑以用户为中心，那么您正在考虑浏览器和显示您的客户和用户正在查看您的网站。如果您知道大部分用户将使用ie7，请确保您的网站针对ie7进行了增强。这并不意味着你应该为一般的ie7而设计，而忘记其他的浏览器; 这意味着你需要确保你的信息和意义在ie7中表现得最好，在firefox中表现最好，而且最好在...你明白了。请记住，这个“最好”在所有的浏览器和显示器上都会有所不同。如果你不能在ie7中渲染伪css属性，那么不要，但只有当它不会杀死你的网站意味着在ie7中呈现。
+在浏览器中设计
这并不意味着你不应该使用photoshop。在浏览器中进行设计可以让您在设计和编码时更加灵活。这是一个更流畅的设计方法，并允许您随时做出决定，更改和测试。而不是设计一个设计，并强制所有的浏览器和显示符合，在浏览器中的设计将允许您的设计生活在浏览器或显示。
撕下psd的墙壁，让你的设计呼吸：
切片和骰子的日子已经结束了。使用photoshop设计作为蓝图，而不是内容。在浏览器中进行设计可以让您快速做出决定并实时进行调整。动态设计。没有psd文件的像素限制，您可以创建更加动态的体验。始终向客户展示一个编码原型。让他们查看生活的网站，而不是一些死的photoshop补偿。
把一个photoshop文件分割成几部分，然后把这些部分放回到html中是一个严格的技术。这是当你进入像素推动和故障排除的漫长的一天，因为你的设计看起来不像你的psd文件在你的11英寸的macbook air上看到的那样。将photoshop文件视为指导或在您编写网站时遵循的蓝图。
通过不削减一个psd，你也正在减少你将使用的图像的数量，你会发现在photoshop中创建的很多图像和效果可以创建相同的css或js。如果你不是拿着你的psd文件进行操作，你可以看看设计，并找出你可以在css或js中复制哪些部分（或者你的语言选择是什么）。通过这种方式，您可以减小网站的大小，并在浏览器中正确测试这些元素，并查看这些元素，以查看哪些功能和设计元素在每个屏幕上的效果最佳。
当您使用psd文件作为comp向客户端显示时，您正在设置自己的失败。您的psd中的某些效果可能无法在浏览器中正确呈现，或者在网站完成后客户端正在使用显示。而且你会在第一次浏览这个网站后得到这个不可避免的“这个网站看起来像垃圾，我不会为此付钱！这就是为什么你永远不会向你的客户展示psd文件，除非“这只是一个蓝图”，实际的产品可能在你的ipad上看起来不一样“。始终向客户展示一个正常运作的原型。这样，当您只想完成项目时，您将不必回头调试浏览器问题。
结果
现代网页设计。我知道你可能认为这种设计过程是很多的工作，你没有时间去设计一个网站，在所有浏览器和显示器上进行最有效的渲染。在某些情况下，一个项目可能需要在每个显示器或浏览器上编写多个样式表，这样才能有效地呈现网站，但是在其他情况下，这可能只是让网站自然下放的问题。这个想法的关键是总是围绕你的网站的内容和意义进行设计，并确保它被呈现给每个浏览器和显示能力。
设计不只是让东西看起来很酷。