Welcome.

1. New Design
2. New Navigation
3. Focus on the Content
4. Semi-Static
   1. Thin Air
   2. Half Baked
   3. Hotlinking
5. Why?

This website renders best in a browser with native HTML5 support, capable of CSS3 media queries and passing the ACID 2 test, as well as various advanced CSS features beyond that.

If this site is white instead of orange, you should upgrade your browser.

This site’s HTML uses no <div>s, no <span>s, and the CSS has no classes and no IDs. There is no JavaScript. All of the code, including the PHP, is free for you to take, study and re-use how you see fit. It is a work of love for this medium.

Welcome to Camen Design.

If you’ve been following this site before, this is now v0.3 of the site.
The main things I changed are:

New Design

I didn’t redesign with v0.2, mostly because I wasn’t unhappy with the original design anyway, but as I started making progress with 0.3 I fell more and more in love with the design and I can’t stand how the old site looked now :P. Here it is for nostalgia:

You can still download the source code for the old site here.

You should be looking at something like this:

This new site makes use of many new browser features available since the old site (which waited for Firefox 3.0 to be released). Embedded fonts, box-shadows, CSS3 media queries and more.

Because only fairly recent browsers support CSS3 media queries the site’s CSS staggers support by laying down a basic print-style and then building a lo-fi version of the site for browsers without CSS3 media queries, and then the full hi-fi design is added on top of that.

If you view the site using Firefox 3.0 or Camino 2.0 you’ll see this:

I would offer this design as an alternative stylesheet but the following two bugs are preventing that: #79021 & #216537 (yes, those were filed in 2001 & 2003 respectively). If you have any means to pull some strings to get those bugs fixed, please do, and let me know; thanks.

Because of this staggered CSS code, the site also prints beautifully. Every line in the site is 19px or a multiple thereof; this means that the site can even be printed on lined-paper!

And, I suppose I may as well support the iPhone, despite not having one myself. Since I can only test with the iPhone Simulator, could you report any issues with the design you have on a real device.

The iPhone doesn’t support position: fixed, so unfortunately you have to scroll back to the top to navigate, I’ve found that in the simulator you can click on the phone’s status bar at the top of the screen to jump back to the top.

I’ve also fixed the design into a non-panning screen, more like an app than how you view most sites on the device. This reduces the complexity of navigation greatly (the page won’t accidentally slide left or right as you scroll), and focuses on the content. That said, however, you can’t zoom. I’ve made extra alterations in the CSS for the landscape mode to give you a larger view: the text reflows to the width so more fits on one screen, and images scale to the width too, so if a screenshot is too small in portrait, try rotating the iPhone and it’ll appear much larger.

Again, if you’re having problems with the site on the iPhone please contact me with suggestions.

New Navigation

Before, the site was split into five articles per page. I didn’t like having to scroll about to change from one page to the next. Now each article is its own page and the next / previous links go article by article. The category links to the left of an article take you to the same article, but where it lies within that category; so you can page through the articles in that category. The old site let you page through the main types (blog | photo | code &c.) but not the tags (web-dev | annoyances | inspiration &c.), which you can now do. It may seem a little disorientating at first, but I think it’s a change for the better that you’ll get used to.

Focus on the Content

The site was pretty spartan to begin with, as I hate needless side-panes, content-modules, widgets and gumpf. The ‘header’ has been moved to the bottom of the screen to focus more on the content. I wanted to downplay the brand. You already know this is Camen Design, the URL says that; no need to repeat it 1’000 times across the site.

The “tweet” section has been renamed “quote” as I don’t want to favour one person’s brand, especially Web 2.0 brands which come and go so quickly. Twitter might be great, but one day the next shiny thing will come along and we’ll all fly off there. I also now quote other people and places too in the section.

The giant Creative Commons logo and enclosure icons are often sources of complaint. It being larger than anything else, draws attention away from the content! Content is worthless unless you know what you can do with it. On my old site the licence was relegated to a tiny line underneath each article. Here, I want to encourage the re-use of my content. How is that not important!? It’s a fundamental freedom that must be communicated first.

Semi-Static

v0.1 of the site used a SQLite database and a simple admin section for editing content. This was ditched in v0.2 for a number of reasons, the main two being that editing HTML in a browser text-box was awful and unreliable, and that the database meant that I couldn’t edit the site as a whole like I can with text files on my hard disk—there was no global search and replace, and adding one would just add more work re-implementing the wheel when the text editor on my computer could already do that.

I created ReMarkable to solve the HTML problem, providing me with a light-weight text-format for writing articles. v0.2 of the site switched to a static publishing system that searched through a folder of text files and spat out all the pages in the site which were then uploaded.

Whilst I could now use my favourite text editor and manage the site as a collection of files—rather than isolated binary blobs—I could only edit and upload the site from my main computer at home, which was fine, until I got a netbook and a 3G connection.

Now I wanted to blog from anywhere, and plan to blog more regularly but ironically I had removed the online editing capability from my site. Now I had the right text format with ReMarkable, editing online wouldn’t be so bad, but it was vital that with v0.3 I could edit both online and off, being able to use TextMate at home, but a CMS when on the move.

Thin Air

I hate content management systems and frameworks and all that junk because they are simply a by-product of web-browsers and web-servers not being tightly integrated into the perfectly functioning ‘content management system’ we all use called an ‘operating system’. My OS already handles hundreds of thousands of files quite adequately, and my text-editor is better than any browser will ever be able to replicate.

Because of this, I had the inspiration for the core idea behind v0.3—that is, the website should be nothing but a folder of content and the server should just produce the site out of ‘thin air’. The content and the server-code should be 100% separate, so that the whole publishing system could be swapped out with something else, and not a line of the content would have to be changed. I think I have mostly achieved that, given the limitations of Apache and PHP that I constantly ran into.

The web-root of this website has a folder for each content-type, and each article in the site is a ReMarkable text file.

(For size, the folders containing the article images and other resources are not shown here, but basically for each article like “/blog/welcome” there can exist a folder of the same name “/blog/welcome/” to hold images for the article.)

That really is this website that you’re looking at. The magic is three hidden objects that handle all server-side functionality. There’s a hidden folder “/.system” which contains the PHP code and site design (HTML templates, CSS &c.).

The .htaccess file maps URLs to the right file / action. When you view an article, the .htaccess file checks the .cache folder for a cached copy of the HTML and if there, will serve that. This keeps things snappy and static. The cache files are already gzipped, ready to go. If the cache file does not exist for that page, article.php is called to produce the HTML and save it to the cache, simples.

BTW, are you surprised that you can view the .htaccess file and PHP files, live, on this site? Open source should mean “Open > Source”, there’s no difference between the code running on my server and a zip file you could download, so why hide something you are allowed to read anyway?

Half Baked

I call this system ‘Thin Air’ and I hope to have some kind of re-usable distribution of it available for people to make their own sites with sometime in the future. You can already download the code for this site and re-purpose it how you please, but it could do with being more readily accessible in an easy download with full documentation.

At the moment this system is only half complete. I didn’t want to hold back the front-end benefits with the redesign just because of the back-end. I’m getting this site out to you early and will continue to polish and finalise all aspects of it over time.

The site is still missing the ability to edit files online, but I have been working on that:

It’s a very simple system that’s just a text box that uses AJAX to fetch the ReMarkable output from the server to give you a preview.

Hotlinking

I’ve never had a particularly major problem with hotlinking, but I’ve never done a particularly well designed job of blocking it. This time around, I decided to do a better job and make something almost likeable.

The hotlinker takes an image being hotlinked, and runs a few filters on it so that it comes out like this:

The mod_rewrite is supposed to serve the original images to Google, Yahoo, Bloglines and Fever installs (if at //fever.* or //*/fever/) but if you’re getting the grey images instead of normal in your RSS reader of choice, then please contact me so I can add it to the allowed list.

Why?

The question is usually “how?”. People wish to know how I made this site. I couldn’t really tell you specifically, read the code. I’ve tried to describe the unspecific process before, but really it’s the principles that matter. It’s simple: if you care about your site, your code, your design—it will be good, to you and that’s all that matters when it comes to a personal site.

This website continues sticking to its principles in that it is here to please me, and not anybody else. This website is uncompromising, unflinching and undeviating from my personal ideals of design and code—that is, that code is art. Here is some advice I can give about design & web-development:

Don’t look at ‘CSS gallery’ sites, stay well clear of them

Don’t ever let a social group’s idea of what is right or best sway your own internal compass as to what you define as quality. These so called inspiration / CSS galleries are nothing but Photoshop bukkake. The actual HTML and CSS is never the focus of these sites—the majority are usually awful sliced designs with even worse CSS produced by Dreamweaver. If any of these sites were about the actual quality of the code and design (rather than purely how many pixels one can cram in), then my site would be in the top ten in every one.

These sites just make you feel inadequate and less of a designer, just because you can’t master Photoshop. Photoshop is completely irrelevant when it comes to proper web-development. Your tools are HTML & CSS, not some over-priced, crappy piece of Adobe software.

Design is how well thought-out something is, not how many layers in your PSD you have. Armed with nothing but free software, even on the most basic computer, you can single-handily invent the next greatest website, rivalling the biggest corporations with highly paid developers.

Never forget that—with just Notepad, you can take on the world.

Kroc Camen

Absorb design, don’t take other people’s word for it

Just absorb good design ideas from the sites you come across. Don’t write it down, don’t bookmark it. Take someone else’s idea as the input to your design process, and output something new. Evaluate design ideas for yourself, do not take it as given. The truly good ideas will float to the top, the mediocre and bad ideas will sink and be forgotten. Don’t needlessly clutch on to mediocre and bad ideas by writing them down or bookmarking them.

Always strive for better

Purer, cleaner, simpler, more elegant. Don’t accept anything anybody else does as good enough. You are the one who defines what is good enough for you. I rarely—if ever—use third party code, because I always end up designing something much, much better. Accept defeat only when you can master something and you don’t care enough to do it yourself (e.g. I have no desire to fight with IE’s bad JavaScript, so I use Prototype). Keep your eye open for ways to dump reliance upon third-party code when the future arrives.

Fail

Fail constantly. Fail every day. Fail in everything you do. If you are not failing, then you are not learning. If you are not failing, you are not designing properly. I’ve been failing at programming and designing all my life, I can barely name anything that I’ve ever actually finished. I have a list of failed projects a mile long. If something doesn’t work out, just do something else—better. One day, one failed project will lay the foundations for something that succeeds.

Don’t use others as the metric by which you measure yourself. Don’t try to be as good as anybody else (including me), be as good as yourself can be. There are better designers and better programmers out there than me, but I don’t care—this is the best damn website I can make. I made every decision, I sweated the details, I cared about every byte as I hand crafted it. Nobody can do that for you. Even if you’ve only just started learning web-development, all you need to ask is “did I really try my best?”.

I’m not saying you should be arrogant and completely unopened to feedback, no. Rather, that you are not a slave to other people’s suggestions. Love what you do, and it will suffice.

Web-design is a lot like high-jumping. You set the bar how high you want to jump. You won’t always clear it, but you will continue to work at it until you do, and then you can move it up a notch.

With that, I bid you adieu.