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! Thank you for the insight of the making of the site.
Looking awesome! Nice work
Nice redesign and like the use of media queries – only thing I really don’t like is the floating navigation in the 3 column layout – I find it really distracting when scrolling the page and the nav stays there pulling my vision to the left . Think I’m going to have to shrink the browser window when visiting the site or even use readabilty…
Very well done ;) Looks great on 1680×1050 in Opera 11 ;)
I like the redesign. You stayed true to the style before so if anyone hasn’t been to the site in a while they wont think they are in the wrong place. I really like the fluid design that shrinks from 3 to 2 to 1 column. I appreciate your attention to detail.
The only thing that doesn’t thrill me is the pixel blob in the bottom left of the site (behind the back to the top). It looks like a mess of pixels compared to the rest of the illustrations which are these very ornate and color detailed drawings.
I added those “pixel blob” to create depth on top of the tiny jellyfish elements the side.
Another great and beautiful design by Nick La… Good job!
Love the new layout!
What a beautiful piece of work!
This is amazing. I’m just starting web design and development at uni and I get missed feelings when I see a site like this. Part of me is just held in rapture, while a tiny part of me gets almost depressed as I wonder how I could ever create something as beautiful as this from scratch.
I love it! Great job :)
Hmm, I’m not sure if I like it better now. But, well … that’s probably just because I liked your old design very, very much! ;)
In Firefox, there’s a little gap below the footer. Also, you wrote “I made it work from 320px to …”, but when I resize to 320px in Firefox, parts of the text are missing, and I would have to scroll horizontally, but I can’t (probably because of “overflow: hidden”?).
However, I can’t test it with a SmartPhone, because I don’t have one. ;)
Loving the liquid layout! It’s sweet how you got the left column to come to the top and the twitter box to come to the bottom when the page starts to get smaller.
How did you get the images to scale? That seems to always give me grief.
I have featured your blog few days ago and today web designer wall come out with new design..awesome work!
Great work, Nick. I’m loving the new look— not a complete departure, but obviously a lot of well-planned updates.
Very nice. I really like the “Demo” on the article summaries very nice user experience, thoughtful. The static menu is great to, I like the tag cloud on hover, another nice effect. i dont like to ahve to look at those confusing things. however, it is nice that I ahve the option to check it out. nailed it on the categories in the blog menu too.
At first I thought what a tiny search box, then I clicked on it. NICE dude.
I would like to see the comment box on the top of the comment list. hmmm, I wonder if a study has been done on this?
Over all, great job,
Another great work! really good design, well structure and clean.
My first look at the new re-design just happened to be on my iPhone.. And it’s just lovely. :) Finally, a “mobile version” of a site that stays true to the original. Very nice. Keep up the great work! :D
Very impressed with the new design. Love the user of media queries to determine screen sizes. Elegant and simple.
Really cool redisign. I like the idea with search input field. Great work.
i love the new look! ♥