After three and half years, I finally redesigned Web Designer Wall. I launched Web Designer Wall in August 2007 and haven’t made any changes since then. Today, I think it is about time to put the previous design in retirement. It is sad to let it go, but I think a redesign is a must because technology is different now (ie. HTML5, CSS3, media queries). So I’m going to highlight some of the features about this new design. I hope you will like this new design as you did in the previous version.

Media Queries

Before I started on the wireframe/design, I took a look at the visitor stats on my site. Below are top 10 display sizes:

  1. 1280 x 800
  2. 1440 x 900
  3. 1680 x 1050
  4. 1280 x 1024
  5. 1920 x 1080
  6. 1920 x 1200
  7. 1366 x 768
  8. 1024 x 768
  9. 2560 x 1440
  10. 1600 x 900

… and of course iPhone 320 x 480 (#15)

It ranges from 320px to 2560px (width-wise). To target all different displays, the typical fixed width layout won’t work. I use media queries to make a liquid and responsive column layout. The layout flows automatically based on your viewport width. I made it work from 320px to 1280px and higher. Viewers now never need to scroll horizontally. To see this in action, resize your browser window on this site and watch as the layout toggles through various layouts.

3 Column (large display)

If the viewport is wider than 1000px, it will show a 3-column layout: fixed left navigation column, fixed width sidebar and liquid content column.


2 Column (medium display)

If the viewport is narrow than 1000px, the fixed left navigation will flow to the top and turns into a 2-column layout. The content column remains liquid.


1 Column (small display)

Once the viewport gets smaller than 760px, it switches from 2 columns to a single column layout. Note the sidebar drops below the content column.



The layout doesn’t breaks even viewing on mobile devices such as iPhone and Blackberry.



This theme is coded with HTML5 and CSS3. I also upgraded the site to the latest version of WordPress. Finally now you can reply to threaded comments.

html5 css3 wordpress

Featured Posts

I added a new Featured section which is indiciated by a star graphic (beside the post title). You can also find all the Featured Posts under the Archives page.

featured posts

Some Fancy Effects

Scroll to Top

When the page scrolls down more than 100px, the back to top will slowly fade in.

back to top

Collapsible Comments

Have fun with the collapsible comments. You can toggle the visibility of each comment. The circle avatars are done with this jQuery trick.

collapsible comments

CSS Transition

Some CSS transition effects are implemented on the navigation buttons (fading background color) and the search form field (animate width). It is currently only supported on Webkit browsers such as Safari and Chrome.

css transition


Don’t forget to share my posts if you find them useful. You can find the share bar below the post content.


Comments & Bug Reports

What do you think of the new design? Share your comments in this post. If you find any bugs, please take a minute and report them. Thank you!


1 13 14 15
  1. Chuck Spidell
    Jun 23, 2011 @ 1:34 pm

    Completely insane redesign and your adaptive theme rocks. I’m using the BigFeature theme but has it’s limitations, especially for mobile devices. Great to have some options now.


  2. UX Jobs Board
    Jun 28, 2011 @ 12:12 pm

    Amazing redesign :) We love the static left hand navigation.


  3. Michelle Custodio
    Jul 8, 2011 @ 11:02 am

    Thanks for the post. You’ve got a really attractive wall. Your level of web designing is that of the best web design company.


  4. Website Design Australia
    Jul 10, 2011 @ 8:47 pm

    Your article is very informative. Thanks for posting this and if it is possible for you to share me more about it that would be great.


  5. orhanbt
    Jul 15, 2011 @ 4:13 pm

    This is verry good.


  6. Jiyue
    Jul 20, 2011 @ 11:00 pm

    Very Good!
    Hope you can share your design!

    You loyal fans.


  7. duncan gatawa
    Aug 3, 2011 @ 7:22 am

    I love the design because of the fact that its not too serious.its quite fun and playful with a touch of creativity.Good job


  8. complex41
    Aug 23, 2011 @ 12:39 pm

    And then he handed you the thirty-five 45


  9. mybookmart
    Oct 3, 2011 @ 4:02 am

    i like the design good job


  10. Cihan Aksu
    Oct 7, 2011 @ 8:10 am

    CSS3 Media Queries is a great function. It rocks. Also love the new looking.


  11. j_hatfield
    Oct 29, 2011 @ 8:27 pm

    Great article, and I love the new look. I found this site about redesigning a site thats pretty helpful as well and kind of funny:


  12. Aquaster webdesign
    May 1, 2012 @ 8:36 am

    I see you made the website in HTML5? Can you post the a HTML5 article/tutorial. Nice to have is a xhtml > HTML5 webdesign tutorial. Please email me when you do.


  13. magazin
    May 2, 2012 @ 11:14 am

    The closing date is May 2012 right ?


  14. jaffa
    May 3, 2012 @ 3:36 am



  15. Remove bad reviews
    May 3, 2012 @ 4:43 am

    The design brief is a written document for a design project developed in concert by a person representing the business need for design and the designer. The document is focused on the desired results of design not aesthetics. Design briefs are commonly used in consulting engagements, when an independent designer or a design agency executes a design on behalf of a client. Thanks.


  16. Dymo L
    May 24, 2013 @ 3:35 pm

    The new wall is looking awesome buddy :)


1 13 14 15

Leave a Reply