50 Time-Saving Web Design – Developer Tools
Feature Detection Tools
Ringmark is a web-based test in order to know if a mobile browser supports new features.
Polyfills – Modernizr´s recommended
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+ .
- 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.
A responsive image gallery with a caption on over. Really recommended for sites design for responsive web design.
Touch Touch is an image gallery which aims to be ideal for mobile android and ios devices.
A really nice image gallery with 10 effects that can be applied. The mentioned effects are:
- Default (show/hide)
- Sequential fade
- Sequential move/fade
- Sequential move/fade reversed
- Resize (show/hide)
- Rows move
- Sequential move/fade (3 rows)
12 Professional Responsive Jquery Slider Plugins
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.
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.
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.