08-18-2004, 10:49 PM
Edit: Here's the link, without the backstory: www.offtone.com
Alright, so all this talk of "CSS: good" and "Tables: *gasp* he said the t-word" flooding through dev forums these days convinced me to start learning and playing with this stuff. That, combined with the fact that I've grown to hate my current site (www.aaron-wright.com), inspired me to do a CSS redesign and rebuild.
I started with http://new.aaron-wright.com/, and got a fair ways into it before I shouted a few obscenities at my monitor, took a week or two off, wiped my eyes, and then re-opened Photoshop.
Now I'm here to post the link (which perhaps you've probably already clicked in my signature) for you all to judge and offer suggestions on.
Anyone who says they prefer the look of my first attempt may rest assured that I will be making a skin for offtone.com using the same idea.
So I guess you'll mostly be critiquing my default skin, but the source is still there for suggestions too. I'll post again when I've finished the site and have more skins.
08-19-2004, 04:05 PM
08-19-2004, 04:17 PM
Well you're right, tables for layout are bad. Using CSS-P you seperate the presentational logic from the actual markup of the site. You can also very easily comply with web standards with CSS.
You new.* site looks nice, and I actually prefair it to your first site. Keep up the good work.
It's good to see more and more people using CSS-P over table (*gasp*)
08-19-2004, 04:18 PM
Looks nice :) But it looks like you've caught div-itis. You don't need that many divs in there :)
eg: <div class="poll_question">Why did the chicken cross the road?</div> could just be <span class="poll_question> or something similar.
Not got time to go through it all, someone else will prolly have time to show you what to change and stuff
08-19-2004, 04:27 PM
You're reviewing the wrong one :P
Guess I should've expected people would just click the first link they saw in the first post rather than read the post itself. Heh.
08-19-2004, 04:29 PM
Oops :o Looks good too :) Sorta got lost in your first post to which site it was, so looked at the new.* one :o
08-19-2004, 06:03 PM
First impression is that I really like the look and feel.
Looking at your code, I'm curious why you're using a php file as your stylesheet.
And I couldn't help but notice the comment in the css about your feelings for IE, so maybe you know your site produces some funky effects in IE6.
The three floater divs on the right side are not moving like they do in Opera or Firefox. They seem to reposition themselves only when mousing over the main navigation.
And the header image is producing a flicker on mouseover.
Looks great in Firefox. Nice touch on the forms with the onmouseover effect and having labels for your inputs.
08-19-2004, 07:55 PM
I was aware that they didn't resize with the window, but I didn't know that mousing-over the navigation fixed it :S That's crazy.
I'm not seeing the flashing on the header onmouseover, though. No idea what would cause that.
08-19-2004, 08:02 PM
I'd suggest re-creating your CSS code from the original CSS code. Also, don't forget to validate your code.
08-19-2004, 08:07 PM
Blimey. It was valid. I copied and pasted the article text from MS Word into my textarea... Apparently MS Word likes to do funny little entity replacements on quotes and such.
Fixed. Markup's valid. Will wait a bit longer and see if someone who's experienced something similar has a solution other than "rewrite the CSS" which I'll do as a last resort.
08-19-2004, 08:09 PM
You use MS Word as an editor for your code?
Well I was only suggesting a re-write so that the code is clean and you know you haven't got little bits in there you don't need, but might be causing your problems.
Sadly, I don't have time to go through your code and check it for you, otherwise I would and give you a complete solution.
Maybe tomorrow I can find the time.
08-20-2004, 03:10 PM
I don't use Word to write my HTML... I use Word to write my articles (better than a textarea :P)
08-20-2004, 03:22 PM
Well if you're going to create BIG articles (5,000 words plus) then I believe it's better to maybe post the first paragraph or two and have the rest either in a PDF file or in a Word file for download. I personally can't stand reading big articles/papers straight off the screen... I like to print them off and read them while I'm in bed or on my break/dinner in work.
That's just me.
08-20-2004, 11:19 PM
I believe it's better to maybe post the first paragraph or two and have the rest either in a PDF file or in a Word file for download. I personally can't stand reading big articles/papers straight off the screen...
Just to stick my oar in, I personally hate it when files are in pdf instead of html. Opening pdf files uses up so many resources. Html files can be printed too.
But that's a good idea, mcrilly, for long articles - to post the first paragraph or two on a page with a link to the rest of the article on a separate page that is suitable for printing (for those who like to read in bed).
running Win2K viewed page in Firefox0.8 at 800x600 and 1024x768
I quite like the look of offtone.com (that is the one you want reviewed??) It's very pleasing - and I'm not usually fond of looking at sites with black backgrounds.
But at the risk of sounding like a broken record, when it is viewed at 1024x768, the side columns are rather large and blank. It would be great if you could make the layout more liquid. It would be a bit of a challenge but maybe you could divide the header image in two and take a portion of the header image that would repeat logically in the center as a background image for screen resolutions that are larger than 800x600.
I see where you are going with the marker on the links to show what page one is on. Maybe you could accentuate it a bit more - possibly have a yellow top margin appear as well as the black bottom margin. (I hope that made sense) It would also be nice if the corners were rounded to reflect the rounded corners elsewhere.
Is something going to go below the "standards" box? That is quite empty as well.
08-21-2004, 01:15 AM
Nothing's going under the "Standards" box. There may be more floaters above it, but there will always be that empty space. I could maybe make the content wrap around the floaters, but I'd much rather leave the content narrow and fixed width because a) It's easier to read narrow columns of text and b) It's easier to design cross-browser in a fixed-width environment :P That's also why the layout isn't fluid. That and I hate fluid layouts to begin with.
Edit: But it takes to font scaling very nicely. I use px for sizes though, but I may or may not change those to pts or ems later...
08-26-2004, 05:55 AM
IE won't scale pixel based fonts. Use ems. Set a base in pixels if you must, but the rest can be set with ems to allow IE to adjust them within its limited extent. The difficulties with ems are highly overrated, if you ask me. They seem to serve me well.
08-26-2004, 06:03 AM
|V|[agnus']IE won't scale pixel based fonts. Use ems. Set a base in pixels if you must, but the rest can be set with ems to allow IE to adjust them within its limited extent. The difficulties with ems are highly overrated, if you ask me. They seem to serve me well.
I'm with you Seth. My standard font setup is to assign font-size:74 - 79%; on the body and then 1em on body text, 1.4 - 2em on headings and 0.9em on things light copyright text. I've never had a problem and it's easy to tweak things so that the text is still legible at IE's smallest text setting.
08-27-2004, 03:25 PM
I like your quote....
"The web has given you so much. Give Back. Get firefox."