30 Most Popular CSS Websites of 2011

Tara Hornor
Tweet

With 2011 done and gone, it is time to break out some reviews of what the year had to offer. To pay homage to the 2012 election process, I thought it would be interesting to see the the difference between popular designs and (albeit subjectively) good designs – because we all know there’s often very little correlation.

To my surprise, the sites which allowed ranking of CSS designs did a good job of pushing solid design to the top. While I had to sift through a lot of generic designs, I came across a number of themes that I believe were somewhat new to 2011.

Illustrations Are Back!

As you scroll through the list below, notice how many of the sites have custom illustrations as part of the theme or centerpiece. I LOVE this because I love illustration. In most cases, the illustrations are of characters or people, but some sites have beatifully crafted typography and banner elements as well.

Parallax Scrolling

You can’t tell from the images below, but a number of the most highly rated sites are Parallax Scrolling websites. These are the sites that have layers of images that scroll at different speeds, creating a unique 3D effect. I enjoy this type of site as it’s still somewhat novel and provides an easy opportunity to tell a story through design.

Grid Systems

The grid is finding its way into just about every one of these designs. I’m not talking about the standard heading, navigation bar, body layout. I’m referring to the actual use of a grid system to separate design elements, such as copy elements. I’m a fan of the grid, but I wonder if 2012 will be the year that designers intentially break out of it.

Better Typography

Whether it’s in the banner or the body text, I love the improvements that CSS have brought to typography on the web. These top rated sites of 2011 show off the power of CSS in improved readability and style. I hope this trend continues!

Flash is going, going…almost gone.

Now that most mobile OS developers are not supporting Flash, we’re seeing the technology slowly fade into the sunset. This, of course, has both pros and cons. On the upside, Flash designs gave us a great deal of interactivity. But with HTML5 and other technologies, designs can do just about anything that Flash could do while improving accessibility.

Lastly…

I found it interesting that designers were usually at the top of the list. At least 40% of the below websites are actually websites for designers. This shows just how important it is for designers to put their best foot forward with their own sites.

So, without further ado, the most highly rated CSS websites of 2011, in no particular order:


TomAndDan.com


FrontEndDept.com


QuintainGeneria.com


YonaLee.com


BeautifulBrands.net


TalentoCorporativo.com


ConnAxis.com


ParamountFarms.com


AugustineInteractive.com


BlackMoonDev.com


WindyCityWebsites.com


SurinderThaKur.com


W3CDezigns.com


Pixil.info


Develop-Web.fr


Supview.be


JiNeVraDesign.com


Kyan.com


RadoorCo.dk


IdeaWare.co


DangersofFracking.com


SlaveryFootprint.org


GraydenPoper.com


Createdm.com


JaradJohnson.com


Git-Tower.com


CoFinery.com


MelonFree.com


Goodsie.com


Inze.it


Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://w3spor.no/wegdesign Åsel

    Great and inspirating collection!! Thanks for sharing.

  • http://impactbnd.com Chris

    Awesome list of sites. As browsers continue to support more and more of the new features in CSS3, it will be exciting to see what designers come up with in 2012.

  • Brett Bern

    With all due respect, many of these sites are a usability nightmare. Hidden navigation, empty screens that require interaction, flash, etc.

    CSS is like any other web technology. The second you do not keep the end user in mind, it becomes an obstruction.

    Brett Bern

  • http://www.git-tower.com Julian

    Thanks for including Tower!

  • http://www.wdwerks.com Russell

    Nice list. Some inspiring designs as my site is long overdue for an overhaul. Thanks for posting.

  • http://www.designtank.ws Chris Raymond

    It is not the power of CSS that improves the readability of type. It is web designers who understand the principles of typesetting and typographic hierarchy. Those principles existed long before CSS, and can be implemented with any typeface, including Arial, Georgia and Verdana–just check A List Apart.com.

    Let’s stop equating the choice of a “cool” font with good typography.

  • Ryan

    Speaking of illustration and parallax, http://www.apbaxter.com/ should have been on the list!

  • http://www.is-there-a-god.info unkleE

    There is another reason why web “designers were usually at the top of the list”. The main product they are selling is design, not content, so they can fill their page with “pretty” design and we will be impressed and they will have achieved their purpose. But most sites need to include a lot more content, and that makes design harder, or at least not so “pretty”.

    I love looking at pretty design (and wish I could do it myself), but I gave up lusting after it because for most websites, good design will be found in readability, not in prettiness.

    • miyijura

      Totally agree with you. Websites must communicate information, feelings, news, etc.

      Top steps in web design (for me) NOT in order of importance:

      1- User interface usability
      2- Content
      3- Readability
      4- Proper display in common browsers (not IE, please kill it Microsoft)
      5- Mobile versions

      It must be more..but this are my top 5.

      And Flash will always live in my heart and the video games developed with it.

      Cheers!

    • http://www.ubuenterprises.com Deb Esling

      Insightful comment. As one corporate client has told me repeatedly, “We are not selling pretty.”

  • http://raghavendra-mobilephotography.blogspot.com/ raghavendra

    wow, breathtaking beautiful css sites.
    But only few matches the theme of the site and css.

  • http://www.akashkhairate.com Akash

    Very nice collection!

    Again, you should add Design Kanya to this list of CSS, Typographic site. Its a nice fresh site which people do not know about.

    http://www.designkanya.com

    Thanks in advance

  • http://www.kombib.rs Mihailo
  • http://andrewjtalcott.com andrew

    BeautifulBrands​.net is a great design but wtf is with the music? Who has hidden music on their site?

    • jim

      “Who has hidden music on their site?”

      Very annoying designers.

  • http://www.backcountry-webdesign.com Wolf

    Nice collection and I’m really strained what will be happened in 2012

  • Dianne

    I’m a little suspicious – almost all of these are web development or advertising companies? Is this because clients won’t let designers “do their own thing” and the results are always ugly, or are they paying to be in a “best websites” article?

    It is also very easy to create a pretty website when all it has is 3 pages and a photo portfolio?

    • http://methodicstudios.com Joel Falconer

      Design and advertising firms, and their freelance cousins, invariably are the ones who take great liberties with their design and forge new roads. Clients tend to prefer something a little more conservative and fitting with existing trends. Thus their inclusion; there is absolutely no payment exchanged for placement in any of our roundups.

  • reidy68

    …i see posts about grid systems all over the place! is that the way to go for new designers? or is it a preference? so much info out there it’s overwhelming but would be interested on peoples views or opinions?

    cheers!