WebAppers

/ best free open source web resources /

Shopify

About WebAppers Redesign

Posted · Category: Announcement

The New Design of WebAppers has just released! After days and nights of hard work, you can eventually check out the re-design of WebAppers.

newdesign

Responsive Design

It’s a responsive design, which is crafted to use W3C CSS3 media queries, to adapt the layout to different viewing environments. So that users across a broad range of devices and browsers will have access to WebAppers, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling. Take a look at the following examples of viewing WebAppers in browser with different resolutions: 1280px, 1024px, 800px, 600px and 320px.

mini-1280

mini-1024

mini-800

mini-600

mini-320

Most Popular Section & Sticky Navigation Menu

I have added Popular posts section, so that you can get an idea of some of the most popular posts in the last 30 days or all time. It’s best for users have not got enough time reading every new posts daily. You will also notice the sticky navigation menu on the left hand side, it will follow you when you scroll. So that you can quickly browse other topics if needed.

Updated Books Section

I have also updated the recommended books section too. You are able to check out some of the useful books for web designers and web developers. Please feel free to suggest some of other great books I have not mentioned too. It will make our life better.

Still working on……

I am still working on refining the Tags on the right hand side. I am trying to split some big tags into smaller ones, so that you can find what you want easier. It takes some time for thousand of posts…

You may find some bugs here and there. Please feel free to let me know what you think about the new design. I am open to any suggestions. Thanks!

Follow us on Facebook and Twitter

And finally, I have finally created a new Facebook and Twitter account for WebAppers. Please Like us on Facebook or Follow us on Twitter, and stay tuned with the daily open source resources.

85 Comments
  • Kommander

    I like this new wave! :D

  • Neophire

    Looks very good, very fresh and clean, and I love the responsive design.

    However, on mouseovers, you can see a new image loading (as in blank for a second on mouseover, then the image appears)

    Especially developers, who have their cache disabled, will notice this, and they are probably your main target audience :)

    THis could be solved with the images merged into 1 image (the normal state, and hover state), and make the background change position on a:hover in CSS.

    This will complete the user experience imho.
    Keep up the great work!

  • Joao Ernani Oliveira

    Nice !

  • http://twitter.com/stradefacili manuele haisek

    Nice Look! Great resources! 

  • ClabNet

    Nice look, very responsive.
    But I hate the auto-scrolling of left bar and the Facebook box…

  • Massimo Della Guerra

    prefer the old one! :(

  • balexandre

    so much fancy stuff and you guys forgot sprites … 

    its so weird to wait for the hover images on the menu to load … 
    that’s a big fail. regarding the design, its a matter of opinion, but I prefer the old style…

  • kartofelek007

    On my monitor (w:1680) i have 2/3 free space. This is waste of space. But other stuff is nice :)

  • kartofelek007

    On my monitor (w:1680) i have 2/3 free space. This is waste of space. But other stuff is nice :)

  • Dinesh

    The left tab menu does not slide smoothly and is pretty jarring – spoils the experience imo. Nice design otherwise.

  • http://twitter.com/Aalego Aal

    Wow, I like this. Very Clean and Nice UI

  • http://twitter.com/Aalego Aal

    Wow, I like this. Very Clean and Nice UI

  • Diego Gonella

    i’m loving it

  • Dp

    really nice update, congrats!

  • Jac0bz1

    I like the idea, but there are a few things you need to fix.

    1 – Contrast. to little.. 
    2 – Make the “content” area bigger, it’s after all the most important thing
    3 – To many colors.. 

  • Jac0bz1

    I like the idea, but there are a few things you need to fix.

    1 – Contrast. to little.. 
    2 – Make the “content” area bigger, it’s after all the most important thing
    3 – To many colors.. 

  • Abhijit Coder

    Nice! Content area could be little wider. May be you can write an article about how you did the design :)? I am trying to learn about responsive design.

  • A Herz

    don’t like it

     - looks like a candy shop
     - crabby left menu bar
     - content part to small
     - bad contrast
     - top/header too much color/boxes…

  • $25610304

    Who needs the left menu scroll easing ??! Just set the damn bar to fixed position !! 

  • Teebo

    …. preferred the old version.
    Everything is White… every region of the site has the same “weight” and nothing stands out.
    The left floating sidebar is rather old school.
    Don’t get me wrong (please), I love webappers.com, but this new design does not fit with the quality of your Posts.

  • ashconnor

    I agree with the second point. There’s a lot of wasted space on a 1920×1200 monitor.

  • http://beben-koben.blogspot.com/ Beben Koben

    so smooth, mild color…ck ck ck
    like like m/

  • Daniel Yafacb

    very bad contrast color! … i can’t read

  • Daniel Yafacb

    very bad contrast color! … i can’t read

  • Damjanco

    Finnaly you have a good design!
    But with some small corections will be perfect web site(read the user’s think below).
    Samo napred!

  • Design Master

    Too pale and washed out and definately too narrow. Needs work.

  • Scott

    The design is fine, it looks more modern, but you completely threw out all your old branding. That sticky navigation on the right is also anoying, especially on an android tablet that constantly redraws it as I’m scrolling. Giving it a static position I can’t help but feel would be much more apropriate. The sprites for rollovers is also a big one that got missed here. I also am in agreance with everyone else that the content area just seems way too narrow.

    Less relevant to the template – did you guys roll back to an older version of posts? Noticed one of my recent comments disapeered, along with all the other commentz on that article.

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

    Thanks for the feedback. I knew CSS Image Sprite can do the work, but I chose to preload the mouseover images instead. However, it looks like it did not work very well. I will consider using CSS Image Sprite instead now. 

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

    Thanks! Yes, I will make the left bar in fixed position.

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

    Thanks! Yes, I will make the left bar in fixed position.

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

    Oh… :(

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

    Thanks for the feedback. I knew CSS Image Sprite can do the work, but I chose to preload the mouseover images instead. However, it looks like it did not work very well. I will consider using CSS Image Sprite instead now. 

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

    True… I will work on it. Thanks for the feedback! :)

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

    Thanks! I will make the left tab menu in fixed position.

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

    Thank you for the valuable feedback. You are absolutely right. I will make some changes. Stay tuned. :)

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

    Thanks! Yes, I will try to make the content area wider for bigger screen.

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

    Thanks for the feedback. I will make some changes. Stay tuned.

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

    Yes, I will make the left menu to fixed postion. :)

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

    Yes, I will make the left menu to fixed postion. :)

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

    Thanks for the feedback. I will work on it, and make the content area more stand out.

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

    Yes, the old design feels too old. And I was not happy with the branding of old webappers especially the logo. Here I am trying to rebrand webappers into a fresh and modern website. 

    Yes, I will make the left navigation to fixed position. And I thought about the Sprites too, but decided to preload the mouseover images instead. Obviously, it did not work very well. I will consider using Sprites images instead now. And yes, I will try to make the content area bigger for bigger screens.

    I think I lost a few comments during transition of the old commenting system to Disqus commenting system. I am sorry about that. It won’t happen again.

    Thanks again for the valuable feedback!

  • balexandre

    It does not make sense to load each image separably if you took the time to create a responsive layout … same as buying a Ferrari and just stick it with ordinary day-to-day tires and not racing tires …

    But, it’s just my opinion :P

  • http://www.vdhoven.info/ Gilles van den Hoven

    Here are some suggestions from my side:
    - Yes the content area is to small but you already know this :)
    - Make the right menu hide-able with cookies or something like that, i never use it.
    - Update your RSS links in the header to point to feedburner, then you can remove the icon.
    - You could move the icons on the top (rss/email/facebook/twitter/g+) to the menu bar on the left, and place the search bar there instead. This makes the right bar ‘obsolete’ if you don’t want to go to categories.
    - Subscribe newsletter/ follow us on social sites seems a duplicate from the icons on the top right.
    - “Subscrube” (tooltip in RSS feed icon) should read “Subscribe”
    - Related resources could be a horizontal slider?
    - You could replace the Share buttons Google/Twitter/Facebook with something you posted yesterday (about the social buttons) to make it more ‘thesame’ http://www.webappers.com/2012/04/26/highly-customizable-social-counter-jquery-plugin/

  • Zet_Ahmad

    Congratulations :D

  • Spyse

    Looks good, with the given feedback and ur adjustments it will look awesome.
    Loving the logo.Great Job!

  • http://twitter.com/MarkusThielSv Markus Thiel

    Just a small note: In the menu you should have something indecating if there is submenu or not :)

  • http://twitter.com/MarkusThielSv Markus Thiel

    Just a small note: In the menu you should have something indecating if there is submenu or not :)

  • http://twitter.com/MarkusThielSv Markus Thiel

    Just a small note: In the menu you should have something indecating if there is submenu or not :)

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

    Well a lot of people have commented, and i cant think of anything worse than designing a website built for web developers!
    It must come under soo much criticism!

    I really like the new design, its clean, and clearly has been well thaught through!

    Yes there are obvious things that need to be fixed, (the mouseovers) and the weird sliding menu! 

    but its a nice site!
    I like the font choice, bold but a good decision!, 
    I  like the new branding and the site feels much airier!

    I usually read your site via rss, but i often click through to the pages, when you have good content!, 
    So thanks, keep up the good work

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

     Design is pretty, but contrast is to small, so my eyes can’t focus in one moment on some parts of site, so I must search it and use few seconds more. This means that you should make bigger contrast for titles and headlines. Colors are in composition but with small contrast. Please fix this. I visit this site for 2 years every day, so please do not make me go away :)

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

     Design is pretty, but contrast is to small, so my eyes can’t focus in one moment on some parts of site, so I must search it and use few seconds more. This means that you should make bigger contrast for titles and headlines. Colors are in composition but with small contrast. Please fix this. I visit this site for 2 years every day, so please do not make me go away :)

  • Lucas

    Sorry, but as much as I like what you do, and I look at this website pretty much every day, this re-design is an very ugly in so many ways. Bevels, drop shadows and rounded corners on pretty much everything… These Photoshop filter like styles serve no proper function and look very outdated. Also there are way more then 10 type styles. Reducing those will help make the design look less cluttered.
    I would like to politely suggest to fix the easing menu and simplify the design. 

  • Lucas

    Sorry, but as much as I like what you do, and I look at this website pretty much every day, this re-design is an very ugly in so many ways. Bevels, drop shadows and rounded corners on pretty much everything… These Photoshop filter like styles serve no proper function and look very outdated. Also there are way more then 10 type styles. Reducing those will help make the design look less cluttered.
    I would like to politely suggest to fix the easing menu and simplify the design. 

  • Es

    Yes, annoying!

  • Es

    Yes, annoying!

  • WLN

    Honestly i’m not crazy about the design
    Find it quite hard to read as well, everything is too light / washed out which means the content looks WAY too overhelming

  • WLN

    Honestly i’m not crazy about the design
    Find it quite hard to read as well, everything is too light / washed out which means the content looks WAY too overhelming

  • Daniel Yafacb

    In my opinion, the new WebAppers design is too shiny, it bothers my eyes, I just don’t feel comfortable looking at it.

  • Daniel Yafacb

    In my opinion, the new WebAppers design is too shiny, it bothers my eyes, I just don’t feel comfortable looking at it.

  • Daniël Klabbers

    I must agree; somehow you used a glow inner which seems yellowish.. Perhaps you can experiment without the glow? I like the layout though, even though it is indeed a bit too narrow.

  • Daniël Klabbers

    I must agree; somehow you used a glow inner which seems yellowish.. Perhaps you can experiment without the glow? I like the layout though, even though it is indeed a bit too narrow.

  • Daniël Klabbers

    I must agree; somehow you used a glow inner which seems yellowish.. Perhaps you can experiment without the glow? I like the layout though, even though it is indeed a bit too narrow.

  • WLN

    if you would like some pointers send me an email, i’d be happy to help. I’m a designer but come to your site nearly everyday because its got awesome content :)

  • WLN

    if you would like some pointers send me an email, i’d be happy to help. I’m a designer but come to your site nearly everyday because its got awesome content :)

  • guest

    Nice!
    except the logo i’m not fan of it.
    Continue the really good job. It’s a pleasure to read your email every day.

  • guest

    Nice!
    except the logo i’m not fan of it.
    Continue the really good job. It’s a pleasure to read your email every day.

  • Emuxevans

    “very bad contrast color! … i can’t read”

  • Emuxevans

    “very bad contrast color! … i can’t read”

  • http://www.marahcreative.com Sam Bible

    Agreed. This is a tough crowd.

    The changes are pretty significant and it always takes us users a little while to adjust. But overall this is an improvement over the last version and it looks really sharp and up-to-date. With the tweaks you already have in mind it’s just going to get that much better. Nice work!

  • http://www.marahcreative.com Sam Bible

    Agreed. This is a tough crowd.

    The changes are pretty significant and it always takes us users a little while to adjust. But overall this is an improvement over the last version and it looks really sharp and up-to-date. With the tweaks you already have in mind it’s just going to get that much better. Nice work!

  • Patrique

    Nice!

    Muito bonito o layout, ficou show de bola, parabéns.

  • Cassy

    There is a usability issue with your new design.  Color blind people can’t see the H! and H2 text, the color #61C3CC is not contrasting enough. Please can you make it darker?

  • http://stillad.com/ Serge

    Quite good!

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

    Thank you for your suggestions. Just released an update! :)

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

    Thank you for your understanding and kind comments. :)

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

    Thanks for the feedback. Just released an update. :)

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

    Thanks for the feedback. Just released an update. :)

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

    Oh… It really hurts… but thanks for your comments though! :)

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

    It should look better now. :)

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

    Better contrast now. :)

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

    Thanks for the feedback. Just released an update. :) 

  • Sunflowamedia

    oh,yes. first congratulation for you redesign finished. 
    I’ll still follow your blog later

  • Teebo

    Did you boost the contrast on your body background image? Much better with the fix menu.
    One last suggestion, maybe add a background-color to the .post_head.  A different color according to the post category maybe?Also a background-color to the .side_content would be nice (maybe the grey from .post_type?).

  • Joe

    Dapper!

  • Mysteryride

     I’m new to web development so I’m not an expert developer but I am an expert user ;o)
    Personally I love the sidebar, from an ease of use perspective it makes perfect sense to have :o)
    Now I just have to figure out how it’s done ;o)

    Very cool site by the way, thoroughly enjoying it :o)

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons