Version Six

It was nearly two years ago since the last redesign, this marks the sixth version of carlrafting.com, which i registered almost five years ago.

The path to get here hasn’t been that straightforward, i believe any designer can agree that redesigning your own personal website is one of the hardest thing to pull off, but now it’s here, and i’ve learned some stuff along the way which i thought i’d like to share.

The Design

I’ve lost track on how many iterations i’ve gone through before getting here, but i guess it’s something close to 20… Yeah crazy. As you can see the color palette is very similar to what i’ve had before, it’s just a matter of tweaking it a bit. This design is actually an evolution of an earlier idea i had, which started in Photoshop.

OOCSS

I can’t say i fully grasp the idea behind OOCSS, but the stuff that managed to stick to my brain, i’ve tried to incorporate during the development, and i must say i really like the approach.

Before, i used to write my CSS in a more location dependent manner, this time it’s pretty much the opposite. The problem with location dependent CSS, to me, is that i find it harder to scan the document and also, i find it pretty hard to maintain.

This is what i refer to as location dependent css:

p {
	margin: 0 0 20px;
}

#css {
	margin: 0;
	background: red;
}

#css p {
	margin: 0 0 40px;
}

So this bit of code assumes that the p element should be contained within #css. I’ve seen a lot of people writing CSS like this, and still do, and it used to be the way i prefered to write CSS as well.

But if you imagine for a second that there are more elements that should have other styles than their default, within #css. Since one read left-to-right the first thing you’ll read is #css, and this bothered me alot, it’s hard to read and it also has an impact on performance.

Theres one downside to location independent CSS as i see it, compared to “regular” location dependent. It’s that the HTML will contain more classes, but to me the benefits outweighs that. Writing location independent CSS gives more control of the styling and makes it easier to maintain and scan the CSS.

This is what i refer to as location independent CSS

p {
	margin: 0 0 20px;
}

.css {
	bakground: red;
}

.css-blurb {
	margin: 0 0 40px;
}

So in this case the .css-blurb is applied directly to the <p> element in the HTML. I still do have some location dependency in my CSS but it’s not as common as it used to be.

CSS & HTML Formatting

I’ve gone with another approach regarding formatting of the HTML & CSS as well.

Before

<!-- html -->

<div id="text">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus vel justo elementum convallis facilisis quis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla urna vel ipsum varius gravida id eu tortor.</p>
</div>

/* css */

body {
	font-family: Helvetica;
	font-size: 13px;
	font-style: normal;
}

After

<!-- html -->

<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus vel justo elementum convallis facilisis quis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla urna vel ipsum varius gravida id eu tortor.</p>
</div>

/* css */

body {
font-family: Helvetica;
font-size: 13px;
font-style: normal;
}

Why this? Well in this case it’s a matter of readability, i just find the second example a lot more natural to read.

The problem with nicely formatted HTML isn’t the formatting itself, it’s that when implementing it with a CMS, it’ll in most cases mangle it and it wont be as pretty anymore, so i’ve gone with another approach when writing HTML as well.

Working With Ems

Another thing i incoroporated was to more rely on ems instead of pixels, now i still use pixels for widths and font-size, dealing with ems and font-size inheritance is a major headache i could do without.

I could probably go with ems on widhts and paddings as well, but i discovered this quite late in the process and incorporating this with the typography was easy.

I’ve read a lot about ems in the past so it wasn’t completely new to me, but to acctually use it in a project like this made me see the beauty of it, it’s just a matter of changing the font-size and the margin and line-height will adjust based on font-size, beautiful.

Final Notes

I’ve also done things a bit differently with my CMS of choice, Textpattern, but i’ll save that for an upcoming article, so stay tuned!

Published on