50 Time-Saving Web Design – Developer Tools

Feature Detection Tools

Modernizr

Modernizr is a javascript library which aims to detect if a browser supports html5 and css3 features, in case the new features are not supported, some classes are applied to html tag. For more information how to use this wonderful tool, please read this article.

RingMark

SEE ALSO: Hot User Input Design Patterns for Mobile

Ringmark is a web-based test in order to know if a mobile browser supports new features.

Polyfills – Modernizr´s recommended

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Polyfills are scripts which simulate the behavior of native API in old browsers. These are the recommended by the library, over 40 scripts.

Few out of the previous list to have in mind:

  • JQuery-Animate-Enhanced Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ .
  • CssSandpaper  is a JavaScript library which looks through at the stylesheets in a html document, it can make appear some CSS3 features such us box-shadow, transform, opacity, etc in older version of IE.
  • JQuery-Anystrecht is a plugin focus on simulating CSS3 background-size property.
  • Transform.js and Transitions.js  are both jquery plugins which can emulate the features  of CSS3 with the same name.

Image Galleries

Gamma Gallery

A responsive image gallery with a caption on over. Really recommended for sites design for responsive web design.

Touch Touch

Touch Touch is an image gallery which aims to be ideal for mobile android and ios devices.

GridNav

A really nice image gallery with 10 effects that can be applied. The mentioned effects are:

Sliders

12 Professional Responsive Jquery  Slider Plugins

TouchSlider

touchSlider is a responsive layout slider which is suitable for desktop and mobile devices. Its more remarkab characteristics are:

  • Cross-browser support, desktop and mobile
  • CSS accelerated
  • Multipurpose options
  • Responsive layout
  • Ready for images and content
  • Callback functions support

It has been tested and compatible with:

  • iOS (iPhone, iPad, iPod Touch)
  • Android (all versions)
  • BlackBerry OS 6 (Torch)
  • WebOS 2 (Palm Pre/Pixi)
  • Desktop browsers

Parallax Content Slider

A simple parallax content slider with different animations for each slider element and a background parallax effect.

Awkward Showcase

It is a content slider, you can place in it text, images, images with captions or tooltips like it is shown in the picture above, and video. Besides it is infinite, so when you get the last image, it goes automatically to the first slide without going left when you click on right arrow.

Sprite Generator

Css.Spritegen

Everybody knows the benefits in performance that CSS sprites can bring to us. An automatic sprite generator save us a lot of time using our favorite image editor. This particular generator gives us the option to deliver the sprite in .png or .jpg  format, plus the css code generated.

Sites to continuous consult

In order to be updated on the always changing world of the web, I am going to recommend some sites to have a close look:

World Wide Web Consortium (W3C)  is the international community which members in its majority belongs to the main companies in Internet, and the mission of this organization is to achieve Web standards and  in this manner get its full potential.

WebPlatform.org is an open wiki where developers around the world makes their contribution for a better web, no matter which browser or platform. In this site you can read about the hot topics of these days: Html5, SVG, CSS3, animation, video, webgl and more.

Html5 Please is nice place to know if new web features are supported by several browsers and mobile devices (old and new ones). Besides there are polyfills or fallbacks in case a certain feature is not supported.

Page 1 Page 2

Ezequiel Lavaca is a frontend freelance developer passionate on new technologies. Personal website: www.canvasestudio.com

Newsletter

6 Comments
  1. jacek Mar 29, 8:54 pm

    Whoo extra tool pack.

    Reply
    +7
  2. sunil Mar 30, 6:43 am

    Thanks a lot! for nice article. This will not only help me a lot but also a number of designers in their upcoming projects.

    Reply
    0
  3. Ajay Dhameliya Mar 30, 8:57 pm

    Super collection….very useful for any newbie web developer…

    Reply
    +1
  4. Jake Mar 31, 10:27 am

    Nice pack. Thanks a lot. The 4th one (Iconizer) has an old screen though. At the moment it’s completely different

    Reply
    -1
  5. orange Apr 1, 10:00 am

    So many useful tools, I really love this list. Thanks for sharing.

    Reply
    +1
  6. @MaxR_V Apr 12, 9:19 pm

    I would also add http://subtlepatterns.com/ for some free awesome backgrounds for the web – many modern, well designed, topnotch bgs!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters