Code Clarity's Web & Tech Shared Articles

Google Chrome Becomes the World’s Favorite Web Browser

2012-05-21T20:16:08Z

This past week, Google Chrome overtook Internet Explorer to become the most used web browser in the world (well, at least for a day). While calculating the exact figures when it comes to the internet is hardly a precise science, Statcounter shows that Chrome has been growing at a steady rate at the expense of both IE and Firefox.

Ever since its inception, Chrome has been winning converts and its rise in popularity does not seem to be stopping anytime soon.

If we look at the Statcounter data closely, there are some interesting revelations:

• For a start, IE is still the runaway leader in North America, whereas Firefox dominates the scene in Europe and Africa. Chrome has a tremendous lead in certain parts of Asia and South America (where Chrome’s share reaches as much as 50%).

• IE fares well during weekdays (excluding IE9, which puts up a decent show on weekends), whereas Chrome wins on weekends, perhaps indicating that people tend to use Chrome at home to browse on weekends, while IE is still ‘enforced’ in certain offices.

Until last year, IE had as much as 45% of the market share – today, its supremacy is very clearly under question. What will the figures be one year from now?

Any guesses or thoughts? Feel free to share with us in the comments.

Understanding the Lingo: Typography Glossary

2012-05-09T10:13:40Z

The art of typography is not always the easiest thing to understand. It almost has a language of its own. Understanding ascenders, descenders, ligatures, x-heights and stems will help you better make connections between type and the other features on your website.

The terms associated with typography can be broken into several categories based on use. This glossary contains common phrases, typography jargon, font identification, spacing and specialty lettering.

Commonly-used letter terminology

Understanding the most commonly-used names for the parts of letters can help you better speak the language of type. Many of these terms are used in common speech among designers.

Ascender: Any part of a letter that extends beyond the x-height of a character set.

Descender: Any part of a letter that drops below the baseline of a character set.

Stroke: The individual lines used to create a letterform. Strokes are measured by weight based on how thick or thin letters are. Some letters are created using multiple stokes, while others only use a single stroke. The term dates to when all type was created by hand and each stroke was created when the pen was lifted from paper.

Serif: Short strokes that extend from letters. Serifs generally appear on the bottom and top corners of letters and can range from small and square to large and rather elaborate. Serif fonts refer to type families that include serifs on each letter.

Sans serif: Typefaces without serifs. Sans serif typefaces are sometimes referred to as Gothics.

Stem: Vertical full-length strokes in characters are called stems. This main stroke can be perfectly vertical, such as in the letter “T,” or have a diagonal slant, like in “V.”

Tail: An end stroke that has more of a decorative feel. Some mix and match the terms tail and descender but a tail does not always have to fall below the baseline.

Jargon terms

When you really start talking about the specific parts of a letter, you will hear another set of lingo. While most of these words are common for typographers and font designers, they may be less common for web designers.

Counter: The open space inside letter strokes. Counter space can result from fully-closed or partially closed letter shapes.

Bowl: The fully-closed section of a letter created by single or adjoining strokes.

Arm: A vertical or horizontal stroke that only intersects another stroke at one point and is open on the other end.

Eye: An eye refers to a closed space inside a letter form, specifically the space inside the lowercase “e.”

Bar or Crossbar: The horizontal strokes between letters. Bars are commonly used to connect points on a single stroke, such as in a lowercase “e.” Crossbars connect separate strokes, such as in the uppercase “A.”

Link: A stroke that connects a letter containing two bowls, such as a “g” in certain typefaces.

Terminal: The endpoint of a descender. An actual terminal does not include a serif; a teardrop terminal is a rounded teardrop-shaped serif on a descender.

Fonts

Everyone understands what a font is. But do you really understand how they are measured or what constitutes bold or condensed type?

Point: A measurement of type. There are 72 points in one inch.

Condensed type: Any type style that is designed using narrow proportions. Condensed fonts can have thick or thin strokes.

Bold or boldface: Using a heavier weight for each stroke of a typeface so that each letter appears with more emphasis. Bolding refers to any weight in a typeface that is thicker than the standard or regular variant of the font.

Italic: The slanting or forward lean added to a typeface. Italics can add slant or a combination of slant and cursive details.

Display font: Typefaces used for large type in projects is called display type. These typefaces do not have to be different fonts than used elsewhere in the project but correspond to the size of text. Display fonts are typically used at 16 points or greater and are found in banners, headlines and headers.

Openface: Fonts with open areas included in each letter. Openface fonts will not include bowls.

Spacing and lines

Just as important to the actual letters is the spacing between each letter and between lines of type. Spacing can actually make or break the typography in your project and greatly affects readability.

Baseline: An invisible horizontal line on which upper-and lowercase letters rest. The baseline does not include the space occupied by descenders.

X-height: The height of a font family’s lowercase “x.” Most lowercase letters – minus ascenders and descenders — will rest between the baseline and x-height.

Cap height: The distance between the baseline and the top of a capital letter.

Kerning: Adjusted horizontal space between letters. Kerning adjustments can open of close gaps between letters and can be done based on a preset formula or manually when type is set.

Leading: Vertical space between lines of type. Leading can also be adjusted to bring lines of type closer together or separate them. Extremes in leading can greatly affect readability.

Specialty lettering

Some lettering has a life – and style – of its own. Specialty lettering comes in a variety of forms and tends to have a more artistic than typographic look.

Icon: Graphic symbol or rendering created from letterforms. Note how online magazine Modern Ink uses letting to create an icon that is used throughout the site for brand identification.

Initial cap: Also called a drop cap, the initial cap is a large or decorative letter used at the beginning of a text block. It can dip into multiple lines of text.

Cloistered initial: Most commonly appear as a single capital letter contained in an ornamental box, but multiple letters can be used. Cloistered initials are also called drop caps and are commonly used as the first letter in a block of text.

Small cap: The use of all capital letters in place of lowercase letters, where the height of each letter is no taller than the character set’s x-height.

Fleuron: Ornamental lettering in which the characters take on elements that look like flowers and leaves. This type of font is usually considered a glyph, although in some cases letters are identifiable.

Monogram: A grouping of letters that create a design based on initials. Note how Tow Arms Inc. combines the first letters from the company name in its logo.

Conclusion

Understanding the language of type is a tool that can help designers better communicate with other creative professionals. Try to get yourself familiar with type lingo, not only so you can talk the talk but so that you can also better understand the basics of typography.

Type is a key part of almost all website design. Understanding it will not only make you feel more confident in working with others but will also help you succeed in a variety of design projects.

How to Create a Fast Hover Slideshow with CSS3

2012-05-09T11:31:57Z

View demo Download source

Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. It’s just a fancy effect to play with and I got the idea from Contain.r. We’ll be using CSS animations for the slideshow and control the pausing and running with animation-play-state.

Please note: this is just experimental and will only work as intended in browsers that support the respective CSS properties.

This is our simple structure:

<div class="hs-wrapper">

	<img src="images/1.jpg" alt="image01"/>
	<img src="images/2.jpg" alt="image02"/>
	<img src="images/3.jpg" alt="image03"/>
	<img src="images/4.jpg" alt="image04"/>
	<img src="images/5.jpg" alt="image05"/>
	<img src="images/6.jpg" alt="image06"/>
	<img src="images/7.jpg" alt="image07"/>
	<img src="images/8.jpg" alt="image08"/>

	<div class="hs-overlay">
		<span>Summer <strong>2012</strong></span>
	</div>

</div>

We’ll show and hide the images using an animation:

.hs-wrapper img{
	top: 0px;
	left: 0px;
	position: absolute;
	animation: showMe 0.8s linear infinite 0s forwards;
	animation-play-state: paused;
}

The animation will be paused and we’ll just run it on hover:

.hs-wrapper:hover img{
	animation-play-state: running;
}

The animation will simply make an image visible and put it on top of the “stack”:

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
	12.5% { visibility: visible; z-index: 100; }
	25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

As you can see, each image will have the same animation but we will start the animation for each image with a delay. We also want to reverse the stacking order of the images by setting the z-index accordingly. Since we will run the whole animation for 0.8 seconds, we’ll delay the start for each image with 0.1 second (except the first one):

.hs-wrapper img:nth-child(1){
	z-index: 9;
}
.hs-wrapper img:nth-child(2){
	animation-delay: 0.1s;
	z-index: 8;
}
.hs-wrapper img:nth-child(3){
	animation-delay: 0.2s;
	z-index: 7;
}
.hs-wrapper img:nth-child(4){
	animation-delay: 0.3s;
	z-index: 6;
}

The percentages of the animation are calculated as follows: take the 100% of the animation timespan and distribute 8 images over it. Each one runs 0.1 seconds which means that at 12.5% we want the second image to show. The second image that will show, will be on top of the current one (although they have the same z-index) because it follows in the HTML structure. Having tried some other possibilities (i.e. not messing around with the z-index, setting 12.6% as the next step, etc.) it seems that this variant performs the smoothest. Nonetheless, sometimes there seems to be a bit of a lag.

The overlay, which will be shown on hover, will have an absolute position and since we want to fade it in and animate the box shadow, we’ll add a transition to it:

.hs-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 500;
	background: rgba(0,0,0,0.6);
	box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
	pointer-events: none;
	transition: all 0.3s linear;
}

On hover, when the slideshow starts running, we’ll show the overlay:

.hs-wrapper:hover .hs-overlay{
	opacity: 1;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}

You can increase the opacity level of the background color of the overlay in order to make the effect more subtle. Note, that the images have the same background which makes this effect less seizure-inducing than if you would use a different color for each one. Black and white images with a not too transparent overlay like in Contain.r are a good fit for this effect.

It’s as well important to note that it should be made sure that the images are of course loaded and apply something similar to what Chris Coyier suggests here.

And that’s it! I hope you find it inspiring.

View demo Download source

Annotation Overlay Effect with CSS3

2012-05-14T13:05:10Z

View demo Download source

In this tutorial we’ll create a little overlay effect with CSS using a combination of the :checked pseudo-class with sibling combinators. The idea is to make an image or element clickable and transition to an overlay-like state that will show us some annotation boxes.

The theme preview images used in this tutorial are by talented Ana Segota and you can purchase her themes and templates here.

The beautiful arrow icons are by Alessio Atzeni and you can find them here.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

The Markup

Our structure will consist of a part for some title and description, and a preview part. The preview part will have the overlay effect. The idea is to add a checkbox, an image and a division for the annotations, containing spans. The trick is to actually put the checkbox on top of the other elements, so that it remains clickable. It needs to stay first in the structure though because we want to be able “to reach” its siblings, the image and the annotations division:

<div class="ao-item">
	<div class="ao-details">
		<h2>Some title</h2>
		<p>Some description</p>
	</div>
	<div class="ao-preview">
		<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
		<img src="images/image01.jpg" alt="image01" />
		<div class="ao-annotations">
			<span>Full Localisation Support</span>
			<span>Custom Image Widget</span>
			<span>Blog and Contact Widgets</span>
			<span>Easy Theme Options</span>
			<span>4 Footer Widget Columns</span>
		</div>
	</div>
</div>

There can be any number of spans. We will position each one individually.
Let’s take a look at the CSS.

The CSS

Note that we will exclude vendor prefixes. You will of course find them in the files.
The division with the class ao-item will have a width of 80% because we want the whole thing to be fluid:

.ao-item {
	width: 80%;
	margin: 0 auto;
	padding: 35px 0;
	position: relative;
	clear: both;
}

The two inner divisions will be floating, so let’s clear some floats with this great technique:

.ao-item:before,
.ao-item:after {
    content:"";
    display:table;
}

.ao-item:after {
    clear:both;
}

.ao-item {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
} /* from CSSTricks: http://css-tricks.com/pseudo-element-roundup/ */

Let’s style the details part with the title and the description. We’ll make it float right and give it a width of 40%. We’ll also add a left padding which will not cause us any trouble because we’ve applied box-sizing: border-box to all our elements in the normalize.css file. So this will ensure that the division is really 40% wide and the padding is “inside” of that and not added to it:

.ao-details {
	float: right;
	width: 40%;
	padding-left: 20px;
}

Then we’ll add some styling to the text elements:

.ao-details h2 {
	color: #498EA5;
	margin-top: 0;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	padding-bottom: 10px;
	box-shadow:
		0 1px 0 #DFDEDC,
		0 2px 0 rgba(255,255,255,0.5);
}

.ao-details p {
	color: #999;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 22px;
}

.ao-details p a{
	font-weight: bold;
	color: #498EA5;
}

.ao-details p a:hover{
	color: #2A3344;
}

The preview division will be a bit bigger and floating left:

.ao-preview {
	width: 60%;
	float: left;
	position: relative;
}

Now we’ll style the image. In order to make it responsive, we’ll give it a max-width of 100%. This will ensure that it will be contained in the parent division. The image will have a transition. The idea is to scale it down a bit, once we click on the associated checkbox:

.ao-item img {
	margin: 0 auto;
	max-width: 100%;
	display: block;
	opacity: 0.8;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	transition: all 0.3s ease-in-out;
}

The annotations division is our overlay and we’ll place it absolutely. We’ll make it invisible by setting the opacity to 0. It will also have a transition: we want it to scale it up and make it become opaque once we click on the checkbox.

.ao-annotations {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(33,62,68,0.3);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
	opacity: 0;
	z-index: 5;
	transform: scale(0.8);
	transition: all 0.3s ease-in-out;
}

The annotation spans will be of absolute position (we’ll set each of the tops and lefts) and we’ll give them a min-width of 140 pixel since the width is in percentage. The transition effect will be to scale down and appear (opacity: 1):

.ao-annotations span {
	display: block;
	position: absolute;
	padding: 10px 25px;
	width: 33%;
	min-width: 140px;
	text-align: center;
	background: rgba(255,255,255,1);
	color: rgba(20,40,47,0.9);
	font-size: 16px;
	font-style: italic;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
	opacity: 0;
	transform: scale(1.3);
	transition: all 0.3s ease-in-out;
}

Each annotation span is going to have a little arrow and we’ll add it using the pseudo-class :after.

.ao-annotations span:after {
	position: absolute;
	background: transparent url(../images/arrow.png) no-repeat center center;
	width: 32px;
	height: 33px;
	top: 50%;
	left: 100%;
	margin: -16px 0 0 -16px;
	content: '';
}

Two of our spans will have the arrow on the left side:

.ao-annotations span:nth-child(3):after,
.ao-annotations span:nth-child(4):after {
	left: auto;
	right: 100%;
	margin: -16px -16px 0 0;
	background-image: url(../images/arrow_left.png);
}

Now we’ll set the positions for each one of the spans. We’ll use percentages again so that the positioning still makes sense, when we resize things:

.ao-annotations span:nth-child(1) {
	top: 5%;
	left: 5%;
}

.ao-annotations span:nth-child(2) {
	top: 20%;
	left: -13%;
}

.ao-annotations span:nth-child(3) {
	top: 37%;
	right: 2%;
}

.ao-annotations span:nth-child(4) {
	top: 53%;
	right: -8%;
}

.ao-annotations span:nth-child(5) {
	bottom: 18%;
	left: -4%;
}

Let’s take care of that checkbox now. The trick is to put it on top of all the other elements and set its height and width to 100% meaning that it will occupy all the division, so that we can click anywhere to trigger the effect. It will be “hidden” since we set the opacity to 0. But it’s still there, so we can click on it. The z-index needs to be higher than the one of the other elements, so, just to make sure, we’ll set it very high:

input.ao-toggle {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	opacity: 0;
	z-index: 100;
	border: none;
	cursor: pointer;
}

And now we will define what happens to the siblings when we click on the checkbox. The image will scale down, change its box-shadow and become opaque:

input.ao-toggle:checked + img {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
	opacity: 1;
	transform: scale(0.8);
}

Since we can’t use img:hover anymore (remember, the checkbox is on top of everything else), we’ll use the hover on the checkbox input to trigger the hover effect of the image:

input.ao-toggle:hover + img{
	opacity: 1;
}

The overlay with the class ao-annoations and its spans will scale to 1 and become opaque:

input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
	opacity: 1;
	transform: scale(1);
}

To add a little cherry on top, we’ll make each span appear with a delay:

input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) {
	transition-delay: 0.3s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) {
	transition-delay: 0.4s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
	transition-delay: 0.5s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
	transition-delay: 0.6s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
	transition-delay: 0.7s;
}

Last, but not least, we’ll add a media query to remove the float for the main divisions and decrease the font size for the annotation spans:


@media screen and (max-width: 730px){
	.ao-item .ao-details,
	.ao-preview {
		float: none;
		width: 100%;
		padding: 0;
		text-align: left;
	}
	.ao-annotations span {
		font-size: 11px;
	}
}

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

Four Design Lessons From Shopping Carts

2012-05-20T07:52:28Z

You see them every time you go to the supermarket. Chances are, you’ve used one recently. Shopping carts have been a matter of course for supermarkets, grocery stores, and many retail outlets for decades, but did you know that Sylvan Goldman, their inventor, struggled with some of the exact same problems you yourself face as a designer? Today we’re going to explore the history of the humble shopping cart, taking lessons from its design, marketing, and even the psychology of use, that you can start applying to your own design process today.

Revisions Are Key

Image Source

A couple of ordinary folding chairs were the inspiration that spawned the early prototypes of today’s shopping cart. This was an invention that helped revolutionize the retail grocery business. But it wasn’t perfect at first. Sylvan Goldman and his associate revised the design of the shopping cart many times before it began to resemble the modern cart we know today. They had to work through safety issues – the little space up front for children was developed after observing how mothers would put their children in the early carts, which was dangerous and which also left little room for their groceries (and thus defeated the entire purpose of using the cart in the first place).

I know designers love to complain about client-initiated revisions (and I’m definitely including myself here), but designer-initiated revisions are extremely important to the design process. Vital, even. Many designers often rely on the first or second idea that comes to them, which may get the job done and be “good enough” for the client, but it’s terrible for fostering true innovation and creativity. Challenge yourself to be your own worst critic for each job you take on. Begin training yourself to look for areas you can improve on and ideas that could be developed further, and you’ll start to see glaring errors you wouldn’t have noticed before.

Determine Your Selling Points

Nowadays, shoppers are most likely to complain about inefficient steering on their shopping carts, making it nearly impossible to turn corners or pivot to avoid other shoppers or freestanding food displays. But back in the 1930s, grocery store owners were very interested by the small amount of space Goldman’s new shopping carts took up. Before Goldman’s invention, people placed their groceries in heavy, bulky baskets made out of wicker or wire. Once filled up with groceries, they got so heavy and cumbersome that store clerks would approach struggling shoppers and provide them with a new, empty basket, taking their full basket to the check stand for them. These baskets took up a lot of room in the stores as well, so Goldman’s upright, foldable carts were a very welcome boon to store owners.

As a designer, it’s always important to consider the selling points of your designs, not just to your clients, but also to your client’s eventual users, audience, or consumers. The shopping cart solved a problem both for the store owners (took up less space) and for customers (were less heavy and cumbersome). If you make your client happy, that’s a good thing. They will pay you and send you on your merry way. But if your design fails to make your client’s users happy, your client will be calling you back, possibly demanding a refund. Goldman experienced exactly this phenomenon firsthand when his client (the grocery store) attempted to sell their customers on the idea of the shopping cart.

Know Your Audience

Image Source

Believe it or not, Goldman and his associate had the most difficulty not with developing the shopping cart model itself, nor with perfecting its functionality. The biggest problem they faced was in getting store shoppers to actually use them. Female shoppers of the day thought they too closely resembled baby carriages – they refused to push yet another cart on wheels and add to their daily drudgery. And male shoppers were too macho to use a dainty little cart on wheels when they could just use their “big strong arms” to carry around one of the old-fashioned baskets. Who knew shopping carts weren’t considered manly in the early 20th century? The only people who actually liked the idea of shopping carts at first were old people. Not good.

So, how did Goldman get around this marketing obstacle? If you guessed ‘use plants to manipulate shoppers into using the new carts via peer pressure,’ give yourself a prize! Goldman hired several “pretend” shoppers of various age groups to use the carts in the store. He then proceeded to suggest to real shoppers that “everyone” was using the new carts, which created a social imperative to fit in. Almost instantly, the new shopping carts were a hit – everyone began using them within a few weeks.

Is it unethical to persuade your target market to consume your products or information by appealing to their need for social acceptance? Absolutely not. Companies as well as everyday people do it all the time. When you and your friends are deciding where to go out to dinner, and one friend is holding everyone up by not making a decision, what’s the first thing you do? If you’re anything like me and my friends, you’ll appeal to the “majority rule” and try to persuade your friend to choose what everyone else has chosen. This is exactly how companies have persuaded people to have televisions in every room of their house, or purchase hideously ugly shoes that no sane individual would ever spend their hard-earned money on. The power of social persuasion is nearly limitless, and as a designer, you should definitely be using it to your advantage whenever appropriate. If you have to resort to an obvious persuasive tactic or two, that means you’re using your power as a creative professional to sway public opinion and generate profits for your client.

Either that, or you’re just a big jerk. Who knows, really?

Never Stop Innovating

Image Source

First came the “folding basket carrier,” the initial prototype for the shopping cart perfected by Goldman and his people. After ten years of successfully marketing this cart to stores, there came the “nest cart,” a cart that included the new mechanism of being able to nest itself inside the next cart in front of it. This mechanism should be familiar to you if you’ve seen those long lines of “nesting” carts at cart kiosks or drop-offs. Shopping carts have gone through many, many changes over the years. You may have been grateful for the shelf underneath your cart which allow you to select heavy objects without having to lift them up too high, or irritated at the security measures stores have taken in recent years to prevent theft (the carts in my neighborhood store automatically lock down the wheels of any cart that wasn’t cleared by the system, which has taken me by surprise more than once). Sylvan Goldman died in 1984, but his innovations have lived on in the imaginations of countless product designers, and there are now more versions of the shopping cart than even he lived to see.

Just because you finish a design job with one client, that doesn’t mean the research and testing you conducted for that project has no further use. If you work to narrow down your focus to a particular market or two, you can collect research data from each future job you take on, accumulating a database of knowledge and experience which will allow you to innovate faster and more efficiently with each passing year. In a couple years’ time, you’ll have far surpassed those designers who ignore the goldmine of business, marketing, and psychological insight they have at their fingertips through their clients and their clients’ users.

What Do You Think?

How has testing and innovation helped you in gaining understanding of your clients and their markets?

Retina.js – Retina graphics for your website

2012-05-20T07:52:44Z

Retina.js is an open-source script that makes it easy to serve high-resolution images to devices with retina displays. When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap for that image.

Homepage: http://retinajs.com/
GitHub: http://github.com/imulus/retinajs

Ajaxify Standard Forms Instantly – ALAJAX

2012-05-20T08:48:55Z

Advertise here with BSA

Today, using JavaScript frameworks, it is so easy to accomplish complex stuff with few lines of code, including Ajax.

For forms, if you want to make it much easier, ALAJAX is there for you. It is a jQuery plugin that automagically converts standard forms into Ajaxed ones, no coding required.

Once inserted and the forms are defined, It blocks the default POST functionality, analyzes the input types used and sends them as an Ajax request.

Its code is well commented and leaves space for further customizations (extra actions to be taken before/after submitting).

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Learn How to Quickly Create Tasty Social Icons using Photoshop

2012-05-20T13:00:18Z

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!

In this tutorial I will show you how to create Tasty social Icons in Photoshop. We will be covering what’s new in the Shape Tools options panel which is the new Stroke. Using this new feature we can now easily make stitches and we can adjust it whatever we want.

For those who don’t have Adobe Photoshop CS6 yet you can download the beta on their official website. But if you’re excited to do this and you don’t have time to download Photoshop CS6, you can still accomplish this tutorial by following the simple instructions.

So what we are waiting for? Let’s get started.

Things you will need for this tutorial:

Social Icons 32px x 32px

Here is what we will be making:

Step 1: Setting up the Document

For our workspace create a new Document in Photoshop 570px by 470px and set the background color to #333236.

While selecting the background layer go to Filter – Noise – Add Noise.

Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.

Change the layer mode to Soft Light and change the opacity to 50%.

Step 2: Working on the Base Shape

Here is the base shape as you can see in the image below. Basically it’s just an 80px by 120px, #3b5997 Rounded Rectangle Shape with a 5px Radius. Then I modified it using the Direct Selection Tool(A) and Pen Tool by making the top straight and adding an anchor point in the bottom middle and then I dragged it downwards using Direct Selection Tool(U). If you followed my previous tutorial you will know how to properly modify the shape: Recreate Google+ Pages Using Adobe Photoshop.

Apply this Blending Option:

Stroke: #7796cb, #7b97c6, #324579

Gradient Overlay:

Here is the result.

Step 3: Adding Pattern

Create a new Document in Photoshop make it 5px by 5px and make sure the background is Transparent.

Fully zoom our canvas by using the Zoom Tool(Z) or by just pressing Ctrl + + on the keyboard. Now that it is fully zoomed use the Pencil Tool(B) and make a pattern as shown in the screenshot below.

Save this document as a pattern by pressing Edit – Define Pattern. Name it whatever you want. Now that we have the pattern apply it to our base shape

Pattern Overlay:

Step 4: Adding Highlights

We need to add some flavor to our shape by adding some highlights. First thing you need to do is create a layer above the shape and Link it to the base shape by pressing the middle line between them.

Using a Soft Brush Tool(B) brush on the bottom part of the shape and set the layer mode to Soft Light and decrease the Opacity to 80%.

Add another layer, select the Gradient Tool(G) Reflected Gradient, #fff and add it near the top of the shape. Set the layer mode to Soft Light and decrease the Opacity to 50%.

Add another layer again. This time we will create a darker shade. Use Reflected Gradient, #000 and add it at the top part of the shape. set the layer mode to Multiply and decrease the Opacity to 50%.

Step 5: Adding Stitches

Adding Stitches (Dash Stroke) in Photoshop CS6 is very easy. They improved how Shape Tools work and they added an additional option panel for strokes and shape. Don’t worry if you don’t have Photoshop CS6 yet, you can still follow this tutorial. But with Photoshop CS6 I will show you how handy it is. Here is the preview of the options panel of the Shape Tools

Fill Option Panel

Stroke Option Panel

To create the stitches first create a shape, the same process we did on the base shape but this time change the width to 70px.

You need to adjust the stroke by clicking the More Options and set the Dash to 5 and Gap to 6. Change the stroke color to #a4b1cf and when you’re done shut the fill color, so that the only thing will show is the stroke.

For CS5 and below, you can do this manually by using the Line Tool(U) 5px each line and 6px gap.

We need to delete the top part stitches. You need to Rasterize the layer and erase the top part stitches.

Drop Shadow:

Step 6: Adding Icon

You probably have the icons provided in the resource. Place the icon in the center of our base shape.

Apply this Blending Option:

Stroke:

Gradient Overlay: #dddddd, #fff

Drop Shadow:

Add the icon name using Text Tool(T).

Duplicate the text layer, change the color to #2b406a and move it up once, using the up arrow key.

Step 7: Adding Shadows

Duplicate the base shape layer and make the fill color to #000000. Place this below the base shape. Now go to Filter – Blur – Gaussian Blur.

Mask the layer and mask the portion that we don’t need. Refer to the screenshot below.

Using Linear Gradient, #000000 add a shadow as shown in the screenshot below.

Add this 1px #515055 line using the Line Tool(U) and place it above the shadow.

Now finish this by masking both ends of the line and the shadow.

And finally we’re done. I hope you learned something from this tutorial. Also, I added 4 more social icons. You can grab the PSD file by clicking the download link below. Until next time. :)

Download PSD source file

Code Poet v2: More than Just a Directory

2012-05-20T14:00:27Z

Code Poet has just relaunched, and it is now so much more than the directory of WordPress professionals that it was before. If you build anything with WordPress, Code Poet is now on the fast track to be your one stop shop for resources and information.

Today, Code Poet features free eBooks from WordPress professionals, interviews with WordPress professionals, useful resources from the WordPress community, and a handy quiz to test your WordPress knowledge. As you can imagine, Code Poet is gearing up to be a massive resource build by WordPress professionals for WordPress professionals and aspiring power users.

If you’re still looking to hire someone, the Code Poet Directory still exists, and aspiring Code Poets can still apply to be part of the prestigious directory.

Head over to the new Code Poet, grab a free eBook for the road, and take the quiz right away. How did you do on the quiz, and what do you think of the newly relaunched Code Poet?

30 Unique Logo Designs Inspired by House

2012-05-11T13:01:56Z

Starting a business is a diffucult task on every step.It involves perfect planning and research.You must take care of dozens of things and visual representation is one the most important thing.The first step in visual representation is the logo of your company.You logo design reflects the purpose of your business so a very well-thought logo design can take you one step further in this competitive digital age. In today's post we are showcasing another great logo collection.It's house inspired logo designs.House is being used widely in logo designs especially in real estate business.However,the below examples are designed for almost every kind of business. You may also take a look at our past logo collections;

35 Cleverly Designed Logos You Will Love

Collection of Well Thought and Fresh Logo Designs

52 Creative Examples of Heart Inspired Logo Designs

House Plans

Logo Source

Brand House

Logo Source

Roadhouse

Logo Source

Speak House

Logo Source

Same Houses

Logo Source

Hope House

Logo Source

Ghost House

Logo Source

Happy House

Logo Source

Inside House

Logo Source

Medic House

Logo Source

Media House

Logo Source

The Treehouse

Logo Source

EcoHouseClean

Logo Source

Green House

Logo Source

BookHouse

Logo Source

Paint House

Logo Source

Chemihouse

Logo Source

Fine House

Logo Source

Home and Forest

Logo Source

Ecohome

Logo Source

Bird Home Press

Logo Source

Upstocked

Logo Source

Secure Homes

Logo Source

Jungle Homes

Logo Source

The Property Photography

Logo Source

Home Tutor

Logo Source

Home Repair

Logo Source

Home Music

Logo Source

Transition House

Logo Source

Paperhouse Architects

Logo Source

How to Use Textures in Your Designs the Right Way

2012-05-08T08:30:12Z

Advertise here via BSA

Textures are a wonderful tool to use for all kinds of design. Not only can textures make something look more interesting, they also add a sense of material realism that people can connect to. There are very few materials in the “real world” that do not have some kind of texture to them.

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)

This removes all hue properties, and leaves only luminance (grayscale) properties.

Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. We will get to how to make the edges more affected after we bring the texture over onto our main composition.

First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M)

The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture.

This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.

Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.

The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.

The 5 stages of coping… with user research

2012-04-30T17:07:43Z

It may sound old fashioned, but there are still plenty of companies out there that have never done usability testing. They aren’t all dinosaurs, either – there are plenty of new start-ups popping-up who know they need to “do UX” but don’t know where to start.

If you land one of these as a client, you might find it useful to refer to the “five stages of coping”. Although it was originally created as a model for the grieving process, it actually maps pretty well onto any jarring-change-in-perspective the world demands from you, usability testing included. See if you can recognise any of your clients’ comments below. Your job, of course, is to ease them through to step 5:

1. Denial

“We can ignore that particular participant because they’re not from our target user-base”
“We can ignore this one because they’re an idiot. We don’t want people like that using our site”
“This one’s just a weirdo, an outlier, the next might be better”

2. Anger

“You’re moderating the sessions wrong!”
“You’re asking leading questions!”
“This research isn’t scientific anyway!”
“They can’t be expected to understand business reasons why the design is like that!”
“Who is to blame here?”
The designs were perfect in the wireframes, it’s other-department’s fault!”

3. Bargaining

“Maybe we can solve all of these problems with this one tiny design change here.”
“This is all being completely redesigned in a few months anyway, so we can make do with some interim fixes, right?”

4. Depression

“It’s never going to be perfect.”
“There’s too much political inertia to improve things properly.”
“Whatever designs we produce, they’ll get implemented badly because of our developers / marketing department / that one person I dislike in that other team, so what’s the point?”

5. Acceptance

“It’s going to be okay.”

One word of advice I’d give for running usability testing with this kind of client is to ensure the right kind of person is in the viewing room with them. Many agencies will normally put someone relatively junior in the viewing room to take notes and timestamp events. With a client that’s new to usability testing, I’d recommend having an experienced facilitator in the viewing room. It can get a bit heated as they move through those five stages!

Breaking Out of the UX Status Quo

2012-04-24T13:30:05Z

As a UX Designer you’ve committed your career to helping people. You challenge the status quo everyday…but are you challenging it enough? How about with your deliverables? Your customers are people, too! Are your common deliverables – personas, sitemaps, user-flows and wireframes – really usable or are they just getting in the way?

It’s no secret to us: user experience designers speak their own language. From personas to user journeys, card sorts to wireframes, there’s a certain vernacular to our profession. It’s something that we learn over the years but that our clientele must overcome immediately.

Frustrated with the conventional deliverables used to communicate our work, I began to reconsider their presentation. What resulted is certainly not “conventional,” but – taken together – they are arguably more usable.

Personas are like resumés

Personas come in all shapes and sizes. Contrary to what they’re designed to do, however, rarely do they convey a good sense of the user. Most look like resumés: sterile and lacking in personality.

When was the last time you hired someone based on their resumé alone? Even with a resumé you still need to conduct an interview in order effectively gauge a prospect. Seeing someone and listening to their words reveals their personality – the key element missing from most personas.

So I started a searching for a better way. The first thing I did was move my deliverables online. This allowed me to link them together so that clients could click between them. For desktop projects I use Axure and for mobile and tablet I use Proto.io. Both of them are great tools as they create clickable, HTML-based output.

Next, I searched high and low for inspiration. This persona, created by User Insight, is definitely different. Therein, the user (Tina) does not consist of mere bullet points; she comes off as a real person. Jason Travis’s personas are infinitely more visual. Being picture-based, though, they lack any descriptive text whatsoever.

Inspired by these (plus adding my ideas and style) I tried to put together a new version of the traditional persona.

You can view a demo here.

This approach paints a much more holistic picture of a person. Not only does it include their goals, it includes important, ancillary information such as their worldview, what they are looking for and their motivation. Further, the overheard conversation adds just the right amount of insight into his/her life. The “questions” section helps identify the areas the target user is unsure of and the “life pieces” section makes the persona human-like with feelings and desires.

Sitemaps are like spiderwebs

Sitemaps are (as most of you know) used to “map” the major components of a website to a rather sparse-looking diagram. Because they’re so sparse, they also tend leave a lot to the imagination. This gives rise to common retort: “What’s this page do, again?” “Can you change this page to that?” “How about we scrap that page”

You know the routine. Because clients come to us for the visual thinking they often can’t turn these sparse diagrams into anything “useful” on their own.

This got me thinking: why not just put the thinking alongside the map?

You can view a demo here.

Even though it’s just a small difference, this approach pays off. It helps our clients understand the internal monologue that drives the narrative. Knowing the reasoning behind your decisions helps others understand (and agree) with your perspective.

User journeys are like electric panel diagrams

User journeys map the steps of a user, correlating goals (explained in Personas) with a site map to better illustrate how users will get things done. As a result, designers can make informed suggestions to the site’s information architecture.

The problem is that most user-flows are very dry. It is difficult to feel empathy with a user and their journey if all you see are boxes and arrows (similar to electric panel diagrams).

After scouring the internet looking for something better I found a couple of good approaches.

Jakub Linowski’s Grand Narratives & Play Points diagram offers a compelling yet easy-to–understand presentation based on wireframes.

Blueprint+ (Service Design Visual) is great because it includes the persona and a timeline.

Carlos Abler’s Multiuser WireFlows combines the two former ideas.

All of these are good but they all seemed to be missing something.

I’ve been always fan of recycling, so I thought there has to be a way to re-use the sitemap and display the user-flow on it. I also wanted to re-use my personas in order to create empathy for the user’s journey. This led me to the following presentation:

You can also view a demo here.

As you can see, I simply re-used my sitemap and added one of my persona with speech bubbles. In the speech bubbles I added the thoughts of the persona at every stage of their journey. This adds a human touch. The thoughts of the persona can explain to clients the reasons for the journey taken and the scenario puts these thoughts into context. It is simple but visually understandable way to show your user-flow.

Clients that already understand your sitemaps and personas will have no trouble seeing the two work together.

Prototypes/wireframes are like abandoned houses

Wireframes created in the absence of personas are broken. Yet we do this all the time. Why do we create personas if we don’t use them?

Looking for a better way, I saw a picture in the essay of Rósa Gudjónsdóttir:

I was fascinated by the idea of having my personas around me. I started to print my personas and stick them to the wall in front of me. It helped, however, the screen and the wall are two different worlds, analog and digital. No good.

I eventually placed my personas in the margin of my prototype to serve as a constant reminder of who my users are:

You can also view a demo here.

Not only does this help us to not design for ourselves, our clients and stakeholders are now constantly reminded who will use our design. The time and effort we put into establishing our personas is never lost.

Never stop learning

As I mentioned earlier, these ideas have helped me better convey my work to my clientele. They are not perfect, of course, nor were they intended to be. I am certain that it is possible to tweak them or in fact come up with even better presentations that work for you.

Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward. If you’ve tried your hand at something different, be sure to share your result in the comments below!

Essential Tools for Crowdsourcing Answers to Your Questions

2012-05-08T11:07:12Z

These days, you can ask everyone, anywhere anything, anytime.

Since the advent of the social internet, gone are the days when seeking advice required thorough investigation of forums, IRC channels, and databases. Now, we have the power to ask anyone, anywhere anything, anytime by using crowdsourcing question and answer tools. Crowdsourcing Q&A tools have been around since at least 1999; however, as the socially collaborative internet has evolved, crowdsourcing Q&A sites have become increasingly popular and useful as both new and existing tools have begun granulating into serving specific information niches – in other words, you are going to get more answers from more people who are specifically interested in what you’re trying to find out.

If you’ve thought about using crowdsourcing Q&A tools, don’t hesitate! These tools are powerful communication channels that allow you to use the collective brainpower of people from all different walks life, providing you unique & unexpected insight into your most pressing issues. This guide to crowdsourcing Q&A tools will help you decide which platform will best suit your needs and interests, while connecting you to the right audience for your questions (or answers!)

All Our Ideas

All Our Ideas is a crowdsourcing tool that you can implement as a standalone website to get collaborate feedback, answers to questions, and suggestions from users. All Our Ideas is a beautiful and simple tool (akin to the heavily marketed “Face/Off” web app, from Spigit) that enables groups to collect and prioritize ideas from the bottom up.

All Our Ideas format is elegantly simple and very effective – your question is posted above two ideas going head to head for priorization. This allows users to quickly choose which ideas are most useful. Users can also add their own ideas. The only drawback to All Our Ideas is that it doesn’t have a community that supports it – it’s meant to be used as a tool for polling your existing contacts and collaborators as opposed to presenting your questions and ideas to a large userbase.

Quora

Quora is a crowdsourcing tool to answer your questions. When you post a question to Quora, it creates a page that allows anyone to answer and discuss your question. Due to Quora’s quick growth, many questions have already been asked and answered by people with first hand experience.

Whether you’re a technologist, designer, doctor, economist, screen writer, police officer, or any other profession, Quora aims to be the easiest place for you to connect people to your questions and topics. Quora also offers a feature called “Boards,” which allow you to post anything you would like to share or glean answers about in one central repository. You can follow people’s boards, and add people as contributors to your own boards for collaborative projects.

Stack Exchange

Stack Exchange is an amalgamation of 85 technical and professional crowdsourcing question and answer sites. Stack Exchange differs from most crowdsourced Q&A sites becuase it is a network of individual communities edicated to serving experts in each field as opposed to an open forum. Stack Exchange has grown at a rapid pace since its launch.

Stack Exchange focuses on ratings and rankings for questions – when a question is useful, it’s voted up against other less clean or productive questions. The more votes your question gets, the better answer you get. Stack Exchange isn’t the place for conversation, opinions, or socializing – it’s a place for clear and specifc answers to real problems that you face. Stack Exchange originated from a site called Stack Overflow, a crowdsourced community Q&A site specifically for computer programmers to be able to help each other with technical issues.

LinkedIn Answers

LinkedIn Answers is the professional network’s answer to crowdsourced question and answer exchange. LinkedIn Answers is geared toward a strictly professional crowd, including IT, tech, & business. The nice thing about LinkedIn Answers is that you know that you are dealing with professionals – or at least people who care enough about their professional appearance to have a LinekdIn account.

LinkedIn Answers is also a great way for you to connect with other professionals and gain clout among your network by engaging people with questions and answers to pertinent business, tech, or strategy problems that they face. You can make yourself known on LinkedIn very easily by participating in Answers; when you post a question, it’s posted on the Answers front page, your profile, on the LinkedIn homepage of your connections, and over email. You can also choose to ask questions privately.

Yahoo Answers

Yahoo Answers has been the defacto crowdsourcing tool for average internet users to ask or answer just about any kind of question. While useful, Yahoo answers is clouded with millions of questions and answers on many subjects – and there definitely isn’t the air of professionalism or quality to the answers (or the questions) that you find on other crowdsourcing Q&A sites.

Yahoo Answers has been the butt of many an internet joke as well, due to users posting unbelievable (but probably real) questions, like the one above this sentence.

FormSpring

FormSpring is a social network for asking and answering questions. You can easily follow other users & brands, and ask and answer questions from them. Formspring is geared toward a more mass audience, as opposed to a more niche, professional tool like Quora. With Formspring, you’re much more likely to find “fun” or “entertaining” questions, as well as certain brands and “celebrity” users that people follow.

Formspring also allows you to post what you would like to be asked about – for example, you could say that you wanted to answer questions about crowdsourcing tools for answering questions. Overall, Formspring is a great way to ask general, lifestyle, and entertainment questions to people who use the site, or use the service as a platform to launch questions for your friends on Facebook or Twitter. In the end, Formspring is a neat tool to ask people questions – just don’t expect to get very professional answers.

ChaCha

ChaCha is a very interesting crowdsourcing platform for answering questions – ChaCha is mainly run by advertisers and marketers, which positions ChaCha as a place to connect with brands. However, what makes ChaCha even more interesting is that ChaCha allows the average user to become a “ChaCha Guide,” a paid contractor who gets small sums of money for answering questions. While ChaCha is a great tool to get just about any question answered by a real person (some of the answers are automatically generated – for those that aren’t, that’s when a guide will get your question and respond to you). There is a heavy bias as to what kind of questions get asked on ChaCha, due to their user base (hint: young or bored) – take a look at the top ChaCha questions for the month:

In the end, ChaCha is a very unique service that allows you to quickly find answers to questions, and connect with real people who can help you find answers if the web service is unable to. ChaCha is chock-full of marketers and advertisers – but again, that is the part of the nature of ChaCha – to connect people’s questions to brands.

AnswerBag

AnswerBag is a crowdsourcing site for answering and asking questions that prides itself on neutrality. The cool blue theme of the site and unobtrusive buttons and content lend for a very direct, quick question asking and answering experience across a wide range of topics. Answerbag sits right in the middle of other services like Formspring (entertainment) and Quora (professional / technical). Simplicity is the key to AnswerBag – and it works.

Answerbag provides a great online community to crowdsource answers to your questions, as well as give you an opportunity to answer questions. One of the best things about answer crowdsourcing is that it provides you a direct engagement channel to anyone who answers your questions, or to anyone whos questions you answer – asking and answering questions is actually a great way to promote your brand by being honest and engaging with online communities.

Answers.com

Answers.com isn’t just a tool for crowdsourcing answers, although it accomplishes that very well – it’s also a platform that retrieves answers to your questions from a vast repository of hundreds of respected and trusted editorial reference books. Answers.com is broken down into several sections: Answers.com, the main site, is for asking and answering questions. WikiAnswers is for specific, unique, complex, or social questions, and aims to deliver to the point answers for questions instead of general discussion. ReferenceAnswers is the supply of editorial sources that Answers.com maintains – mainly for who-is or what-is factually related questions.

In addition to the wealth of community and reference resources that Answers.com provides, they also provide access to video answers. Video Answers has over 200,000 videos in 200 categories, making it easy to find instructional and informative videos about questions you have.

LockerGnome.net

LockerGnome.net is a crowdsourced community question and answer platform specific to the IT / Tech industry. Lockergnome focuses on commenting and voting to bring questions to the top – the more votes and comments, the more visible the question is. Lockergnome is moderated by its users – moderation rights are gradually assigned to members based on their “reputation.” Users gain points and authority to moderate and modify questions based on how much they participate.

Amazon Askville

Amazon Askville is a crowdsourced Q&A platform from Amazon. There isn’t anything particularly special about it, and it’s been flying under the rader since 2006. But, it’s still a full featured Q&A tool that recieves regular submissions (every minute, even.)

Conclusion

Crowdsourcing answers to your questions & answering questions from the crowd is an extremely effective way to gain insights, advice, and new strategies & techniques. Crowdsourcing answers allows you to engage with like minded individuals in your field – whether they be industry professional, business contacts, sales leads, or just the general public – and use their brainpower to your advantage. In addition to the advantages that you personally glean from having crowds answer your questions, you gain clout and recognition by providing your own expertise in answering questions.

In the end, crowdsourcing answers is a great way to connect with new minds, glean new insights, and promote yourself with your own knowledge and skills. No matter what questions you have or knowledge you want to share, there is a platform for you that will allow you to use the power of crowdsourcing to engage people of all walks of life in a highly conversational and interactive way.

QuickValidate: Building a jQuery Validation Plugin

2012-05-09T11:00:39Z

Oh forms! For the most part, forms look ugly, old and inconsistent across browsers, but they play one of the most important roles on the web; user input.

User input is everywhere, from contact forms to sign-up forms and from surveys to complex user interfaces. Forms come in many shapes and sizes, colors and styles, but they all have something in common; validation.

Demo Download

The Validation Process

The validation process can occur in the back-end or in the front-end, using PHP or JavaScript respectively, but most of the time, both the server and the browser will be involved in order to create a robust and secure solution.

HTML5 brings many validation filters to the table and it works pretty well, but only on supported browsers, which means, no IE8 or less. The old fashion way, using PHP exclusively, will offer support for IE, but it's not up to current web standards, where the user expects validation to be processed on the same page, which is also much better in terms of usability. This is where JavaScript comes in handy.

These are some of the most common concepts of input validation in the front-end:

Prompt a list of errors when the user submits the form providing a description for each and every field that failed to validate.
Display a description next to the field(s) that failed to validate when the user submits the form.
Live validation. Validate as the user types or when the field looses focus displaying a description next to the field that fails validation.

The first and second examples are probably the most commonly used patterns to validate forms in the browser. The third option is less popular but it has that extra “feature” that makes it a bit more usable and predictable providing a better experience to the end-user.

Regular Expressions

Regular expressions are essential to the validation process. Each input has to match a set of rules or filters in order to determine if its value is valid or not. We'll be using regular expressions often in this tutorial.

Regular expressions are easier and more powerful than they seem. Think of them as a unique and independent micro-language that it's embedded in almost any other programming language in the world.

The best tutorial you can probably find on how to use regular expressions is regular-expressions.info. It's a language agnostic resource on best practices and common uses of regular expressions that goes into every important detail providing easy to follow examples.

You can also use this quick JavaScript RegExp Reference.

In JavaScript you can create a regular expression in two ways.

Literal notation: /regularexpression/
As a RegExp object: var regex = new RegExp('regularexpression')

It's important that you understand the basics of regular expressions to follow this tutorial. Feel free to refer to those websites whenever you encounter something that you don't quite understand or that you think needs some more explanation.

What You Need to Get Started

We're going to build a small jQuery validation plugin based on the third concept mentioned in "The validation process".

This tutorial assumes that you have experience in HTML and CSS as well as some knowledge of JavaScript and jQuery.

Before we start, prepare a basic HTML template and load the latest jQuery library, an empty plugin.js, the normalize.css reset and a separate CSS stylesheet.

You can also use jsfiddle as a starting point.

Building the Form

Let's build the basic markup and styles of the form. I'm not going into too much detail since this is a more JavaScript oriented tutorial.

<form id="my-form">
    <p><label>Name <span>*</span>:</label><input type="text" class="required name"/></p>
    <p><label>Password <span>*</span>:</label><input type="password" class="required pass"/></p>
    <p><label>E-Mail:</label><input type="text" class="email"/></p>
    <p><label>Phone:</label><input type="text" class="phone" placeholder="999-999-9999"/></p>
    <!-- Empty label to align button to the rest of elements –->
    <p><label>&nbsp;</label><button type="submit">Submit</button></p>
</form>

We use classes to specify the filters we want to link to each input. You can name these filters whatever you want as long as you're consistent. We'll be using these class names in JavaScript to evaluate each field against a regular expression as we type.

Let's style the form with CSS. If you're using your own project template, make sure to load the normalize.css reset, otherwise it might look different.

#my-form p {
    float: left; /* so it doesn't span 100% width */
    clear: both; /* so every input is in a new line */
    position: relative; /* to be able to position other elements */
    margin: .5em 0;
}
#my-form label,
#my-form input { display: inline-block; }
#my-form label { width: 100px; } /* depends on the length of your labels */
#my-form label span { color: red; } /* required star */
#my-form input {
    padding: 0 .3em;
    height: 24px;
    line-height: 24px; /* for IE */
    width: 200px;
    border: 1px solid #ccc;
}

At this stage, the form should look like this:

Building the Plugin

It's important to think about how do we want to use this plugin, or how will the user make use of it. The most obvious way is to be able to call the plugin like this:

$('#my-form').quickValidate();

With that in mind we can begin building our plugin using a common jQuery plugin template as a base.

Open your plugin.js if you're working locally. If you're working with jsfiddle use the JavaScript panel and make sure the latest jQuery is loaded in the framework dropdown menu.

(function($){
    $.fn.quickValidate = function () {

        // Cache variables
        var $form = this;

        // Only text and password fields will be processed
        var $inputs = $form.find('input:text, input:password');

        // Plugin code here

        // Allow jQuery to chain stuff to our plugin
        return this;
    };
})(jQuery);

The plugin will be divided in four parts so it's easier to follow and understand how it works:

Filters
Validation
Error handling
Events

We'll be putting everything that follows within the "Plugin code here" area.

Filters

We need to create a reference and store all the filters that we previously set as classes in our HTML. The most organized way of doing this is by using an object literal. We'll use the class name as the filter name or key, and each key will contain a regular expression and an error message linked to it.

The required filter is the only one that doesn't belong here. It's a really simple filter that doesn't need a regular expression. We'll go into more detail later on.

var filters = {
    name : {
        regex : /^[A-Za-z]{3,}$/,
        error : 'Must be at least 3 characters long, and must only contain letters.'
    },
    pass : {
        regex : /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
        error : 'Must be at least 6 characters long, and contain at least one number, one uppercase and one lowercase letter.'
    },
    email : {
        regex : /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
        error : 'Must be a valid e-mail address (user@gmail.com)'
    },
    phone : {
        regex : /^[2-9]\d{2}-\d{3}-\d{4}$/,
        error : 'Must be a valid US phone number (999-999-9999)'
    }
};

Using a structure like this is future proof. Adding new filters is as easy and fast as it can get. Now, take a moment to analyze the regular expressions you just wrote. Let's take the very first regex as a simple example and break it down:

^[A-Za-z]{3,}$

^: matches a string that starts with
[A-Za-z]: an uppercase or lowercase letter
{3,}: at least 3 or more times
$: and ends. (not allowing any other characters but letters)

You can find most common regular expressions on Google, like e-mail, telephone, password, etc, but it's crucial to understand how they work. You can use the resources from "Regular expressions" to guide you.

Validation

This is the core of our plugin. The validate() function or method will evaluate all classes of a given input and it will test its value against the filter that matches the class. It's important to note that an input can have many classes, not only the ones related to our plugin but our plugin will only read two main classes; the required class and one of the filters from the filter object.

The validate() method takes two arguments, klass and value. The class will be a string containing all the classes of the given input, and the value, well, it's the value of the input which we'll test against the matching filter.

To build this function we're going to use the popular JavaScript module pattern. Let's break it down and comment out the important parts:

var validate = function (klass, value) {

    // Initial values of the public variables
    var isValid = true,
        error = '';

    // If the field is empty
    // and it has the `required` filter...
    if (!value && /required/.test(klass)) {
        error = 'This field is required';
        isValid = false;

    // If the field is not empty...
    } else {

        // Loop through all filters
        for (var f in filters) {

            // Create a new regex with the filter name
            var regex = new RegExp(f);

            // If the the current filter
            // in this iteration matches
            // a class...
            if (regex.test(klass)) {

                // If the value doesn't match the
                // regex of the current filter
                if (value && !filters[f].regex.test(value)) {
                    error = filters[f].error;
                    isValid = false;
                }

                // Exit the loop as soon as we find
                // a filter that matches a class
                break;
            }
        }
    }

    // Return public variables
    return {
        isValid : isValid,
        error : error
    }
};

Error Handling

When we run the validate() method with some parameters, it will return the isValid variable as well as an error if the value failed to validate. The error is just a string assigned to a variable, but we want to create an HTML tag so we can style it with CSS and integrate it in our form.

When the value of an input doesn't validate we want to highlight the field and show and icon that indicates something is wrong. When the user hovers over the information icon, an error popup will appear next to it with a brief description on what's going on and/or how to fix it.

Now, let's go back to our HTML and add some temporary markup to just the first field. This markup will be dynamically generated for every field with jQuery in the error handling function so we use this merely as a template for now, so we can style it with CSS.

<p><label>Name <span>*</span>:</label><input type="text" class="required name invalid"/><i class="error-icon"></i><span class=”error”>This is an error</span></p>

We've just added an invalid class to the input, an icon < i class="error-icon" > and a < span class="error" > which will contain the error message. Again, this will be added dynamically with jQuery.

Let's style those new elements in CSS to look like the image above:

/* Error highlight */
#my-form input.invalid {
    background: #FFFAC4;
}

#my-form .error-icon {
    position: absolute;
    top: 0;
    right: -32px;
    height: 24px;
    width: 24px;
    background: url(http://i43.tinypic.com/dbsh3m.png) no-repeat;
    cursor: pointer;
}

/* Error description */
#my-form .error {
    display: none;
    position: absolute;
    top: 10px;
    right: -195px;
    z-index: 999;
    padding: 10px;
    width: 120px;
    font-size: 12px;
    background: #222;
    color: white;
}

/* Popup arrow */
#my-form .error:after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent #222 transparent transparent;
}

The icon used in this tutorial can be downloaded for free at Iconfinder.

Now that the styles are all set, you can remove that markup from the HTML and revert to the original code. Next, we have to create that markup with jQuery.

The printError() method takes an $input jQuery object as parameter and creates the necessary HTML markup. It uses the validate() method to test if the given input validates or not. Then it prints the error and icon accordingly.

var printError = function($input) {
    // Cache variables
    var klass = $input.attr('class'),
        value = $input.val(),

        // Run the `validate()` method and store
        // it's returned values in a variable `test`
        test = validate(klass, value),

        // Create markup for the error and icon
        $error = $('<span class="error">' + test.error + '</span>'),
        $icon = $('<i class="error-icon"></i>');

    // Reset:
    // Remove the current markup
    // and `invalid` class if found
    $input.removeClass('invalid').siblings('.error, .error-icon').remove();

    // If the input fails to validate...
    if (!test.isValid) {
        $input.addClass('invalid');

        // Insert error and icon
        $error.add($icon).insertAfter($input);

        // Show the error when hovering the icon
        $icon.hover(function() {
            $(this).siblings('.error').toggle();
        });
    }
};

Events

We need to make sure that the required fields are invalid when the plugin loads. Then we'll bind the events to our inputs and form.

// Initialize:
// Go through every input and
// check if it has a required class
// If it does, run the `printError()`
// method on that input
$inputs.each(function() {
    if ($(this).is('.required')) {
        printError($(this));
    }
});

// Run the `printError()` method
// everytime we press a key in an input
$inputs.keyup(function() {
    printError($(this));
});

// Make sure that no invalid inputs
// are found when we submit the form
// Otherwise stop the form from submitting
// and prompt an error
$form.submit(function(e) {
    if ($form.find('input.invalid').length) {
        e.preventDefault();

        // The `alert()` is the simplest example
        // but you can really do whatever you want
        alert('The form does not validate! Check again...');
    }
});

The Final Step

Finally, call the plugin on your form:

$('#my-form').quickValidate();

Conclusion

QuickValidate brings easy to use validation in an unobtrusive small plugin with improved usability and very easy extensibility.

This plugin is GPL licensed and it's been tested in IE8+, Webkit and Firefox.

Download QuickValidate at github.

Check out the final result an fiddle with it at jsfiddle.net.

7 Non-Web-Based Wireframe Tools

2012-05-11T11:15:41Z

Wireframes are a simple yet effective way to plan and prototype the layout of a website before writing any code. They help structure ideas and test assumptions, and are great for facilitating early feedback from clients. That's why, over the past few years, wireframing has become an integral part of web design and web development. Therefore, the question is not whether to create wireframes, but rather how.

Although there are dozens of web-based wireframe tools available, I prefer to do my wireframing in a native desktop application for the following reasons:

I can work offline at places with poor or no internet connection, e.g. when riding the train or a plane.
I am not dependent on someone else to take good care of their servers.
I prefer to pay a one-time fee instead of monthly subscription charges.
I have the freedom of knowing that I can continue using the tool even if its vendor goes out of business tomorrow.

In this article, I will introduce you to seven desktop-based wireframing tools for Windows, Mac OS X or Linux.

Non-Web-Based Wireframe Tools

WireframeSketcher
WireframeSketcher can be installed as a plug-in for any Eclipse-based IDE and is also available as a standalone application for Windows, Mac OS X and Linux. It lets you choose between two different styles for the look of your wireframes: Sketch (to make wireframes appear hand-drawn) and Clean (with crisp, straight lines). Other major features include the ability to create interactive prototypes and the possibility to present wireframes as storyboards.

WireframeSketcher can be tested for 14 days without restrictions; afterward, you have to pay $99 for a single-user license.

PowerMockup
PowerMockup is an add-on for turning Microsoft PowerPoint into a wireframe tool. It provides a library of wireframe elements and icons that you can drag and drop onto a PowerPoint slide. You can also create your own elements using standard PowerPoint shapes and add them to the library.

PowerMockup works with PowerPoint 2007 and 2010 (Windows only) and can be tested as a trial version free of charge. The full version is priced at $39.95.

SketchFlow
Another wireframing solution for Windows only is SketchFlow, a UI prototyping tool provided by Microsoft as part of its Expression Studio suite. While SketchFlow is a little complicated to use and has a rather steep learning curve, it is extremely powerful when it comes to creating interactive prototypes that simulate real functionality. You can bind controls to data sources or even make use of the .NET Framework for adding application behavior.

Expression Studio 4 Ultimate, which includes SketchFlow, costs $599. A 60-day free trial version can be downloaded from the Microsoft website.

Axure RP
Axure RP is one of the oldest and most comprehensive prototyping solutions available. It supports the whole chain from drawing quick wireframe sketches to creating interactive, high-fidelity design prototypes and generating detailed specifications.

Axure RP is available for Windows and Max OS X. To try it out, you can download a 30-day trial version from the Axure RP website. A single-user license for Axure RP costs $589.

Pencil
Among the seven tools listed in this article, Pencil is the only one that's completely free and Open Source. It can be installed as a Firefox add-on or as a standalone application for Windows, Mac OS X or Linux. Pencil is easy to use, includes a large set of stencils, supports linking between pages, can export to various formats, and allows you to create your own personal collection of stencils.

As mentioned before, Pencil is free (released under GPL version 2). Don't hesitate to give it a try.

MockupScreens
By default, MockupScreens uses a Windows XP style for the screen prototypes that you create. This makes them look a bit outdated at first, but you can easily switch to a different skin via a drop-down menu in the toolbar. Compared to other wireframing tools, MockupScreens provides a relatively small number of basic user interface elements and icons. Two great features of this tool are its ability to annotate individual elements and the possibility to group and arrange screens in scenarios.

MockupScreens is available for both Windows and Mac OS X. The price for the full version is $99.95.

DesignerVista
DesignerVista allows you to create both low-fidelity wireframes and high-fidelity GUI mockups. It supports page templates and themes, can export to HTML and PDF, has a slide show feature, and is able to generate UI specification documents.

DesignerVista runs on Windows XP or higher and is priced at $79.99 per license. A free 20-day trial version is available for download at the DesignerVista website.

Conclusion

Although some of these wireframe tools may seem costly, online tools can cost around $60 per month, so in the long run, offline tools can save you money and they are far more convenient.

Do you use an offline or web-based wireframe tool? Which is your choice? Please share your comments with us in the section below.

21 Beautiful Examples of Typography in Web Design

2012-04-30T04:31:41Z

Advertise here with BSA

Here at WDL we love typography and we never get tired of gathering good typography inspiration for our readers. From free fonts to type usage in signs and typography videos, we like to give you as many resources as we can on everything surrounding type. Today we decided to gather some examples of beautiful typography usage in web design. We will show you examples here where typography is the main focus, and examples where typography complements the design. Check it out and let us know what do you think.

Bones Brigade DJs

Fifty Three

Fifty Three – Paper

Eynsford Music Festival

Modo Luce

Denise Chandler

Ineo DesignLab

Oliver Russell

Whiteboard

Asics – Stop at Never

Beyonce

Ok Studios

Andy German

MyEnergy

More Mobile Relations

Nature Valley

The New Kinvara 3

QC Merge

Lifetree Creative

Hugo Socié

Elaine Fisher

The Best Designs
Awwwards
CSS Design Awards

20 Simple, Yet Clever Logos

2012-05-02T12:08:37Z

Advertise here with BSA

When it comes to design, things don’t have to be complicated in order to be effective. Although, it can be tempting to over design and try to work in lots of detail, it’s not always the best way. This is especially true when it comes to logo design. Usually, the best are the ones that do more with less. Here is a collection of very inspiring logos that take this approach, and rely on cleverness rather than eye candy.

20 Inspiring Examples of Big Backgrounds in Web Design

2012-05-07T04:24:52Z

Advertise here with BSA

One way to easily define the tone and mood of a website is to use a big background image. However, when doing this, you need to consider that big images often have a lot going on, so it’s important to take a minmal approach with other aspects of the design. Not doing so could result in a website that is far too busy, cluttered, and difficult to navigate. So for your inspiration, here are 20 examples of how to effectively use big background images in web design.

Uber – Portfolio WordPress Theme

Whitmans New York

Studio Octopi

Von Dutch

Hiu Denim Co

Casey Britt

Range Rover Evoque

The Amazing Spider-Man

Suit up or Die Magazine

H-Art

My Own Bike

Tim Roussilhe

Tag Interativa

Stephan Rizon

Jalbert Productions International

8 Bis

Mecenat Musical

Marcus Thomas LLC

Mendo

Project Birdman

The Best Designs
Awwwards
CSS Design Awards

20 Fresh CSS3 Tutorials

2012-05-10T04:27:58Z

Advertise here with BSA

The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer.

In this post today, I would like to share with you some amazing and beautiful CSS3 tutorials for creating various web design elements and interactions. Use this collection to learn something new and be prepared for the near future of the web.

Code Clarity's Web & Tech Shared Articles

Google Chrome Becomes the World’s Favorite Web Browser

Understanding the Lingo: Typography Glossary

Commonly-used letter terminology

Jargon terms

Fonts

Spacing and lines

Specialty lettering

Conclusion

How to Create a Fast Hover Slideshow with CSS3

Annotation Overlay Effect with CSS3

The Markup

The CSS

Four Design Lessons From Shopping Carts

Revisions Are Key

Determine Your Selling Points

Know Your Audience

Never Stop Innovating

What Do You Think?

You may also like…

Retina.js – Retina graphics for your website

Ajaxify Standard Forms Instantly – ALAJAX

Learn How to Quickly Create Tasty Social Icons using Photoshop

Step 1: Setting up the Document

Step 2: Working on the Base Shape

Step 3: Adding Pattern

Step 4: Adding Highlights

Step 5: Adding Stitches

Step 6: Adding Icon

Step 7: Adding Shadows

Code Poet v2: More than Just a Directory

30 Unique Logo Designs Inspired by House

House Plans

Brand House

Roadhouse

Speak House

Same Houses

Hope House

Ghost House

Happy House

Inside House

Medic House

Media House

The Treehouse

EcoHouseClean

Green House

BookHouse

Paint House

Chemihouse

Fine House

Home and Forest

Ecohome

Bird Home Press

Upstocked

Secure Homes

Jungle Homes

The Property Photography

Home Tutor

Home Repair

Home Music

Transition House

Paperhouse Architects

How to Use Textures in Your Designs the Right Way

Other tips:

The 5 stages of coping… with user research

Breaking Out of the UX Status Quo

Personas are like resumés

Sitemaps are like spiderwebs

User journeys are like electric panel diagrams

Prototypes/wireframes are like abandoned houses

Never stop learning

Essential Tools for Crowdsourcing Answers to Your Questions

Recommended Reading

Conclusion

QuickValidate: Building a jQuery Validation Plugin

The Validation Process

Regular Expressions

What You Need to Get Started

Building the Form

Building the Plugin