在浏览器中设计网站（喘气！）

Question

我对人们对利弊的看法感兴趣，或者对浏览器中的网站设计，以及远离Photoshop，Fireworks等等彻底“没有”。

我一直在为我的网站设计一个重新启动，并在浏览器中试用它，我不会回头看。

例如（我使用带有12列的960px网格）：

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

不仅设计再次变得有趣，而且使用网格，垂直节奏，甚至黄金比例，从未如此简单。更不用说，它完全消灭了设计和静态编码之间的差距。

你怎么看？

Answer 1

嗯，使用浏览器工作并不是世界上最糟糕的事情，但有一些“地狱没有”：

1）不要使用IE设计您的应用。使用Chrome或FireFox。 IE的不合规行为可能会让你误以为你的CSS是真的有效。您IE的主要用例是在IE中测试您的网站。

2）不要为你的课程命名方式命名，就像你在你的例子中所做的那样。

Answer 2

不要!!

如果iDesign Steve学会直接在浏览器中进行设计，

1. 创新将受到影响：史蒂夫并不关心CSS / HTML /诸如此类的限制。他可以自由地展示人类尚未见到的最令人印象深刻的网站。这是普通的程序员Joe有责任延长CSS / HTML /的范围以及及时批准设备，并看到它被一些愚蠢的浏览器撕成碎片，这恰好在截止日期之前具有良好的市场份额。 面对它，编写CSS就像编写汇编代码一样。即使是最基本的东西（流畅的多列布局，任何人？）都是非常难以实现的，它会让你高兴一段时间。
2. 史蒂夫的冷静因素将会减少：我所知道的单一开发人员并没有使用WYSIWYG工具生成HTML / CSS或认为这是可以接受的。当你需要的只是一个文本编辑器时，你看起来并不酷。当顾客看看史蒂夫的显示器，看到一堆文字而不是几个窗户，一百个有趣的小图标，一半完成多彩的草稿时，他也可以认为“我7岁的孙子也可以打字。” ..“。
3. Joe还有比Steve更多的限制：网站应该是可访问的，布局应该足够流畅以适应各种输出，用javascript玩得很好......如果CSS / HTML无论如何都会被重写，没有任何意义上的挣扎

成为一名优秀的队友并立即启动Photoshop。乔需要他的工作来支付账单。

Answer 3

您是说首先在浏览器中制作线框图（通过HTML / CSS），然后应用设计？这就是我的所作所为（以及37Signals follows that thought）。

在我看来，开发人员在不触摸Photoshop的情况下制作静态线框非常有用，因为该网站可以立即使用，并且不会浪费时间让事情看起来恰到好处。

此外，对于程序员来说，并没有太多的设计连续性 - 我喜欢把它留给那些在阳光下知道每个PS命令的人：）

我还使用YUI Grids CSS框架快速创建布局。

Answer 4

对于那些具有我设计能力水平的人来说，这是一个白板草图，然后直接进入HTML和CSS。

我的网站仍然看起来很糟糕......

Answer 5

在我做过的最后几个网站中，我采取了两种方法。每次，直接在HTML / CSS中设计的页面都花费了很少的工作量，但是一个不太吸引人的网站。如果您关心制作一个有吸引力的页面，请从Photoshop开始，否则您经常会在CSS中使用快捷方式。一个想法可以更快地创建，并且在Photoshop中更加灵活，这将引导您尝试您的想法，并且您将提出一个视觉上更好的网站。

Answer 6

我从不在Photoshop中设计网站;我直接从物理草图到HTML和CSS。我发现它更快，你不会丢掉你已经工作了几个小时的东西（Photoshop文件）。

Answer 7

我选择留在线框并从纸张设计到浏览器。当然，这对我有用，它让我成为一个更有创意的设计师。

虽然我喜欢使用自己的CSS库，但请查看Google Blueprint，然后通过网页设计师Mark Boulton查看this article。

Answer 8

天啊没有！

• 你正在重做'表格中的一切'错误，只是使用类而不是表格。
• 你正在混合演示文稿（我把它放在哪里）和内容。你的课程不知道这是什么，他们告诉你要放在哪里。
• 您的设计是固定尺寸。它不会随着窗口大小而流动，因此它需要水平滚动或右侧的大白色空间。

但我不明白为什么有人提到PhotoShop。它几乎是网页设计的最后一个工具，也许Illustrator是唯一一个更不适合它的工具。

Answer 9

我发现，虽然物理素描可以让你开始设计的正确轨道，但你可以在Adobe Illustrator中制作更好看的布局（比Photoshop更容易移动元素）。设计完成后，使用Photoshop将其切片。

Answer 10

要考虑的一个意见是你为谁设计。如果您正在为客户设计网站，那么在photoshop中进行快速模拟会很有帮助，这样他们就可以知道布局并且可以签署您的设计。一旦客户同意了一个设计，你就可以创建一个适合模拟中元素的线框，然后你可以直接从模拟中拼接出需要实际图像的元素。

在遵循此方法时，您必须考虑可用于实现模拟的所有可用设计元素，并确保将它们以精心设计和语义的方式组合在一起，而不仅仅是可以完成工作的内容

Answer 11

指南针，特别是蓝图/语义，在浏览器中进行设计时会有很大帮助。我还想在不同的文件上保留布局和样式，这样我就可以更容易地处理我不喜欢的样式，同时将线框放在一个地方。我还建议使用彩色托盘和组合成字体比例，使用SASS变量都很有用且更容易实现。