BlogmyQuery – BMQ

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we wisll look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties

-webkit-mask

This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

Example

Image mask:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke

One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all <h1> headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
	color: transparent;
	-webkit-text-stroke: 4px red;
}

Further reading: Safari Developer Library

-webkit-nbsp-mode

Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the   character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color

This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset

Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse

Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two <p>s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

Further reading: Safari Developer Library

-webkit-box-reflect

Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee

Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
	white-space: nowrap;
	overflow:-webkit-marquee;
	width: 70px;
	-webkit-marquee-direction: forwards;
	-webkit-marquee-speed: slow;
	-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties

font-size-adjust

Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
	font-family:Verdana, Arial, sans-serif;
	font-size: 12px;
	font-size-adjust: 0.58;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering

A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to <video> and <canvas> elements, as well as background images. It is a CSS3 property, but is currently supported only by Firefox.

It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property. Nevertheless, it enables Internet Explorer 7 to render images at a much higher quality after resizing which is useful because by default this browser handles such tasks pretty poorly.

Supported by: Gecko.

Further reading: Mozilla Developer Network

-moz-border-top-colors

This property could be filed under ‘eye-candy’. It allows you to assign different colors to borders that are wider than 1 pixel. Also available are -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors.

Unfortunately, there is no condensed version like -moz-border-colors for this property, so the border property must be set in order for it to work, whereas border-width should be the same as the number of the given color values. If it is not, then the last color value is taken for the rest of the border.

Example

Below, the element’s border would have a standard color of orange applied to the left and right side (because -moz-border-left-colors and -moz-border-right-colors are not set). The top and bottom borders have a kind of gradient, with the colors red, yellow and blue.

div {
	border: 3px solid orange;
	-moz-border-top-colors: red yellow blue;
	-moz-border-bottom-colors: red yellow blue;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

Mixed Properties

-webkit-user-select and -moz-user-select

There might be times when you don’t want users to be able to select text, whether to protect it from copying or for another reason. One solution is to set -webkit-user-select and -moz-user-select to none. Please use this property with caution: since most users are looking for information that they can copy and store for future reference, this property is neither helpful nor effective. In the end, the user could always look up the source code and take the content even if you have forbidden the traditional copy-and-paste. We do not know why this property exists in both WebKit and Gecko browsers.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

-webkit-appearance and -moz-appearance

Ever wanted to easily camouflage an image to look like a radio button? Or an input field to look like a checkbox? Then appearance will come in handy. Even if you wouldn’t always want to mask a link so that it looks like a button (see example below), it’s nice to know that you can do it if you want.

Example

a {
	-webkit-appearance: button;
	-moz-appearance: button;
}

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

text-align: -webkit-center/-moz-center

This is one property (or value, to be exact) whose existence is quite surprising. To center a block-level element, one would usually set margin to 0 auto. But you could also set the text-align property of the element’s container to -moz-center and -webkit-center. You can align left and right with -moz-left and -webkit-left and then -moz-right and -webkit-right, respectively.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

CSS 2.1. Properties

counter-increment

How often have you wished you could automatically number an ordered list or all of the headings in an article? Unfortunately, there is still no CSS3 property for that. But let’s look back to CSS 2.1, in which counter-increment provides a solution. That means it’s been around for several years, and even supported in Internet Explorer 8. Did you know that? Me neither.

In conjunction with the :before pseudo-element and the content property, counter-increment can add automatic numbering to any HTML tag. Even nested counters are possible.

Example

For numbered headings, first reset the counter to start at 1:

body {counter-reset: thecounter}

Every <h1> would get the prefix “Section,” including a counter that automatically increments by 1 (which is default and can be omitted), where thecounter is the name of the counter:

.counter h1:before {
	counter-increment: thecounter 1;
	content:"Section"counter(thecounter)":";
}

Example

For a nested numbered list, the counter is reset and the automatic numbering of <ol> is switched off because it features no nesting:

ol {
    counter-reset: section;
    list-style-type: none;
}

Then, every <li> is given automatic incrementation, and the separator is set to be a point (.), followed by a blank.

li:before {
    counter-increment: section;
    content: counters(section,".")"";
}

<ol>
	<li>item</li>			<!-- 1 -->
	<li>item				  <!-- 2 -->
		<ol>
			<li>item</li>	<!-- 1.1 -->
			<li>item</li>	<!-- 1.2 -->
		</ol>
	</li>
	<li>item</li>			<!-- 3 -->
<ol>

Supported by: CSS 2.1., all modern browsers, IE 7+.

Further reading: W3C

quotes

Are you tired of using wrong quotes just because your CMS doesn’t know how to properly convert them to the right ones? Then start using the quotes property to set them how you want. This way, you can use any character. You would then assign the quotes to the desired element using the :before and :after pseudo-elements. Unfortunately, the otherwise progressive WebKit browsers don’t support this property, which means no quotes are shown at all.

Example

The first two characters determine the quotes for the first level of a quotation, the last two for the second level, and so on:

q {
	quotes: '«' '»' "‹" "›";
}

These two lines assign the quotes to the selected element:

q:before {content: open-quote}
q:after  {content: close-quote}

So, <p><q>This is a very <q>nice</q> quote.</q></p> would give us:
«This is a very ‹nice› quote.»

Supported by: CSS 2.1., all browsers except WebKit, even IE 7+.

Further reading: W3C

Question: To add the character directly, does the CSS document have to have a UTF-8 character set? That’s a tough one. Unfortunately, I can’t give a definitive answer. My experimentation has shown that no character set has to be set for the quotes property to work properly. However the utf-8 character set doesn’t work because it shows “brokenâ€� characters (for example, “»â€�). With the iso-8859-1 character set, everything works fine.

This is how the W3C describes it: “While the quotation marks specified by ‘quotes’ in the previous examples are conveniently located on computer keyboards, high-quality typesetting would require different ISO 10646 characters.�

CSS3 Properties You May Have Heard About But Can’t Remember

To round out things, let’s go over some CSS3 properties that are not well known and maybe not as appealing as the classic ones border-radius and box-shadow.

text-overflow

Perhaps you’re familiar with this problem: a certain area is too small for the text that it contains, and you have to use JavaScript to cut the string and append “…â€� so that it doesn’t blow out the box.

Forget that! With CSS3 and text-overflow: ellipsis, you can force text to automatically end with “…â€� if it is longer than the width of the container. The only requirement is to set overflow to hidden. Unfortunately, this is not supported by Firefox but will hopefully be implemented in a coming release.

Example

div {
	width: 100px;
	text-overflow: ellipsis;
}

Supported by: CSS 3, all browsers except Firefox, even IE6+.

Further reading: W3C

word-wrap

With text in a narrow column, sometimes portions of it are too long to wrap correctly. Link URLs especially cause trouble. If you don’t want to hide the overflowing text with overflow: hidden, then you can set word-wrap to break-word, which causes it to break when it reaches the limit of the container.

Example

div {
	width: 50px;
	word-wrap: break-word;
}

Supported by: CSS 3, all browsers, even IE6+.

Further reading: W3C

resize

If you use Firefox or Chrome, then you must have noticed that text areas by default have a little handle in the bottom-right corner that lets you resize them. This standard behavior is achieved by the CSS3 property resize: both.

But it’s not limited to text areas. It can be used on any HTML element. The horizontal and vertical values limit the resizing to the horizontal and vertical axes, respectively. The only requirement is that overflow be set to anything other than visible.

Supported by: CSS3, all the latest browsers except Opera and Internet Explorer.

Further reading: Safari Developer Library

background-attachment

When you assign a background image to an element that is set to overflow: auto, it is fixed to the background and doesn’t scroll. To disable this behavior and enable the image to scroll with the content, set background-attachment to local.

Supported by: CSS 3, all the latest browsers except Firefox.

Further reading: Safari Developer Library

text-rendering

With more and more websites rendering fonts via the @font-face attribute, legibility becomes a concern. Problems can occur particularly at small font sizes. While there is still no CSS property to control the subtle details of displaying fonts online, you can enable kerning and ligatures via text-rendering.

Gecko and WebKit browsers handle this property quite differently. The former enables these features by default, while you have to set it to optimizeLegibility in the latter.

Supported by: CSS3, all WebKit browsers and Firefox.

Further reading: Mozilla Developer Network

transform: rotateX/transform: rotateY

If you’ve already dived into CSS3 and transformations a bit, then you’re probably familiar with transform: rotate(), which rotates an element around its z-axis.

But did you know that it is also possible to spin it “into the deepâ€� (i.e. around its x-axis and y-axis)? These transformations are particularly useful in combination with -webkit-backface-visibility: hidden, if you want to rotate an element and reveal another one at its back. This technique is described by Andy Clarke in his latest book, Hardboiled Web Design, and it can be seen in action on a demo page.

Example

If you hover over the element, it will turn by 180°, revealing its back:

div:hover {
	transform: rotateY(180deg);
}

Quick tip: To just mirror an element, you can either set transform to rotateX(180deg) (and respectively rotateY) or set transform to scaleX(-1) (and respectively scaleY).

Supported by: CSS3, only WebKit browsers, in combination with -webkit-backface-visibility only Safari and iOS (iPhone and iPad).

Further reading: Safari Developer Library (transform: rotate, -webkit-backface-visibility)

Some Last Words

As you hopefully have seen, there are many unknown properties that range from being nice to hav to being very useful. Many of them are still at an experimental stage and may never leave it or even be discarded in future browser releases. Others will hopefully be adopted by all browser manufacturers in coming versions.

While it is hard to justify using some of them, the WebKit-specific ones are gaining more and more importance with the success of the iOS devices and Android. And of course some CSS3 properties are more or less ready to be used now.

And if you don’t like vendor-specific properties, you can see them as experiments that still could be implemented in the code to improve the user experience for users browsing with the modern browsers. By the way, CSS validator from the W3C now also supports vendor-specific properties, which result in warnings rather than errors.

Happy experimenting!

(al)

© Christian Krammer for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS

When you need to display an unknown amount of text in a constrained space you may need to somehow hide text that doesn’t fit. One way is to use overflow:hidden to quite brutally hide it.

Doing this works, and it works cross-browser, but it can be difficult for the user to realise that text has been hidden since there is no visual indication of it. A property from the editor’s draft of the CSS Basic User Interface Module Level 3 that can help improve the situation is text-overflow.

Read full post

Posted in CSS.

Copyright © Roger Johansson

“How did you do that?” My colleague Leigh sounded impressed. He had been working with a problem client for weeks trying to get design approval. Then I came along and was able to get signed-off in a single conference call. “Can you teach me how you did that?” he asked. I mumbled something about years of experience, but the truth was I didn’t have a clue. It just seems I can find design approval easier than most.

As I thought about it I realised there are actually quite a lot of things that have become second nature for me over the years. But I have learnt the hard way through many painful projects. Unfortunately because I started designing websites back in 1994 there was nobody around to teach me this stuff. I wish somebody could have just shown me how to avoid all of those endless revisions. Hopefully some of the advice I share with you here can help you avoid years of pain and suffering.

My first piece of advice focuses on the old adage — prevention is better than cure.

Prevention Is Better Than Cure

In our enthusiasm to start a project we often don’t take the time to prepare the client. For many clients this will be their first web project. So they may not really understand what that involves or what their role is.

At our company, we pre-empt common issues and prepare the client by giving them a PDF factsheet about working with designers.

So before you leap into your next project, let me recommend you complete the following steps:

• Educate the client about their role
  Take the time to explain to the client what you expect from them. I always make the point of telling our clients to focus on problems, not solutions. I encourage them to avoid making design suggestions, but rather to point out why they feel a design is wrong. The job then falls onto us to come up with the right solution for their problem.
• Take the client through a process
  Because many clients are not familiar with the Web design process, take the time to explain it. This has two benefits. When people are in unfamiliar territory they attempt to take control. This leads to micromanagement. By explaining your process you reassure them, giving them confidence. Second, explaining your process demonstrates you are the expert and puts you in the driver’s seat.
• Pre-empt common issues
  We all know there are certain issues that always come up. Things like “make my logo bigger“, “can we use comic sans?” or “put everything above the fold” have become standing jokes in the Web design community. Why then would we not pre-empt these issues? By talking about them upfront it makes it much harder for the client to mention them later. After all, none of us likes to be the person who is predictable, making the ‘dumb’ request.

WeeNudge is a superb site for pre-empting common issues and educating your clients about the Web.

Even once your project is up and running prevention can still be better than curing. For example, when you complete a design and show it to the client you can do a lot to prevent problems from coming up.

First, you should always present the design. This is your chance to justify your approach. Refer back to previously agreed upon work. If you have used moodboards, point out how the design draws on them. The same is true for wireframes, personas or any other elements the client has signed off on. It’s hard for the client to reject a design built on elements they have already agreed upon. You must never hand over a design without explanation.

Never simply send a design to a client asking them what they think. Take the time to present the design and ask for specific feedback.

Secondly, be aware the client may show the design around. This is problematic. Although you may have been careful to explain the decision making process to the client, others will not have this background information. This inevitably means the third parties will fallback on personal opinion and potentially sway the client in the wrong direction.

The solution to this problem is not to present your design as either a static image or as a final webpage. Instead, record a short video talking the client through the design. This video can then be passed on to whoever the client wishes to show. That way whoever views it will get all the information they require to provide educated feedback.

Finally, control the kind of feedback you receive. Never ask a client what they think of the design. Ask them instead how they believe their users will react to the design or whether it meets their business objectives. You can even go as far as asking them whether the design reflects the signed-off moodboards or wireframes. If you can get them saying yes to these questions they will realize that even if they personally dislike the design it is still the right solution.

Of course, when I was able to get the design signed-off on Leigh’s project, I hadn’t had a chance to lay down any of this groundwork. So what other factors came into play that made me successful where he had failed? One was my attitude going into the discussion.

Get Your Attitude Right

Leigh had been trying to get design sign-off for weeks. Both he and the client were frustrated. Battle lines had been drawn despite the fact both sides wanted the project completed.

This is a common problem. We start to see our clients as the enemy. In fact, there are many cases where bad past experience puts us on the defense from the outset. At every turn we start to build into our controls the limitations for the number of iterations and endeavors of the client’s influence. We even moan to one another how life would be better without clients.

Because of bad past experiences with clients we can often get off on the wrong foot with new clients.

It’s not surprising that design sign-off becomes a battle. We are looking for a fight even before we begin. It’s vitally important that we change this mindset and see every new client relationship as an exciting opportunity and not as a potential point of conflict.

When dealing with Leigh’s client, I had the advantage of not being on the defensive. My ego had not been bruised by rejection. You need to leave your ego at the door. Often it is worth picking your battles and letting the client win from time to time. This helps them feel their contribution is worthwhile and valued. It is when the client feels ignored or isolated from the process that conflict arises.

By getting your own attitude right, this goes a long way to establishing a good relationship with the client. This is key to successful design sign-off.

Get The Relationship Right

We would love to deny that the client is an intrinsic part of the Web design process. However, you can be the best Web designer in the world, but if the client isn’t on your side, you are wasting your time and ultimately the project will cost you money.

In theory we should all be experts in establishing good relationships with our clients. After all, we pride ourselves on empathizing with users and understanding their motivation and needs. We should then be able to apply these same skills to our clients. If we then understand their needs and motivations, it is much easier to establish a good relationship.

Working closely with them helps. The temptation is to hold the client at arm’s length and minimize their involvement in the project. However, if you want to get the client on board, you are better off working with them collaboratively. This means they will feel a sense of ownership over the design, and are more likely to sign off on it.

We find wireframing with the client is an excellent way of involving them in the process and building a better working relationship.

The other advantage of collaboration is that it makes the client feel important. It provides them with a sense of purpose in the relationship rather than just being a spare part to rubber stamp your decisions. I tell clients that it is their site and their decision, I am simply there to give advice on the best practice. This allows them the sense of control that is so important.

“But what if they make silly decisions?” you may ask. Often they will listen to you simply because you aren’t arguing with them. However when they still pursue an unwise course of action, I do not allow things to descend into a fight. Instead I make my position clear and leave the decision over to them. I have also been known to use phrases like “that is a brave decision” or “that’s an unusual approach” which is a less confrontational way of telling them they are being dumb.

Giving the client a sense of control doesn’t mean you are a doormat. In fact, I don’t believe clients want that. They want you to control the process.

Take Control

Although clients want to feel involved and have a sense of control, they don’t want to run the show. Most clients only interfere in the process when they feel you are out of your depth. It is important that we always appear to be the authority in the project.

I think this is the primary reason I managed to get sign-off on Leigh’s project. On our conference call I took control. I was careful not to be arrogant or push the client out, but it was clear I was in charge of the process. I achieved this using the following techniques:

• I was confident
  Sounding confident can often be half the battle. Listen to the client and make a recommendation. Know what you think and communicate it confidently. If you sound like an expert people will treat you as one. However, be careful not to come across as arrogant. Just know your mind.
• I was willing to challenge
  When a client asks for something you disagree with, say so. That said, don’t immediately jump in with why it is wrong. Instead ask the client why they want to take a particular approach. Often the client hasn’t really thought things through and a few well placed questions will help them to conclude it isn’t sensible. Also by asking questions you demonstrate you have thought things through in a lot more depth than they have.
• I referred to third party material
  A great way of demonstrating your expertise and control of the situation is by referring to third party material. Stats, quotes from other experts and references to case studies go a long way. Show that you know your stuff and that you have solved these problems before.
• I kept us moving forward
  Design sign-off can be full of endless discussion and navel gazing. The more a client thinks about a design the more likely they are to second guess your decisions. Keep the momentum going by focusing on the deadline and the fact that design can always be tweaked once it goes live.

Clients will often take notice of research carried out by people like Jakob Nielsen over your own opinion.

By setting your ego aside, establishing a good relationship and taking control of the process you can usually get the client to sign-off on a design. However, like all things in life, no approach is full proof. In such cases I have a couple of fallback positions which have been known to work.

What To Do If A Client Digs In Their Heels?

Some clients can be very dogmatic and no amount of careful management can lead them down the right road. In such situations I use three techniques in the following order:

• Suggest testing
  If the client wants one thing and you recommend another, suggest testing both approaches with real users. It’s hard to say no when services like verifyapp.com are so cheap. Often clients will give in at this point because they don’t wish to be proved wrong.
• Ask to have your name removed from the project
  Often client’s don’t believe that a change they are suggesting is really that bad a thing. They just think we are being overly precious. One way to show how serious you are about your concerns is to say that if the clients’ changes are implemented you would like your involvement with the project to be kept secret. As designers are normally so keen to promote their work, this makes a client realize how unhappy you are.
• Give the client what he or she wants
  It is important to remember at the end of the day that it is the client’s website, not yours. I know that some people advocate walking away from a project before compromising their ‘standards’. However, personally I think that is unprofessional in all but the most extreme cases. If a client is really insistent and unwilling to listen to reason I will deliver the site to the exact specifications they requested.

Tools like verifyapp makes it very easy to quickly test design. This can be a great way of diffusing disagreements.

I imagine this post will generate mixed reactions. Some of what I have said here seems to be manipulative. I believe it is simply nudging the client in the right direction to give them what they ultimately want — a great website.

Other things won’t sit well with some designers. Suggesting you give the client what they want or letting them win even some battles might smack too much of compromise. Nevertheless, in my opinion this is what a collaborative relationship is about.

However, I am interested to hear your approaches. Where do you draw the line between what you believe is right and what the client wants? What techniques do you use for nudging the client in the right direction? Do you set limits on revisions or the client’s involvement in the process? Let me know in the comments.

(jvb) (il)

© Paul Boag for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, sign-off

There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we’d like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. We’d love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.

Simplifying Sign-Ups

The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.

Ask for a User Name After The User Has Signed Up

Sign-up forms typically ask users to create a name that is unique to the website. However, coming up with a unique user name that’s not taken could take trial and error and, thus, time. Instead of hassling people for a user name when they sign up, you might want to consider asking afterwards. This way, you won’t lose sign-ups from frustrated users, and you’ll prevent users from creating random and forgettable names just to satisfy the form’s requirements.

Require Users to Type Their Password Only Once

Many sign-up forms ask users to type their password in two different fields. The reason is understandable. Forms mask passwords for security reasons, so that snoopers can’t see them. And to cut down on typographical mistakes and increase the chances of correct input, two separate entries are required.

In reality, though, this allows for greater error, because it forces users to type more. They can’t see the characters they’re inputting, making it difficult to know whether they’re typing the right password each time.

A more efficient approach would be to ask users to type their password in once, but then include a box they can check to unmask the password, so that they can check it. This option could reduce the number of text fields and decrease the work that users have to do to sign up.

• jQuery Plug-In for Masking Passwords

Auto-Fill City and State Fields Based on User’s ZIP Code

If you require the user’s home address, then consider auto-filling the city and state fields based on the ZIP code. The form will be faster to fill out because users won’t have to waste time and energy manually selecting their city and state from drop-down lists.

• Using AJAX to Get City and State from ZIP Code

Auto-Complete the Country Field

The conventional way for users to specify their country is to select it from a drop-down list. A more efficient way would be to use an auto-complete text field. Instead of making users scroll through an alphabetical list of every country in the world, the text field would allow users to select their country from a small subset of countries that match the letters they type. The user needs only to type a few letters to see their country in the menu.

• AJAX Auto-Complete for jQuery

Allow Users to Auto-Fill Their Payment Address From the Shipping Address

If a user is buying a product, they’ll have to submit payment and shipping information. Most of the time, the addresses will be the same, so let them auto-fill one from the other. You could include a link saying “Same as shipping information� in the payment section, and when clicked, it would repeat the shipping data in the payment fields.

• Copying Billing and Shipping Address Information with jQuery
• Copy Form Input Data to Another Input Field with jQuery

Don’t Check the Newsletter Option by Default. Offer a Preview Instead

Most website owners pre-check the newsletter box, hoping to get more subscribers. Chances are, it will work. But a subscription is meaningless if the user has done so only because they have overlooked or misunderstood the option. If they’re not interested, they’ll unsubscribe sooner or later. Forcing them to subscribe won’t help you in the long run. And receiving a newsletter without having explicitly asked for it can turn users off.

A more effective approach would be to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way, they’ll know what they’re missing if they don’t subscribe. You’ll also sleep well knowing that users who subscribe have done so because they’re genuinely interested in your content.

Combat Spam by Hiding a Text Field With JavaScript, Instead of Using CAPTCHA

If you get a lot of spam, then putting a CAPTCHA on your form may be necessary. What’s not necessary is making the CAPTCHA an obstacle that turns users away. Traditional CAPTCHAs that ask users to retype distorted letters have been proven to hurt conversion rates. With the extra hassle they force on users, it’s no wonder.

• CAPTCHA’s Effect on Conversion Rates
• F**k CAPTCHA

A simpler approach that won’t lower your conversion rate is to use a hidden and required text field generated with client-side Javascript. Spambots can’t fill in the field because they can’t interact with objects in client-side JavaScript; only users can. This method is simpler and less intrusive and so will reduce spam without hurting your conversion rate. The only problem is that it relies on JavaScript to work which might be suboptimal in some cases. You could also use Honeypot Captcha approach: you can create a honeypot form field that should be left blank and then use CSS to hide it from human users, but not bots. When the form is submitted, you check to make sure the value of that form field is blank. If it isn’t, then you can safely ignore the submission because it was submitted by a spam bot.

Simplifying Log-Ins

The purpose of every log-in form is to get the user into their account. Some log-in forms do this better than others. Here are a few innovative techniques that will help your users log in more efficiently.

Allow Users to Log in With Their Email Address

Remembering an email address is easier than remembering a user name. User names can be unwieldy, and people remember their email address because they use email all the time. Give users the option to log in with their email address as well as a user name. The flexibility could save them the time and headache of recovering the user name if they forget it.

Log Users in Without Leaving the Page

Logging in is a common task, and users will want to be able to log in from anywhere on your website. So, as soon as they do it, redirect them back to the current page. This will make logging in faster and allow users to get right back to their task.

There are a couple of ways to make this happen: a drop-down box or a modal window.

The drop-down box will open without taking users off the page. It takes up only a small part of the page, making it a fast and lightweight option.

• A Simple and Effective jQuery Dropdown Login Form
• jQuery Drop Down AJAX Sign In Form

A modal window also keeps users on the current page, but it opens up at the center of the window, putting the focus entirely on the log-in form. This option gives you room to add supplemental information to the form.

• How to Implement a jQuery AJAX Login Form Into a Modal Box
• Simple jQuery Modal Window Tutorial

Auto-Focus the First Text Field

Once the user sees the log-in form, they’ll be ready to log in. Make the process more efficient by automatically focusing on the first field. This saves them the time and effort of hovering and clicking. The user can keep their hands on the keyboard and start typing away. The auto-focus should also clearly highlight the text field so that the user knows they can start typing.

Allow Users to Unmask Their Password

This option is almost as useful for logging in as it is for signing up. If users can’t see the characters in the field, they could easily mistype the password. If their input is rejected, they’ll know that they mistyped something and will have to re-enter their password until they get it right.

The problem is that users don’t know which character was mistyped and so can’t fix the mistake before submitting the form on the first attempt. This creates more work than necessary and makes users slow down their typing. Avoid this by adding a checkbox that allows users to unmask their password before submitting it.

• Stop Password Masking

Use a Question Mark Icon for the Password Recovery Link

Users should have no trouble finding the password recovery link on your form. Instead of using a “Forgot your password� link, consider using a simple question mark button, which won’t take up a lot of room or get lost among other links. Because the question mark is a universal symbol for help, users will not wonder where to go when they’re having password trouble.

Make the “Submit� Button as Wide as the Text Fields

The log-in button isn’t just for taking action: it also lets users know what action they’re about to take. A small log-in button has weak affordance and can make users feel uncertain about logging in.

A wide button gives users more confidence and is hard to miss. The button’s label also becomes more visible, so that users are clearer about the action they’re taking.

Allow Users to Log in Via Facebook, Twitter or OpenID

Nearly everyone has a Facebook, Twitter or OpenID account, and letting them log in with it brings big benefits. They can use your website almost instantly, without having to go through the sign-up process. Also, they won’t have to manage multiple user names and passwords across different websites.

Of course, you could even go further and use Facebook Connect to actually prefill data that your users might have to type; in the example below, on Friend.ly, a Facebook application, the only thing that the user needs to do before starting using the service is just click on the “Register” button. The information about the user is loaded automatically which raises a huge privacy concern. You might not want to use this approach in practice.

Conclusion

Your sign-up and log-in forms shouldn’t make the user’s life difficult. Spending time filling out a form is no one’s idea of a party. These innovative techniques will make your forms simple and efficient, so that users can sign up and log in quickly and start enjoying your content. For further ideas and examples, you might want to consider taking a look at Joshua Johnson’s article 20 Great Sign Up Form Examples to Learn From.

(vf) (ik) (al)

© Anthony T for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, forms, usability, ux

Productivity is a crucial asset of professional designers. Photoshop is an extremely powerful application for photo processing and image manipulation, and we can make it even more powerful by using handy tools, actions, plugins and templates to save time for solving mundane regular tasks. The better our professional tool set is, the more time we can spend to focus on the actual design process rather than the tool we are using to implement it on screen.

Here at Smashing Magazine, we’re continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop. A sincere thanks to all designers and developers whose articles are featured in this roundup. We respect and appreciate your contributions to the design community.

Useful Photoshop Tools

Mr. Stacks
A small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

Photoshop Tych Panel
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. The tool has been open sourced by Reimund Trost and can be freely used, modified and redistributed in any way.

Pixel Proliferation: A Toolset For Managing Screen Resolutions
This tool will help you to manage screens resolutions more easily. The toolset contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Useful.

Generating CSS positions for Sprites
A Photoshop plug-in by Arnau March that generates sprites with your given CSS file. You can then add the sprite locations and also create hover and click effects with the help of jQuery. You might want to check out CSS Sprite: Photoshop Script Combines Two Images for CSS Hover as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Golden Crop
Golden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 1/3 rule) very easy with visual guides. Requires installed Photoshop CS2, CS3, CS4 or CS5 (either x86 or amd64 version). Works on Windows and Mac.

Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The free version includes only Internet Explorer 6 UI. The deluxe edition with current versions of Chrome, Safari and Firefox is not free ($3).

Open With Photoshop 0.6
An add-on for Firefox that is a new companion for Web and graphic designers to open up any Web image with Adobe Photoshop via a single and quick mouse click. A useful time saver.

foxGuide: Photoshop Guides Inside Firefox
A Firefox extension that displays horizontal and vertical guides. You can move or remove the floating guides on a webpage just the way you do it Photoshop with the help of foxGuide. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout.

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMP
Modular Grid Pattern is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other applications. The extension requires Adobe Photoshop CS5

960gs ExtendScript for Photoshop CS5
The script is very raw and crashes easily with the wrong input or settings. However, it has some nice features such as disabling gutters by putting 0 for gutter width and optionally adding evenly-spaced horizontal guides.

Workspace import/export script for Photoshop
John Nack has written a script to enable simple importing and exporting of Photoshop workspaces. It should work in both CS4 and CS5 (although it is a little more robust in CS5), so you can use it to migrate workspaces from CS4 to CS5 in addition to using it to enable easier sharing of CS5 workspaces between machines or people.

Subpixel Hinted Font-Rendering
This technique is great for your concepts when you want to simulate actual text in your Photoshop file. Thomas Maier has saved his workflow as an action. You can download the subpixel-rendering technique and use it for free.

GuideGuide 1.0
What actually started out as a script that drew guidelines at the middle of the document, turned out to become a quite helpful extension for Photoshop when working with columns, rows and midpoints in CS4 & CS5. You can download Cameron McEfee’s GuideGuide to help you find midpoints, make margins and create rows and columns much easier while working in Photoshop.

Photoshop Animation to Sprite Sheet
This tool enables you to easily export a framed animation in Adobe Photoshop to a packed sprite sheet. The tool is available for Photoshop CS3 or higher. Developed by Peter Jones.

Automatic Tile Cutter
Some images are made of dozens to thousands of tile images, depending on the zoom level. At the distant zoom levels you only need a few images to cover a large area. Creating and then uniquely naming each of these images would be a daunting task if you had to do it by hand. Will James has solved this problem and released a batch processing script to use with Photoshop 7 or CS that will carve all the titles you need and name them exactly as you need them named.

The Image Processor Script
The Image Processor in Photoshop CS4 is a simple way to quickly resize and convert a bunch of images to JPEG, PSD or TIFF format. The modified script allows exporting CMYK JPEGs as CMYK, as well as support for exporting PNG images.

Further Resources

Adobe Photoshop Scripts
Trevor Morris provides more than a dozen of free scripts for Adobe Photoshop. All scripts are commented, making them easy to modify and/or learn from. Among other scripts, you’ll find Layers to Comps, Rename Layers, Sort Layers and Distribute Layers Vertically scripts.

The Photoshop Scripting Community Forum
PS-Scripts is a community for Photoshop scripting and automation. The site contains articles Members of the community release their script on the site’s forum; for instance, you can find the Smart Object links panel, Listing fonts used in PSD files (alternative), Distribute Layers. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.

Russel Brown’s Scripts Page
Russel Brown provides a number of free useful Adobe Photoshop Scripts and Panels for CS4 and CS5. Among other things, Adobe Emailer Panel, Image Processor Pro and Edit Layers in ACR scripts are available.

Scriptopedia
Another community that helps to find scripts and scripters for Photoshop and other Adobe applications. The site is frequently updated; you’ll find various scripts as well as tutorials on the site.

Useful References and Articles

The Photoshop Etiquette Manifesto for Web Designers
The recently updated Photoshop Etiquette can be quite useful when wanting to improve the clarity of a PSD when transferred. This site provides you with rules that will show you examples and bonus points ranging from external as well as internal file organization to exporting and design practices.

Photoshop Secret Shortcuts
This old, yet still very useful article by Nick La provides an overview of secret (i.e. not documented) Photoshop shortcuts that the author has learned from years of experience.

Photoshop Tip: Organizing Layers
Daniel Mall has thought of a super handy Photoshop file organization trick that separates layer groups for different stages of a page within the same PSD. You can prefix your layer groups with a bullet to organize your PSDs but also using a hyphen will enable you to create a horizontal divider in the context menu.

Photoshoptimize: Optimize Photoshop Performance
To improve the performance of Photoshop, this list of best tips will help any designer to optimize Adobe Photoshop for Mac as well as PC; from reducing cache levels to disabling export clipboard in Photoshop, and much more.

Super Crisp Font Anti-Aliasing With Sub-Pixel Hinting
David Leggett shares with us the most useful technique in creating concepts in Photoshop, especially when you’re working on a website layout in Photoshop, and want an accurate representation of what a font is going to look like in your content body. This surely helps bring the frustrating times when working with small font using anti-aliasing in Adobe Photoshop to an end.

Freebies, Goodies

100+ Free HTML Email PSD Templates
CampaignMonitor has released a large collection of freely available high quality email templates which have been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. They are completely free. Every template contains a Photoshop document, HTML template and a Campaign Monitor Template. The complete packages with all templates is 320 Mb.

Bottles and Cans Photoshop CS4 Actions
3 exclusive Photoshop CS4 Actions that might save you some time when you are working on the next soda, wine or bottle label design.

Pricing Table PSD Template
A free pricing table template with various button states.

Search and Email Input Text PSD Template
A free template for search field and email input fields. You can find new freebies released every Friday on the site.

Free PSD: Seven Tickets
Seven Tickets inspired by Seven Dribbble Shots.

Free PSD: Simple Download Buttons
Orman Clark has released a set of simple download buttons in three different states: nroaml,normal, hover and active. These download buttons use a subtle icon to suggest the action of downloading. The download includes the editable PSD. You can download even more PSD buttons.

Album Cover Art Carousel (PSD)
The download (PSD) includes styles for the covert art, the hover and/or active state, and the next/previous arrows. Try experimenting with the colour of the album cover hover state, a vivid orange looks great.

Flip-Clock Countdown (PSD)
A groovy little countdown flip-clock design: the perfect event/product launch companion.

Big Green Button (PSD)
This template is perfect for when a regular sized button just isn’t cutting it; this big fat round button should grab a visitors’ attention with ease. The download (PSD) displays a pricing plan as an example.

Free PSD: Tagtastic Tag Cloud
The topic of this article is a nice and simple little tag cloud – tagtastic!

The Ultimate Free Master PSD File
The download features one master .PSD file with folders, assets, grid folders and layer comps ready to be used. The master file is using the best practice featured in Dan Rose’s Photoshop Etiquette.

OS X Leopard GUI Freebie
A freebie including a GUI set for Mac’s OS X Leopard operative system for all Web developers who want to integrate great designs into their applications. This package includes fully editable vector Photoshop sources and a customizable Fireworks PNG file; the original fonts that were utilized for the making of the GUI are also included.

Tabs Icons: Interface Icons for iOS & Designers
You can find free iPhone tab bar icons for Mac OSX Lion and iOS here which are specially designed and optimized for toolbars and tab bars. All these icons have been created for iPhone, iPhone 4 and iPad and are provided as fully editable and scalable Photoshop PSD files.

Designmoo
Designmoo is a community for discovering and sharing free PSDs, vectors, textures, patterns and fonts.

Premum Pixels
Premium Pixels is Orman Clark’s remarkable resource with free design resources and tutorials.

Last Click

PSDcleanup
It’s very difficult for coders to work with someone else’s PSD files if they’re not organized correctly. This online service helps fixes that problem by organizing PSDs and polishing them for you. We aren’t advertising here, but it’s quite sad that services like this one exist at all.

Method & Craft
Method & Craft features the stories behind the work and the techniques professionals have developed throughout their professional career. A very useful resource for designers permanently looking to improve their skills.

Related Articles

Mastering Photoshop: Unknown Tricks and Time-Savers
Keyboard shortcuts can be very useful and are truly essential to our busy, daily workflow. Occasionally, we stumble upon a shortcut we wish we’d learned years ago. Please note that the shortcuts listed in this article are for Photoshop CS4 on OS X and can also be converted apposite to Windows.

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

Compositing in Adobe Photoshop: Time-Saving Tips
Daniel Durrans shares his own time-saving tips for compositing in Photoshop with us and emphasizes on adapting a certain technique for each one of us to make our work more efficient and improve our workflow.

Useful Photoshop Tips And Tricks For Photo Retouching
In case you’ve been searching for some insight on the most useful techniques tips and tricks when working in Photoshop, then this is the article you shouldn’t miss out on. Dirk Metzmacher shares with us even more tips and tricks to improve your workflow.

Useful Adobe Photoshop Techniques, Tutorials and Tools
Our recent overview of useful Adobe Photoshop techniques and tutorials that we have found and collected over the last months.

(vf) (ilj)

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: actions, photoshop, psd, scripts, templates