Tuesday, August 31, 2010
(Almost) never add a reset button to a form
There was a time when many, many, forms on the web had a reset button. Thankfully, reset buttons are not quite as common these days, but there are enough of them out there to cause users lots of frustration.
I can’t remember one single time in my years of building web sites that I have encountered a form that actually needed a reset button. That doesn’t mean that there are no valid use cases for reset buttons, but I think it does indicate how rarely they should be used.One of the very few valid use cases for rest buttons is when a form is filled out repeatedly and frequently by the same user.
When you click a reset button in a form, all controls in the form are reset to their initial values, removing anything you have entered and any changes you have made. This is rarely what the user wants, and it can happen much too easily since
- reset buttons are often placed next to a submit button, making them easy to click by mistake
- most of the time, no warning is given before the form is reset
Source - http://www.456bereastreet.com/archive/200909/almost_never_add_a_reset_button_to_a_form/
Sunday, August 29, 2010
jQuery target attribute instead of javascript window.open
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery target attribute instead javascript window.open</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a.new-window").append(' <em>(new window)</em>').attr('target', '_blank');
});
</script>
</head>
<body>
<a class="new-window" href="http://www.google.co.in">Google in new window</a>
<br />
<a href="http://www.in.msn.com">MSN in same window</a>
</body>
</html>
For better explanation visit to - http://www.456bereastreet.com/archive/201006/new_windows_with_javascript_and_the_target_attribute/
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery target attribute instead javascript window.open</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a.new-window").append(' <em>(new window)</em>').attr('target', '_blank');
});
</script>
</head>
<body>
<a class="new-window" href="http://www.google.co.in">Google in new window</a>
<br />
<a href="http://www.in.msn.com">MSN in same window</a>
</body>
</html>
For better explanation visit to - http://www.456bereastreet.com/archive/201006/new_windows_with_javascript_and_the_target_attribute/
Friday, August 20, 2010
Elements of design
Design is the organized arrangement of one or more elements and principles (e.g. line color or texture) for a purpose.
Design elements are the basic units of a visual image. These elements include:
Space
Space is the area provided for a particular purpose. It may have two dimensions (length and width), such as a floor, or it may have three dimensions (length, width, and height). Space includes the background, foreground and middle ground. Space refers to the distances or areas around, between or within components of a piece. There are two type of space: positive and negative space. Positive space refers to the space of a shape representing the subject matter. Negative space refers to the space around and between the subject matter.
Line
Line is the basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a house's plan. Every line has length, thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy, parallel, dash, and dotted lines.
Balance
Balance can be either symmetrical or asymmetrical. Balance also refers to a sense that dominant focal points don't give a feeling of being pulled too much to any specific part of the artwork. Balance can be achieved by the location of objects, volume or sizes of objects, and by color. It can also be achieved by balancing lighter colors with darker colors, or bold colors with light neutral colors.
Color
Color is seen either by the way light reflects off a surface, or in colored light sources. Red colors seem to come forward while blue seems to recede into the distance. Color and particularly contrasting color is also used to draw the attention to a particular part of the image. There are primary colors, secondary colors, and tertiary colors. Complementary colors are colors that are opposite to each other on the color wheel. Complementary colors are used to create contrast. Analogous colors are colors that are found side by side on the color wheel. These can be used to create color harmony. Monochromatic colors are tints and shades of one color. Warm colors are a group of colors that consist of reds, yellows, and oranges. Cool colors are group of colors that consist of purples, greens, and blues.
Shape
A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture. Shapes can also show perspective by overlapping. They can be geometric or organic. Shapes in house decor and interior design can be used to add interest, style, theme to a design like a door. Shape in interior design depends on the function of the object like a kitchen cabinet door. Natural shapes forming patterns on wood or stone may help increase visual appeal in interior design. In a landscape, natural shapes, such as trees contrast with geometric such as houses.
Texture
Texture is perceived surface quality. In art, there are two types of texture: tactile and implied. Tactile texture (real texture) is the way the surface of an object actual feels. Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc. Implied texture is the way the surface on an object looks like it feels. The texture may look rough, fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when drawing or painting.
Form
Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark. There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.
Value
Value is an element of art that refers to the relationship between light and dark on a surface or object and also helps with Form. It gives objects depth and perception. Value is also referred to as tone.
Source - http://en.wikipedia.org/wiki/Design_principles_and_elements
Design elements are the basic units of a visual image. These elements include:
Space
Space is the area provided for a particular purpose. It may have two dimensions (length and width), such as a floor, or it may have three dimensions (length, width, and height). Space includes the background, foreground and middle ground. Space refers to the distances or areas around, between or within components of a piece. There are two type of space: positive and negative space. Positive space refers to the space of a shape representing the subject matter. Negative space refers to the space around and between the subject matter.
Line
Line is the basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a house's plan. Every line has length, thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy, parallel, dash, and dotted lines.
Balance
Balance can be either symmetrical or asymmetrical. Balance also refers to a sense that dominant focal points don't give a feeling of being pulled too much to any specific part of the artwork. Balance can be achieved by the location of objects, volume or sizes of objects, and by color. It can also be achieved by balancing lighter colors with darker colors, or bold colors with light neutral colors.
Color
Color is seen either by the way light reflects off a surface, or in colored light sources. Red colors seem to come forward while blue seems to recede into the distance. Color and particularly contrasting color is also used to draw the attention to a particular part of the image. There are primary colors, secondary colors, and tertiary colors. Complementary colors are colors that are opposite to each other on the color wheel. Complementary colors are used to create contrast. Analogous colors are colors that are found side by side on the color wheel. These can be used to create color harmony. Monochromatic colors are tints and shades of one color. Warm colors are a group of colors that consist of reds, yellows, and oranges. Cool colors are group of colors that consist of purples, greens, and blues.
Shape
A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture. Shapes can also show perspective by overlapping. They can be geometric or organic. Shapes in house decor and interior design can be used to add interest, style, theme to a design like a door. Shape in interior design depends on the function of the object like a kitchen cabinet door. Natural shapes forming patterns on wood or stone may help increase visual appeal in interior design. In a landscape, natural shapes, such as trees contrast with geometric such as houses.
Texture
Texture is perceived surface quality. In art, there are two types of texture: tactile and implied. Tactile texture (real texture) is the way the surface of an object actual feels. Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc. Implied texture is the way the surface on an object looks like it feels. The texture may look rough, fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when drawing or painting.
Form
Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark. There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.
Value
Value is an element of art that refers to the relationship between light and dark on a surface or object and also helps with Form. It gives objects depth and perception. Value is also referred to as tone.
Source - http://en.wikipedia.org/wiki/Design_principles_and_elements
Wednesday, August 18, 2010
The best markup(HTML) for web forms
While HTML-izing forms web developers/designers usually prefer to go with 'table' structure and if the client insists for 'div' structure we have no another option than creating a 'sea of div' tags with float:left and float:right attributes.
Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -
<style type="text/css">
.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}
</style>
<div class="signup">
<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>
</div>
Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -
<style type="text/css">
.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}
</style>
<div class="signup">
<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>
</div>
Tuesday, August 17, 2010
CSS3: Multi-column layout
Using CSS3 for Multi-column layout is the way to go for the web developers, though IE7 and IE8 don't support this CSS attribute. We can always create a separate CSS file for IE7 and IE8, where we can define a columned inline bock level CSS for these two IE versions. It would be a great beginning if we start using CSS3 from now on.
<style type="text/css">
div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
</style>
<div id="multicolumn1">
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.
</div>
<style type="text/css">
div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
</style>
<div id="multicolumn1">
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.
Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.
</div>
CSS3: Gradient Background Color
Okay... if you need to use an image anyway, why bother with declaring the gradient with CSS?
That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.
<style type="text/css">
/*Horizontal Gradient Background*/
#linearBg1 {
height: 100px;
width: 760px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;
background-image: url(linear_bg_1.png);
}
/*Vertical Gradient Background*/
#linearBg2 {
height: 100px;
width: 760px;
background-color: #1a82f7; /* fallback color */;
background-image: url(linear_bg_2.png); /* fallback image */;
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
</style>
That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.
<style type="text/css">
/*Horizontal Gradient Background*/
#linearBg1 {
height: 100px;
width: 760px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;
background-image: url(linear_bg_1.png);
}
/*Vertical Gradient Background*/
#linearBg2 {
height: 100px;
width: 760px;
background-color: #1a82f7; /* fallback color */;
background-image: url(linear_bg_2.png); /* fallback image */;
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
</style>
Friday, August 6, 2010
Using CSS3 @font-face; it's great!
EOT(Embedded OpenType)
IE supports EOT format(Including IE9)
OTF = IE9 will support PostScript-flavored OTF CFF fonts, as do the rest of the “big five” browsers.
So, it would be a good thing to convert TTF(TrueType Format) to OTF(OpenType Format)
Online Font Converter = http://onlinefontconverter.com/ (Skip Login)
Here is how we can use it -
<style type="text/css">
@font-face{ /* for IE */
font-family:Angelina;
src:url(angelina.eot);
}
@font-face { /* for non-IE */
font-family:Angelina;
src:url(angelina.ttf) format("truetype");
/*url(http://:/) format("No-IE-404"),url(angelina.ttf) format("truetype");*/
}
body {
font-family: "Angelina", Arial, Helvetica, sans-serif;
font-size: 2em;
}
</style>
For more information about font format support in different browsers, refer these links -
Links to refer -
http://code.google.com/webfonts
http://openfontlibrary.org
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
IE supports EOT format(Including IE9)
OTF = IE9 will support PostScript-flavored OTF CFF fonts, as do the rest of the “big five” browsers.
So, it would be a good thing to convert TTF(TrueType Format) to OTF(OpenType Format)
Online Font Converter = http://onlinefontconverter.com/ (Skip Login)
Here is how we can use it -
<style type="text/css">
@font-face{ /* for IE */
font-family:Angelina;
src:url(angelina.eot);
}
@font-face { /* for non-IE */
font-family:Angelina;
src:url(angelina.ttf) format("truetype");
/*url(http://:/) format("No-IE-404"),url(angelina.ttf) format("truetype");*/
}
body {
font-family: "Angelina", Arial, Helvetica, sans-serif;
font-size: 2em;
}
</style>
For more information about font format support in different browsers, refer these links -
Links to refer -
http://code.google.com/webfonts
http://openfontlibrary.org
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
Thursday, August 5, 2010
Are You Adding CAPTCHA To A Form?
If you are adding CAPTCHA to a form, it would be a good usability aspect, if we make the text field(Not Case Sensitive) and put small note below the text box which says “Note: Type the characters shown in the image above (not case sensitive).”
Specifying not case sensitive is important because many people try to type the characters as it appears in the image and they fail. Most of the times it’s difficult to identify if the character is Capital or Small.
It’s only a better user experience practice.
Specifying not case sensitive is important because many people try to type the characters as it appears in the image and they fail. Most of the times it’s difficult to identify if the character is Capital or Small.
It’s only a better user experience practice.
Wednesday, August 4, 2010
Subscribe to:
Posts (Atom)