Navigation

What’s new for designers, September 2012

By Cameron Chapman | Design, Resources | Sep 10, 2012

The September edition of what’s new for web designers and developers includes new web apps, JavaScript and jQuery tools, plugins to make your sites more useful, productivity tools, new takes on content management systems, frameworks, UI kits, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

 

Osmek

Osmek is a new type of cloud-based CMS, calling itself a “Content API”. It can be used with any programming language or framework, and on any server, and content can be distributed to multiple sites.

osmek

 

Metro UI CSS

Metro UI CSS is a framework for developing sites in the style of Windows 8. It can be used as a self-contained solution or added to any other CSS framework.

metro ui css

 

Strapdown.js

Strapdown.js is a simple way to create Markdown documents without requiring server-side compilation. It’s search-engine friendly, cross-browser compatible, themeable, and includes Github-style syntax highlighting.

strapdown.js

 

Prism.js

Prism.js is an extensible, lightweight syntax highlighter that works with modern web standards. It’s blazing fast, intuitive, and can be styled with CSS.

prism

 

Annotator

Annotator is an open-source JS library that can be added to a webpage to let visitors leave annotations. These annotations can include comments, tags, users, and more. And it was designed with easy extensibility in mind so you can add new features.

annotator

 

SideTap

SideTap is a framework for building mobile, platform-independent web interfaces. It works best on iOS5+, Chrome, and Safari. It’s lightweight, and embraces convention over configuration so you can get started right away.

sidetap

 

Erlywarn

Erlywarn gives you instant notifications if your website isn’t acting normally. It’s quick to get started (just enter your email and URL) and it’s affordable (starting at just £1/month).

erlywarn

 

BigVideo.js

BigVideo.js is a jQuery plugin for adding a big video (or image) background to your website. It uses the Video.js API, as well as a couple of jQuery plugins and libraries.

bigvideo.js

 

SoundGecko

SoundGecko will convert any article into an MP2 file you can listen to on the go. It’s available as a Chrome extension, or you can just email the article URL to get the conversion. There are also apps for iOS, Android, and Windows Phone.

soundgecko

 

Edicy

Edicy is a simple tool used to creating multilingual websites. It’s easy to use, optimized for desktop and mobile, has customizable themes, and is search engine optimized right out of the box.

Edicy

 

Typecast

Typecast makes it easy to create interactive live blogs, perfect for interviews. You can invite readers, friends, and fans to ask you questions, and then just choose which ones to answer and start typing.

Typecast

 

Quabel

Quabel is a browser-based writing app that lets you easily set writing goals and focus on your writing without outside distractions. Simple commands make it easy to format your writing, and it’s accessible from anywhere.

Quabel

 

Neat

Neat is an open source fluid grid framework built on top of Bourbon and Sass. It uses em units and golden ratios, and relies entirely on Sass mixins, therefore not polluting your HTML with presentation classes and extra wrapping divs.

neat

 

Human.io

Human.io is a platform for building tiny mobile apps that can access a phone’s camera, geolocation, and more. You can use it to create simple or complex functionality, and it’s easy to integrate into existsing services.

human.io

 

Mailrox

Mailrox makes it easy to build bulletproof HTML emails for CampaignMonitor or MailChimp. Templates built with Mailrox have been tested with Apple Mail, Lotus Notes, Thunderbird, AOL, Gmail, Yahoo! Mail, and many more.

mailrox

 

CSS Arrow Please

CSS Arrow Please is a quick and easy to use CSS arrow generator. Just specify the size of the arrow, the border width and color, position, and background color, and you’ll get all the code you need.

css arrow please

 

Easel

Easel is an in-browser website design tool that includes mockup and sharing features. It includes built-in web fonts and true-to-browser rendering, and you can even import your existing styles using their Chrome extension.

easel

 

JZoopraxiscope

JZoopraxiscope is a jQuery plugin for creating animations from static images. It’s inspired by the Zoopraxiscope, created by Eadweard Muybridge.

jzoopraxiscope

 

Screenqueries

Screenqueries is a simple tool for testing your responsive designs in various screen sizes. It includes drop down menus with a number of common devices, or you can specify your own screen size.

Screenqueries

 

BigScreen

BigScreen is a simple library that makes it easy to use the JavaScript Full Screen API in your website or app. It includes a number of fallbacks that make your full screen experience much more user-friendly.

BigScreen

 

Fluid UI

Fluid UI is an app for building iOS and Android app prototypes. It includes tools for sharing, uploading and exporting, and even on-device testing. There’s a limited free plan available, and paid plans start at $29/month.

fluid ui

 

On/Off FlipSwitch

On/Off FlipSwitch is a generator for creating pure CSS3 on/off flip switches with animated transitions. It includes a variety of styles, as well as settings for active and inactive states, sizing, colors, labels, and more.

on off flipswitch

 

Infogr.am

Infogr.am is a free, simple app for creating awesome infographics. There are pre-designed themes to choose from, then just add your data and share or embed the finished infographic.

infogram

 

Gridster

Gridster is a drag-and-drop, multi-column jQuery grid plugin. It lets you create draggable, dynamic layouts that you can even add and remove elements from. It’s easy to set up and includes full documentation.

Gridster

 

jQuery blackCalculator

jQuery blackCalculator is a jQuery plugin for creating a calculator. There are a number of definable options, as well as full documentation.

jquery blackcalculator

 

TheCodePlayer

TheCodePlayer is a repository of video walkthroughs for creating a variety of awesome stuff from scratch. It offers everything from simple hover effects with CSS to creating a screensaver in HTML5 and much more.

TheCodePlayer

 

Toast

Toast is a simple CSS framework for creating grid-based layouts. It includes type styles, a reset, and a grid, and nothing more. There are two main grid states, including a single-column grid for narrow screens and a 12-column grid for larger screens (up to 960px).

toast

 

Taskup

Taskup is a task list app that’s simple and flexible, helping you get organized without getting in your way. There’s a free plan that handles up to 1,000 tasks, and paid plans start at $.99/month.

taskup

 

EditorConfig

EditorConfig is designed for developers to define and maintain consistent coding styles between different IDEs and editors. It works well with version control systems, and includes both a file format and a collection of text editor plugins for each project.

EditorConfig

 

Sequence.js

Sequence.js is a responsive slider that uses advanced CSS3 transitions. There’s no built-in theme, giving you complete creative control. The best part is you only need to know CSS3 to style it.

sequence.js

 

Elena ($99+)

Elena, from Process Type Foundry, is a highly legible serif font designed for extended reading. It’s subtle and restrained, with a crisp, tailored tone.

elena

 

Headlined ($15)

Headlined is a distressed sans serif display font. It has a worn, ink-like texture that gives it a more tactile feeling while also setting it apart from similar fonts.

headlined

 

Wide Display ($77)

Wide Display is a unicase slab-serif font with decorative elements and numerous alternatives.

wide display

 

Kahlo ($136.50)

Kahlo is a formal and elegant hipster-inspired typeface. It comes with four weights and italics, as well as some alternate characters. It’s perfect for posters, logos, headlines, packaging, and more.

kahlo

 

No Color (free)

No Color is a lightly distressed typeface with an Old West feeling to it. It’s perfect for headlines, signage, packaging, and more.

no color

 

Casper (free)

Casper is a sans serif typeface that includes arrows, alternate characters and signs, and ligatures. It includes both Latin and Cyrillic characters.

casper

 

Znikomit No 25 (Free)

Znikomit No 25, from Gluk, is an elegant decorative font released under the OpenFontLicense.

znikomit no 25

 

Public (€10)

Public is a display typeface perfect for signage, packaging, logos, and more. It’s quite obviously inspired by typography of the 20s and 30s.

public

 

Stephanie Marie JFPro ($79)

Stephanie Marie JFPro, designed by Jason Walcott, is a stylish script font that includes a full set of alternate caps, as well as some alternate lowercase and ligatures.

stephanie marie jfpro

 

Ginger Snap JF ($79)

Ginger Snap JF is a funky display typeface that’s excellent for posters, packaging, and more.

ginger snap jf

 

Did we forget something you think should have been included? Let us know in the comments below!

Share this post
Comments (no login required)
  • http://about.me/evanjacobs Evan Jacobs

    I read the Osmek website and still don’t really get what they actually do. You still have to have some sort of templating system on the front end and a database to make sense of what is ostensibly coming out of the API, don’t you?

  • http://drawne.com Andy Feliciotti

    Seriously an awesome list, the second I thought the post was over I was only a 1/4 way in

  • orange county web designer

    Thanks for the useful information. These are great.