Well, doing work using the browser isn't the worst thing in the world, but there are a couple of "hell no's":
1) Do NOT design your app using IE. Use Chrome or FireFox. IE's noncompliant behavior can fool you into thinking your CSS is valid when it really isn't. Your primary use case for IE is testing your site in IE.
2) Don't name your classes for how they appear, like you've done in your example.
If iDesign Steve learns to design directly in the browser,
Innovation will suffer: Steve doesn't care the limitations of CSS/HTML/whatnot. He is free to dish out the most impressive site humanity has yet to see. It's average programmer Joe's duty to stretch the limits of CSS/HTML/whatnot to cram that approved deisgn in time, and see it torn to bits by some stupid browser, which happens to have a good size of market share, just before the deadline. Face it, writing CSS feels like writing assembly code. Accomplishing even the most basic things (fluid multi column layout anyone?) is ridiculously hard and it makes you high for a while.
Steve's coolness factor will diminish: Not a single developer that I know uses a WYSIWYG tool to generate HTML/CSS or considers this acceptable. When all you need is a text editor, you don't look as cool. When a customer throws a look at Steve's monitor, and sees a bunch of text instead of several windows, a hundred little funny icons, and a half finished colorful draft, he may as well think "My 7 year old grandson can type stuff too...".
Joe has still more constraints than Steve has: Site should be accessible, layout should be fluid enough to accommodate all kinds of output, play nice with javascript... If CSS/HTML will be rewritten anyway, there is no point struggling.
Be a good teammate and fire up Photoshop now. Joe needs his job to pay his bills.
Are you saying you make wireframes of pages in the browser (by HTML/CSS) first and then apply a design? That's what I do (and 37Signals follows that thought too).
In my opinion it's good for developers to make static wireframes without touching Photoshop since the site is instantly usable and time isn't wasted on making things look just right.
Also there doesn't tend to be much of a design streak with programmers - I like to leave that to the people who know every PS command under the sun :)
I also use the YUI Grids CSS framework for speedily creating layouts.
Over the last few sites I've done, I've taken both approaches. Each time, the page designed directly in HTML/CSS has taken a lot less work, but has been a much less appealing website. If you care about making an attractive page, start in Photoshop, otherwise you'll too often take shortcuts in your CSS. An idea can be created quicker and is much more flexible in Photoshop which will lead you to experiment with your ideas and you'll come up with a visually better site.
我从来不用 Photoshop 设计网站； 我直接从物理草图转向 HTML 和 CSS。 我发现它速度更快，而且您最终不会扔掉您已经工作了几个小时的东西（Photoshop 文件）。
I never design websites in Photoshop; I go straight from physical sketches to HTML and CSS. I find it quicker and you don't end up throwing away something that you've been working on for hours (the Photoshop file).
尽管我喜欢使用自己的 CSS 库，但请查看 Google Blueprint，并查看 < a href="http://www.markboulton.co.uk/journal/comments/drupalorg_design_iterations_and_designing_in_the_open/" rel="nofollow noreferrer">这篇文章，作者为网页设计师 Mark Boulton。
I've chosen to stay with wireframes and designing from paper right into the browser. Of course, it's what works me for, and it has made me a much more creative designer.
Although I like to use my own CSS libraries for it, take a look at Google Blueprint, and check out this article by web designer, Mark Boulton.
you're redoing the 'tables for everything' mistake, just using classes instead of tables.
you're mixing presentation (where do i put this) with content. your classes don't tell what is this, they tell where to put.
your design is fixed size. it won't flow with windows sizing, so it would either need horizontal scrolling or big white space at the right.
but i don't get why anybody mentions PhotoShop. it's almost the last tool for web design, maybe Illustrator is the only one even less appropriate for this.
I have found that, although a physical sketch can get you started on the right track for a design, you can make far better looking layouts within Adobe Illustrator (which is much easier to move elements around in than Photoshop). Once your design is complete, use Photoshop to slice it up.
One opinion to consider is who you are designing for. If you are designing a site for a client, it can be helpful to do quick mock ups in photoshop so they know the layout and they can sign off on your design. Once the client has agreed on a design, you create a wire frame that will fit the elements from your mock up and then you can splice you elements that require actual images right from your mock up.
When following this method you have to consider all the available design elements that you can use to implement your mock up and make sure that you put them together in a well designed and semantic nature, not just something that will get the job done.
Compass, specially blueprint/semantic, helps a lot when you're designing in the browser. I also like to keep layout and styles on different files, so I can more easily dispose of styles I don't like while keeping the wireframe in one place. I'd also recommend using color pallettes and composing to a font scale, both are useful and easier to achieve using SASS variables.
发布评论
评论（11）
嗯，使用浏览器工作并不是世界上最糟糕的事情，但有一些“绝对不可以”：
1) 不要使用 IE 设计您的应用程序。 使用 Chrome 或 FireFox。 IE 的不合规行为可能会欺骗您，让您认为 CSS 是有效的，而实际上并非如此。 IE 的主要用例是在 IE 中测试您的网站。
2) 不要像您在示例中所做的那样根据类的显示方式来命名它们。
Well, doing work using the browser isn't the worst thing in the world, but there are a couple of "hell no's":
1) Do NOT design your app using IE. Use Chrome or FireFox. IE's noncompliant behavior can fool you into thinking your CSS is valid when it really isn't. Your primary use case for IE is testing your site in IE.
2) Don't name your classes for how they appear, like you've done in your example.
不！！
如果 iDesign Steve 学会直接在浏览器中进行设计，
面对现实吧，编写 CSS 感觉就像编写汇编代码。 即使完成最基本的事情（流畅的多列布局有人吗？）也是非常困难的，它会让你兴奋一段时间。
成为一名优秀的队友，立即启动 Photoshop。 乔需要工作来支付账单。
Don't!!
If iDesign Steve learns to design directly in the browser,
Face it, writing CSS feels like writing assembly code. Accomplishing even the most basic things (fluid multi column layout anyone?) is ridiculously hard and it makes you high for a while.
Be a good teammate and fire up Photoshop now. Joe needs his job to pay his bills.
您是说先在浏览器中制作页面线框（通过 HTML/CSS），然后应用设计吗？ 这就是我所做的（37Signals 遵循这个想法也）。
在我看来，开发人员在不接触 Photoshop 的情况下制作静态线框是有好处的，因为该网站可以立即使用，并且不会浪费时间让东西看起来恰到好处。
此外，程序员往往不会有太多的设计倾向 - 我喜欢把它留给那些了解阳光下每一个 PS 命令的人:)
我也使用 YUI 网格 用于快速创建布局的 CSS 框架。
Are you saying you make wireframes of pages in the browser (by HTML/CSS) first and then apply a design? That's what I do (and 37Signals follows that thought too).
In my opinion it's good for developers to make static wireframes without touching Photoshop since the site is instantly usable and time isn't wasted on making things look just right.
Also there doesn't tend to be much of a design streak with programmers - I like to leave that to the people who know every PS command under the sun :)
I also use the YUI Grids CSS framework for speedily creating layouts.
对于像我这样的设计无能水平的人来说，这只是一张白板草图，然后直接转化为 HTML 和 CSS。
我的网站仍然看起来很糟糕......
Well for someone with my level of design incompetence it's one white board sketch and then straight into HTML and CSS.
Still my websites look awful...
在我最近完成的几个网站中，我采用了这两种方法。 每次，直接用 HTML/CSS 设计的页面都会减少很多工作，但网站的吸引力却要低得多。 如果您想制作一个有吸引力的页面，请从 Photoshop 开始，否则您会经常在 CSS 中走捷径。 在 Photoshop 中可以更快地创建想法，并且更加灵活，这将引导您尝试您的想法，并且您会想出一个视觉上更好的网站。
Over the last few sites I've done, I've taken both approaches. Each time, the page designed directly in HTML/CSS has taken a lot less work, but has been a much less appealing website. If you care about making an attractive page, start in Photoshop, otherwise you'll too often take shortcuts in your CSS. An idea can be created quicker and is much more flexible in Photoshop which will lead you to experiment with your ideas and you'll come up with a visually better site.
我从来不用 Photoshop 设计网站； 我直接从物理草图转向 HTML 和 CSS。 我发现它速度更快，而且您最终不会扔掉您已经工作了几个小时的东西（Photoshop 文件）。
I never design websites in Photoshop; I go straight from physical sketches to HTML and CSS. I find it quicker and you don't end up throwing away something that you've been working on for hours (the Photoshop file).
我选择继续使用线框并直接在浏览器中从纸上进行设计。 当然，这就是我的工作，它让我成为一个更有创造力的设计师。
尽管我喜欢使用自己的 CSS 库，但请查看 Google Blueprint，并查看 < a href="http://www.markboulton.co.uk/journal/comments/drupalorg_design_iterations_and_designing_in_the_open/" rel="nofollow noreferrer">这篇文章，作者为网页设计师 Mark Boulton。
I've chosen to stay with wireframes and designing from paper right into the browser. Of course, it's what works me for, and it has made me a much more creative designer.
Although I like to use my own CSS libraries for it, take a look at Google Blueprint, and check out this article by web designer, Mark Boulton.
一定不行！
但我不明白为什么有人提到 PhotoShop。 它几乎是网页设计的最后一个工具，也许 Illustrator 是唯一一个更不适合此目的的工具。
hell no!
but i don't get why anybody mentions PhotoShop. it's almost the last tool for web design, maybe Illustrator is the only one even less appropriate for this.
我发现，虽然物理草图可以帮助您走上设计的正确轨道，但您可以在 Adobe Illustrator 中制作出更好看的布局（与 Photoshop 相比，在其中移动元素要容易得多）。 设计完成后，使用 Photoshop 将其分割。
I have found that, although a physical sketch can get you started on the right track for a design, you can make far better looking layouts within Adobe Illustrator (which is much easier to move elements around in than Photoshop). Once your design is complete, use Photoshop to slice it up.
需要考虑的一种意见是你为谁设计。 如果您正在为客户设计网站，那么在 Photoshop 中快速制作模型会很有帮助，这样他们就知道布局并可以批准您的设计。 一旦客户同意设计，您就可以创建一个适合模型中元素的线框，然后您可以直接从模型中拼接需要实际图像的元素。
当遵循这种方法时，您必须考虑可用于实现模型的所有可用设计元素，并确保将它们以良好设计和语义的方式组合在一起，而不仅仅是完成工作的东西。
One opinion to consider is who you are designing for. If you are designing a site for a client, it can be helpful to do quick mock ups in photoshop so they know the layout and they can sign off on your design. Once the client has agreed on a design, you create a wire frame that will fit the elements from your mock up and then you can splice you elements that require actual images right from your mock up.
When following this method you have to consider all the available design elements that you can use to implement your mock up and make sure that you put them together in a well designed and semantic nature, not just something that will get the job done.
指南针，特别是蓝图/语义，在您在浏览器中进行设计时有很大帮助。 我还喜欢将布局和样式保留在不同的文件上，这样我可以更轻松地处理我不喜欢的样式，同时将线框保留在一处。 我还建议使用调色板并组合字体比例，两者都很有用，并且使用 SASS 变量更容易实现。
Compass, specially blueprint/semantic, helps a lot when you're designing in the browser. I also like to keep layout and styles on different files, so I can more easily dispose of styles I don't like while keeping the wireframe in one place. I'd also recommend using color pallettes and composing to a font scale, both are useful and easier to achieve using SASS variables.