It’s the time of the month to feature more resources and tools to help designers and developers with their jobs. In this round, we will feature a few useful resources for Mobile development, such as a plugin to group items in folder, an image gallery plugin for Mobile.

We will also feature a handy tool, where you can show off your Apps in Apple Devices. So, let’s check them out.

Check out all our fresh resources (according to month):

• October 2012
• November 2012
• December 2012
• January 2013

Analytics.js

Websites and apps need analytics to feed data of user behavior while on the site. Analytics.js comes to make analytics integration hassle-free. With this script, you can add several analytics providers in a leaner way. It currently supports the following analytics providers: Google Analytics, KISSMetrics, MixPanel, Intercom, Customer.io.

Code Sniffer

Code Sniffer is a tool (or bookmarklet) that will audit your HTML code structure to comply with the WCAG coding standard. It is built purely with JavaScript and extendable to create developer’s custom standard.

App Folders

App Folder is a jQuery plugin that allows you to “group” items. It is simlar to how iOS group works: when we click on the group a new section slides down to show the group’s content and fading out its surrounding. The plugin is style-able, giving you the control to fit everything into your design and, best of all, it is responsive. See in action here and here.

Face Detection

Face Detection is a jQuery plugin to detect faces on pictures and show their coordinates. Just in case you need to develop an app that requires face detection feature later on, this jQuery plugin is worth bookmarking. See the demo here.

Fields

HTML5 introduced a bunch of new input types; a few of these types are equipped with Validation. But, since the validation is originally from the browsers, the browser that does not support the type will not validate the input and will let pass whatever value that is submitted. To cover this validity issue, you can use these input along with Fields.js, a handy JS Library to manage and validate Web form fields.

Photo Swipe

Photo Swipe is a JS library to establish image galleries for mobile and touch devices. This plugin displays the gallery in an intuitive and familiar way. In touch devices, users simply “swipe” to navigate through the images. This plugin supports: iOS, Android, Blackberry, jQuery Mobile and PhoneGap.

Place It

Are you developing an app and want to showcase your app coolness in Apple devices (iPhone, iPad, iMac), like in this, this or this one? Place It provides several Apple device models with various angles to show off your App. You can use it to show off your App. Simply drop the screenshot, and you’re done.

Reuze

Reuze is a tiny front-end development framework to help you create semantic HTML5 markup for a blog or a content site quick and easy. It also comes with CSS that holds for the layout style foundation. Nevertheless, it is very extendable and can be used in conjunction with other frameworks, like Bootstrap and Foundation.

ScrollOrama

Most of the time, people scroll webpages so, why not extend your webpage scroll action to make it more outstanding with ScrollOrama. It is a "jQuery plugin for doing cool scrolly stuff". It provides a bunch of cool animation and transition effects to your web elements upon scrolling.

Spell Checker

jQuery Spellchecker is a lightweight jQuery plugin to identify incorrect spelling within a DOM or form fields. In addition to identify spelling, it also shows words of suggested replacement.

Editor’s Note: This is a contributed post by Ben Terrill, Director of Customer Success for Mobify, an open mobile platform. Ben has over 10 years’ experience in creating award-winning campaigns for brands like Nike, Electronic Arts and Palm.

We recently analyzed data from more than 200 million visitors to our eCommerce customers’ sites, and found that 27% of site visits came from people shopping on smartphones and tablets.

For some countries, such as Brazil, nearly half of all eCommerce traffic came through mobile devices. It’s now a reality that every company and publisher on the web needs a mobile web strategy.

So here are 13 tips for optimizing your content for mobile site visitors. Read our ebook for 40 more tips.

Also read: Mobile Web Design: 10 Tips To Better Usability

1. Use placeholder text on common form inputs

On small forms where context is obvious, use placeholder text instead of labels (e.g. login forms, search boxes or address forms).

On the other hand, if the user needs a label to understand what the context of the input is, don’t rely on placeholder text. Make sure the label is always present, even after they’ve inserted content.

2. Less is more

Entering information into forms is much harder on a mobile device, right? So, ratchet down required fields to a bare minimum. Or, better yet, don’t include form inputs you don’t require.

Ask your users to enter the information later or omit it altogether.

3. Place labels above form inputs

When you use labels they should be placed above form elements. Using top-aligned labels ensures that if the mobile browser zooms in on the input, the user doesn’t lose the context of the input.

4. Make sure that text is always text

No image-based text. Nope, none. Learn to use CSS as it’s meant to be used because different screen dimensions and display densities will wreak havoc on your text if you flatten it into an image. Added benefits to using text for text include accessibility, performance, graceful degradation and general usability.

Services like TypeKit, FontSquirrel and Google Web Fonts make is easy to design beautiful text.

5. Keep headings shorter than short

Headings that wrap over more than two lines push your content down the page and often out of frame for users. Keep them short, focused and descriptive without telling the whole story.

Like in this example below, while it probably looks fine on the desktop, that’s a mighty long heading for a smartphone.

6. Declare your font size in pixels for perfect control

We recommend you use pixels (px) for font size because it offers absolute control over the text. In addition, we recommend using a unit-less line-height because it doesn’t inherit a percentage value of its parent element. Instead, it’s based on a multiplier of the font-size. Regarding font size, we recommend at least 14 px.

Even if that seems really big, it’s the right thing to do. The only time to go smaller (and just to a minimum of 12 px) is on very precise labels for forms.

7. Treat your content like it’s a king

Think long and hard about the job of each page. Then make sure that all the content on that page helps your users accomplish that job.

Simple beats pretty. Simple also tends to be pretty.

8. Keep copy short

Be brief. Be brilliant. Be gone.

9. Save time with font-based icons

We ❤ icons! They spice up your designs. To avoid managing a sprite sheet with both retina assets and smaller icons, opt for a font-based icon set like: Font Awesome; glyphish; iconsweets; or symbolset or you can always make your own.

10. Images need love too

Images tell a story and should be carefully resized to ensure that their story translates seamlessly onto a new screen size. Avoid simply sizing down images.

The context has changed and so the images should too if you expect them to properly tell their story.

11. Go easy on the images

Drop your gradient images and buttons and make them lovely with CSS. Mobile devices support some of the most advanced CSS functions of any browsers so pretty much anything you want to do in imagery you can do with styling.

Additional benefits includes: better scaling, better load times, happier users. Yays! all around.

12. Use some asset management magic

Generate retina icons and use the CSS background-size attribute to size them down for non-retina devices. They’ll still look great and won’t take up that much more space than the smaller versions.

13. Don’t make passwords more tedious than they have to be

If you require a password for an account login, show some mercy and make the password login process as easy as possible.

That means giving users the option to show or unmask the password so the most recent character entered is showed to them.

Recommended Reading: 20 Desktop Tools To Generate And Manage Passwords