The Wall is Redesigned 329
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!
Like always…. awesome job!
Have not been here in a while. I like the new design it looks great on my 1920X1280 monitor.
Nicely done! Only issue I noticed was the search box–when I click into it, it changes size and doesn’t clear the word “Search…”
Awesome job. Looks great. I really luv the collapse/expand all in the comment area. Overall neat job- As usual.
it looks really good – I like the sticky navigation, I have to admit that I am used to see the “reacent posts” near the top (near all blogs) – but now the desition is a lot better, much more white space and clean design
I always like when I see the use of icons (in your navigation: blog, about contact, archieves)
cool design
Thx ! Helps me !
Hi Nick!
I’m sorry, but I liked your previous design more. The new one looks to boring… Please bring back your old design!
Greetings Mark
My honor that you still like the old design that I did 3.5 yrs ago. I might release it as a free WordPress theme.
It would be great if you do release the old theme. I thought it was well designed. I’m actually interested in it more as a template to learn from than in using it as a theme.
But, not to distract from the new theme, which is also great. It’s Clean, and uncluttered. I love it.
Amazing design, looks nice and clean, and that’s what important. Good job,
Marios
Graphics aside (which I love, but are very subjective), the layout is brilliant! It’s such an elegant solution to a pervasive problem. Great job!! I foresee a new trend…
Great technical solution, to bad WP still haven’t updated the form error page, maybe you should have a look at that? http://webdesignerwall.com/wp-comments-post.php
Like the new design, and your variations for different sizes does well at balancing the weight of the page at different display sizes.
I prefer this simplified site to the old site. Easier to concentrate on the content.
Hi Nick,
love what you’ve done, it just looks beautiful! Like the media queries, works fine when resizing by browser-window. Only have a problem with ‘Copse’ from the Google font Library, .. in smaller font-sizes its readability sucks majorly!
Maybe a better font-choice, or @font-face instead of Google Fonts? Otherwise the redesign looks slick and clean, love it! Great work ..
Very nice template !
I gasped so much
(from shock, not disgust or euphoria)
I like it a lot, but you have much more to live up to.
The media queries are ace, but in the 3column version the left content gutter is smaller than the right (is there any reason for this?) and the background image under the nav will annoy the hell out of me (would be fine if the nav wasn’t fixed, but really contrasts with unattached background).
Apart from that it’s so beautiful and incredibly feature-rich.
Congratulations on still making it look simple with all that under the bonnet :)
Very nice Nick! Simple, clean and effective. That’s what I like! The previous design was good too but I like this one a little more.
Nice use of media queries and responsive design Nick. Recently wrote an article on the same topic, did your new design take a while to implement and test at all the different resolutions?
Like the new simpler design also.
Overall process didn’t take long, but I spent quite a bit of extra time to make it work on IE7 and 8.
Nice design, especially CSS3 Media Queries… :D
Great redesign, easy on the eyes and very nice looking, a definitive upgrade [not that the old site was bad =) ] .
Just one thing, the categories of [Tutorial] [Trend] [General] i dont think that should be buried under blog and appear only on hover (because theres no hint that blog would pop a small window with more sub links)
Maybe should appear just below it with a little margin right or a sub and to denote been child of Blog.
You’ve made some good points, but I would like to keep fixed left navigation minimal.
I love it! Simpler but still familiar and awesome use of media queries. I also like the dominant use of mainly serif fonts.
The only thing I am not crazy about are the main categories on the 2nd level of the navigation because I usually browse them first.