Camen Design

c share + remix

Hello.

This site renders best in an Acid 2 compliant browser.
You can discover why in the rest of this article.
Please use either Firefox 3, Safari or Opera.

The Principles of Camen Design:

Ⅰ. Code Is Art

If you don’t believe this, close your browser now. There is nothing I can do to help you.

Not all code is art, just as much as asking for a cup of sugar, is not poetry. However, just as poetry is the considered selection of words to create an underlying metaphor - the considered selection of functions can formulate artistic code that really embeds the programmer’s unique personality into the design.

Ⅱ. Solve Only My Problem

The Internet is full of generic code that solves generic problems, generically.

Every line of this website has been fretted over, to reduce it and hone the whole cohesive mass into an absolute straight forward solution of my problem: my website.

This website would not have been possible for me to create if I had to constantly keep in my head the design considerations of people I have never met, nor even care about. This website does not work in Internet Explorer, and nor will it ever. I don’t use Internet Explorer. I don’t use Windows as my primary OS. I don’t even care what Windows people do. This is my personal website, so why should I cripple my code trying to solve their problems?

The standards have been around for over 10 years.
Using an incapable browser is your problem, not mine.

Kroc Camen

Ⅲ. Let Everybody Else Do Their Job

Copy & paste has existed on computers longer than I have been alive. You will find no social bookmarking links on this site; firstly, because I find such sites a scourge on the Internet, and secondly because copy & paste has existed on computers longer than I have been alive… use them.

I don’t obsfucate my email address, Google Mail works.

E-mail has also been around for longer than I’ve been alive, therefore there are no public comment threads on this website. If people truly have something to say to me about what’s on this site, they will want to e-mail me. Public comment threads just encourage people to write a lot of words, and say nothing.

This is the Internet in 2008; if you must reply to me publicly, anybody can get a free blog on any street corner of the Internet. Having no comments is the perfect lazy-filter I so desire.

Validation logos / links do not tell you anything useful. You can view the HTML / CSS and even PHP of this site and decide if it’s any good yourself. All validation will tell you is that a machine was able to read the code.

But it goes much deeper than this.
Your browser, your computer and most importantly– you, are perfectly capable of doing the right thing. You do not need to be cajoled with re-implementations of the wheel. This website respects you.

How It Was Done

The simplicity of this website’s look totally belies the simplicity of the HTML & CSS underneath.

So how is this possible? It’s possible because it has been possible for several years now. The fact of the matter is that people are tied both financially and psychologically, to Internet Explorer.

Internet Explorer’s dire support for CSS has meant that in order to support everybody, web-developers have become used to making messy code full of classes to work around the lack of even the most basic selectors.

But how many developers actually like Internet Explorer?

We are brought down to this kindergarten level of CSS because of job requirements. Developers work for businesses that have to support IE6 users. But too many developers then take this broken method of development and apply it to their own personal websites; inventing ingenious hacks to support IE6 users.

Seriously, as a skilled one-man-band web-developer creating your personal site,
who is it that you care about that willingly uses IE6 that you have to support them?

Kroc Camen

Tell them to download Firefox, Opera or Safari, and you will be doing the Internet a world of good - but more importantly you will be doing yourself a whole world of good.

Creating this website without any thought of Internet Explorer has been a joy. CSS “just works” in Firefox, Opera & Safari, and I have been able to push my skills to the limit by not holding myself back on users using an outdated, broken and insecure browser on a platform that has the choice of many other browsers—all better.

Prototyping

I started out by using the Blueprint CSS framework to mock-up a layout that obeyed a strict reading rhythm and a sensible metric for measurements. Before, I would usually just pick whatever number seems sensible for my padding / margin &c. and whilst that is still fine, for this website I wanted to explore more precise typography (for which I am still just a beginner) after being inspired by the Web Typography Sucks presentation.

The problem with Blueprint is that as a framework, people forget to take the scaffolding down! The fact that Blueprint includes tools that let you compress the code down so that you can leave it in your site, defeats the very nature of a blueprint.

Regardless, my thanks does go to them for helping me define a nice solid feeling to the site by not having to randomly make up sizes on the spot.

HTML5

All credit goes to Sam Ruby for showing that HTML5 is doable in the here and now, and just how much it simplifies the document structure.

When I started this site, I had set myself the goal of no more than three IDs and no more than three classes for the CSS. This would have been achievable in HTML 4 / XHTML, but the CSS-selectors would have become so long, and cryptic, that it would not prove much.

It was adopting HTML5 that struck me with the idea that each unique “content type” on my website could use a different HTML element to represent it, and thus require no classes at all (and be semantically cute).

A tweet is just a <blockquote>. A blog is a <section> (representing a page). A photo or piece of art is a <figure> (although technically, an<h1> proceeded by a <section>, containing a <figure>; so that I could add blog-like content underneath the image). And in the future, I could add <audio> & <video> content types :)

There are a few hacks involved in using HTML5 though. Pre-Firefox 3β5, you must serve HTML5 as XML otherwise the new HTML5 elements are permanently inline and won’t accept block level content in them. However, if you have to use a <figure> with the <legend> inside you must always serve as XML as both Firefox 3 and Safari have major issues with a <legend> not being inside a <fieldset> (Firefox inserts an implicit <fieldset> into the document structure).

Legends have always been very hard to style… so you’ll be glad to know that the the yellow title that appears when you mouse over a picture in the photo or art sections is a legend. 

<figure>
	<legend><a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg">
		DSC00511.JPG (494.4 KB)
	</a></legend>
	<a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg">
		<img src="/data/content-media/photo/DSC00511_preview.jpg" width="640" height="480" />
	</a>
</figure>

PHP

I like compact code. Or more specifically, I hate spawning temporary variables.
I’ll write more about the PHP on this site later if there’s interest, but you’re free to explore the code for yourself.

The fast caching system used in the site was inspired by the code of OSNews, written by Adam S. (firsttube.com) which eschews all beauty for practicality (a completely fair purpose given the traffic requirements). This helped me par down my caching system to a bear minimal amount of lines and gave me a better overall perspective of fast code.

Thank you, thank you Mozilla for such a wonderful, love-filled product that has been such a joy to develop for. This website is not finished, nor will it ever be. It will improve as the browsers do; but it’s been such a relief to develop in a way that should-have-been for the last 10 years. Keep up the great work.

Kind Regards,