Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
03 May

WebAppers Redesign Updates #1

  • Announcement
  • Leave a Comment

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.

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Make Content Sticky on Scroll, to a Point with jQuery

Make Content Sticky on Scroll, to a Point with jQuery

About WebAppers Redesign

About WebAppers Redesign

WebAppers Complete Site Redesign Released

WebAppers Complete Site Redesign Released

Create a Beautiful Sliding Menu with BySlideMenu

Create a Beautiful Sliding Menu with BySlideMenu

Create Scrollable Interface with jQuery Image Scroller Plugin

Create Scrollable Interface with jQuery Image Scroller Plugin

Accessible Very Tall Menus with jQuery and CSS

Accessible Very Tall Menus with jQuery and CSS

Comments

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • How to Create Realtime Multi-player Games in HTML5
  • A True Responsive jQuery Lightbox Plugin for Free
  • Create an Amazon-like Navigation Menu with jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • Super Smooth CSS Transitions for jQuery
  • Free Responsive HTML5 + CSS3 Site Templates
  • How to Use Web Workers for Image Manipulation
  • How to Make FullScreen Page Transitions with CSS
  • Ghost: A Revolutionary Open Source Blogging Platform
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes25
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information240
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools294
  • Webmail14
Licesnes
  • BSD License67
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free740
  • MIT License411
Sponsors
Advertise Here
Partners
MaxCDN