The Wall is Redesigned 336
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:
- 1280 x 800
- 1440 x 900
- 1680 x 1050
- 1280 x 1024
- 1920 x 1080
- 1920 x 1200
- 1366 x 768
- 1024 x 768
- 2560 x 1440
- 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.
Mobile
The layout doesn't breaks even viewing on mobile devices such as iPhone and Blackberry.
HTML5 & CSS3
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.
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.
Some Fancy Effects
Scroll to Top
When the page scrolls down more than 100px, the back to top will slowly fade in.
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.
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.
Share
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!
Looks good!! Like the css3 media rules and the “Back to Top” link as well as the neat design
Testig treaded comment
Testing the double thread…
It’s beginning to look like a triple thread
Please stop testing threaded comments.
Looks great! Just check twitter link, shows “0 followers” and goes to wrong url. RSS link shows 0 subscribers also.
I Like the new design. It has some neat features. Love the back to top button and the fixed menu on the left.
Loving the new design, especially how nicely it tansforms on narrower browser widths.
Nice touch on the comment images as well.
it’s very cool and stuff, but always a pain in one’s ass to design for different resolutions, especially if the design is only based on floats :((
ahh..
Looks gr8 in chrome/FF. In IE8 I got this two:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 8 Mar 2011 08:26:07 UTC
Message: ‘body’ is null or not an object
Line: 16
Char: 84607
Code: 0
URI: http://webdesignerwall.com/wp-content/themes/wall/js/jquery.js
Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: http://twitter.com/statuses/user_timeline/nickla.json?callback=twitterCallback2&count=5
Compliments. I follow your site from years and i like much new look.
Greetings from Italy!
Paolo
Good, but one mistake: “Tiwtter @nickla” in right sidebar, may be twitter? :)
As always, true skill is in the details, and this site is a clear example.
Just awesome.
Nice re-design, it’s better than the old, and I like how you write about your thinking behind the design.
I’m not sure about the fixed menu though, I personally want to leave all that navigation in the top when I scroll down to read more because it distracts me from actual text paragraphs. And those links are not that important to show them all the time fixed on the left.
But just my opinion though. :) Otherwise it’s a great design.
i like it, however i would prefer to be able to see the categories. you have to search for everything….
congrats on the design looks better!
Awesome redesign. Was just talking to a friend about the advantages of responsive (liquid) layouts. Now I have one more reason to convert him from fixed layouts. ;-)
Good work, but I liked more the older decorations.
Why in search don’t you use the html5 placeholder attribute instead of js solution?
Wow, really good work!
Awesome work!
Terse and to-the-point explanation of the highlight points for this design. Which, by the way, is very simple and also very effective. Compliments.
Chrome/OSX.
Focusing the “Search…” text field does not clear it.
BTW great design!!!
Same problem here.
Yup, here too. Chrome 11.0.686.3 Dev. Mac.
Splendid job Nick, the new design looks wonderful. However, I recommend you use the HTML5 placeholder attribute with the search input field, and make it browser compatible with this handy plugin https://github.com/mathiasbynens/Placeholder-jQuery-Plugin. This way you make your design just a bit more user friendly ;)
Thanks for the suggestion. Sounds like exactly what I need.
Very nice website.. I will have a go with CSS3 Media Queries now that I have seen your site.. works in Dolphin browser – Android..
Cheers!
wow, you did an awesome job…the liquid layout is really amazing !
Congrats