How To Position Form Field Labels

The position of the label in a form (contact forms, registration forms, e-commerce forms) is very important for usability reasons. The best place to position a label is above the form field.

In mobile designs it is more preferable to position the label above the form field, when in portrait mode,  so that the input have the maximum size. If the label is next to the input, the width will be reduced and the user will not be able to see his own typo. For landscape mode, when the height is small, you can use labels next to inputs. Another use for this exception is when the form is really big, and the user can scan better the labels.

Labels placed inline, like a placeholder, is the worst position from a usability perspective. While the appearance of the form is lighter, the users will have difficulties filling the form,  because each field loses its context the second the user starts typing. This isn’t an issue only for filling the form, but for correcting the validation errors as well since the labels are missing. For small forms, where the form fields are known by the user, this kind of approach can be useful from a appearance perspective.

So, when creating a form, based on what should the user fill, how many times the form is encountered, how big the form is, what is your overall design, you should follow some usability rules for positioning the labels.

Alternative to Lorem Ipsum

After reading some articles about the debate whether to use or not Lorem Ipsum text (‘Yes/No Ipsum‘ and ‘The Other Reason why Lorem Ipsum is Hurting Your Designs’) I’ve agreed with Sacha Greif’s point of view, that we need to use some other type of copy text.

She recommended in her article to use some paragraphs from Wikipedia, but I’ve found 2 more ways to replace the usage of Lorem Ipsum.

1. Blind text generator

“But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.”

This tool allows you to copy text from Cicero, Kafka and other English cursive text.

2. Fillerati

“My one great danger now lay in returning to the upper levels in search of Perry and Ghak, but there was nothing else to be done, and so I hastened upward. When I came to the frequented portions of the building, I found a large burden of skins in a corner and …”

Fragments from recognized authors like Jules Verne or Jack London.

Some User Friendly Captchas

Captcha is some test that we must pass to ensure that the answer wasn’t generated by a computer, only by a human. Usualy, the captchas represent some random text that you must reproduce, but I’ve prepared a collection of other type of captchas, more user-friendly ones.

1. jQuery fancy Draggable Captcha

In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 or the letters from A to F into order.

Documentation & Download

2. AJAX fancy Captcha – jQuery Plugin

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. In order to “verify humanity” you are asked to drag and drop specified item into a circle. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.

Documentation & Download

3. buttonCaptcha

jQuery.buttonCaptcha – is a plugin, that protects your site from robots using jQuery. Hint for the demo: the name of the site is gobwas.com

Documentation & Download

4. QapTcha

QapTcha is a draggable jQuery captcha system with jQuery UI ! A draggable jQuery captcha system. As the user – we will only need to move the slider to confirm that we are human.

Documentation & Download

Shrink PNG & JPEG files for web

PNG files are frequently used in websites because it’s the only widely supported format that can store partially transparent images. JPEG files have various uses in websites, from full-sized image background, galleries, thumbs for articles, news etc.  The resulting file for both PNG and JPEG can be large and it’s charging the load time, so the users become frustrated.

Here are 2 online tools you can use to reduce the file size:

1. TinyPNG

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size.

Visit TinyPNG

2. JPEGmini

JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality. The technology works in the domain of baseline JPEG, resulting in files that are fully compatible with any browser, photo software or device that support the standard JPEG format.

Visit JPEGmini

CSS Style Guides

Below is a list of some style guides for CSS provided by GitHub and Google.

GitHub

GitHub CSS style guide

– use soft-tabs with a two space indent
– put spaces after : in property declarations and before { in rule declarations
– use hex color codes #000 unless using rgba.
– use // for comment blocks, instead of /**/
– use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Google

Google HTML/CSS style guide

Style Rules:

type selectors: avoid qualifying ID and class names with type selectors;

/* NOT */
ul#example {}
div.error {}

/* DO */
#example {}
.error {}

shorthand properties: use shorthand properties where possible;

/* NOT */
font-family: georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0;

/* DO */
font: 100%/1.6 georgia, sans;
padding: 10px 15px 20px 0;

0 and units: omit unit specification after ‘0’ values;
hexadecimal notation: use 3 character hexadecimal notation where possible;
ID and class naming: use meaningfull or generic ID and class names;
ID and class delimiters: separate words in ID and class names by a hyphen;

/* NOT */
.demoimage {}
.error_status {}

/* DO */
.demo-image {}
.error-status {}

Formatting Rules:

indentation: indent by 2 spaces at a time;
capitalization: use only lowercase;

/* NOT */
FONT-SIZE: 14PX;

/* DO */
font-size: 14px;

declaration order: alphabetize declarations;
declaration stops: use a semicolon after every declaration;

/* NOT */
.test {
  display: block;
  height: 100px
}

/* DO */
.test {
  display: block;
  height: 100px;
}

property name stops: use a space after a property name’s colon;
selector and declaration separation: separate selectors and declarations by new lines;
rule separation: separate rules by new lines;
CSS quotation marks: use single quotation marks for attribute selectors and property values where necessary.

dafont.com – free fonts

dafont.com is a website that delivers to us a large list of free fonts to use on your PC (for creating designs in Photoshop or Illustrator), or with @font-face option in web.

A interesting option that dafont.com offers you is custom preview: you insert whatever words/letter you want to preview, like this:

Before you use every font you download, don’t forget to read the ‘Note of the author’ part, where you can find where you can use the specific font: personal or commercial.

Visit dafont.com