WebAppers

/ best free open source web resources /

Shopify

WebAppers Redesign Updates #1

Posted · Category: Announcement

First of all, thank you very much for all of your opinions and suggestions about the redesign. You guys have pointed out some of the most important things I missed when designing. Most of them are very useful and helped me improved the new design dramatically.

screen2

Sticky Navigation Menu No Longer Sticky

I have now set the navigation menu on the left hand side to be fixed position. A little Up Arrow button will be appeared when you scroll, so that you can quickly go to the top of the page if needed.

#05-12-2012 Update
The Navigation Menu is now sticky again, but used simple CSS: Fixed Postion instead. So it still follows your scroll but in a smooth way.

Content Area is Bigger than Ever

The content area is bigger for larger screens now. I have set the font size bigger, so it makes the content area more stand out. I have also made the sidebar background a bit darker, so that it won’t distract you from reading the content.

Better Contrast

The color of headings and titles are changed. It makes better contrast for them with the text of the content. And it’s more comfortable reading the text now. The links are now more obvious and visible too.

CSS Image Sprites

This should be the biggest mistake I have made. Preloading images for mouseover images on navigation menu did not work very well apparently. I have used CSS Image Sprites for mouseover images for navigation menu and most popular section now.

Still Responsive

It’s still a responsive design. You can always test it out in browser with different resolutions: 1280px, 1024px, 800px, 600px and 320px.

There are other bits and pieces I have made changes. Added the small indication for sub menus and etc.

24 Comments
  • http://blog.ssokolow.com ssokolow

    Much better, but the “sticky” up arrow’s motion is still laggy and distracting. Please either use “position: fixed” or something equivalent so it doesn’t demand our attention by being the only thing that has motion independent of both the page and the viewport.
    (If you really feel it doesn’t draw enough attention by being the only thing in that column, use a little CSS animation or jQuery easing to make it glow-pulse once when it appears. Less distracting, but equally eye-catchng.) 

    Also, I fing Disqus annoying. It forces me to choose between not seeing the comments and enabling Javascript (I’m a NoScript user)… and it’s VERY fragile. I have to use a fresh browser profile to prevent it from silently failing to log in (even as an anonymous poster) no matter how many tracking protections I disable on the browsers I normally use.

    I also noticed that, back when I didn’t hate it and I used it on my blog, I got fewer comments. One friend said it was because he didn’t realize that a Disqus account was only optional when posting a comment. (Just something to keep in mind.)

  • http://www.webappers.com/ WebAppers

    Just applied the quick fix for the “sticky” up arrow. And thanks for the heads up for the Disqus problems. :)

  • http://blog.ssokolow.com ssokolow

    Better, but a low-contrast arrow isn’t very eye-catching when at the bottom of the column so it’d probably be best to make it vertically-centered as it was with the old positioning behaviour once it finished catching up.

  • http://www.esyndicat.com/ Vasily B.

    Great update, guys! Congratulations!

  • http://twitter.com/niksosf KAMiKZ

    I am having a hard time stopping scrolling at the end of each article’s bottom boundary as each article now is separated from its neighbors by just a thin line. Anyone else?

  • http://www.facebook.com/calumk Calum Knott

    I love all the changes, but agree the arrow should be vertically centered! 
    (sorry i know how much of a pain that is!)

  • http://www.facebook.com/mali.macak Zijad Redžić

    Now it s much better. Tnx :)

  • http://www.facebook.com/mali.macak Zijad Redžić

    Now it s much better. Tnx :)

  • Uxrevisions

    Releted Resources :

    I think you should use small thumbnail for related articles and thumbnail should be on same height and width..

  • Jac0bz1

    I hate to keep “complaining”, but this is one of my favorite daily sites, so I think its my duty to tell you this:

    1 – The background has these waves that are disturbing for the eyes
    Suggestions: change the pattern in the background-image and make it a bit darker
    2 – The post title has a drop-shadow that makes it “fuzzy” and again, not good on the eye
    Suggestions: remove it.. :)
    3 – You have WAY to many color, I count 7 text-colors (not including black)Suggestions: Use one color for Post title (like it is), one for headers within the post and one for all the headers in the sidebar.. 

  • GoBoxy

    the design looks wonderful, now I can enjoy good reading with beautiful design, I am not a big fun of Disqus, but the integration is smooth, Congratulations

  • Web

    I think float meniu will be tetter

  • balexandre

    first of all, thank you for “listen” to us.

    secondly and regarding sprites, I would make it even better, gather all icons and use just one file, you will save so many requests and it will be way faster for slow connections.

    the menu, the top social icons, the announcement and comments icons, the main logo… if you took time to change it, change it for the best, don’t make it “average”.

  • http://twitter.com/Pselion Luca Ruffini

    Great redesign!

  • rich

    As an avid webappers visitor I love the changes.  Especially the fixed sidebar for navigation.  One thing I criticized SmashingMagazine.com (they talk the talk and don’t do the walk) is the navigation should follow you if its vertical.  Your implementation is Spot on.  :D

  • rich

    As an avid webappers visitor I love the changes.  Especially the fixed sidebar for navigation.  One thing I criticized SmashingMagazine.com (they talk the talk and don’t do the walk) is the navigation should follow you if its vertical.  Your implementation is Spot on.  :D

  • shito

    Hi, maybe a little thing..
    It might be better, when you can also click on the numbers of the “popular post” module!
    Also when you hover over the numbers, that the whole entry is displayed red! ;)

    Just one little thing, that i’ve just seen! :)

  • Dante

    Great!!

  • Dante

    Great!!

  • portend

    I don’t know it’s webappers again while I browse, major changes but very awesome…
    and navigation is cool…

  • portend

    I don’t know it’s webappers again while I browse, major changes but very awesome…
    and navigation is cool…

  • http://www.designingtips.com/ Jay

    The site has been fabulously redesigned guys. Awesome Work!!

  • http://goma.myopenid.com/ goma

    Is there a small chance of sharing out this awesome template even with just the basic features?

  • KimMeredithSmith

    That’s a good redesign.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons