Black is the new black

Inspired by recent Apple interface designs such as Aperture, Safari’s Web Inspector and the MacBookPro website, I’ve re-designed this site. I’ve also re-coded a bit of the backend so it’s a lot easier to maintain. On the front-end there’s some DOM scripting and Ajax to enhance the archives, the search feature and the individual post pages. I’ve got some problems to iron out with IE6 but everything should be hunky dory on modern well-behaved browsers.

As always, your feedback is welcome!

Posted 4 years, 1 month ago

Very nice! I love how clean it is.

Feaverish · www · 4 years, 1 month ago

I like. More minimalist than most of the dark layouts but in a good way.

Couple of pointers as always, feel free to ignore as you see fit!

The central column collapses indefinately, which causes problems with the width of the add comment. May some min-width action for those of us with proper broswers?

Gareth Rushgrove · www · 4 years, 1 month ago

Hey, it’s like, totally frictionless.

Matt · www · 4 years, 1 month ago

Very clean, love the up and down arrows for browsing through the archives over there on the right.

In the comments box, though, it’s hard to see the cursor which makes editing text quite hard (on Safari).

Duncan Gough · www · 4 years, 1 month ago

I liked it with the lights on, and I like it even more now that I’ve turned them off to get some groovy contrast going on.

Very nice work, although you’ve got some scrollbars showing in IE which is annoying in Fullscreen mode since I want it completely black g'dammit!

Steven Woods · www · 4 years, 1 month ago

Oh P.S.

After submitting comments, it says:
"Thanks for commmenting!"

Too many M’s!

Steven Woods · www · 4 years, 1 month ago

Gareth - cheers for the feedback. I’ll look into this. It’s the first time I’ve really done anything with position:absolute. I need to find out how to stop the nav overlapping the main content when the page is resized. I’ve always used floats before, so you may need to bear with me a little!

Duncan - excellent point. I’ve changed the :focus CSS properties on the form fields so it’s easier to edit text.

Steven - well spotted. Typo now corrected! Also, hopefully get IE sorted soon when I get back to work (where the PC’s are!).

Phil · www · 4 years, 1 month ago

Gorgeous.

Garrett Murray · www · 4 years, 1 month ago

Coooool.

McSkiver · www · 4 years, 1 month ago

Hi Phil!

"I need to find out how to stop the nav overlapping the main content when the page is resized."

I’m very bussy with studying. I’ll give you a more detailed answer and solution to this problem middle of next week.

Now, a note: Separate your three main-divs from each other: Logo, Navigation and Main:

Logo: position:absolute; left: 0; top: 0
Navi: same but left->right
Main-Div: position:absolute; left: 142px; right: 184px

Your Main-Div should contain oldposts, content and whatever you want. Margin right of oldposts to the border of Main-Div and not to the window-border like it’s now.

Talk to you next week.

Bye, Gustav

If you want to write a mail, try this: mr.g.miller and the mail-service from google called gmail.com ;)

Gustav · 4 years, 1 month ago

White on black is doing it for me.

John · www · 4 years, 1 month ago

Hi Gustav, thanks for the pointers. Rather than setting margins on the centre column to allow space either side for the logo and nav I’ve used position:absolute as you suggested. Seems to work better, but I’ve still got some problems when the comments collapse indefinitely. Hmm...

Phil · www · 4 years, 1 month ago

Commenting on this post has been disabled.

My name is Phil Lindsay, a web guy from Scotland, now living in Newcastle upon Tyne in England. I also run a web design company called Presence. You can email me at phil@xlab.co.uk, read more ramblings on my Twitter stream and view my photos on Flickr. You can grab the RSS feed for this weblog here.