SITE REVIEW: CSS Layout Tutorials! (Finally)

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Quote:
schop! Theis weibsite eisn't reaidy yeit!

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 :roll:</li><li>in NSN6 my javascript pop up links script doesn't pop up the links, and instead it completely disables them :roll: 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 :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

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"
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

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.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Alright!!! Ive been waiting for this one to come up :twisted:!! But, considering how nice you were to me on your review of my current project, I guess Ill have to do the same :P. 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.
Quote:
At the moment the I have a few styles up and running.

Might want to clean up your grammer a bit there :D 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 :D

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. :D 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 :D After having already PM'ed you with some other stuff, I think have done a rather thorough job :lol: Great worj with CSS as usual. I look forward to having the finished project at my disposal. :D
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Actually, I like the "unstyled" -- in fact, it's a perfect "printer friendly" version. That's what I would ust it for, specifically.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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

SharkShark wrote:
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.

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 :D

Quote:
2.
Quote:
At the moment the I have a few styles up and running.

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

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.

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

"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......."

Quote:
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.

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.

Quote:
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. :D 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.

Thats not a very nice thing to say about ratt's art, most of it is very good :wink:
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.

Quote:
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.


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

Thanks for the feedback shark :D
  • Bobbo171
  • Graduate
  • Graduate
  • Bobbo171
  • Posts: 174

Post 3+ Months Ago

Very nice :wink: 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
  • quantumcloud
  • Proficient
  • Proficient
  • User avatar
  • Posts: 456
  • Loc: Dhaka, Bangladesh

Post 3+ Months Ago

Hmm...I wish I could find a hundred flaws on your site and make good on them as you tried with me. :wink: 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. :)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ha, you say no technical flaws, but you should have clicked more links! The front page didn't validate as xhtml :oops: 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 :wink:

quantumcloud wrote:
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.

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.

Quote:
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.

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.

Quote:
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?

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 :oops: 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 :lol:


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.
  • Tone2k11
  • Proficient
  • Proficient
  • Tone2k11
  • Posts: 493
  • Loc: Southampton - UK

Post 3+ Months Ago

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
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Quote:
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?

The black text is because I haven't really got round to finishing it. I think I adding more white is a good idea and I think also adding more contrast in general will help, maybe get more darker shades in there as well. I don't know if I will scrap the purple now, I think it is still worth persevering with.

Quote:
My fav is scribble. Love the childish look (am an animator as well so yeah I think it is cool)
I am glad that you and Bobbo171 like the scribble. It's my fav simply because it was fun to put together - the underlines and getting the stretchable borders to match up.

There are more styles planned and drawn up, one of them is already half-built. Although I think I will be leaving it for now until I have got the current styles and some more of the content sorted.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

RTM-great job. I have a few comments.

You mentioned in another post that your graphic design was not very strong-I have to say that your first CSS that loads would give someone NO indication of that. It was very clean and well laid out. The only thing I would do is lighten the image that has text over it near the top. If you are using PS, the best way to do it is adjust hue/saturation and play with the lightness and saturation. (the more you lighten, increase saturation) All in all, outstanding job. I didn't look at your code. The purple one was really bad but I know you said that you were not done with it.

I looked through the content briefly and from someone more on the design side than the coding side it seems easy to follow and has info that a lot of other tutorials leave out (assuming users already know it probably). So, on behalf of designers-thanks for putting this out there. :D
  • Nucleo
  • SausagePorkPie
  • Mastermind
  • User avatar
  • Posts: 2297
  • Loc: UK - England

Post 3+ Months Ago

Well, Well, Well RTM!
nice to see you have your own site now!
oky doky, because I am not a master at html lol, I will just review what I can ;)

The image of the monkey....I just dont see how it fits it, I think it is supposed to look like a sketch, but i think it would look a whole lot better as a vectored image... but thats just my suggestion :?

The style selector is awsome, I really like that feature, I quiet like scribble... I think it is because the monkey fits in with the grey some more....oh well lol.

The mouse over for the scribble stlye is nice, but on the link "CSS Full-Length Columns" you only see the scribble on the bottom part of the link. Supposed to be like that?....never mind me.. :wink:

maybe alter the way you show the information and split over multiple pages?...just an option, because you have certain stages and I think it would look nice with each stage, or block of information on a seperate page.
(probably just me lol)

If I come across more, I will add more
This page will definately stay in my mind, as you have hinted many times that tables are bad lol, I am seriously gonna take a look at CSS, and I am sure your site will help alot.
  • quantumcloud
  • Proficient
  • Proficient
  • User avatar
  • Posts: 456
  • Loc: Dhaka, Bangladesh

Post 3+ Months Ago

Quote:
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?


Ah how I missed such an opportunity!

Quote:
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.


I would think it's quite okay. You own the site after all. And it also looks more professional. Besides, I think ALA uses a lot of first person phrases in the articles too.
  • webinv
  • Graduate
  • Graduate
  • webinv
  • Posts: 110

Post 3+ Months Ago

Greetings,

Thank you for the help with my problems recently.

-It's be nice if you added a site search engine.

-The style selector is original. Very nice.

This is going to be a site I recommend to my visitors. Nice job.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

jlknauff wrote:
You mentioned in another post that your graphic design was not very strong-I have to say that your first CSS that loads would give someone NO indication of that. It was very clean and well laid out. The only thing I would do is lighten the image that has text over it near the top.

Ah, I can design a clean simple layout with a usable UI, but my <b>artistic</b> design skills are lacking. On this board people tend to use the word desinger to mean "graphic designer". I think I agree with the top image, it does seem a little bold now you mention it.

Nucleo,
I always work with neat, clean vectors, and one night I decided to mess around with sketchy stuff. I came up with the monkey, an elephant and the scribble style at the same time. The monkey was never supposed to be a logo, it was added on as a way of tying the different styles together - I wanted something constant between the lot of them. I guess that is why it does not fit :?
Quote:
The mouse over for the scribble stlye is nice, but on the link "CSS Full-Length Columns" you only see the scribble on the bottom part of the link. Supposed to be like that?....never mind me..
*shakes fist at IE users - yeah I know about that problem lol. I will probably change it back to just "Full length columns" - i think that fits.

The style selctor could be altered so only site admin has control of it. Might be handy for webmasters who can't make up their minds about site aesthetics ;)

Webinv,
A site search would be great when I get the site running properly, but it's a static site! I could build a custom one with reg expr. to scan the static pages, but I doubt it would be very efficient.

Thanks for hte input guys, alterations will be made some time but not just now as I am too busy and tired :(

Post Information

  • Total Posts in this topic: 21 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 5 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.