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!
I could totally relate to this post, thanks for your help.
Hi Nick –
Nicely done especially on the functional side – really like the dynamic, fluid design of 3, 2, 1-column layout. Preserving the visual consistency for the mobile browsing was also eye-opening.
If I could play the devil’s advocate for a bit, I think the original design actually had stronger visual impact and impression than this new version. If I were to try to pick out the elements, I think it is due to smaller presence of the ‘Web Designer Wall’ blog logo and also relatively smaller real estate dedicated to the beautifully crafted visuals on the top area. I’m sure there are still a lot of first-time visitors and I’d argue that we still need to serve them well and leave the strongest first impression. (I’m assuming that you tried to get the logo and visuals out of the way a bit so that the content and the Ads on the right get more emphasis.)
With that all said, your blog is one of very few blogs that I follow. Thanks for all the inspiration! Keep them coming!
– Lloyd
Another great design by Nick but I agree with Lloyd. I think the old version had a greater visual impact.
Really, really nice website redesign! I browse it with my iPhone and it’s perfect!
Nice job!
Hey Nick–wanted to commend you on a beautiful redesign and also a great bit of documentation for all of us following your lead and creating mobile-friendly sites that scale down with media queries. I viewed your CSS and followed your logic for my own project which was invaluable :)
Question now is, not sure I understand how to set everything up so that a website is specifically Blackberry-friendly. You mention above that “…the layout doesn’t break even viewing on mobile devices such as iPhone and Blackberry…” but using the techniques you have noted here, I still have a viewer saying my site breaks on their Blackberry. Am I missing something? Said site looks great on Droid and iPhone. Are there Blackberry-specific considerations you can can clarify? I feel a little lost.
Thanks! Please feel free to mail me directly if you are so inclined.
Hey your website inspired many of us at college to look at the websites in a different manner alltogether. And 3 years down the line we feel it was the best thing that happened to us. The new one too is as wonderful and inspiring as previous one.
this is awesome redesign. There are too many sites ignoring mobile devices. Your site exclusion.
Thank you for making web more user friendly
I came here yesterday after not visiting in a while. The way your design changes based on browser width is amazing. I thought it was so cool I had to visit on my iPod to see what it would look like. Excellent job, I hope other websites follow in your CSS.
Very very nice!
love your header art and footer too :)
simply and cool
well done mate but you should include some animations or any other interactive home page features so that the website doesn’t just look at its visitors but also interact with them so they don’t get bored.
New design looks really good.
I would suggest you to get WP 3.1.1 update.
Also, have backup for old browsers.
Seriously, your previous design was better.
Congratulations! I love it!
Wow! Super stuff. I am very inspired. cipro
yes , it’s great , i test it by small the Browser size, and as you have said , it will appear three kind of layout. it is a great design.
Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.
You’ve certainly worked hard for this design! Totally made my day! Simply awesome.
http://crab-tree.com is now a worldwide web design services website
I liked the new design and features of your site. Most liked part is HTML5 ready wordpress theme. I checked your site. You used article and footer tags and other HTML5 tags. Great work. People can found free HTML5 ready themes on my site. http://digcms.com/wordpress-themes/
welldone guys ;) nice design , like the simplify touches here
您好
我计算机的IE版本是IE.6的，在浏览您的网站时布局显得零乱，您可以试试，