Want to move fast? Just do this | Hacker News Reader

Want to move fast? Just do this

codefastdieyoung.com

326 pointssghael40 comments

This is excellent, very practical advice.

The one caveat I would add which the author glosses over is Test in IE as a high priority unless you have a very tech-savvy audience. Compass/Blueprint abstract away most of the uglier CSS box-model hacks and I agree that IE users can live without gradients and rounded corners. But if the site looks awkward without the CSS3 tricks that don't work on the browser that >60% of your audience uses, you're going to need to tweak that aspect as well .

  > most of the uglier CSS box-model hacks

Wait, does someone still develop for IE5? Otherwise there is no need for any box-model hacks.

There are still a number of DTD headers which can throw IE6 into quirks mode, where the bug still exists.

Right, so the choice is, find a DTD that keeps IE6 in standards mode, or spend countless hours debugging hundreds of tiny layout issues that exist nowhere else.

>60%??? I haven't worked on a site in a while that had more than 45% IE users... most of mine are now below 1/3.

I do maintain a website that still has 65% of IE users (this month statistics).

MSDN?

MSDN is probably a lot lower (rough guess) :)

No, it's a corporate intranet site with multiple companies.

Generally for IE6/7/8 I add Dean Edwards excellent IE7.js, and it takes care of a lot of stuff for me automatically!

Relating to Haml/Sass, you may have heard of the ruby gem StaticMatic. It's a great tool that lets you use Haml/Sass to building quick, static prototypes.

In fact, I loved the concept so much that I began improving upon it myself[1], adding support for CoffeeScript and Amazon S3. For anyone who might find it useful, any testing or feedback would be greatly appreciated.

[1] https://github.com/mindeavor/staticmatic2

I used Staticmatic, but I never liked having to move all my HAML/SASS over to my app. I recently replaced it with the showoff plugin [1], which is basically Staticmatic inside a Rails app.

[1] https://github.com/adamlogic/showoff

Interesting, thanks, I'll consider using that next time I'm building a prototype that will eventually become a Rails app. But who knows, I might write a rails-app-exporter for StaticMatic just for fun :D

I liked it. Lot of folks may already know some or most of this. But it is distilled all in once place, and as the post mentions, it will surely help in quickly moving forward with a polished looking app.

I agree, there wasn't anything groundbreaking, but I definitely bookmarked the page halfway through.

using pure black as the text color is a mistake

Why is this?

Using #111 or #222 softens the page a tad without making it harder to read.

Hypocritically, the text on this article's page is black.

Great catch. Although, in my defense I'm always looking to save time so I just used out of the box settings on the wordpress "Platform" theme. If you're starting from scratch on your own site, dont make this mistake :)

It actually isn't a mistake so I can understand your confusion. #111 or #222 can often be used without losing readability but this doesn't mean black is a mistake. When's the last time you went to a website and said "This text is just too dark!". Hopefully I don't come off too rude, the idea that black as a text color is a mistake is almost offensive to me. Different perspectives.

Well, there are plenty of studies that show high contrast makes for readability issues. For example, I get faint after-images that flick around the page when reading black text on white. It's very distracting.

I get your point about different perspectives, but for web pages we want everyone to read, we should be designing for the lowest common denominator.

One reason I avoid using pure black or pure white these days is I blend text towards whatever is behind it. Text tends to look a lot heavier on the screen than it does in Photoshop (especially if the designer likes to use lighter font weights which generally don't work for the web), and you can really mitigate how heavy the text feels, and reduce the contrast (which mimicks the superior rasterisation going on in Photoshop) by moving the color of the text towards the colour of its background. If you have black text on brown, make the black text slightly brown, for example.

There's a difference between moving fast and doing sloppy work. IMO, this post is a recipe for mediocre design (at best). Don't confuse movement for work - when you approach a design with the a rushed attitude it slows you down in the long run, because you have to clean up your mistakes and possibly start over again when you realize that your first attempt just didn't work at all.

I'm not so much arguing with the specific suggestions in the post as I am the general approach and worldview. There are some useful ideas in there, but they're weakened by being presented in "recepie" format. Sometimes they make sense, sometimes they don't. It depends on the context. Better to learn principles than methods. It's quicker in the long run.

There is definitely a balance between speed and quality. The author here is advocating methods that will enable a single founder to push out an MVP as quickly as possible (while still maintaining some degree of aesthetic appeal). The recipe is absolutely useful in the same way that purchasing a template is useful. As long as it doesn't get in the way of your functionality, you can ship and start iterating with real users.

The article is aimed at programmers without design skills. If you can teach them to create great designs instead of just half-way decent ones, write something up!

Good challenge! I think I'll take you up on it. That's a good Sunday project.

This is certainly one not-terrible way of coming up with an uncontroversial design quickly.

One of the most practical articles I've seen in a while, thanks. What are your thoughts on using UI frameworks like jqueryUI or YUI grid?

My advice wasn't the one solicited but: UI Frameworks are great at helping you get things done. If that is your primary goal, then you should use them. Plain and simple.

The only drawback is that you're incurring some technical debt because you may not be able to easily add needed features to the framework. That's okay for a MVP but needs to be considered before buying into the YUI Control #12 wholesale.

Does green convert better than red? Performable seems to like red over green. http://blog.performable.com/631526233/

I wonder whether orange would perform better than red. Orange is a striking color, and doesn't have the same connotation of "stop".

Orange has 'warning' and 'slow down' associated with it here in the US though (think of every traffic warning/construction sign and highway equipment you've seen).

It couldn't hurt to A/B test though!

This is a good article, if for nothing else besides that button gem which I somehow haven't heard of before.

The downside is, there will be a bunch of sites that look the same, so folks will want to do some real work and find their own components.

I'd contest that it would only matter if you're the same as everyone else if it's contrary to your goal(s). What is your goal? For most it would be to get users to purchase something (aka, make money).

There's the other upside that if your website isn't radically different from others, a lot of your users will already know how to use it. There could be a lot to gain with a lot of your visitors knowing how to extract information from it.

I guess the only real way to know is by testing!

Yeah, I'd agree. I've seen far more UI design crime done in the name of "doing it a new way for the sake of it" than is caused by being similar to other implementations.

The article is very specifically geared towards producing a prototype quickly, not producing a great design. Therefore, similar looking sites don't really factor into the issue being addressed.

You might also enjoy: https://github.com/mbriggs/zurb-awesome-buttons [demo: http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html] - can be installed using bundler and is cleaner than the button gem.

there's also my buttons mixin based on css3-buttons:

https://gist.github.com/856243

I was super surprised at how well SASS let me move quickly with coding 3pics.me! The lighten, darken and mix functions make getting appropriate hex codes pain free.

Wonderful!

anyone have a mirror to this?

Sorry the server is on fire right now... got a tweet from smashing magazine. Working to bring it back up.

no problem, thanks for the update!

back now.

Reply on news.ycombinator.com