May 31, 2012

Square Wheels

Paul O’Brien

Let’s design a car that has square wheels and no windows because it will look really cool. Then let’s put the steering wheel on one side of the car and the foot pedals on the other side of the car. While we’re at it let’s forget to put a door on it so that you can’t actually get in to drive.

Now let’s give the design to the mechanic and tell him to build it.

Well put. I love comparisons like this, refuting the idea that web design and development is simply, “here’s my idea, I just need you to put it up on the web.”

Apr 2, 2012

Pinterest's Founding Designer Shares His Dead-Simple Design Philosophy | Co.Design: business + innovation + design

The design instinct, above all, is about viewing the world around you as a place filled with opportunities to add more thoughtfulness and care.

Apr 2, 2012

Inside Stripe, The PayPal Competitor Backed By PayPal Founders Peter Thiel, Elon Musk | Fast Company

“Our target audience is the people making things on the web.”

What a great idea Thank you, Stripe.

Mar 8, 2012

Instapaper Placebo

But I find far more things that look interesting than I have time to read. Currently I have 4051 unread links. I had to write some code to find that out because instapaper doesn’t have an unread count anywhere. That lack of unread count is the best feature.

Mar 6, 2012

Mobile: Don't Break the Web

Some really good performance tips, not just for mobile.

Mar 6, 2012

Better Background Images for Responsive Web Design

Elliot Jay Stocks:

To the inevitable nay-sayers complaining about the use of Javascript for presentational elements: there are more important things in life.

Good point.

Jan 4, 2012

10 New Year’s resolutions for designers

Mike Monteiro:

This year? This year’s gonna be a goddamned golden age. Last year we trained. This year we fight.

Dec 2, 2011

SEO Secret Sauce

Brad Colbow on SEO:

Create content for people not search engines. Content that makes them laugh. Content that makes them cry. Content that makes their lives a little better. Content that they have to share with their friends. Content that other sites want to link to. Content that you are proud to point to and say that you created.

I strongly agree with this. I’ve read a few articles that share this “secret”, lately. You can tell people over and over again that the key to good search engine placement is to produce great content, but I think they’re turned off by this “approach” because it requires more effort to create good stuff. Just slapping some words from a Word document into a website isn’t good enough anymore (if it ever was). You have to put yourself in your readers’ shoes, provide content that’s actually useful — the kind of stuff that you’d like to read.

Nov 18, 2011

Write to Write

It’s easy to snap out of the writing routine. There’s an insane number of excuses to not write. An excuse I gave myself was to take a break after getting an article published, and it’s a break I’m regretting. What I thought would recharge my creative has actually hurt me instead.

Totally. Weird how “taking a break” can throw you off.

Nov 18, 2011

LESS

Andy Clarke:

If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!

Earlier this week, I decided to find out what all the fuss over LESS was about. Now I know. It’s because it’s awesome.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

I figured it would be a useful tool to do simple things like use variables for colors. If you do this, you can “re-skin” a site in two or three lines of CSS, right? I also thought it would be really great for vendor prefixes. For example, just do something like:

.border-radius(@rad: 5px){
    -moz-border-radius: @rad;
    -webkit-border-radius: @rad;
    etc.
}

Now, you don’t have to remember differences in syntax for different browsers. You just get all div{.border-radius(10px)}. Plus, if a vendor changes their implementation of something, you just have to update it in one place. But you can do a ton more, like defining your favorite .clearfix method as a variable and maybe removimg some markup. The more I used it, the more creative I got with it.

So, without further ado, here are some things I’ve done with LESS:

960 Grid System (kinda’)… but fluid… and with LESS

// Define some variables
@body: 960;
@margin: 10;

// Do maths
.grid(@span){
    float:left;
    width:(((@span * 80) / @body) * 100%) - ((@margin / @body) * 200%);
    margin:0 (@margin / @body) * 100%;
}

// Make magic happen
#about-us{.grid(4); }
#sidebar{.grid(8); }

Baseline Grid with Everything in Ems

// Define some variables
@font-size:16;
@line-height:1.5;
@font-family: ‘georgia’;

// Do maths
@font-size-em: (@font-size / 16) * 1em;
.grid(@span){
    float:left;
    width:(((@span * 80) / @body) * 100%) - ((@margin / @body) * 200%);
    margin:0 (@margin / @body) * 100%;
}
.getSize(@size, @top-margin: 2, @bottom-margin: 1){
    @new-size: (@size / @font-size) * 1em;
    @new-height:(@line-height * @font-size) / (@new-size * @font-size) * 1em;
    @new-margin: @margin * @new-height;
    font-size: @new-size;
    line-height:@new-height;
    margin:(@top-margin * @new-height) 0 (@bottom-margin * @new-height) 0;
}

// Make magic happen
h1{.getSize(60);}
h2{.getSize(36);}
h3{.getSize(24, 2, 0);}

Disclaimer

I realize these may not be the most efficient or effective ways to do things, but I just started learning it, okay?

I’m not completely sold on a deployment strategy yet. Compiling it is a must for a production environment, and that’s easy with LESS.app. But once a project is live, I’m not sure what I’ll do about making quick one-off updates to the style sheet.

So, go try LESS.

Navigate
« To the past Page 1 of 8
About
I'm Joshua Milford, a web designer and developer. This is where I write. You can follow me on twitter and browse my work. Subscribe via RSS.