Camen Design Forum

camendesign.4

append delete Kroc

These are the plans for the next version of Camen Design.

I was thinking about publishing this on the main site, but decided against that as I have done similarly in the past for previous versions and then failed to deliver everything promised, and in a reasonable time.

This is my personal website so there is no deadline to meet and I do not make changes until compelled to do so, either by need or inspiration. Thus is usually takes a year or more before I tire of the current design and want to make something new.

I thought the forums would be a better place to share these ideas to get your feedback on the current site and any input you have for a new version.

Here are the key issues I'm planning to tackle:


:: Navigation

In the first iteration of the site there was simply not enough content to warrant the complexity of having comprehensive navigation and I was cutting as much cruft as possible given that navigation systems in most blogs are benign and pointless. (_what_ exactly does a calendar tell you? Blindly clicking dates is not navigation)

Now the site has grown to a formidable size and it's time to revamp the navigation. There's a few things to address:

* Clearer Next / Prev buttons: These were supposed to be graphical, but I never got around to jazzing them up (I do have a mockup design of camendesign.3 that I should upload). A lot of people really don't notice the article buttons to page through articles. I'll make sure to make these a clear part of a new design

* Index (archive) pages: To begin with I didn't need a long list of article links as I felt that there wasn't enough content and that this put extra steps between users and the content. Now, it's just making it harder to quickly locate an article. I'm aiming to add index pages for each category that list all the articles in that category so that you can quickly scan the list to find what you are looking for. One aspect of this that I am unsure of is that some sections and articles don't have titles, such as quote and photo so don't work as well in a list. (will probably use thumbnails for photos)


:: CSS complexity
camendesign.3 has grown a lot more than expected. I added the source pretty-printer, directory listing pretty-printer, HTML5 figures, iPad support and many more extra bits piled on top of the already complex multi-layered support for printing, Firefox 3 / Camino 2 (lo-fi skin) and iPhone.

Firefox 3 was still very common when I released camendesign.3 but that is no longer the case, so there's no longer the need to provide the lo-fi skin in the CSS and all the extra work and complexity that entails.

What's also happened in the meantime is new browser versions that have native HTML5 support that doesn't require extra hacks as well as greatly increased CSS3 features.

The minimum browser list for camendesign.4 (when it's done) will look like:

* Firefox 4
* Safari 5
* Chrome latest
* Opera 11
* IE9
* iOS 4

and I will also be dropping as many vendor prefixes from the CSS3 as possible as Firefox 4 and Safari now support box-shadow, border-radius and some others without vendor prefixes. This will diminish the look on older browsers, but then Camen Design is all about targeting the standards and waiting for browsers to catch up (which they are doing).

Also, in what might come as a surprise to some, Internet Explorer will be fully supported. It's as good a HTML5 engine as the other browsers and Microsoft are making an effort to follow the standards so support for my site should come "for free".

I want to greatly reduce the CSS complexity, avoid heavy layering of rules, and reduce the amount of browser-specific code.

---

It was originally my intention to release the forums as part of camendesign.4, and perhaps even share the code between the two, but I'm glad I decided to do the forums separately and design them for-purpose so that I could get them out to you so soon. Camendesign.4 itself my take several months to finish depending on (mainly) my motivation and what other work I have to finish. I have a lot of work on my plate already and the current site is ticking by fine, considering that it's already leagues ahead of most sites. I think I've earnt the right to relax a little :P

Anyway, please feel free to chip in with any feedback you have on the current site and any ideas I should consider for the next version.

Kind regards,
Kroc Camen.

Reply RSS

Replies

append delete #1. JJ

Hey Kroc, exciting news.

I agree that there is definitely a need for an archives/index page. I kind of got sick of looking at google.com/…

(Now that I'm looking at it, I just realized you might want to add <meta name="robots" content="noindex" /> to the delete.php page. Google is archiving URLs like forum.camendesign.com/… being that the delete button is visible to all. Or you could check the user agent string to see if the user agent is the google archiver and return a 403 instead.)

But yeah, no formal list of articles was what originally confused me when I first visited your webite. ;p I suppose there is the RSS feed for each category e.g: camendesign.com/… but there's no visible link to the rss feeds.

As far as quotes go not working well in a list, you could just use the URI slug. It looks fine in the RSS feed IMO. Photos would do well with thumbnails though.

Personally, I'm like the way the next and previous links look, but I suppose I haven't seen the images you have planned.

Removing the vendor prefixes... so badass. I like the idea of reducing the amount of browser specific code. Personally, I try to keep my CSS file around 10-12kb and avoid using css hacks. But even I don't think I would have yet the balls to get rid of vendor prefixes. ;p

Are you planning any other major design changes otherwise?

append delete #2. Kroc

Damn, well spotted JJ! Thanks once again. I’ve pushed an update to add rel="noindex nofollow" to the delete links, and the same meta to the delete page.

---

This is the early mockup I made for camendesign.3 camendesign.com/… but I decided on not using an image editor to design the site and just design straight into HTML/CSS which is why the final site looks so different.

I design as I go really, with only the navigation thought out first so I find how I want the site to look as I go.

I also forgot to say that I will also make use of SVG where possible too (like the logo) since that’s now better supported in browsers (was unusable in Firefox and Safari was buggy).

append delete #3. JJ

Ah, completely forgot about the noindex link relation, I guess that's a noob moment for me.

That's a good idea. I've always wanted to use SVG for a logo as it solves the problem of logos becoming pixelated when the page is zoomed.

Is there going to be a complete redesign of the basic site layout do you think?

append delete #4. Kroc

I have barely started coding, just wait and see :P

append delete #5. Nicolai

DO like it! :)

append delete #6. Raj

Hi Kroc, this could be the wrong section as u state u will be only supporting IE9 in the new version. After implementing the use of ur remarkable script I had problems that the CSS was broken in IE8 and below because it would not understand the html 5 tags and hence not apply the child selector css - I noticed a similar behaviour or unstyled view on ur page and thought I might share the solution to the problem:

<!-- concept taken from: webmonkey.com/… -->

<!--[if lte IE 8]>

<script>

document.createElement('header');

document.createElement('nav');

document.createElement('section');

document.createElement('article');

document.createElement('aside');

document.createElement('footer');

</script>

<![endif]-->


I hate creating support for browsers I do not use but still many people use at least IE8 ;)

Greetings
Raj

append delete #7. Kroc

Hello Raj. The HTML5 shim is well known to add support for anonymous elements to IE<9 (see: code.google.com/…) I do not use this on my own website because I am not interested in uglifying my code for the sake of an out of date browser. That's just extra needless maintenance.

append delete #8. Kroc

I should add this quote from the Tao of Programming: canonical.org/…

~~~
There once was a master programmer who wrote unstructured programs. A novice programmer, seeking to imitate him, also began to write unstructured programs. When the novice asked the master to evaluate his progress, the master criticized him for writing unstructured programs, saying, ``What is appropriate for the master is not appropriate for the novice. You must understand the Tao before transcending structure.''
~~~

I do not recommend to anyone to do what I do because that is what I do; I choose to not support IE because I have mastered it and know its place. When you have mastered layout in IE6 then you will have the CSS knowledge to excel in all other browsers. Ignoring IE because it’s fashionable is the path to failure.

#9. Kroc

This post was deleted by its owner

append delete #10. Raj

Hehe,
I did not even know there was a whole tool/established script for this. In the beginning I thought my CSS was wrong or I made the child selector wrong and the other browsers just were good at ignoring my **** up ;) but IE8 in comp. mode and IE7 mode both did not work so I tried finding the problem - sites stating proper CSS 2.1 support for IE8 (or at leas > support) almost drove me mad - finding out that it is because it does not know the tags seems really silly.^^

Reply

(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