Pro Drupal 7 Development
Showing posts with label Design Issues. Show all posts
Showing posts with label Design Issues. Show all posts
Thursday, January 20, 2011
Call To Action Buttons and the Psychology of Color
By combining scientific studies on color with some design principles, you can create a great call-to-action button for your website and improve its conversion rate drastically.
A CTA-button has 4 important tools to achieve this: placement, shape (and size),message and color. In this article I will talk about the aspect of color.
A CTA-button has 4 important tools to achieve this: placement, shape (and size),message and color. In this article I will talk about the aspect of color.
But first things first…
Just imagine that your website is a flow of actions which users have to follow in order to find whatever they were looking for. To make things easy for them, it’s absolutely necessary to design this flow as smooth as possible (meaning user friendly) and that you guide them to the desired page without any interference.
Because some of these actions are more important than others, they’ll have to stand out from the rest of the interface. You want to grab the user’s attention, trying to persuade them to take action (call to action). These actions are mostly made with the help of a visual marker, the call-to-action button. Some examples of possible actions: buying a product, subscribing to a newsletter, setting up a new account, submitting a form, downloading the latest version of a sofware package, …
But why are colors so important?
Psychology of color
Every color evokes a different feeling or mood with people and therefore result in a different reaction when seeing the color. Doctors and nurses wear white, which is a sign of sterility. Gym rooms are often painted blue because studies have shown that weightlifters are able to handle heavier weights in blue gym rooms.
As you can see, colors are a very powerful tool in encouriging or blocking certain feelings. This means you can somewhat guide your users through your interface by letting them make the choices you want them to make by using the correct colors and colorcombinations. But don’t start to collect color schemes just yet. There are still one or two things you need to know.
While the perception of a color is subjective, some coloreffects have a more universal meaning. Example: blue is a cold color, red is a warm color.
A second thing is that the perception of color is culture based. Let’s take black (which is scientificlly not a color) as an example. While black is associated with death and mourning in many cultures, it also represents life and rebirth in ancient Egypt.
Susan Weinschenk, Ph.D. in Psychology and author of Neuro Web Design: What Makes Them Click? (Voices That Matter), wrote an interesting piece about it.
Don’t forget to watch the McCandless Color Wheel, which you can download at the bottom of her webpage.
Don’t forget to watch the McCandless Color Wheel, which you can download at the bottom of her webpage.
Kissmetrics made a great infographic on how colors affect purchases.
A bit of color theory
As I will explain you later on, it’s best to use a good contrast when designing your important buttons. When speaking of contrasting colors I actually refer to complementary colors. Complementary colors are colors which are on the opposite of one another on the color wheel (see image below). When placed next to each other, complements make each other appear brighter.
The Resumator (see image below) used a nice looking red CTA-button for a signup-action on a blue background but a blue colored version of the button for the less important actions.
nother example of complementary colors is the use of scrubs worn by doctors while working in the operating room. In most cases the uniform is green or blue. These two colors refreshes the doctor’s vision of red things, or the bloody innards of the patient, making it more clearly to see small nuances of the human body. Red and green are complementary colors.
So what color should I choose for my button?
As I told you in the beginning of this article, a call-to-action button is a collection of 4 things: placement, shape, the message and color. If these 4 aspects are in line with each other, you’ll have a great call-to-action button.
Baring this in mind, you need to know that we have some general design principles and guidelines. If you want a design element to stick out, you can give it the complementary color of the backgroundcolor (think about the example I used of The Resumator).
Little hint: for large buttons, choose a color that is less prominent (relative to surrounding elements and the background) and for smaller buttons you may want to choose a brighter color. But whatever color you may choose, make sure you design the button in such a way that it is noticible without interfering with the overall design.
Little hint: for large buttons, choose a color that is less prominent (relative to surrounding elements and the background) and for smaller buttons you may want to choose a brighter color. But whatever color you may choose, make sure you design the button in such a way that it is noticible without interfering with the overall design.
Although this article is based on scientific research regarding color psychology and some design principles, you should always test your call-to-action buttons to see what works best for your website. You can easily do this with A/B or Multivariate testing or you can follow these 5 quick tips to improve your website’s usability
.
.One of the many examples you can find on the internet is a casy study done by Maxymiser, which clearly demonstrates the power of color in call-to-action buttons. They achieved an increase of 11% in clicks to the checkout area of the Laura Ashley website, by testing colorvariations and different messages. Check out the case studyyourself.
Also, think about the people who are colorblind. Ux Movement published a great article about it.
Solution for Copy to clipboard only works in IE, does not work in FF
Copy to clipboard only works in IE, does not work in FF.
Zero Clipboard
The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash
Adobe Flash Pro CS5 Student & Teacher Edition) movie, and a JavaScript (JavaScript: The Good Parts
) interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.
This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.
See the Instructions Wiki for instructions on how to use the library on your site.Blogs, Wikis, Podcasts, and Other Powerful Web Tools for Classrooms
Here is a working Test Page where you can try out ZeroClipboard in your browser.
Here is another test page showing how you can use the same ZeroClipboard object to handle multiple elements of the same size. (jQuery is also used in this example.)
Download Link :zeroclipboard-1.3.2.zip
Zero Clipboard
The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash
Adobe Flash Pro CS5 Student & Teacher Edition) movie, and a JavaScript (JavaScript: The Good Parts) interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you. This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.
See the Instructions Wiki for instructions on how to use the library on your site.Blogs, Wikis, Podcasts, and Other Powerful Web Tools for Classrooms
Here is a working Test Page where you can try out ZeroClipboard in your browser.
Here is another test page showing how you can use the same ZeroClipboard object to handle multiple elements of the same size. (jQuery is also used in this example.)
Download Link :zeroclipboard-1.3.2.zip
Empty space in top of textarea in IE
In Internet Explorer Empty space in top of Textarea, this can be solved by applying CSS Property "white-space : normal".
Thursday, December 16, 2010
Select Cuts Off Options In IE (Fix) | CSS-Tricks
Select Cuts Off Options In IE (Fix) : Select Option width control using Jquery
Tuesday, November 9, 2010
!important CSS Declarations: How and When to Use Them
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.
A Brief Primer on the Cascade
Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.
Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:
With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.
Syntax and Description
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
Smashing Magazine
Smashing MagazineSmashing Network
!important CSS Declarations: How and When to Use Them
By Louis LazarisNovember 2nd, 2010Coding83 CommentsPublishing Policy
Advertisement
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.
A Brief Primer on the Cascade
Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.
Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:
Find all declarations that apply to the element and property
Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
Declarations from the user agent
Declarations from the user
Declarations from the author
Declarations from the author with !important added
Declarations from the user with !important added
Apply styling based on specificity, with the more specific selector “winning” over more general ones
Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)
With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.
Syntax and Description
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.
Some things to note about !important declarations:
When Should !important Be Used?
As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.
Never
!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.
If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.
If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.
That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.
To Aid or Test Accessibility
As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.
A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.
In the screen grab below, home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:
In this case, the text size was adjustable without using !important, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using an !important declaration, the user stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of !important resolves this problem and keeps the adjustability of text size within the user’s power, even if the author has abused !important.
To Temporarily Fix an Urgent Problem
There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.
After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.
To Override Styles Within Firebug or Another Developer Tool
Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:
The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.
!important could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.
Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:
To Override Inline Styles in User-Generated Content
One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.
For Print Stylesheets
Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.
For Uniquely-Designed Blog Posts
If you’ve dabbled in uniquely-designed blog posts (many designers take issue with using “art direction” for this technique, and rightly so), as showcased on Heart Directed, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.
The use of !important could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.
Conclusion
!important declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using !important wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.
Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.
Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?
Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.
A Brief Primer on the Cascade
Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.
Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:
- Find all declarations that apply to the element and property
- Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
- Declarations from the user agent
- Declarations from the user
- Declarations from the author
- Declarations from the author with !important added
- Declarations from the user with !important added
- Apply styling based on specificity, with the more specific selector “winning” over more general ones
- Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)
With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.
Syntax and Description
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
Smashing Magazine
Smashing MagazineSmashing Network
!important CSS Declarations: How and When to Use Them
By Louis LazarisNovember 2nd, 2010Coding83 CommentsPublishing Policy
Advertisement
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.
A Brief Primer on the Cascade
Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.
Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:
Find all declarations that apply to the element and property
Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
Declarations from the user agent
Declarations from the user
Declarations from the author
Declarations from the author with !important added
Declarations from the user with !important added
Apply styling based on specificity, with the more specific selector “winning” over more general ones
Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)
With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.
Syntax and Description
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.
Some things to note about !important declarations:
- When !important was first introduced in CSS1, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS2
- If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
- The !important keyword (or statement) must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon won’t break it)
- If for some particular reason you have to write the same property twice in the same declaration block, then add !important to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesn’t invalidate your CSS)
- In IE6 and IE7, if you use a different word in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it
When Should !important Be Used?
As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.
Never
!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.
If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.
If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.
That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.
To Aid or Test Accessibility
As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.
A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.
In the screen grab below, home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:
To Temporarily Fix an Urgent Problem
There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.
After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.
To Override Styles Within Firebug or Another Developer Tool
Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:
The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.
!important could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.
Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:
To Override Inline Styles in User-Generated Content
One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.
For Print Stylesheets
Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.
For Uniquely-Designed Blog Posts
If you’ve dabbled in uniquely-designed blog posts (many designers take issue with using “art direction” for this technique, and rightly so), as showcased on Heart Directed, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.
The use of !important could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.
Conclusion
!important declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using !important wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.
Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.
Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?
Subscribe to:
Posts (Atom)