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!
Awesome job, no doubt.
You should add an iPhone custom favicon.
Here the code:
Love the new design
Great job. Love the new style and functions.
Really slick! A beautiful example of great design.
Haven’t visited the site for about a week and was surprised to see the new design. Great job. :)
I LOVE IT! Just when I thought your site couldn’t get any better. The new is you!
Some sites just makes you feel like you wanna see everything on it, every single details and wonder, how the f*** he did this? how many nights he didn’t sleep just to keep the flow going, what you make with simple details is just amazing, I can´t remember any other website that shows so much passion for web-design like this one. I mean it, this just feels like an art object that I want to put in my wall, maybe I will do it ;)
Stop being such an inspiration! It’s hard to keep up!
(although I think the comment form fields could use a little padding)
Really like the new layout, keep up the good work and inspiration.
Very impressive, seems like this design with the smaller background, while still very stylish would be more inline with the new Google page speed factors in their search placement algorithm. Large backgrounds, however beautiful, are difficult because of their great impact on site load time.
HTML5/CSS3 features are also quite impressive… hope you don’t mind if I see how you implemented them :)
I’m lovin’ it ;d
one word, awesome
Loving the new layout, the various format sizes is going to be great because I am not always on my office MAC so sometimes viewing on my IPhone is necessary. Great job!
Design looks beautiful and refreshing, althiugh you sort of stick to your style. Thanks for interesting posts!
Actually, my HTmL&Web-Design teacher asdvised to take a look at your page ;) well worth visiting and learning new things.
Keep it up ;)
fantastic design but doesn’t work properly on Opera 11.01, particularly search box and back to top button
great design! thanks for the write up!
I dig it, per usual. My only qualm is the texture on the background… a little more visual vibration than I prefer. But otherwise, very nice.
Congratulations about this new re-design, very good work.
awesome design….any plans on releasing the old design as a theme now?
Really nice design, and functionally it works without the user having too!