为设计确定风格对于响应式Web设计是个优势，但它也有缺点。当我们分别关注风格和组件时，有时很难把它们形成一个统一的整体。

由于这个原因，设计很容易脱节，缺乏连通性。因此，我们需要基于一点来审视设计的方方面面，以防止上述情况的发生。

在浏览器里讨论设计和静态视觉效果，很容易使人陷入争论。事实上，代码和视觉效果缺一不可。HTML和CSS编辑器和图形工具是最有效的，我们应该使用它们。几乎在每个项目开始时，我们都会在纸上画草图，因为在早期表达想法，铅笔和纸绝对是最好的工具。

当确定了一个方向后，我们开始敲代码，在浏览器里尝试版式布局、原型交互元素和测试早期的设计。毫无疑问，HTML和CSS是这个阶段最好的工具。

在设计排版、色彩和纹理的过程中，我们几乎完全在浏览器中使用HTML和CSS，因为我们知道它给我们最真实的结果。在设计方向之间转换时我们使用代码快速迭代。当需要敏捷灵活时，我们发现代码和浏览器是目前为止最好的工具。

我们喜欢在浏览器中使用HTML和CSS进行设计，但对于某些环节，Photoshop或Sketch工具更好用。说出来可能吓着你，我们经常创建静态视觉效果，有时甚至是完整的Web页面，因为我们希望看到设计的整体，而它可能只是一个标题。

我们会制作关键页面的视觉效果，也许是文章列表或一系列产品、博客或新闻条目，有时甚至是一个主页。因为我们发现，设计关键视觉效果，会让设计更加连贯。

与过去不同的是，我们不会制作出所有页面的视觉效果，那样做没有什么收获，甚至是白费功夫；此外，我们也不会设计小屏或中屏版本，而仅制作台式机版本，因为静态图像从来就不是用来解决响应式设计问题的工具。

当要添加一些额外的设计细节时，使用静态版本的设计依然有效。并且，如果想尝试添加微妙的轮廓、阴影或底纹时，无论你的代码功夫有娴熟，还是应该使用Photoshop或Sketch，它们是不可替代的。

这些小细节会带来很大的改变，可以很容易地将一个普通的设计变得更有趣。现在你可能会问：“哪些方面不能在浏览器中做呢?“事实上，答案是没有。然而图形化工具环境可以让我们远离HTML和CSS代码实现中的实际问题，有助于我们更清晰地关注视觉细节。