Camen Design Forum

A design

append delete JJ

I know I post a lot of snippets of the different workings of my website here and there, but I just wanted to share a new design with you guys. (I already feel guilty creating a thread specifically for this, so if you're not interested, I don't blame you for not reading any further.)

I changed my design and aimed to make it more logical and intuitive for users. The CSS is a bit hack-like because I vowed not to change any of my site's markup (no wrapper divs) - this would violate my philosophy that markup and CSS should be almost entirely separate. This made a lot of things really difficult, but I managed. The css uses one transition for opacity, which is why it behaves nicest in google chrome, but at the same time, ff3.6 seems to have the nicest rendering overall. I'm trying to get used to using more transitions because I think they are going to be a big part of the web eventually, not to mention, they look beautiful.

I'm hesitant about using this design right away, as I have only been working on it for less than a week. It feels like it hasn't matured yet, but at the same time I'm eager to put it out there. I'm also almost worried I draw *too* much influence from Kroc's website.

My ultimate goal was to present the content better.

Let me know what you think:

Reply RSS


append delete #1. theraje

Well, I haven't seen your previous design, but the presentation aspect of what you have now is good -- the "extras" are interesting, without being a distraction.

I haven't looked at the code, as that's not my forte'. But, other than that, the presentation is attractive. Nicely done.

append delete #2. Kroc

This is a very fine design. You're comparing it to my site, when you should be proud of something so well presented in a web where the norm is junk design like Engadget and Joystiq. I had to steal my ideas from someone too ;)

The navigation on this design is clear, that's all I can say on it. Good job.

There are some quick things I can spot in the code that I would do differently:

* Why #root? You can just hyperlink to # and the browser will go to the top of the page. That way you can also leave out the HTML element entirely, this still works in IE.

* Why is the JS in the head? This blocks all further downloading. Use the HTML5 shiv for IE, which uses conditional comments so that the JS won't block all the other browsers (and allows printing of HTML5 in IE). Then the placeholder JS code can go to the bottom of the body since it relies on the DOM being ready anyway, it serves no benefit at all being in the header.

* Soft drop-shadow on hyperlinks, but not on any other text? Don't quite understand that.

* The metric / rhythm is uneven in places. The padding above below the article text is oddly shorter than the padding left and right. It feels all cramped up the top with such tight spacing between the header, title and first line.

* The textarea can be resized outside the container. You need to use the resize CSS declaration to limit resizing the textbox to vertical only. You can also set a minimum and maximum height to stop people breaking the textarea. (this forum for example)

* The text under the textarea doesn't fit well with the post button

What you have here is a high quality website that stands above most of the junk on the web. Don't get too lost in the design (you're way ahead of the game) to forget that what matters is good content to read.

append delete #3. JJ

Ah, thanks for the feedback guys,

Kroc, thank you for the criticisms and compliments.

I agree with most everything you said:

* #root was there from my old design, which used html:target to alter the design slightly as an "option" of the design. I could remove it now, but I haven't gotten around to it.

* You're right about the script element. This has always been a dilemma for me. Sometimes I end up favoring the aesthetics of markup over what may be more logical. Conditional comments are just extremely ugly to me. I don't know what I'll end up doing with this. (I've considered not using an html5 shiv at all. This site doesn't look right even in ie8 anyway, however, at the time time, I'm tempted to try CSSPie to see how it looks in IE. Maybe it would make IE worthwhile.)

* What do you mean by the text-shadow on links? I suppose it does make the regular links look a bit too pronounced compared to any other text on the page.

* Yeah, you're right, now that I look at it, the header does feel cramped. Something felt off there, but I couldn't put my finger on it.

* Ah, I was unaware that the resize property could be set to vertical only. I knew the resize property existed, I guess I never read up on it that much because I figured there wasn't much to it, hehe.

* The text under the textarea, yeah, another flaw that was created from the markup that was carried over from my older design, planning to fix this.

I've found I'm definitely not a casual "blogger" (ah, I hate that term). I have several ideas written down for topics I want to speak on. More content is to come, but of course, the content isn't useful unless delivered properly. ;)

Thanks for taking the time to look at it. I really appreciate it. I'm going to be changing things around the next few days probably. Including fixing the things above, I'll probably be messing with the color scheme, backgrounds, etc. This taught me a lesson, to not use a design after working on it for only 2 days, hehe.

append delete #4. Wannes

I find the site much clearer than the previous version, it feels lighter, less cluttered. The design is very nice, the artwork complements it without being to much. It took me a while to discover that the +-sign are actually links, but it was a very nice discovery :) Very nicely done!

I don't believe the header is cramped, but it's not in comparison with the footer, the footer feels heavy to me. And is it a bad thing to be influenced by Kroc's design? You can also consider it to be a tribute :p

append delete #5. Johann

It would be just about perfect if only the previous/next article arrows would give some visual feedback (or cease being links) when there is no previous/next article? Just trying real hard to find something to improve hehe :)

append delete #6. JJ

"I don't believe the header is cramped, but it's not in comparison with the footer, the footer feels heavy to me."

Kroc and I were talking about the header of the article specifically, but the header may not seem as cramped now because I made some changes a little while ago. I do agree with you about the footer. Something feels off about it. I think I could do better, don't have an idea yet though.

"It would be just about perfect if only the previous/next article arrows would give some visual feedback (or cease being links) when there is no previous/next article"

Yeah, but they look pretty! :(

The empty links are technically semantic html5. A link without a @href specifies a location where a link may have otherwise been placed.

I might remove them or add some functionality to them. They show up because they're leftover markup from my old design. My older design literally didn't work if those links didn't exist - So I admit, I added useless markup just for the sake of design. I am embarrassed, hehe.

Thank you guys. :)

append delete #7. Johann

well I wouldn't remove them, they DO look nice :D just a visual indicator (no hover effect for example) when they don't lead anywhere, so you know you reached one end of the article queue (so to speak).

I just looked at the page again and noticed the title changes to "current article" instead of "previous/next article"... can you turn the arrow into a blob in that instance, or something like that?

append delete #8. JJ

Good ideas, I'm still thinking of a way to do that. The arrows are added by CSS and replace the regular link text. I want to keep the regular link text however, because it is more accessible than just an arrow.

I suppose I could do something like:

footer > a:empty:hover { border-color: #fff; }
footer a:empty:before { content: "-"; }
footer > a[title="Current Article"]:before { content: "#"; }

append delete #9. Johann

that looks sweet!

append delete #10. Johann

Okay, so I had to look for something else to criticize.. and that would be implementing conditional GET, that is, responding with "304 not modified" when the user agent is requesting something they have cached.

(unless you of course you explicitly don't want that, to track stats etc.)

I know this isn't strictly about design, but the design is more or less perfect to me, so hey, just a random idea :)


(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn