The Wall is Redesigned 335
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!
Very nice work Nick, the media queries stuff is very clever, will have to try that on my next site.
I notice you’ve got a bit of the avatar image showing through at the edges of the round corners – I’ve found that a subtle drop shadow with no offset can help to minimise this effect.
How do you get the images to scale down with the resize?
I use this jQuery trick to wrap the avatar as background image and background-size to resize the image:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
Great job here ;
just one point : I find the font used in the titles too pixelated, it doesn’t fit the smooth design
I’m thinking to switch to Georgia because XP doesn’t render fonts smoothly.
It’s looking really nice! I’m becoming a big fan of the way the navigation staying in the same place as everything else scrolls. Feels like that is the way we should have always scrolled websites.
Good headline as well! When I first clicked the link in my RSS reader for a few seconds my imagination went around crazy. Great work Nick!
Man, awesome redesign. I love it. You inspire me to create something new too!
Redesigned, and still awesome as ever :D I envy you for having awesome talent in design like this. Good job!
Brillant work!
The site is looking crisp and neat…. liked the work u have done on the search box too ;)
Stunning job (as always)!
Schweet! Loving the media querie shizzle.
Really great HTML5 and WP work. Well done. Hope to see some articles on complete website re-designs, effects on SEO, Link backs, and overall successes or pit-falls of complete re-designs. BTW, back to the top rocks!
I second that… an article covering aspects of a website / blog re-designing would be really helpful.
I will write the design process of the redesign soon.
The re-design is perfect. Congrat’s. The media queries is something that all new sites should be employing. Very nicely done.
Firefox 4.013beta (Win XP)
Focusing the “Search” text field does not clear it.
p.s. design likely
Lovely work. Some really subtle animation effects. I particularly like the way the search box gets activated. Really, top notch stuff.
Excellent redesign. Specially I like the static column on left. Marvelous job.
I love the 3 different layouts depending on screen size, but the static column on the biggest layout (which most people will see) is definitely the best.
perfect as always
Wonderful work and very inspiring. Congratulations!
I need to look into this liquid design thing. Very very cool.
they are cool and nice like before. well done!
im yet to move on for html5 and css3 codes.
maybe, i should start very soon.
congrats!
Cool!
There’s, in my opinion, a problem in the menu: on Windows XP + Google Chrome 9, “#main-nav a” has got a 13px font-size which is not displaying nicely (it’s too sharp), maybe for the font-family you’ve chosen, Copse… The problem is also present on the H2 tag.
I really like the styling of the artcle’s titles and the main title! CSS3 rocks!
Great work on the redesign! Love how the main nav auto scrolls on the left column at larger browser sizes.
Agreed on the crispy/overly sharp looking text though, it doesn’t render well in Chrome, Safari, Firefox or IE on Win.
I Always…Fans Nick La :)