SITE REVIEW: CSS Layout Tutorials! (Finally)

Although i'm guessing those grolsh adds are just in the uk... oh well. The site is not ready yet but I have decided to stop faffing and upload the damn thing properly, which will probably encourage me to fix the broken bits and finish off the bits that need finishing.

Be as harsh as you like (we all know I deserve that), but also try to be fair (I <i>hope</i> I deserve that lol).

So with out further ado, I present my <a href="http://www.caffeinefuelled.net/" target="_blank">CSS Layout tutorials</a>


There are a whole bunch of known issues at the mo, the main ones are:
<ol><li>I have not done enough rigourous testing on different browsers</li><li>in "scribble" the nav example images mess with the "tutorials" links (moz) and I didn't format the forms because I was lazy</li><li>Some of the explanatory images are missing (they are replaced with "insert image" text </li><li>in NSN6 my javascript pop up links script doesn't pop up the links, and instead it completely disables them sorting this out ASAP lol</li></ol>

Oh and the rants link will 404 on you, so just don't press it ok? I forgot to sort it before I uploaded

There's loads more things that need sorting and the purple style is hideous, please forgive me lol. Let me know of any bugs you find, especially those of you using macs.

Thank you, now I'm off to bed


//edit for those of you wondering if I really do practice what I preach in terms of filesize, check out <a href="http://www.caffeinefuelled.net/layouts/sample.php" target="_blank">This blank page</a>. My layout with all the linkage is < 5k of html

Woohoo...finally made the plunge, eh? Well, I'll review it in time, but like you I'm dead tired and don't want to just make a cursory review. I'll get back to it in a day or two when I can think again.

Not sure what this is cause I'm confused, but I do beleive you can get a css tutorial (full) just by searching google for "CSS Tutorial Full"

That is true bluedragon. But doing searches like that find very few <b>thorough</b> CSS layout tutorials. If you want basic newbie CSS, there are a thousand and one sites offering that. This is why I'm assuming users have already have a working knowledge of syntax, selectors and basic properties. I point people to w3schools for that, which of course you know, having looked past the first page.

There are other sites like max design and a list apart, that have some really good tutorials, but ALA are bits and pieces and very few on actual layout techniques (it's mostly a step on from there). Max design also has some layout tutorials but not a great deal. Mine follow a linear progression, from layout newbie to (coming soon) expert. Each tutorial building on the previous.

The truth is, how many websites have subject matter that is completely unique to themselves? Honestly. I don't claim that my site will be filled with new and amazing techniques. Although I actually do have a feature that is unique - I have never seen the same thing implimented on any other site. With the number of sites out there, releasing something new is damn nigh impossible.

And the site's primary purpose is not to teach others, it just happens to be a beneficially side effect if it does.

But anyway, thank you for your thorough review. I'll take all your points into consideration during development.

Yeah I like your site and I just realized that you could edit CSS layouts when you are adding new themes to your phpbb board but having a tutorial is always a great thing.

A few odds and ends...I love the style sheet selector. Very nice! Like always, I didn't read enough first and started clicking links. I was a bit confused when the page turned to scribble. Finally when I hit Clean Blue 2 it kicked in (That's my favorite style, btw -- the scribble is cool, but the light greys are too small and light for me to read easily.) I actually liked the purple one in concept, but it's just way too much purple (also hard to read).

I think you've got a great concept. Already there's a lot of worthy content to read and learn from. That's what I would expect from a site like you've designed.

Technically I haven't discovered any glitches with it yet. It seems very solid.

All in all, nice work! It's bookmarked. Can't wait to see what else you'll do in time.

thanks atno, I'm not 100% happy with the clean blue two myself, I felt I had some colour-matching issues on that one.

There is certainly too much purple on the purple one. I think I will be redoing it a slightly less garish colour. I'm definately going to be keeping the concept though - I am very keen on trying to create an aesthetically pleasing design using no images or tables. Just to prove it can be done and to defy the excepted norms of site-building.

Alright!!! Ive been waiting for this one to come up !! But, considering how nice you were to me on your review of my current project, I guess Ill have to do the same . LOL It looks to me like you know the majority of what you need to work on ATM. My peronal thoughts though are:

1. I think the style selector is too prominent. Not that thats a bad thing but when I go over to nav, I expect to start at the top, and Instead find myself wondering "what do these buttons do?" then Im all distracted.

2.
Might want to clean up your grammer a bit there Also you misspelled
"often" and spelled "ofen" instead.

3. The Tutorials are well thought out and thorugh It appears. SO Excellent Job on those, your site goes in my bookmarks for reference

4. The Imageless-purple. Good Lord rtm what were you thinking?

5. Not so sure unstyled is really necessary. It doesnt do the rest of your work justice and looks rather lazy. Depending on who visits your site you may not want them thinking that.

6. Both Clean Blue layouts look good.

7. The Scribble is....interesting. LOL. It looks good no doubt about that, but I dont know, it reminds me of my little brothers artwork. So im kinda undecided on that. It looks good, but childish i guess is what Im saying. I actually do like the way you set up the navigation on it though. Tutorials easily accesed on the left, Everything else displayed neatly on the side for when Im done learning. So as far as navigation, its my favorite layout.

8. LOL i like your 404 page. Its funny. And, just so you know, I got it clicking the "this page" link in the CSS float tutorial.

ALrighty!!! I think that does it for now After having already PM'ed you with some other stuff, I think have done a rather thorough job Great worj with CSS as usual. I look forward to having the finished project at my disposal.

Actually, I like the "unstyled" -- in fact, it's a perfect "printer friendly" version. That's what I would ust it for, specifically.

ATNO, try doing a print preview from <b>any style</b>


Well I'm not sure if that is a bad or a good thing. When you first visit my site, you may get a little distracted, but it will generate interest and the site WILL stick in your mind - which can only be a good thing


Ho hum. I will be sorting that out soon.... every page needs proof reading. I'm sure that sentence had "the site has" in it, then I altered it. or something. My spelling and grammar is awful these days.


"whats a colour that has many different hues that go well together. Blue. No I already have two blue styles, and everyone uses blue. Oh purple would be a good idea......."


Well it's not lazy as such, it is a demonstration of just how much work the CSS does, and to show how simple the core of the site is. But you are right, I think I will move the link out of the main nav and make it an in-page link on a couple of pages.


Thats not a very nice thing to say about ratt's art, most of it is very good
Very true, but due my distinct lack of visual creativity, the styles I am producing for this site will be either simple (clean ones) or gimmicky (imageless and scribble). Stuff that is easy to produce (graphically), or that would never be normally used on a proper site. The nav works best on scribble because I just have too many links for a 2 column layout.



Hmm, I should put a disclaimer on that float explaining that is not finished yet lol. Or finish it maybe

Thanks for the feedback shark

Very nice I like the multiple layouts, they are all very nice looking, I espically like "scribble" and I like the content....I will be using this to learn CSS layouts, I've been using tables for the longest time

Hmm...I wish I could find a hundred flaws on your site and make good on them as you tried with me. But as lucky as you are, technically, I could not find a flaw.

The fact that all pages are less than 30kb, is a huge plus.


As has been mentioned already, the style selector is kool, but you are putting too much importance on it. After all, the technique has little practical use in most contexts. Strangely enough, I quite liked the imageless purple. Though the black text is not that legible against the background. Different. This is one thing I notice about all-CSS sites. They all look almost the same. In an attempt to seperate content from design, the design part perhaps, finds little attention. Or is it the limitation of CSS that bars the use of impressive graphics or exceptional designs? I also think, there is yet a lack of people who has tried to combine the two effectively. For content based sites this is extremely necessary though.

Could not like the scribble theme. Too childish (pardon the expression). In the Clean Blue 1 and 2, the top images look over optimized. Perhaps, you could spare them 2/3 more kbs. Can't say they are very impressive either. How about using the site name as copyright, instead of a person?

Nothing to criticize about content, except for, very useful. I wil be checking out the site often. I would also appreciate if you filled up the link section with some good references and inspirational CSS sites that have exceptional designs(personal request).

Useful, practical, to the point.

Ha, you say no technical flaws, but you should have clicked more links! The front page didn't validate as xhtml y'all missed that one didn't ya? Fixed it now though. Anyway the aesthetic flaws are still flaws nonetheless. I pick at you for code, you pick at me for graphics, it's all fair


The selector is a trivialisation of an important concept. The concept being the ease with which site-wide alterations and redesigns can be implemented. How many websites never change? To have to start from scratch just to change the images or sizings is crazy - but that is what people do. However, the selector is still very much a gimmick.


The limitations on CSS are mostly imaginary. Seriously. If you can put layout graphics in a table, I can put the same graphics in divs and style them. It's just getting the graphics in the first place, and this is far far from my field of expertise. I can do better than I have, but I can't justify the time I need to produce the best graphics I can for all of the different styles. But you are right when you say not enough people have tried.


Yeah the top images do have issues, especially where the jpg meets the png (or gif - i forget which) and the outline doesn't match up Same is true where the title bar meet the monkey. These do need sorting out and I had actually forgotten about this. I think it is where I have used different jpeg optimisation for different elements, then didn't check carefully enough.

I'm still not sure about the copyright, I did wonder about it from the start, but as all the way through the content I have refered to "I" and "me" it would seem a little strange for me to pretend that it is an organisation.

Thank you for your input, Quantum. I continue to work on my graphical skills, but it is a very slow and painful process


BTW References are coming in that dead link called "CSS resourses" - I'm just deciding how to categorise it and what to put in ATM. There are a lot of sites I have glean info from, and I want to give them all credit.

Hello there.

I have only skimmed the posts so please forgive me if what i say has already been said.

As other people have said, i really like the style selector. Its a nice touch and is good to see that they all look very different from one and other.

Your pages load mega fast for me. but this could be because there are not a lot of graphics. This is proberly what you were trying to acheive but i feel that a little bit more eye candy would make the site more interesting.

Your tutorials seem to be written very detailed. I dont know a thing about CSS but from how you explained i can see i would be able to understand them.

The purple layout with the black text gives me a headache. I love the color as it really wakes me up but how about adding more white to the design?

Overall the site is good and does as it should. A lot of writing and you do it very well.

Sorry for such a short review after all the long and detailed ones that you haven given to me and many others.

Thanks

Tone

Okay well honestly this has gotta be one of the nicest sites I have seen released in a long time.

I am so sick and tired of websites flooded with so much information that you can't make heads or tails of the pages, gimmicky javascripts that take years to load and are extremely slow to respond!

I think the style selector is great (especially considering the fact that it is a CSS tutorial site). What better way to learn than to view it in action!

My fav is scribble. Love the childish look (am an animator as well so yeah I think it is cool)

Okay so my final thoughts
1.Site is clean and easy to navigate
2.Extremely accessible
3.Fast loading on our pathetic 56k lines
4.No flashy stuff putting you off the topic at hand

rating outta ten, well I'll give you an 8 (which is extremely high considering the standards I set)

can't wait for more tutorials.