I’m pleased today to be able to announce the completion of CSS3 .info’s redesign, bringing the site a much needed new look and feel.
The site has been completely redesigned to offer a more professional brand / design, easier navigation (with the site having long since outgrown its current navigation structure), faster loading times (due to less reliance on images in the layout) and to showcase some of the new functionality offered by CSS3 (including text-shadow, box-shadow and border-radius).
At present there are still one or two tasks left to complete, such as adding the search box, completing the page footer, filling in content on new pages, etc, however the main bulk of the work has now been completed, with any remaining tasks due to be completed over the next few days.
Following the completion of the redesign, our priorities for the next few months are the launch of a new forum on CSS3 .info and a long overdue overhaul of the site’s CSS3 Preview pages.
You can skip to the end and leave a response.
The old site had the bounce and spirit of a well-designed hub to an idea. It was CSS3, to those who didn't know any better, and seemed to personify the spirit of the spec.
This new one is very lifeless. Reflections under the title? How 'Web 3.0'. It's boring and corporate and completely generic, with no flair of its own.
Which is why I personally believe an unfinished design shouldn't be put up prematurely. Let's see what it's like when it's finished.
The old design was fun; cheerful and better resembled what I would think a design blog should look like. The new design is more plain and corporate looking. I do like both designs but I think the old version had more of a creative and inspirational feel. Just my 2 cents worth anyway! :)
Awful. Blue text on dark gray. Bad idea. Currently I see black bullets next to each article title in the Popular Articles box. Barely visible as are "number of comments" besides them (black text on dark gray). The site was once distinctive. Now, it looks like a template off the factory floor.
Shadows and border-radius on the comment textarea are nice, there are some strong points to the new design though I have to honestly say I liked the previous design more.
If there were no changes to XHTML then why not simply add the ability to choose themes?
Also black text on dark-gray doesn't work all that well.
Plus if a menu is a drop down it needs to have a background-image denoting that hovering and focusing that anchor will display further options otherwise some users may feel they have to dig for specific pages.
…but most importantly…there really needs to be CSS3 used all over the site where it can be executed tastefully.
I think the header's too deep with a lot of wasted space off to the right. The black text on a grey background in the popular articles box is pretty hard to read.
And if you run a colour contrast test on the page, the blue on black headers passes Luminosity Contrast Ratio (for large text only) but fails for both Difference in Brightness and Difference in Colour.
A button for Submit Comment rather than a text link would be useful too.
I wouldn't say you should go back to the old theme just yet. Now that you've already pushed this new theme live, why not try to flair it up with some life here and there.
I think you've made a great start, but like others have said…it's a bit lifeless and needs more of a fun feel than a business feel. Something fruitful should stun me at the top of the page to capture my attention and interest similar to how the previous theme did.
Theres a few nice touches, but too few of them. Like the RSS and Twitter icons for the 'subscribe' and 'follow', but overall I have to agree with most of the comments – its too bland and no spirit.
While it looks 'clean', 'modern' and 'professional', it lacks character. You need to spice it up a bit, add a bit of flare here and there, showcase CSS3 to its full potential rather than the over use of drop shadows. The headers are too dark and look all jaggerty on a windows machine.
While I appreciate the hardwork thats gone into this, I think a site like this needs to be cutting edge and pushing whats possible on the web.
Oh. I really like the redesign. It’s not yet perfect, but I personally prefer simple designs. I can see as well that this design is splitting everyone here, too. :D
And you should really fix this comment form. Look how crappy it looks in Fx3.6:
And is the white bar below the footer intended?
Shame. Looks like so many other sites now. It's no longer standout or exceptional. To be honest, it looks like it was done with a framework like Thematic, Headway, Hybrid etc and little effort was made to deviate from their standard layout..
CSS3 is leading edge, so CSS3.info should have a leading edge design.
This isn't it. The old design captured that much better.
I guess they were so excited about getting the site re-designed they made a boob and put it up too early.
The point of a well designed and thought out website is to have a direct influence on users, clients and the general traffic.
This is not having a positive effect from what i can see, however looking at the coding itself, its a solid design and executed well.
Talking from a graphic designers point of view, I think this design is less child-like in comparison to the last. Much easy to navigate, it is clean and fresh and doesn't make me feel like I should be reading something child related.
Yes, the design is a much more simple yet sophisticated, but it uses CSS3, which is what this website is for… It is a teaching example!
Just like every website, I am sure with time, it will adapt, develop and grow….
Fantastic new look, good luck with rest! :D
WTF! Even if I understand the need of something more professionnal, why have you made this … hu… things!
I find this so ugly. My god, is there any more fun in professionnal webdesign?
To me it's this redesign it's an epic fail.
It's so sad, so dark, so straight… what a pity. :'(
Absolute boring relaunch. Just that you have the ability of CSS3 features doesn’t mean you have to use it on every element (shadows). Furthermore, the line-height is terrible. You should set it to 18px at least.
The margin between headlines and paragraphs on the front page is to unclear.
The old layout was ay better.
Firstly thanks to everyone who’s taken the time to provide constructive feedback, either positive or negative. Whilst there are too many comments to address each one individually, I’ll try my best to respond to the main points / issues raised.
Firstly there have been numerous calls to go back to the old design. Unfortunately this is not an option. The main reason for the redesign was to allow the site to grow and expand beyond being simply a blog. When the previous design was created, the site was still in its infancy, with content being split largely between two sections of the site – the blog and the CSS3 preview section. Now the site is much more complex, with content being split over several sections including the blog, the preview, tools & resources and tutorials, with additional sections such as a forum and CSS3 reference due to be launched this year. The site’s previous template, both in terms of the menu space available and the theme’s hierarchy, did not allow for this expansion. Similarly a number of complaints have been raised about errors in the previous theme, with display issues in webkit based browsers and unhelpful formatting of articles (i.e. bullet points being stripped from posts). Given the size and complexity theme, it was a much simpler task to rebuild the sites theme from the ground up, providing a cleaner code base, removing previous problems and making it easier to update / expand the site in the future.
Many people have commented on the lack of fun / life / character in the design, and a few have spoken up for the designs simplicity. The main emphasis of the redesign was from a functional rather than design point of view. The reason for the simplicity of the new design, as compared to the previous, was that many within the web standards community had voiced negative opinions of the previous design, particularly the rainbow header. Whilst I do quite like the rainbow header of the old design, I do feel it would be more suited to a generic or graphics design blog / magazine, rather than a site concerned with web standards, however as a number of people have pointed out, there is the opportunity to liven up the new design, however I wanted the new design to focus on what could be achieved with CSS3, rather than what could be achieved in photoshop – this I believe is more in the spirit of the site than an overly graphical approach.
A number of people have raised genuine concerns about the colour scheme, with some of the text being too hard to read (black against grey bg, blue against grey bg) which will be looked into and alternative colours used where appropriate.
Peter Gasston, one of the authors on CSS3 .info, has suggested a few amendments to give the design a little more freshness and space.
* Use a web font for titles (including the logo)
* Add some rounded corners to soften the boxiness
* Use a subtle background gradient behind the logo to add some texture
* Put the main body copy on a 20px vertical grid
You can see the example here:
Similarly, if anyone else has any suggestions for taking the design forward, whether it’s incorporating elements of the previous design, or something completely new, please do post them here, and feel free to link to any examples.
The rounded corners definitely helps with adding some more 'spirit' to the design, but I'm not digging the new font (from screenshot) used in the logo and headers / titles; the letters seem to run together. The gradient suggestion is a good one, because the design currently looks too flat and I agree '1993' as someone had mentioned in a previous post.
I look forward to seeing the site after the upcoming revisions are made.
The rounded corners give it a more..uh.. 'rounded' design (excuse the pun;) ).
Sublte gradients would also help to give an impression of depth and get rid of the 'flat' and 'lifeless' feel.
Agree with Peter, the fonts in that preview image dont look right – maybe use @font-face to help push that forward in displaying cool and funky fonts on the web.
Hopefully more people will offer some suggestions to improve the design.
The site’s previous template, both in terms of the menu space available and the theme’s hierarchy, did not allow for this expansion.
What the fail?
How hard is it to use the old rainbow picture as the header background, change the tabs to cyan, and blue text to orange?
And you call yourself designers….
You also don't have to use the flattest, most boring font ever.
It wouldn't be hard at all, the old header was scrapped in favour of a more simple approach because of a number of negative comments received about it, as stated in my previous comment, however given the number of comments that have now come out in support I'm seriously considering bringing it back as part of the new theme.
I think I have to agree with most of the commenters here. The new design is lifeless. The combination of sharp-cornered boxiness, high contrast, and grayscale+1 color gives it a very stark look–there is nothing to soften it. The previous design might have been a little too childish, but this one has lost all its playfulness. My favorite design so far was two designs ago (web archive approximation at http://web.archive.org/web/20071013205203/http://… ). It was brightly cheerful and friendly, but still professional.
My other comment is that the front page looks like it has too many headers, and the sub-pages' content seems rather disconnected from their titles.
I am un-subscribing!
I like to follow blogs by people who can design and code better than me.
It look like the style sheet uses (or overuses) only box and text shadows from CSS3.
There are some CSS3 properties towards the bottom of the CSS, but i cannot see them being used on the page design.
Wow…I thought I was somewhere where I've never actually been before. Suffice to say, I was "surprise" – I believe that would be the word with which many would choose to describe it.
Of all the templates around, I'd say that the previous style was the most cheerful, and the one mentioned above by fantasia was simply the best. This one isn't the worst thing out there, but I must say, without offense intended, that since I've been coming around here, this new style is not becoming of the potential of the good designers who made it. I must say that I welcome change, provided it be in the positive direction.
The site's functionality I would rate as fully-operational (no errors that I can see, besides HTML validation results in cases). The selectors tests and the previews do what they should. Weighting the development (server-side firmware, etc), browser compatibility/accessibility issues (the lists), and the general style, I believe it is logical to say that a slightly larger array of colors is preferred and would not place undue stress on development and accessibility issues (provided that all browsers treat items such as lists pretty much the same). As far as loading issues, I have been on many computers on many types of connections (DSL, ADSL, Cable, mobile, dial-up) and although dial-up will inevitably load everything at a snail pace, the load times have always been good (with the only exceptions being downtime, or if a connection was just totally lost).
If this template is more manageable, then I would think that there's a lot more ahead as far as making the style better. It is a somewhat-complex development notion, for WordPress there is an "Easy JS and CSS" plugin that allows customization of specific articles and pages. Something like this could be tailored to virtually any blog or forum site. Using such a tool would allow for the style.css base style to remain small, while the custom page CSS would only be called for when needed (such as when the page is being displayed singularly or on a page that contains other articles along with it). This would allow easier management of an article, in that the style is completely separated from the content. It would prevent one from having to use the style attribute, or some randomly-placed style tag. Placing style tags in any area within the html body is…not preferred at all. To improve manageability, using something like that becomes a necessity. I've used the plugin before, and modified it to suit my tastes. Of course, when a WP update comes along, backing up your themes and files edited for the plugin may become necessary if anything gets custom-coded (or just making a redone plugin for it and reinstalling it once WP updates).
I agree that a site such as this concerns more about what can be accomplished with CSS3 than with Photoshop. That's quite easy to realize, and to accept. But more appeal to the eye does make anything more…marketable, though I would say it wouldn't serve the functional issues. A site can have the functional with the eye candy as well, too. I'm sure you folks will figure out something to improve it overall. In fact, I'm counting on it! The only way I'd really begin complaining a lot if there were plenty of validation errors to complain about (although there are 6 errors on this page – duplicate id attribute entries (id="comment") and a missing alt attribute in an image – more or less an HTML thing more than a CSS thing, but both of which are important).
All in all, not the worst design I have seen for something, but in all honesty, I highly believe that the people involved in the redesign can do a lot better.
So, everything I said, just opinion, and not in offense. I place my remarks here because I consider the cause important enough to voice my opinion about it, and do not intend to demand a thing. But it is only rightful that I offer up any suggestions I can think of (whether they be advisable/practical or not).
There's nothing in this design that says "CSS3" to me. Drop shadows? But they're done badly – way too dark.. If you want to be CSS3 then you should show off CSS3. The proposed redesign with rounded corners still doesn't say CSS3.
As a designer, is there nothing in CSS3 for me to get excited about?
Ironically, even if you were Photoshop-cheating, the old design got me excited about the potential of CSS3. That was part of my enjoyment of coming here. Now… well, it's just not an enjoyable blog to look at anymore.
You've made it like one of those boring technical or legal books. It just looks like a text book now. And the proposal above really isn't any better.
You can follow standards and be a voice of standards but still produce stunning design. And you could have also easily adapted and rewritten the old design to suit your new objectives.
Look at Facebook. They change their design regularly, but it always still looks like Facebook.
Sorry to be negative. And I'm not up with all that CSS3 can do (that's why I come here!) so aren't in a position to mockup a redesign.
Nice forms. But main style should be more CSS3. I think it's not a site for IE users, and currently all major browsers except obvious one support basic CSS3 eye-candy. And PLEASE, notice Opera. From beta 10.50 it supports border-radius and box-shadow. The text-shadow support it has since 9.x.
I know site layout have to be light and minimalistic, but come on, it's CSS3 we're talking about :) Google doesn't care for CSS at all, so you are free to load it with whatever you want. I love CSS3, because it spares me using GIMP all the time, most of layout eye-candy can be done inside layout itself. I also use some data-urls for semi-transparent pixels and patterns. So it's possible to build ultra-light and visualy intense layout, when you forget about IE.
Thanks for replying to the feedback, Chris. This site has always been a great resource and I'm thrilled that it's growing. However, I'm in the "this design is too lifeless" camp.
I think you miss the point when you defend the new design's "simplicity" as a way to showcase what CSS3 is for. This site may be about CSS3 capabilities, but I wonder—what's the composition of your audience? My guess is that most are designers. I hope you consider sweating the details and polishing the new look (or hiring someone who can) so that you may regain the trust of your designer audience.
for comments whose don't like new theme.
I understand about the point of this CSS3.info displaying.
because I've been in heavy designed with web site that speaking about CSS before.
but in a real, CSS's web site would like to show only about CSS power.
what if, i've not thing with Designing tools.
It’s very bland now. I much preferred the old design as it mas bright, colourful and exciting. This new one just looks like so many other sites and is lacking its own personality—it certainly doesn’t say to me “look at all the cool things you can d with CSS3”.
I don't get it, why you need to seem "professional"? Does "professional" necessarily have to be "boring"? I understood the previous style as "CSS 3 is fun, you can enjoy that". This style says "CSS 3 is boring and we actually have no style, no creativity, no vision, at least not a positive or satisfactory one (and you probably should be interested in something else)". Sorry. :(
Uff, looks like a parked domain website. This design has no soul, no love. Please go back to the old one. Why not just incrementally improve it? It radiated happiness. But this new design … bleakness. Doesn't look inviting at all.
And just because CSS3 properties are now widely available doesn't mean you have to use them everywhere. Your drop shadow boxes look awful.
Well, I've tried to get used to this new theme, but I just can't. It totally undermines your supposed authority on CSS3. It doesn't give me any confidence in your expertise in CSS3 – even though it might use more CSS3. Why? Because it doesn't look "out there". And what's more, I don't find it visually friendly. It's sort of off putting and discourages me from reading.
Consequently, I think I will delete CSS3.info from my RSS feeds. Although, the only reason I will keep it is to check back and see if you make a better theme.
Obviously I'm not the only one that finds this theme problematic to what you are about. In fact, judging by comments, we are in the vast majority. Time to cut your losses, I suspect.
Be interested to know how many other people have now been put off reading CSS3.info because of this theme.
Have to say, as the original creator of this site, that this design feels like you're killing it… The fact that hundreds of people here in the comments are telling you that and that you're not responding to it doesn't make it better. Also: where is all this new content you speak of? Sigh… You're making me wish I'd never quite the site.
I have to say that I honestly got the shock of my life when I returned to the site today. I had to double check my bookmarks and actually do a Google search to see if I had the right site.
I understand the goal of presenting the information, having worked with developers – there's always the challenge of trying to balance design with functionality.
The new look is such a stark contrast to the previous design it feels (to me) it has become less inspiring.
The previous design felt as though it was encouraging people to embrace CSS3 and be inspired by what can be acheived by using CSS3.
My humble suggestion is perhaps why not put a design challenge forth to meet your requirements as you mentioned in your post "professional brand / design, easier navigation … , faster loading times (due to less reliance on images in the layout) and to showcase some of the new functionality offered by CSS3"?
It would be nice to see some possible proposals and discussions as to what CSS3 methods are being employed and why.
The old design was one of the nicest on the web. This isn't.
1. The main top logo looks like something that was generated by one of those automatic online "Web 2.0" logo generators, where you input text and it just adds those overused and outdated reflections.
2. Black – rarely a good base colour. In the few instances where it is well used, it's combined with vibrant, lively, contrasting colours. The blue doesn't come anywhere near cutting it in this respect.
3. In a blogpost where you announce a new design, you should at least be prepared to respond to feedback – the silence is… telling – even Joost de Valk responded.
4. Someone mentioned above that Opera misses your border-radius' – this is because for some bizarre reason you've specified -border-radius (with a preceding dash) – surely a site about CSS should at least be validating their stylesheets, particularly before announcing them like this. There's also a lot of other bizarre looking stuff like –mozborder-radius
Having read this I believed it was very informative. I
appreciate you spending some time and energy to put this content
together. I once again find myself personally spending a significant amount of time both reading and leaving comments.
But so what, it was still worthwhile!