January 18, 2004 | View Comments (27) | Category: CSS Vault
Summary: The new CSS Vault groundwork has been laid and you can view the new version 2.0, which is so much better than the old one.
The new work has begun on the CSS Vault. Already the site is leaps and bonds superior to the previous one (at least from an architecture standpoint). I really don't have much to say about it right now, but here is what's been improved.
There are still a lot of kinks that need to be worked out with some pages, but I felt that this was such a huge improvement over the last design that it would be beneficial to get it up. I have no idea why anyone would have even bothered with the old site. The grid view simply works so much better. You can still get the "design book" feel by going to the individual archives (click on the title of the website under the monthly archives, this will be improved).
If this isn't your first time to the vault make sure to refresh every page that has images, because the old screenshots might be cached on your system and this can mess the page up slightly. I have also taken 800x600 screenshots of all the sites and will figure out how to incorporate those later.
Finally, if you can please let everyone know about the new version if you have a website. This took more work than it looks (especially the new screenshots) and I feel this has become a much better resource that everyone can benefit from now. Thank you.
Still more features to come.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/113
Yeah my screen resolution is 1600x1200 and I usually just cropped the images, but since I had to take over 100 screenshots I thought it would be okay to simply just go with the 1600x1200 and reduce it down to 200x150. Besides, you are supposed to go to the sites to actually look at them ;)
The dark background, well it really was just the mood that came to me for some reason. As usual though, the aesthetics could change. I do like your reasoning though behind separating it from Whitespace. I am sure that is what my subconscious was thinking.
Scrivs (http://www.9rules.com/whitespace/)
The descriptions are still there. I just need to implement them accordingly. The site descriptions will go with the individual entries along with possibly comments. The descriptions for the resources will also be readded so no worries there.
Scrivs (http://www.9rules.com/whitespace/)
Hey Scrivs, I like the page layout of your CSSVault. Like you said it's just plain better. The only complaint I have is that it looks pretty dull without color. The only color on the page is in your screenshots of the sites you showcase. Perhaps try utilizing the red you've used in White Space as a main color in the CSSVault.
Also you should work on the branding of the CSSVault a bit. As it stands, I wouldn't associate it with White Space or 9Rules.
Quasi
Hey Quasi, you should know me by now and that the look and feel might possibly change, but for me its always easier getting the layout and the IA working correctly and then move on to the aesthetics. Thanks for the suggestions.
Scrivs (http://www.9rules.com/whitespace/)
The layout is indeed much better this way. The only thing I'm not quite fond of is the black background-color but that's a detail :)
Great work Scrivs !
Percept (http://percept.be)
It looks quite nice, much better than 1.0.
A few things I noticed:
- On the front page, the text under the screenshot doesn't go to the permalink for the entry, but the text in the archive pages does.
- Are comments coming? ;)
Well, that's it. I actually kind of like the dark background; a nice change from the pastel-look the web has these days. It would be nice, as said above, to have maybe one more color thrown in. But, like you said, there's plenty of time to screw with the aesthetics part.
Great work! Thanks for the resource!
Dris (http://dris.webhop.org/)
I love it, just an extra splash of colour would be desirable in the text or maybe the heading.
It feels a lot more sensible and intuitive compared to the previous design. First time visitors will be able to more easily grasp the purpose of the site.
Jack (http://boxofjack.com)
Scrivs - classy job! It must've taken you ages to redo all the screenshots - how did you find the time to do your daily whitespace entry?
The thumbnails gallery is excellent. Its great being able to see all the designs together like this. CSS Vault is valuable resource - it deserves its own domain name.
Consider it blogged...
Jon Hicks (http://www.hicksdesign.co.uk/)
Hehe, I do own the domain name. Thanks everyone. So much work to do, so little time.
Scrivs (http://www.9rules.com/whitespace/)
Comments have been enabled for the last 20 Gallery entries. Hopefully that works out okay...
Scrivs (http://www.9rules.com/whitespace/)
Comments for last 20 entries have been opened. More to come later.
Scrivs (http://www.9rules.com/whitespace/)
I agree with Jon. It is nice to preview the sites within the gallery before going to them, although I hope that people will still be going to the actual site. I am wondering where you find the time to do all the work for the CSS Vault as well as 9rules, AND Whitespace? Regardless, nice job on all three. Keep it up.
justin goodlett (http://www.skinnyj.com/weblog)
It looks really good Scrivs! My only constructive comment would be to add more color to it but as you said...things will probably change. Other than that, it's a great update to the site.
Todd (http://www.monkeyhouselounge.com/tcoleman2/)
Good job. Thanks for keeping the "design book" feel. I liked the splashes of colour from before but I don't mind the monochromatic look from this version. The only thing is the ads, in the individual archive pages they stand out too much. In my opinion they should use the "internal" color scheme of pale greys instead of the outer dark.
Patrick (http://i.never.nu)
I'm finding it really difficult to read the headlines on the front page for the latest entries headlines. The linkes are all the same size and color for the category, the info link, and the link to the actual site and they all kind of run together and make it really really hard to scan, for me anyway. Maybe make the title links a different color, or make the other links to info and the category smaller, or make the headline bold? My eye is actually drawn to the word "Category" the most because it is the only part of that blob of text that is different than the rest.
And then of course the "hosted by" links and stuff on the bottom are hard to read since it's black-on-slightly-lighter-black. But I'm sure you'd have fixed that when you got to the "aesthetics stage". :)
Other than that it's a big improvement.
Derek (http://www.twotallsocks.com/)
Looks great and the effort is appreciated.
Comments:
The dark background seems a bit daunting however that may be just a reaction to the change.
I also found I had to hunt and peck for the link to WhiteSpace which was just "there" in the previous version.
Well done and cheers
John
John (http://www.wow-factor.com)
Derek: good observations. Again those are some of the tweaks that I have to work out.
Scrivs (http://www.9rules.com/whitespace/)
Excellent job! The new look is clean and professional, with some serious class and style thrown in. I like the larger views of the pages, and the comments system is pretty cool too. It'll definately be A Good Thing when there'll be comments on every new addition. :)
Curt
Scrivs, I love it! My only thoughts:
The dark background... yes, it's been mentioned before. With a pixel pattern there, the site would have been thrown right into a gothic mood... I'm not sure if this is what you wanted. I think raising the colour a little would clean up the design and generally improve the design, in my opinion.
David House
Looks good. The "remember personal info" radio buttons are staggered oddly though... you have "margin-left: 15px;" on No, but not yes, and a br clear=all in-between.
A suggestion -- since you have such a high-res monitor, make a background image for your desktop which consists of a set of rectangles sized 640x480, 800x600, 1024x768, 1152x864, and 1280x960 (maybe -28 pixels in height to allow for the size of a typical windows taskbar). That way you can test -- and take screenshots -- at whatever common resolution you want, without actually fiddling with your monitor resolution, except in rare instances where it's a very tight fit and you want to be 100% sure. Oh, and there's one other res, I don't remember the measurements offhand, but it's the default size of an AOL browser window at 800x600 resolution (at 1024 it's wide enough to just use the normal 800x600 for measurement; at 640x480, almost nothing doesn't scroll). Their default window at 800x600 is an excellent size to aim for since that size covers the vast majority of all web users. As my boss has said (joking, of course) a time or two "if they're still using those really small screens, they can't afford to buy your stuff anyway. Give them the white gloves." (we've always wanted a nice animated graphic of a pair of kid gloves on a black background, making a 'shooing' motion)
JC (http://thelionsweb.com/weblog)
awesome! much easier to find things. i've already added a comment to the colored boxes resource that helped me out tremendously in building css websites. your resource was the first one i found on css design and it has opened my web designing self in all different directions. i am underway on a redesign of a radio station's website and i am excited to incorporate all the things i've learned because of this site. thanks for the hard work you've done to make this a very useful resources for beginners like myself. again, amazing!
joe (http://www.makejoefamous.com)
Nice improvements.
Regarding the screenshots, I'd rather see the name of the site as an header ( above ) than as a legend ( below ).
To make the 800x600 screenshots, you could simply use a bookmarklet to resize the browser window to 800x600 ( or a resolution giving a usable area of 800x600 if you prefer ) hit Alt+PrintScreen, and make/use an action in Photoshop to crop the screenshot and remove the browser window features.
oh, and btw the CSS VAULT needs a little logo.
P01 (http://www.p01.org)
I miss the descriptive captions. Even when it was just "This is cool", it added something to the plain title+screenshot look of the thing. You can fit them in, I'm sure!
I'm also not keen on the "(info)" suffix everywhere. Like the unexplained americanism "props", it seems careless and casual. My first choice would be a small, subtle image with an alt tag of "More..." or "Information" or something like that. It should be part of the user interface, not part of the content.
Apart from that... hell, if I'm nitpicking about stuff as tiny as this, you know it must be good!
Eric TF Bat (http://flurf.net)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Nice work Paul, you can see there's been a lot of effort put in.
I just wonder about the screen shots and the resolution you used. Seems awfully large (only mentioning this because of the ridiculous amount of empty real estate shown on mine).
Also, is the dark background meant to signify the seperation from WhiteSpace and the rest of 9rules?
I am so mad at myself for not noticing the resources you have put together before. Shame on me.
seriocomic (http://www.seriocomic.com)