- New Design
- New Navigation
- Focus on the Content
- Thin Air
- Half Baked
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
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
The main things I changed are:
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:
#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
Again, if you’re having problems with the site on the iPhone please contact
me with suggestions.
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
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.
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
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.
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
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,
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,
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?
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.
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.
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.
- 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
Prototype). Keep your eye open for ways to dump
reliance upon third-party code when the future arrives.
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
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.