Grow your CSS skills. Land your dream job.

Script & Style Redesign

Published by Chris Coyier

UPDATE: Script & Style is closed. David and I just moved on to other things.

The New:

The Old:

(I forgot to take a screenshot before I changed it! So, this is the old Photoshop document)

More Reason to Visit

Far more people subscribe to Script & Style than visit it on the web. That's wonderful I think. Script & Style is stream of articles and RSS is the best way to digest that. At the same time, we certainly want to encourage people to visit on the web as well, so there needs to be some reason to do so.

The new design features 20 of the latest and greatest links, as opposed to 5 before, so it feels much more like the front page of a newspaper, showering you with information.

Also now prominent is a search bar. There are literally thousands of articles that have been posted to Script & Style, so it has become a nice place to come and search if you are looking for a particular technique or something you remembered you once saw but can't find again.

Streamline / Removing the Cruft

The gigantic headers and footers started to bother me not long after the original design went up. Sure, they were kinda fun and bold, but it was taken too far. The new slimmed and sleeked headers and footer retain the original feel but don't get in the way as much.

We used to have twice as many links in the footer that pointed to pages that never got much love (like "resources"). Gone!

Not many folks used the email subscription option, which makes sense to me. There are far too many posts on Script & Style to want to have those flooding your inbox. That option is removed and replaced with a single bold RSS option in the header.

Half of the entire layout before was dedicated to the "exclusive tutorials" which we just weren't able to keep up with. Those have been removed, although the old ones of course still exist.

Cleaning up Submission

The old submission form felt too much like an afterthought to me. It was just tucked in the regular content area like any other content. But the submission area of major importance to the site. The new submission area has been totally re-thought and streamlined. It features information about the type of articles we like, and is just friendlier in general.

Submission Bookmarklet!

Just drag this to your bookmarks bar:

Submit to S&S

David build this for us to make submitting sites from anywhere on the web easier. I friggin love it. First you highlight text on the page that would make a good post summary, then click the button. A new window will pop up with the submit form already filled out. You might have to adjust the post title a smidgen (it uses the window title), then submit and that's it!

Different Advertising Treatment

Script & Style is a daily chore for us. It's a lot of work, and the way we earn back on that time is through advertising. the new ads are prominently placed, but in sort of a fun unique way being placed on a "shelf". I think that will serve everyone well.

Visit SiteRSS Feed

Comments

  1. Ethan
    Permalink to comment#

    Very cool! I use Script and Style a lot. Nice to see a new interface.

    By the way, it this a new comment styling?

  2. Demers Designs
    Permalink to comment#

    I am digging the new design! However, my favorite part of the site is definitely “Things We Don’t Like: Roundups, 763 things that 2,356 people have linked to 345,235 times, plagiarism, spam, old things, Skeletor.” Great copy!

  3. Permalink to comment#

    Nice concept, but still far from good…I don’t think anything about the site looks good. Everything from the header to the footer is just completely out of place and does not flow with the page. The actual content serving is poor and clunky. When I get to the site the focal points are advertising and the search bar. There’s no freaking organization and everything is everywhere.

    I got fed up looking at the article titles in about two seconds. I understand the majority of your readers just subscribe, but now you are enforcing this even more.

    The submit button is smack in the middle of the header, I’m all for desining against the norm but I think this is just piss poor.

    Why not serve it up as a magazine type layout where you have tons of headlines with the submissions underneath?

    Sorry for the rant, but I think there’s a lot that needs to be done. The concept of submission is really cool, but it all goes to waste when served up on the site.

  4. Hi Chris! Love the shelf! Smart move using it before it becomes an annoying design trend!

  5. Hey I like the new layout. I don’t believe I have seen this yet, so could you do an article/screencast about the making the shelf? I assume it requires some understanding of perspective and such so could be really interesting, at least to me :).

  6. Permalink to comment#

    Whats up Chris!

    Pros:
    The header and footer looks a lot cleaner to me on the new one. I also like the fact that the links on the homepage take you straight to the source unlike before you had to step into another page to do the same.
    I also like the big search bar and how prominent it is. I don’t think you had that on ur previous version.

    Cons: In my honest opinion, I am having a difficult time “scanning” for article titles that may interest me. Maybe its just me, but my eyes wanted to do the zigzag dance (left to right for each row) and I kinda got dizzy :-p

    I also miss the “featured” articles that you guys had, I visited those many times for reference, and now I can’t seem to find them :-(

    Either way, I’m still a big fan of Scripts&Style, you and david do a great job with this site!

  7. Permalink to comment#

    I miss the S&S tab on CSStricks.. It was great to come here and view the article here and also check what was going on over at S&S all on the CSStricks Website.

  8. Permalink to comment#

    Clicking the next page button in the home page sends you to the 3rd page, not the second…

  9. redouane
    Permalink to comment#

    Can you tell me what to do if I have a problem because I downloaded a video tutorial from rapidshare. I think my ISP who tells the FBI about my links to this download. This ISP should not do that. It’s bizarre. What can the FBI do ?

  10. Permalink to comment#

    I personally think that you put way too much emphasis on the ads. It gets distracting after a while. Also, I agree with others expressing their difficulties in scanning article headlines. Other than those two inconveniences, nice job!

  11. Thanks for all the feed back guys. I feel like I accomplished most of the goals we set out for in the redesign but the big one that needs attention still is clearly the presentation of the articles. I totally agree.

  12. It would be awesome if for every front page story there was a cookie that said you’ve seen it before. So, for the next visit, the new stories that have shown up since the last visit will get some kind of treatment – a different color background or ‘new!’ tag.

  13. Robert
    Permalink to comment#

    I like the new design alot. I would change the hover color of the next page, previous page and search buttons though. I think that the white is too bright, and doesn’t go well with the dark background at all.

    What really bugs me about the ste, however, is not design related. It’s those damn direct link buttons. It really bothers me that you can’t simply click on the title of an entry to go to the article/tutorial it refers to. Especially when reading the RSS feed. There must be some way to make this happen.

    Sorry, that just really gets to me.

  14. Permalink to comment#

    Looks great, and as always many informative links.

  15. Liking the new design. I’ve copied this link to use in one of my Best Of posts. Keep up the excellent work.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".