Want to move fast? Just do this

Want to move fast? Just do this(codefastdieyoung.com)

326 points by sghael 15 years ago | 40 comments

notahacker 15 years ago |

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 .

tomkarlo 15 years ago | |

>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.

thibaut_barrere 15 years ago | | |

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

rimantas 15 years ago | |

  > 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.

jat850 15 years ago | | |

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

calloc 15 years ago | |

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

simplify 15 years ago |

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

glasner 15 years ago | |

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

simplify 15 years ago | | |

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

sunjain 15 years ago |

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.

swanson 15 years ago | |

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

sniW 15 years ago |

using pure black as the text color is a mistake

Why is this?

mikeklaas 15 years ago | |

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.

sghael 15 years ago | | |

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 :)

proexploit 15 years ago | |

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.

Nick_C 15 years ago | | |

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.

ZoFreX 15 years ago | |

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.

nbashaw 15 years ago |

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.

minouye 15 years ago | |

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.

DennisP 15 years ago | |

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!

nbashaw 15 years ago | | |

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

Raphael 15 years ago |

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

jblomo 15 years ago |

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?

hammerdr 15 years ago | |

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.

theoj 15 years ago |

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

cabalamat 15 years ago | |

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

count 15 years ago | | |

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!

tomkarlo 15 years ago |

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.

_Lemon_ 15 years ago | |

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!

tomkarlo 15 years ago | | |

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.

proexploit 15 years ago | |

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.

squarepeg 15 years ago | | |

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

https://gist.github.com/856243

bryanh 15 years ago |

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!

FPSDavid 15 years ago |

anyone have a mirror to this?

sghael 15 years ago | |

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

FPSDavid 15 years ago | | |

no problem, thanks for the update!