Twitter bootstrap - for quick and easy design

If you're anything like me, for a graphics designer you make a great web developer.

My past attempts at design have run the gamut from "geocities" to "unicorn vomit", and I've become increasingly minimalist in an attempt to rectify that

-> less design == less unicorn-puke == win!

But it still leaves my sites looking like crayon-drawn whitesites

It's a long way from there to the current industry requirements of a clean, flexible, responsive design - able to handle mega-huge desktop-monitors and tiny smart-phones alike while looking sleek and professional... and I had resigned myself to basically just not sucking too badly and hoping my sites were useful enough for people to get past the ugly-duckling look.

but now I've found bootstrap. It lets you quickly and easily build a fully-responsive all-devices-ready design with very little graphic-design nous required. From a full grid-based system (to easily build columns that will nicely collapse on smaller screens), to all sorts of components - navbars, breadcrumbs, panels, lists of linked thumbnail images... the list is pretty huge.

Don't be put off by the "oh my god PURPLE" look of their website - this is a tool worth using.

The getting started guide is where to begin.

There's a number of pre-built templates on bootply templates that even if you don't like, you can cannibalise for the various pieces you want.

You can also buy a whole bunch of pre-packaged, professional themes (for about $12 each) from WrapBootstrap to kickstart your website design. Though be aware they are mostly built on Bootstrap 2

If you're building this stuff in rails, there's a whole bunch of bootsrap-related gems - which mean you don't have to download the css/js versions of bootstrap and mix them all into your assets directory.

Ryan Bates' railscast (see below) uses seyhunak / twitter-bootstrap-rails, which seems to have a whole bunch of neat generators for quickly throwing up layouts. I prefer not mixing bootstrap's Less with the existing SASS, and so have gone for the sass-based gem: bootstrap-sass gem.

I suspect you can combine these two powers for good by using the generators of twitter-bootstrap with the sass-based assets of bootstrap-sass... but have yet to try it (let me know if you do).

There's also a great overview of rails and twitter bootstrap with a related RailsApp that goes into far more depth (I haven't had a look at that yet).

and Ryan Bates has done a railscast on twitter bootstrap basics, and a pro-only railscast: more on twitter bootstrap

enjoy...

---

Note: Bootstrap version 3 has recently been released, and a lot of the tutorials, railscasts etc are based on version 2. Bootply has a Bootstrap 3 migration guide if you want a reference to what has changed.

Designing serious games - a request for help

I've been hanging out a lot on Less Wrong, which is a community for people trying learn about being more rational.

Some of us are also programmers... so we've decided to get together and have a hackday (in London). But we're still trying to figure out what would be both cool/interesting *and* help us build our rationality, *and* still be doable by an odd collection of random hackers over a single day.

One idea would be to have a go at designing serious games - games specifically created for improving our rationality, a bit like Lumosity builds games for improving mental agility.

But we need help coming up with ideas. Ideas that are not only small enough to fit into the time-schedule of a hackday... but that also demonstrably improve some aspect of our rationality.

If you have any ideas (or would be able to comment on those we've got), come over to our site and add our comments to the Designing serious games discussion.

Thanks

Signup: Ask the right question

The sign-up process is much more than just the form that gets a potential customer's details. The majority of the sign-up process actually takes place inside the customer's head. A customer will sign up - even using a crappy signup form as long as they're actually motivated to buy your product... not that you should make a crappy signup form - because that also just puts hurdles in the way of an otherwise motivated potential customer.

This awesome presentation explains how you can design your signup process to get customers motivated and rearing to go on your site. It points out where the friction is in the process, where they usually fall out of the sales funnel, and the ways to change your way of thinking about your site: to provide ample opportunities for a confused or skeptical customer to change their minds. It also picks out the pain-points for the sign-up process - giving some great examples of how to get out of their way and let them get on with paying you money straight away... always a good thing.

I only wish I'd seen the original talk, but the slides themselves speak the story clearly and are well worth a few minutes of paging through.

Designing For Sign Up

View more Microsoft Word documents from Joshua Porter.

Link: A signature cadence

Too many websites (and applications) are soul-less, corporate entities that treat you like just another number.

Rands' article: A signature cadence shows how a human tone can make a big difference in how we view a site. Even tiny details like the copyright wording can help make an overall impression that you are actually a bunch of real people. I think we need more of that.