Here it is! Welcome to the completely new look at CyberNet. If things look a little crazy you need to clear your cache so that your browser will re-download our new stylesheets. You can do that by holding down the Shift key and clicking the reload button or by pressing Ctrl+F5.
So what is the biggest improvement? I’d have to say it is the liquid design which resizes the site to the width of your browser. I had a lot of problems getting that to work properly because I still wanted there to be a minimum width so that things are readable, but at the same time I wanted it to expand without any troubles.
I have tested the new design in Firefox, Opera, IE 7, Flock, and IE 6. It works great in all of those browsers with the exception of Internet Explorer 6. It has some trouble if your browser isn’t wide enough. This is because IE 6 doesn’t support the minimum width properly, and it doesn’t really like floating elements. That being said I would like to give kudos to the IE 7 development team because during the redesign process if I was able to get something to work in Firefox and Opera, it worked in IE 7 perfectly. It was IE 6 that was giving me troubles.
Are you having difficulties remembering what the old site looked like? Don’t worry, I took two screenshots of what things looked like before the transformation:
CyberNet Main Homepage:
CyberNet Account Management Page:
Here is a list of everything else you might notice along your journey of playing with the site:
- There is now a Login/Register box located in the far right sidebar above the Release Calendar. If you don’t see it then you must already be logged in!
- The Login/Register screens have been skinned to match the rest of the site.
- The Account Management screen now matches the rest of the site as well. You will no longer see the plain old WordPress management screen when viewing stats or editing your profile. We currently have more than 500 users so we hope all of you like the new look!
- Do you hate scrolling in that tiny comment box? No problem! There are now two links located immediately above the comment box that let you Expand/Decrease the size of the field:
- Navigate our archives using the handy dandy calendar in the far right sidebar. If you didn’t get a chance to read the posts from any given day it is super easy to go back and read them.
- Do you want to get better at using keyboard shortcuts, but like most people get overwhelmed when looking at a huge list of them? I know I do. Now a Keyboard Shortcuts module in the first sidebar that I’ll be updating about 2-3 times a week. That way it will give you time to use that one shortcut before I present another. I Will be providing ones for various applications but I’ll always say what program they apply to, and the name will be hyperlinked to a location where you can find more of the shortcuts for that program. The sidebar will only show the last 5 shortcuts and then after that they will be on this archive page.
- I don’t think I can even count the number of times that people ask which Firefox extensions I use. Now in the first sidebar there is a module where I list the extensions that I always install with every Firefox installation as well as the ones that I am still trying to see how much I use them. I have several different Firefox profiles that I use but these are the ones from my primary profile that I use more than 50% of the time.
- Spam is a big problem on this site even with the mathematics spam protection that I use when non-registered users comment. When a legitimate registered user posts a comment and doesn’t see it appear right away, the first thought is that it didn’t work. Often times that is not the case and the problem is that my spam filter thought the comment was spam and was holding it until I approved it. Before now users didn’t know that is what happened so they would constantly retry posting just to have all of their comments caught.
Now when you go to comment you’ll be notified with a warning between the last comment on the article and the comment box. It will only show up for registered users and this will appear on every article that you view until the comment has been approved or deleted by myself. To make the process go a little faster it provides a contact link so that you can send me a message saying that you have some comments in the spam filter…and then I will approve them. Here is what the warning would look like should you end up receiving it:
- Finally, there is the new logo that I personally created. It was pretty fun creating but the challenging part was making it using only vector-based graphics. That means I could resize it in seconds to be as big as I want it to be. Well, I ended up getting it to work out after many long hours and to demonstrate how clear the graphics look I put together some desktop wallpapers for just about every resolution that I know of. They just contain our logo with a plain white background:
I’m sure most of you probably won’t be using the background images but they will always be there if you decide you would like to use them.
Hopefully everyone likes the new design and color scheme. Over the last few months I have received several emails saying that the orange was hard to read on the white background which is why we wanted to use more of a gold. I think it also gives the blog a cleaner look and seems much more appealing (I guess my opinion might be a little biased though).
I do still have some W3C things that I want to take care of so that the site will be standards compliant and I hope to be able to crush all of the problems in the coming weeks. It will take me some time though as I am a self-taught Web designer but everything works great in all of the browsers that I have tested. If you see any bugs please report them to me so that I can get them fixed. Most of all, enjoy the new design/features!
Enjoyed the post? Subscribe to our feed to get a daily dose of CyberNet!
Tags: General
Related Posts:
- More SlashDot Redesigns — This Round Is Much Better
- SlashDot Redesigns…Yes These Are More
- SlashDot Site Redesigns Start Rolling In
- SlashDot Needs Your Help For Their Site Redesign
- Google’s SketchUp 3D Design Released for Mac
Great job Ryan! The new design looks really nice
I’m glad you like it.
I’ll be honest. The color scheme isn’t bad. Reminds of the St. Louis Rams website a lot. I don’t like the text that’s used for ‘Comments’ though. And the logo. The texts both seem really old fashioned. I would have liked to seen something with a reflection, some shine, like this- something more Web 2.0ish. Also, it’s hard to see the All-Star text and the star because of the new colors.
But the new features- like your Firefox extensions and keyboard shortcut tips are great additions. Sorry for being so critical.
Great Job Ryan & Ashley!
I especially like the comments section…Each comment stands out…I like it.
Sweet!!…
I really like the “New Logo”, congrats to the designer…
hey, great new look.
Noticed one “bug”. In the sidebar there is a login screen (atleast on wp-login.php)
It submits it to beta.cybernetnews and this puts out a prompt.
Frankly speaking, I prefer the previous one.
The new logo looks good.
Anyway Great Job Ryan
I love the new design and this blog rocks
The more I think about it, I would put some kind of background behind the “Header Logo” so it separates it from the rest of the stories and columns… Something Really Subtle.. After looking at the site a few more times it all seems to “blend in together” and the “New Posts” should be what sticks out and the white background would make them stick out…
I like this new design
I hate the new logo.
it looks old fashioned.. ugly
please change it.
Also the new favicon.
Also I would change the color of the word “Register” at the bottom of your “login/register” column to “white” so it matches the one at the top right of the site…
If you are going to have a Lite “Bluish” border inside the rectangle of the “Login/Register” buttons at the top right it should be the same for for the “Search” button below them…
Consistency, same with using “Fonts”…
The new design looks quite nice, but I still think those sidebars just don’t fit - the fact that they don’t line up only adds to them looking a bit wrong. Using JavaScript to hide certain less used ones until a user clicks the title would be a better way if you still want a two column layout, or just go for the standard 3 column and stick some on each side of the main content.
Comments seem a little too spaced out/separate from each other, and the blue top bar on each is quite imposing, so that could do with a change too.
Not of a big fan of it to be honest.
Whoa! Such critical people here… I think it looks great. Ryan, you did a great job on the redesign.
Wow! Now all titles (article tops) are clearly separated from comment links (article bottoms).
Good redesign. Logo also looks good.
Tip: To make all browsers get the new CSS, you could rename it temporarily to, for example, style2.css. So all browsers would get it, because it is “new” file.
We thought about doing some kind of reflection in the logo but it wouldn’t have looked as good since there are things underneath the logo. The All-Star text shouldn’t be hard to read though because it is white text, so if it still looks black your browser must be using the old picture. We really appreciate the feedback because we would like to improve on this theme to make it perfect.
Oops. I knew I would forget to change that somewhere.
We’re looking into a color that we can use right now. The problem that we encountered while creating the new theme was that on some screens (mostly laptops) the colors would barely show up because they are not as bright as other monitors (such as LCD’s). On an LCD, for example, the background color of the sidebar looks to be a light gray. On one of my older laptops I can’t even tell that there is a color there. We’ll try to see if there is something we can do though.
Sorry you feel that way.
I’ve been looking into a good way to make the sidebars collapsible because I think that would be cool. The standard 3-column layout was a possibility but I always wanted the focus to be on the content when the user first visited the site. Not only that but users can easily shrink the width of their window to only show the content in case they have small screens.
I thought about changing the name of the CSS file but I would also have to change the name of all the image files in order for the browser to reload those as well. I figured either way users would have to clear their cache so I just left it alone.
——————-
I appreciate all of the feedback that everyone has given for us to improve the site. We will undoubtedly look into making everyone’s recommendations come true but sometimes you just can’t satisfy everyone. Hopefully the new look will give the site a fresh appeal and make you love it all over again.
Love it!
Now get back to writing great blogs!
Actually that is one of the reasons I was really pushing to launch it early…I felt that I wasn’t spending enough time writing the articles that I love to write. That is one of the hard things about being a designer and writer.
The navy blue gives it a slightly dated feel but I guess all that’s really subjective. I tend to see orange or green as “contemporary colors”- whatever that means!
[ Here's a bug I just discovered - I selected the wink smiley and wanted to go to the next para so I hit return but the focus was still on the smiley so I got a couple of extra smileys inserted instead of a return.]
To get back to my critique - (I feel all French and arty now having used that word!) - all is fine EXCEPT the main body font. Something as simple as Arial looks so much smarter!
Many people that I had review the site before it was released said that the new colors were a nice change because it gave the site a more professional look…therefore making them feel like the information was more credible
As far as that bug is concerned it isn’t really a bug. When you click on the image to insert the smiley it also selects the image. When you pressed the Enter key it then simulated a click each time. I’ve been trying to think about how I can set the focus back to the field but my mind is a little blank right now.
I never thought about changing the font type while doing the redesign but maybe I’ll play around with some of the other alternatives to see if any of them look any better. Thanks for your feedback!
if i were you guys, i’d use one of the many pre-configured Wordpress themes. there are many beautifully designed ones available.
The problem is that there are no themes that offer all of the features that we want. I agree that many of them are very well designed but we also wanted something unique that couldn’t be found anywhere else.
You should change the favicon. I liked the previous one better.
Ryan, there is only one way to say this.
Great Job! 
This is much improved over the previous site, and does indeed look much more professional. I do have some issues with a couple of minor things, but I can live with them. The dark colors do seem to have a little too much contrast with the white and creme colors, so lightening them up a little wouldn’t hurt. Also, for a background for the logo, I did a few tests and I think a rich creme or a turquoise (blue-green, heavy on the blue, but not too dark) would do the job well.
One more thing. I personally like the new logo, but I can understand why some people wouldn’t. You might be able to please more people if you used a gold with more yellow and a blue with less gray.
Once again, great job! It is a real improvement.
(PS: You better change the favicon. It looks out of place ;))
BTW, with Firefox there in no need to clear the cache to see all new graphics. Just press RELOAD button once.
Nice! I was going to comment about the ‘All Star’ icon not showing correctly, but I got that fixed. Now if you could have smaller version of your logo available so I can add it to my Blog.
We do actually have a smaller version available…this links to an image that is 234×60 so I think that should be good.
That worked. I try to have logos on my Blog Roll as they stand out better.
I just found an error. Look at the 29th comment. Some of the text is overlapping. Also, did you even read my previous comment? I feel neglected.
And what’s more, I have more suggestions. Maybe you could make the Logout, Manage, and Search buttons glossy instead of having the border and round the corners to match the rest of the site? You could probably even round off the search box itself, too.
By the way, love the new favicon!
Sorry that I forgot to reply to your post but you made a lot of good points. When you were talking about the Favicon I thought you were talking about the new one…but your browser must not have loaded the new one yet.
Thanks for pointing out the bug…I accidentally removed some of the padding on the blockquotes which caused the problem, but it is fixed now.
Actually, it is funny that you mention I should add the glossy background to the Logout, Manage, and Search buttons because that is actually what I have been working on doing. I don’t know why I didn’t think of that originally but it should be up in the next few days.
Also, if you can keep a secret, I’ll let you know that I am also working on a forum. But shhh, don’t tell anyone.
Guess we’ll really find out how many people go back to read these comments. 
I read it, just didn’t want to draw attention too much. Keep it on the sly Ryan
Great look Ryan - this is is how to one way to take the power of blogs to the next level! The register/ login area is a great idea, I may have to “borrow” it
I find it flattering that you want to borrow an idea from this site.
Whatever happened to the background for the header and the glossy buttons? It’s been over a week! No offense, Ryan, but you said it would take a couple of days, not weeks.
On another note, I like the new site design better every day!
I’ve been playing around with some things and I was trying to debate whether I should move the Login/Manage buttons onto the row of the tab bar. I can’t decide whether that is better or not.
Ryan - did you use a plugin to get the register section or hard coding?
Ever thought of adding the ‘Subscribe to comments’ plugin, might help visitors to continue to come back.
I hard code many of the features and the register section was one of them that I hard coded. I had thought about adding a “Subscribe to comments” thing on the site but I already offer that option via RSS and if you are a registered user the site will automatically keep track of articles who’s comments you haven’t read. That can be found in the Management screen. I didn’t want to go the email route because I want to keep clutter out of people’s Inboxes.
That is very nice of you. My home Inbox is not too cluttered, I wish I could say the same about my work Inbox though…