This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

NEW DEVELOPMENT RESOURCES AND TOOLS

Declarative On-Scroll Reveal Animations – ScrollReveal.js

A simple way to create and maintain how elements fade in, triggered when they enter the viewport.

Path Animator with JavaScript & SVG

Moves a DOM element along an SVG path.

jQuery Strong Password Plugin: Power PWChecker

Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure. Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.

JavaScript Library for Adding Voice Commands (Speech Recognition) – Annyang

Annyang is a tiny javascript library that lets your visitors control your site with voice commands. Annyang supports multiple languages, has no dependencies, weighs just 2kb and is free to use.

scrollReveal.js does not require jQuery, but does rely upon CSS3 transitions; as such, it has been developed exclusively for modern browser use only.

HTML5+JSON Interactive Table Plugin

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables.

60+ Excellent JavaScript Resources and jQuery Plugins

This post lists more than 60 JavaScript resources to help you save development time by building your web and mobile applications with tried and tested JavaScript libraries and tool kits.

Open Source Vector Graphics Web App – Mondrian

Mondrian is a free vector graphics web app like Adobe Illustrator or Inkscape. Mondrian offers all the tools needed to create, modify, and export simple SVG files. Mondrian also supports undo/redo through a file history API that stores operations.

Great jQuery SVG Fallback – SVGMagic

SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn’t support SVG.

Extract Inline CSS Styles from HTML Document – ExtractCSS

ExtractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!

Free Emulators and Tools For Testing Your Website on Desktop & Mobile Devices

Respify – Responsive Image Library

A simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images.

Draggabilly

Make that shiz draggable with javascript.Rad because it supports IE8+ and multi-touch.

JavaScript Diagramming Library – JointJS

JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders. JointJS makes it easy to create visual languages & tools of various kinds.

The event-driven nature together with MVC architecture of JointJS makes it easy to plug-in any backend application.

Generates and Plays CSS3 Keyframes – jQuery.keyframes

jQuery.Keyframes generates and runs CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

18 Free, Open Source Responsive Image / Content Sliders

Image sliders are one of the most common component of modern web design. Go to any popular e-commerce website and you are most likely to find a carousel displaying latest products and offerings.

Image sliders are often used to present large amount of information in a limited space. They can be used to catch attention of website visitors, display important information or some times just to add colorful imagery to the design layout. Carousels can be catchy as well as distracting – but that is another debate. As advocate of usability and simplicity of the design, we believe that image sliders, when used correctly, can be used as a means to present information effectively. And fortunately, there are plenty of free and open source image sliders that you can integrate in your web design effectively. This is a list of 18 responsive image sliders for free use.

jQuery CSS3 Responsive Slider with Audio Support – A-Slider

No dependencies except jQuery; works well with Twitter Bootstrap if required. All configuration done using HTML attributes – no javascript configuration needed.

Simple Autocue/Teleprompter jQuery Plugin

Scrollocue is a jQuery plugin for building a simple autocue/teleprompter system, to scroll through lines of text. Walk through the autocue text with the arrows, space bar or just click.

jQuery Animated Fixed Position Element Plugin – Stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.

A Responsive Multi Level Dropdown Menu Plugin With Icons For WordPress: WPBootM

WPBootM is a responsive multi level dropdown menu plugin for WordPress, based on famous twitter bootstrap framework it also supports text based icons using font-awesome iconic fonts. All the features of WPBootM plugin are customizable from plugin option page, where you change the menu bar color, menu item color, menu text color, add logo to your menu. Along with image based logo there is an option for text based logo as well.

FontAwesome Animation with CSS3

Simple animations using FontAwesome and some CSS3.

The Top 100 Email Marketing Campaigns of 2013 – Free Ebook

Looking for fresh ideas on how to improve the design and performance of your emails? Get inspired with this collection of 2013’s best email marketing campaigns! This is a free eBook with top 100 email marketing campaigns, by Campaign Monitor.

17 Useful Mobile Web Development JavaScript Frameworks

Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.

To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of mobile web development JavaScript frameworks you can take advantage of.

Tutorial: Create A Countdown & Signup Coming Soon Page

The post shares a quick and easy way to building a countdown landing page with a simple email sign up form. FlipClock.js jQuery plugin has been used to power the countdown clock and MailChimp to power the email sign up form.

jQuery Floating Social Share Plugin: floatShare

If you have not connected your web content with social medial platforms, you are are just a step behind. All you need to do is add floatShare jQuery plugin on your website. It is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms. floatShare also gauges popularity of your web content by giving you a summary of total ‘shares’ and ‘likes’.

floatShare is easy to integrate and customize. It comes with three different sizes and styles of social buttons. Built on jQuery, floatShare is compatible with all major web browsers and work with mobile devices as well. The social buttons of floarShare have floating behavior – they float with content as visitors scroll up or down the page. floatShare can be customized with different start and end points.

FREE TEMPLATES AND THEMES

Orion – Beautiful & Creative Free PSD Template

Print-ready Free Professional HTML5 CV/Resume Template: The Resume

Whether you are designer, developer or an entrepreneur and want to show your online presence, The Resume will help you present yourself and show case your work over the internet in an appealing and professional way.

Its a free, professional print-ready HTML5 CV/Resume Template with 13 creative themes suitable for every profession.

Free PSD Template

This free psd template is based on bootstrap grid. Bootstrap psd grid folder is also there in this psd template. Very easy to edit and extend. Fonts are Google fonts. This psd website templates is absolutely free for both commercial and persona use.

Free HTML5 Responsive Business/Portfolio Template

AmazingBiz – a free HTML5 responsive template. This free responsive template is design to look great on all devices, including desktops, smartphones and tablets. The HTML5 templateincludes search engine optimized content, fully functional 2 /3 / 4 column portfolio, contact form, image /content slider, and a featured content gallery.

Freebie – Twitter GUI PSD (New Home Template)

Free WIP Template PSD

SPACE: Dribbble Powered Portfolios

Create an instant, amazing portfolio with your Dribbble shots.

Free WordPress Resume Theme: Elegant Resume

With Elegant Resume theme, You can build it on top of your personal domain or on a free WordPress account. Elegant Resume is a free WordPress theme that can be used to design simple and elegant resume.

Since it is based on WordPress, you just have to download Elegant Resume theme and import it in your WordPress installation. Thus, you are ready to put your name, skills, and career information in less than 5 minutes. Elegant Theme can be easily customized to cater to various styles of resume.

DESIGN FREEBIES

Branding Stationery Free PSD

Freebie: Mini Envelopes

Download comes as a print ready pdf template with assembly instruction. Just print the template on any 8.5?x11? paper on your home printer, cut and fold following the included instructions and you’re all set!

Meroo Flat-Styled Icon Set

This huge set contains a total of 110 beautifully and individually designed icons. The download package come in PSD format, so you can edit, modify, or re-size each icon to suit your needs. You can also freely use these icons in both your personal and commercial projects.

AMOceanus – Free Font Download for Big Text Sizes and Headers

A display sans serif font with tight kerning best used for big text sizes or headers. If used as body text increase the kerning. It comes in two weights Regular and Bold. The font is rigid and simple. It is inspired by lines, architecture and has been designed within a square (lower case) and rectangle (upper case).

BROWNIE – Free Font

DPOPPER – Free Font

65 High Quality Fonts for Free Download

‘Fonts’ is a subject that I love to talk about. As an admirer of calligraphy and a professional UX developer, font is my favorite design element. For me, it is more than a type face; it is an important design element. Fonts can make interesting logo designs, beautiful typographic design and attractive print material. From a huge selection of free fonts available online, you can find a font for almost any theme and style.

With the modern techniques and capable web browsers, it has become easier than before to use your favorite fonts online. Most web browsers support and render new and custom fonts (without having to download fonts) nicely making it easier to enhance web designs with beautiful typography.

The pros and cons of using fonts in web design is a long discussion and I would rather keep it for another post. Today’s post lists some beautiful and interesting free fonts that you can download and use in your project. Some of these typefaces have a webfont Kit to embed custom fonts with @font-face rule.