Fresh Resources for Web Designers and Developers (January 2013)

Time flies! We’re already in a new month, a new year. And a new year calls for a new batch of resources Here is the latest round up of great resources for web designers and developers.

This round, you’ll find more cool stuff like color schemes, responsive email templates, a different kind of icon set and a few other cool jQuery plugins.

Color Schemes

If you use the following code editors, Sublime Text 2 or Textmate, then you should install this Package called Color Schemes created by Dayle Rees. It adds some extra color schemes for code highlighting apart from the current available ones. There are currently over 30 color schemes in the package and this screenshot below shows one of them.

Long Press

Long Press is a jQuery plugin to add accented characters easily, such as à, á, or é. This kind of function can already be found in Android or iOS. When you hold down the a or e key, additional characters will pop up as shown in the following screenshot. This plugin is definitely useful when you build web applications that includes input or textarea.

Layout Icons

You may already have found many free icons such as social media icons or general UI icons. But this set of icon is I think one of a kind: Layout Icons represent the layout of web front face created by Ales Nesetril. If you are building a content management system (CMS), these icons are probably needed.

Adobe Edge Animate

We have discussed a little about web animation using the new features in CSS3. Recently Adobe introduced their new line called Adobe Edge. One of the products included is Adobe Edge Animate. It is similar to Adobe Flash, but it creates animation for Web. So, creating web animation is a lot easier. Try it while it is still FREE.


Do you visit Reddit often? Well you can actually create a similar site using a framework called Telescope. It is a real-time social news framework built upon Meteor, equipped with a few features like real-time updating, Invite only-access, Email authentication, Notification and Posting Limit.

Mockup Designer

Mockup Designer is a handy tool to for web designers to quickly draw ideas. There are some essential components in this tool; such as Rectangle, Circle, Table and a few Typography elements. You can create multiple documents and also adjust the width and the height of the document.

Method Draw

There is a lot of use for SVG for websites and we have covered them a bit in our previous post series. In case, you need to edit the graphic presentation you can simply use this handy SVG editor called Method Draw. It is a web-based application, so no installation is required, and best of all, it is FREE.


xChart is a JavaScript library to build web charts built upon D3.js. The charts are formed with HTML, CSS and SVG and there are currently two types of charts available, Bar and Lines. The charts are easily customizable through CSS.

Responsive Email Template

More people are now coming online via their mobile phones, and this includes check their emails. So, it is necessary for emails to be delivered on the mobile interface. Recently, ZURB shared this responsive email template. There are currently 5 templates with different layout to choose from.


Whilst creating responsive email is challenging, creating a responsive table is probably one of the trickiest. A few have come up with their own solutions. Recently, Themeregency the people behind Foobar launched Footable. It is a jQuery plugin to turn <table> responsive.