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!
Just amazing!
I love the new site! Looks really great! I found a bug though: Your mobile version does not work on Android phones. Some parts of the viewport tag is missing. For Android it should be:
Oh wait! I just get the 3 Column Layout when zoomed out. When I zoom in the layout changes accordingly. Sorry for the false alarm ;)
Cool design! Loved the old design and this one is even neater. Big Fan! :)
Really great! Love this redesign! : )
Love it!
Wow! The original design was great, now i call this design excellent! Even though previous design was more catchy and nice for eyes, this one provides more accessibility to all kind of users. It is good to know that you consider all those screen width including mobile. Such is a very future proof action you’ve taken. I have tried browsed this wall using my Dolphine browser on my android galaxy s, it worked flawlessly. Just so you know, IE9 is supporting search form field (animated width) and may support as well as many other things that previous IE8 did not support.
i like this design, but i don’t love it. previous design was stunning! it may not have some super, uber, fancy stuff it has now, but it was abstract and somekinda leaving being. now it’s more classic and casual, like many other sites. And I really don’t like that color transition (red-orange-yellow) on sidebar, it gets ugly when you hover more tags in small amount of time. Cheers!
great design congratulations
Well done, great work that looks and works much better than the old one. Site doesen’t feel so large and heavy anymore.
Redesign looks great!
woow.. so envy.. it’s really nice :)
Dude I admire your work so much so that I always come back to get a few tips and ideas about my own work.
The previous design was just as good as the new one but oh boy oh boy…. you must have sacrificed a lot to get to this point.
Anyways I will be happy if you accept to be my mentor…. SIR!
Great redesign as always Nick! You’ve been featured here http://html5awesome.com/web-designer-wall/
Man this is just awesome!!! Always love your designs.
=) Great Work
Great work! I’m really in love with your new design and how it is working, especially thanks for thinking about different platforms! :)
That is great work. I loved the previous design, but the new is as great. I love the http://www.ndesign-studio.com/ design and can see you are in the flow of using a similar approach but each time creating something new… great work !
Really really nice work….. :)
Beautiful Theme! It’s awesome that you have 3, 2 and 1 column displays according to display width (as well as mobile).
Just awesome.
Just absolutely Stunning.
If possible, could you make a tutorial page on how you put this all together?