BlogmyQuery – BMQ

We sincerely appreciate all the time and support our readers make to visit Smashing Magazine and participate in discussions in the comments, in your blogs as well as on Twitter and Facebook. Today, we’d love to give you something in return to show you our appreciation for your contributions. After all, why only get gifts for Christmas and your birthday? Here at Smashing Magazine, we love to give away things all year long. This time, you have the ultimate chance to win some nifty hardware.

And to make the giveaway a bit more interesting, let’s set on a small challenge! Let’s try to reach at least 7,500 comments to this post in order for the prizes to be given away. All you have to do is answer a question in the comment section below and you could be the one chosen among our three winners! Tell us: What is the first thing you do on a Monday morning?

If we don’t reach 7,500 comments altogether, the prizes will get torched. Well, not literally of course, but let’s kick the giveaway in once the 7,501st comment is submitted. It is actually not a random, unrealistic figure either; we got around 9,000 comments in our last giveaway two years ago.

Prizes You Can Win

Zotac AMP GeForce GTX 480 1536 MB GDDR5 Graphics Card 384-bit (756MHz/3800MHz) ZT-40102-10P
This graphics card is a powerful asset for rich 3D gaming experiences. The card features superior anti-aliasing methods that render up to 32x sample rates for lightning-fast and high quality anti-aliasing that eliminates jagged edges for crystal clear visuals without sacrificing performance. Based upon NVIDIA GeForce GTX 480 GPU, it has 1536 Mb GDDR5, 384-bit memory bus and 480 Unified Shaders.

Sennheiser HD 600 Stereo Audiophile Headphones
The HD 600 Avantgarde are audiophile-quality, open dynamic hi-fi/professional stereo headphones. The advanced diaphragm design eliminates standing waves in the diaphragm material. The HD 600 can be connected directly to hi-fi systems of the highest quality, in particular DAT, DVD, MD and CD players. Both developers and designers will appreciate the music quality the headphones provide when you need to fully focus your attention on your current project.

3D Mouse: 3DConnexion’s SpaceNavigator Optical Mouse
This mouse can be quite handy for your 3D design and visualization applications. It has a large controller cap to control all your 3D objects and boost your design speed. The mouse has an advanced 6 degrees-of-freedom optical sensor and allows you to simultaneously pan, zoom and rotate 3D models as well as browse through Google Earth and other similar applications.

To Join In, Just Leave A Comment!

To participate, just leave a comment in the comment section below and tell us: What is the first thing you do on a Monday morning? The giveaway lasts until Monday, May 16th 2011. You are allowed to submit only one comment. The three winners will be selected randomly. Good luck!

And please spread the word to your friends and colleagues! Let’s reach 7,500 comments, folks!

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: giveaway

“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

Today we’re going to show you a detailed step-by-step guide on how to create a glamorous portrait using a stock reference. The final result will be 100% vector; therefore will retain its scalable properties. This walk through is ideal for those an intermediate to advanced knowledge of Illustrator. Illustrator CS5 was used for the tutorial although you can do the majority of the elements in the majority of vector programs. A Wacom Bamboo A5 tablet was also used, however you can achieve the same results with a mouse.

The final image will look like this:

Step 1

When I create my portraits I use a modified stock image as a reference.

The stock I’m going to be using in this tutorial is from Jessica Truscott. The specific image can be found here.

The original stock image.

Using the Lasso Tool (L) and the Move Tool (V), I’ve resized the majority of the image to give a more exaggerated image. Ideally I want the eyes to be the focal point of the illustration, so I make sure that the eyes and the irises are the most prominent.

Using the Brush Tool (B) I sketch and draw on the afro and hair band to give me an idea of what the overall composition may look like. I then bring this over to Illustrator to work on.

Step 1: The manipulated stock image.

Step 2

Open up Illustrator and a New Document (Ctrl + N) in with a Print document profile and Color Mode CMKY.

Go to File > Place and locate the modified stock image. Using the Free Transform Tool (E), resize the stock image to the canvas. Double click on the layer folder containing the stock image and rename it “Reference” and click on OK.

Create New Layer and rename it “BG”. Within this layer folder, use the Rectangle Tool (M) to draw a white filled rectangle to cover the canvas and reduce the opacity to 30%. This is a similar method to say using tracing paper on top of a drawing.

Finally Create New Layer and rename it “Bases” and then lock the Reference and BG layer folders.

Step 2: The canvas is prepped to start vectoring!

Step 3

Within the Bases layer folder I’m going to begin adding “base layers”. These are shapes of 100% opacity which I will use later on for shapes for clipping masks for the shading.

In total, there are four base layers: the back of the afro (C=60, M=65, Y=70, K=70), the skin (C=15, M=30, Y=35, K=0), the hair band (C=20, M=100, Y=90, K=0) and the afro overlapping the hair band (C=60, M=65, Y=70, K=70).

Step 3: The outline against the reference image and the base layer preview.

Step 4

Create New Layer and rename it “Skin”.

Copy (Ctrl + C) the skin base layer and Paste in Front (Ctrl + F) the shape into the Skin folder. Hide the Base layer folder and set the Skin folder to preview by Ctrl + Clicking on the hide Toggle of the layer palette. This is so you can see the reference image underneath while you draw the shapes for the shading.

Step 4: Skins folder on preview to show the reference image underneath.

Step 5

I’m going to be adding shading to the portrait. Using the Pen Tool (P) I will create a variety of shapes in the areas where there are shadows cast or there are darker areas in the skin. The fill color will be just a bit darker than the skin color (C=35, M=60, Y=70, K=15) and the Opacity of 5%.

Using the reference image as a guide, I begin adding the shading shapes. Adding larger shading shapes first.

Step 5a: The first two shading shapes.

Once the initial shapes have been added, I add further shapes within them to give darker shading. If you overlap areas of low opacity over each other, it will appear darker. With this process of skin shading I can gradually overlap the shapes to build up the contrast in the portrait.

Step 5b: Adding further shapes to increase the shading contrast.

I keep on adding further shapes to give a smoother look to the skin. Typically when viewing a portrait you’re drawn into the eyes, the lips, the hair… if the skin is flawless. If the skin and the shading hasn’t been rendered well, then this will always show.

Step 5c: To give an idea of the amount of shapes used in the nose to give the contrast required.

I keep building up the shading shapes until I’m satisfied with the level of detail. If I can see parts of the portrait clearly, for example detail in the ears, eyelids and nostrils; then I’m happy with the detailing.

Step 5d: Initial shading is complete, but this is only one shade!

Step 6

As you may have noticed in the image Step 15d, the shading is overlapping the skin base layer. I’m going to trim this off using a clipping mask.

Select all the shading shapes, excluding the copy of the skin base layer and Group them (Ctrl + G). Drag the group below the skin base duplicate and then recolor the duplicate to black.

Select the group and the duplicate and go to Object > Clipping Mask > Make (Ctrl + 7).

Step 6: The skin shading clipping mask is applied.

Step 7

Repeating the same process as Step 15, I’m going to add further depth to the shading by using a darker skin tone (C=45, M=65=, Y=70, K=40) with the Opacity set to 5%.

The key with using the darker color is to create smaller shapes for the darker areas rather. If you feel you’ve missed a section of shading which is a larger area, I would suggest using the color/process in Step 5.

I focus on adding shading to the edges of the skin base layer, around the eyes, nose, centre of the lips and ear details. These almost always have deeper shadows than the rest of the portrait.

Step 7a: Adding darker shadows to the portrait.

Once I’m happy with the shapes added, I group up the shapes and then drag and drop them into the clipping mask group with the other skin shading.

Step 7b: The darker shadow shapes are added to the clipping mask group.

Step 8

As I’ve now added the main shadows in the portrait, I will need to add highlights to the skin. I do this using the same color as the skin base layer (C=15, M=30, Y=35, K=0), but setting the Blending Mode to Screen and the Opacity to 7%.

I no longer use the reference image as a guide as I have the structure of the face. The parts of the illustration which have no shading present are the areas I’ll be looking at building up highlights on. If you don’t feel comfortable with this, then continue using the reference image to guide you – it’s what it’s there for!

Step 8a: The placement of the highlighting shapes.

As with before, now I’m happy with the highlight shapes I’m going to Group them (Ctrl + G) and add them to the clipping mask group.

Step 8b: The skin base with the shadow and highlight shapes.

Step 9

I create a transparent radial gradient using the skin base layer color (C=15, M=30, Y=35, K=0) with the centre at 100% opacity and the outside at 0%. I’m going to use this to add further highlights to the skin with the Blending Mode of Screen and the Opacity of 30%. The benefits of using gradients in skin shading is that it helps smooth the skin and make it look iridescent.

Step 9a: Adding further highlight shapes with a transparent radial gradient.

Then when all the shapes are placed, Group them (Ctrl + G) and add them to the clipping mask group.

Step 9b: The skin looks smooth with the use of gradients.

Step 10

The skin isn’t all one color and this is especially true for a glamorous woman who loves her make up. I’m going to add blush to her cheeks to give a rosier appearance.

Firstly I create a magenta to magenta transparent radial gradient. Then using the Ellipse Tool (L), I draw a circle on one cheek. Then Copy (Ctrl + C) and Paste (Ctrl + V) the shape and move it to the opposite cheek.

Then reduce the Opacity to 45% and the Blending Mode to Soft Light. Drag and drop the shapes into the clipping mask group when done.

Step 10: Adding pink blush to the cheeks using a transparent radial gradient.

Step 11

In the corner of a person’s eyes, the skin is often a slight shade of grey. So to incorporate this into the portrait I’m going to use a similar method as above, but using a black to black transparent radial gradient. The Blending Mode will be set to Hue and the Opacity at 30%.

Drag and drop the shapes into the clipping mask group once completed.

Step 11: Black transparent radial gradients are added to the corners of the eye.

Step 12

Using the darker skin shade (C=45, M=65=, Y=70, K=40), I’m going to create a transparent radial gradient and add a change in tone to the sides of the arms/shoulders, under the nose and under the chin/neck.

Then setting the Blending Mode to Color Burn and the Opacity to 20%.

Step 12a: Brown transparent radial gradients are added.

Then I’ll Group the shapes (Ctrl + G) and drag and drop them into the clipping mask group.

Step 12b: Due to the gradients the face looks almost porcelain.

Step 13

I’m going to create a new art brush using the Ellipse Tool (L), draw a slim black filled ellipse. Using the Convert Anchor Point Tool (Shift + C) to just click once on the end tips of the ellipse to taper the ends.

Drag and drop the shape into the Brush palette and select “Art Brush” then copy the below settings.

Step 13: Creating a curved tapered art brush.

Step 14

Create New Layer and rename it “Hair”.

Copy (Ctrl + C) and Paste in Front (Ctrl + F) the skin base layer and the two hair base layers. Using the Pathfinder options, I Minus Front the skin base layer from the larger hair shape.

Then selecting both of the hair base layers and back in Pathfinder again, select the Divide option. This will divide the afro into three shapes. Delete the shape which is overlapping the skin and wont be showing.

Finally, selecting both the remaining shapes, Unite them.

Step 14: Creating a complete afro base layer.

Step 15

I’m going to build up the hair gradually by using the Paintbrush Tool (B) and the new art brush with the stroke color of a dulled brown (C=55, M=60, Y=65, K=40).

First I go around the edges of the base layers for the hair to add C shaped strokes and spiral strokes. It’s ok to go over the edges as it will be resolved later on.

Step 15a: Starting with creating spirals around the edges of the base layer.

Then I work inwards from the edges to fill in the rest of the afro.

Step 15b: Drawing the curls inwards.

Be patient while drawing the swirls as if they are rushed they may look too messy.

Step 15c: The completed swirls.

Step 16

Copy (Ctrl + C) and Paste in Front the afro base layer (Ctrl + F).

I’m going to Select All of the strokes (Ctrl + A) and reduce the Opacity to 50%. Then I’ll Group them (Ctrl + G).

Recolor one of the afro base layer and recolor it black then drag and drop it in front of the swirl group.

Then select the swirl group and afro base layer and create a Clipping Mask (Ctrl + 7).

Step 16: The swirls in a clipping mask.

Step 17

With the duplicated afro base layer, fill it with a black transparent radial gradient with the outside set to Opacity 100%.

Then I’ll duplicate this shape and invert the gradient and use the Gradient Tool (G) to reposition and shape the gradient.

Selecting them both, I change the Blending Mode to Color Burn and the Opacity to 80%.

Step 17: Using gradients to add depth to the afro.

Step 18

I’m going to start adding further detailing to the afro now, first I want to add some texture to it. Using the Paintbrush Tool (B) and a larger stroke weight (I used 8pt), set the Blending Mode to Color Burn and the Opacity to 10%. I used a brown color (C=35, M=60, Y=80, K=25) to draw dashes around the hair area.

Overlap the dashes in areas to create darker areas in some parts to add more texture to the hair.

Then group the strokes (Ctrl + G) and add them to the afro clipping mask group.

Step 18: Wide dark dashed strokes are added to give the afro texture.

Step 19

I’m going to repeat Step 18, but with the stroke color of a lighter brown (C=25, M=40, Y=65, K=0), Blending Mode Soft Light and Opacity 10%.

Step 19: Wide light dashed strokes are added to give the afro texture.

Step 20

Afro hair doesn’t have a smooth edge, so I’m going to recreate this effect by adding strokes around the edge/outside of the afro.

I’m going to use the Paintbrush Tool (B) with the tapered brush and a small stroke weight, I’ve used 0.5pt here. I’m going to use a dark brown color (C=60, M=65, Y=70, K=90) with a Blending Mode of Multiply and Opacity of 80%.

The strokes I’m going to make are mixture of spirals, C and S shapes. Cross the lines over, make them a bit irregular, as long as a portion of the strokes are within the area of the afro. In other words, the strokes must not appear to look as if they are floating outside of the edge of the afro.

Group the strokes up (Ctrl + G) and drag and drop them below the clipping mask, not within.

Step 20: Drawing strokes around the outside of the afro.

Step 21

I’m going to split up the base layers now so I can add elements more easily.

Firstly to Create New Layer below the Hair layer folder and rename it “Afro Front”. In the Bases layer folder, drag and drop the brown long shape into this new folder.

Create New Layer below the Afro Front layer folder and rename it “Hairband”. Drag and drop the red hair band shape into this folder.

Step 21: Reorganising the layer folders.

Step 22

Within the Hairband layer folder I’m going to add strands of hair which would be shown between the ear and the hair band.

I’m going to use the Paintbrush Tool (B) with the same settings as the spirals on the outside of the afro. So that is the tapered brush and a stroke weight of 0.5pt. I’m going to use a dark brown color (C=60, M=65, Y=70, K=90) with a Blending Mode of Multiply and Opacity of 80%.

Firstly draw a guide of the hairs between the hair band and the ear. Then fill in and layer on top further strokes to thicken the hair.

Step 22: Using a structure of strands as a guide then thickening the hair up.

Step 23

Create New Layer above the Skin layer and rename it “Lips”.

If you noticed while creating the skin shading, I drew elements of the lips. This is because the lips should be considered as part of the skin. If you treat them as unconnected elements in the illustration, it will look like the lips are floating on top of the skin.

I’ll be using a red transparent radial gradient for the initial shading of the lips (C=20, M=100, Y=90, K=0).

Firstly creating an overall shape of the lips and changing the Blending Mode to Multiply and the Opacity to 30%.

Then drawing two shapes for the top and the bottom lip at a 50% opacity. The bottom lip shape will overlap the top lip to give extra shadow for the top lip. When drawing the lips, draw them slightly within the shape of the initial lip shading shape you created first. This will give the lips a softer edge.

Step 23: Gradients are used to add depth to the lips.

Step 24

Using the same gradient, I’m going to add further shapes towards the center of the lips and underneath the bottom lip.

These shapes I’m changing the Blending Mode to Color Burn and the Opacity to 30%.

Step 24a: Adding depth to the center of the lips and underneath the bottom lip.

I’m going to add further shapes in these places and the corners of the mouth to give the lips further depth.

Step 24b: More gradient shapes are added to the lips.

Step 25

I’ve decided I’m not happy with the color of the lips and wish to change it to a shade of pink. A good way of doing is, is to create a shape on top of the area you wish to recolor. Then fill it with the desired color and change the Blending Mode to Color. Play around with the Opacity of the layer to get the intensity you want.

I’ve opted for a fill color of C=20, M=100, Y=0 and K=0 with the Opacity of 60%. If you notice in the image below, I’ve draw the shape just beyond the lips area. This is to help the lips look as if they are part of the face and not floating on top of it.

Step 25: The lips are recolored to pink.

Step 26

Now that I’m happy with the color of the lips, I’m going to increase the shadow on the underneath of the top and bottom lip.

Throughout this process, I often feel I want to balance the tones and shadow. The shadow is becoming bolder in the lips, therefore I want to balance this off in the nose area.

The below shadows are done with a dark brown (C=45, M=65, Y=70, K=40) with the Blending Mode as Multiply and the Opacity at 7%.

Step 26: Balancing the shadow in the lips and the nose area.

Step 27

The more plump the lips, the more creases there are in them. This is especially true of bottom lips. So to create this texture I’m going to add some spikey shapes around the parting of the lips.

I’m using a pink fill color (C=20, M=100, Y=0, K=0) with the Blending Mode of Color Burn and Opacity of 40%. Some areas will be darker than others, so I’ve overlapped the spikes to reflect this.

Step 27: Adding creases to the lips.

Step 28

To emphasis the creases further, I’m going to start adding highlights to the creases and the top of the lips.

Firstly, create a light pink transparent radial gradient (C=5, M=35, Y=0, K=0) and then use this to draw long shapes between the creases previously drawn. Then along the top of the top lip. Then set the Blending Mode for the shapes to Screen and Opacity 30%.

Step 28: Using gradients to highlight the lips and creases.

Step 29

Now to add the teeth. Using the light pink transparent radial gradient, draw out the teeth individually and then a smaller shape within. This will give the impression of a slight shadow from all sides. Set the Blending Mode to Screen and the Opacity to 20%.

Then using a black transparent radial gradient with the centre at 0% opacity, draw a shape which covers the entire opening of the mouth. Set the Blending Mode to Multiply and the Opacity to 25%.

Using a solid black color, add further shadows in the corner of the mouth opening and in between the teeth on Mulitply and 25% as before.

Step 29: Adding the teeth and inner mouth shadow.

Step 30

Finally, using the Ellipse Tool (L) with the light pink transparent radial gradient on the Blending Mode Color Dodge and Opacity 40%, add circles on the bottom lip and along the outside of the lips. This is to give the impression of shine and glitter.

Step 30: Creating a glitter effect with radial gradients.

Step 31

Create New Layer above the Hair layer folder and rename it “Eye shadow”.

I’m going to create to transparent radial gradients. A green one for the eyelid (C=85, M=10, Y=100, K=0) and a yellow (C=0, M=0, Y=100, K=0) gradient for above the eyelid. Set the gradients to Blending Mode Color Burn. This will give me a good base for the eyeshadow.

Step 31: Using simple gradients for disco eyeshadow.

Step 32

Create New Layer above the Eye shadow layer folder and rename it “Eyes”.

Using the Pen Tool (P) and a white fill color, draw around the whole eyeball including the corner. Then draw within the eye ball but excluding where there would be a slight shadow. Finally adding white shapes either side of the iris but within the other shapes.

Then reduce the Opacity of the shapes to 40%. This is because I want to give the eyeball some impression of shadow and eyeballs aren’t white!

Step 32: Adding white shapes for the eyeballs.

Step 33

I’m going to use the Ellipse Tool (L) to draw a circle for one the iris of one eye with a blue fill color (C=85, M=50, Y=0, K=0). Copy (Ctrl + C) and Paste (Ctrl + V) the circle and move it into place for the other eye.

Using the Pen Tool, add anchor points (+) where the circle meets the upper and lower eyelids. Then remove the anchor points (-) which are beyond the eye ball.

Copy (Ctrl + C) and Paste in Front (Ctrl + F) the shapes and using the Free Transform Tool (E) decrease the size of the shape slightly.

Then select all the blue shapes and reduce the Opacity to 75%. Due to duplicating and resizing the shape, it gives the iris a soft outline.

Step 33: Creating the shape for the iris.

Step 34

Using the Ellipse Tool (L) and a similar technique, I’m going to create a circle for the pupil filled with black and with the Blending Mode Multiply and Opacity 70%.

Duplicate the circle and decrease it’s size to soften the edge. Then Copy (Ctrl + C) and Paste (Ctrl + V) the two circles and place for the other eye.

Step 34: Creating the pupil.

Step 35

I’m going to begin adding further shading and detail to the eye. The pupil shapes can be used as a guide to where the detailing is surrounding so I would advise these elements to be below the pupil shapes so it doesn’t distort it. Also worth noting, that whatever I do to one eye, I repeat the process for the other.

I’m going to build up the shading and contrast within the iris. Throughout creating this, you need to consider the main color of the iris, which in this case I want to be blue and the shadow and highlight in the eye. The top eyelid and eyelashes will cast shadow over the eye and the iris, so shading will need to be taken into consideration.

My first step is to add shading around the sides of the eye and towards the top by layering a darker blue (C=100, M=100, Y=25, K=25) at Blending Mode Multiply and Opacity 30%.

Step 35: Adding shading towards the top and sides of the iris.

Step 36

Create a new transparent radial gradient with a pink color (C=10, M=100, Y=50, K=0) on the outside set at 100% opacity and the centre with a blue (C=100, M=0, Y=0, K=0) at 0% opacity.

Using this gradient, Copy (Ctrl + C) and Paste in Front (Ctrl + F) the smaller shape for the base of the iris twice. With the first gradient, use it to give a soft outline to the whole iris.

Step 36a: The gradient adds a soft outline to the iris.

Then using the second gradient to give a highlighting area towards the bottom of the iris, but will also give shade towards the top of the iris. Set both of the gradient shapes at a Blending Mode of Color Burn.

Step 36b: The gradient adds contrast to the iris.

Step 37

I’m going to add some detail into the iris. To do this draw a circle using the Ellipse Tool (L) with a yellow fill color (C=0, M=0, Y=100, K=0). Then apply a Zig Zag effect by going to Effects > Distort & Transform > Zig Zag and use the below settings.

Step 37a: Applying a zig zag effect to a circle.

Copy (Ctrl + C) and Paste (Ctrl + V) the shape over to the other iris. Then set the Blending Mode to Overlap and the Opacity to 70%.

Copy (Ctrl + C) and Paste in Front (Ctrl + F) the smaller iris base shapes and use them to create a clipping mask for the zig zagged shapes.

Step 37b: Using a clipping mask to trim the zig zag shape.

Step 38

Using the Ellipse Tool (L) create two circles and Minus Front the smaller circle from the larger. The smaller circle should be the same size as the pupil. Create a yellow transparent radial gradient (C=0, M=0, Y=100, K=0) and fill it circle with it.

Set the Blending Mode to Overlay and the Opacity to 50%.

Step 38: Using a gradient to add further contrast.

Step 39

I want to add more contrast around the outside of the iris. So I’m going to add some dark blue shapes (C=100, M=100, Y=25, K=25) set to Blending Mode Multiply around the sides and top.

Step 39: Adding darker shapes to increase contrast.

Step 40

The eyeball has some shading from around the top lip towards the corners. To reflect this I’m going to add two black transparent radial gradients with the center at 0% set to Blending Mode Multiply and Opacity 35%.

Then I’m going to add a black fill shape around the top of the eyeball and corner of the eyes. This is a more solid shadow cast by the eyelid. I’m going to set the Opacity to 25%.

These shapes and further from now on will be above the eye’s pupil.

Step 40: Using gradients to add a shadow to the eyeball.

Step 41

Using the red from the hair band to create a red transparent radial gradient, draw two shapes at the corners of the eyes. Bring the source of the gradients right into the corner.

Set the Blending Mode to Hard Light and Opacity to 25%.

Step 41: Adding the red to the corner of the eyes.

Step 42

Now to start building on the lashes and to do this I’m going to give our girl a nice thick eye line on her top lashes and a slimmer line along her bottom lid.

Using the Pen Tool (P) to draw several black shapes with the Blending Mode Multiply and Opacity of 25%. I layer them in lower opacities to give a soft line to the eyes as it appears more natural. I also add two shapes in the eye lid crease to define it.

Step 42: Layering black shapes to create a soft line.

Step 43

I’m going to build up the eye shadow further with a shine around the eyelids. Within the Eyes layer folder I’m going to add the same green transparent radial gradient used for the eye shadow on the top and bottom lids. The set the Blending Mode to Color Dodge.

Then adding the yellow transparent radial gradient to the corner of the eyes and set that to Blending Mode Color Dodge and Opacity to 75%.

Step 43: Adding color dodge gradients to the eye shadow to give a shine.

Step 44

With the fill color of the green transparent radial gradient with the Blending Mode Color Dodge and Opacity of 75%, use the Ellipse Tool (L) to draw circles around the eye shadow areas to give the impression of glitter.

Select the all and then Group them (Ctrl + G).

Step 44: Using radial gradients to create a glitter effect.

Step 45

Using the brush I used for the hair, I’m going to use the Paintbrush Tool (B) to create the eyelashes. I’m using 0.25pt stroke weight and stroke color of black. Then setting the top lashes to Blending Mode Multiply and the Opacity to 75%. The lashes are drawn in a slight J shape, so they curve over the lash line and over into the eyeball. Then I Group up the top lashes (Ctrl + G).

Step 45a: Adding the eyelashes using the Paintbrush Tool (B).

The lower lashes aren’t as prominent, so I’m just going to lower the Opacity to 50% for those and then Group them as before (Ctrl + G).

Step 45b: Adding the eyelashes using the Paintbrush Tool (B).

Step 46

To finish off the eyes I’m going to add some white transparent radial gradients to the eyeball to add a shine and light source. These will be set to a 75% Opacity.

I’m going to Copy (Ctrl + C) and Paste (Ctrl + V) the light source so they match, the other elements are drawn individually so they don’t look cloned. In the shines, make the top line of them slightly jagged to give the impression that the eyelashes are casting a shadow.

Step 46: Adding a shine and light source using a white gradient.

Step 47

Create New Layer above the Eyes layer folder and rename it “Eyebrows”.

I’m going to use the Paintbrush Tool (B) with a 0.5pt stroke weight. Using the brush used for the hair, I’m going to draw the eyebrows using a medium brown stroke color (C=45, M=65, Y=70, K=40) set on Blending Mode Multiply and Opacity 45%.

Layer the strokes to give the impression of denser eyebrow hairs in parts.

Step 47: Adding the eyebrows.

Step 48

Going into the Hairband layer folder, I’m going to change the base layer of the hair band to a dark blue (C=100, M=100, Y=25, K=25) to compliment the eyes.

Copy (Ctrl + C) and Paste in Front (Ctrl + F) the base layer and fill it with a black transparent radial gradient with the center at 0% Opacity. Using the Gradient Tool (G) shift the source and change the shape of the gradient to give the impression of shadow at the sides of the hair band and underneath the afro.

Set the Blending Mode to Multiply.

Step 48: Using a gradient to add shadow into the hair band.

Step 49

Create a cyan transparent radial gradient with the source being more concerned towards the centre. Then using the Ellipse Tool (L), draw many circles over the hair band, overlapping some and set them to a Blending Mode of Screen and the Opacity of 35%.

Step 49: Creating a glitter effect on the hair band.

Step 50

With a black fill color, using the Pen Tool (P) draw a shape to represent the shadow which would be cast by the afro bangs/fringe onto the hair band. Set this to Blending Mode Multiply and Opacity 65%.

Step 50a: Adding a drop shadow effect on the hair band.

Then changing the Opacity to % to add a slight drop shadow around the bottom of the hair band onto the forehead. The shape should slightly cover the bottom of the hair band also to give it some depth.

Step 50b: Adding a drop shadow effect on the hair band and forehead.

Step 51

After you’ve put this level of detail and color into a portrait, you may notice that the skin is lacking the same amount of contrast. It’s usually at this point I add further skin shading.

I’m going to add some extra shadow around the ears, nostrils, under the chin and at the sides of the shoulders using a brown shade (C=45, M=65, Y=70, K=40) set to Blending Mode Multiply and Opacity 10%.

Step 51a: Compared to the rest of the portrait, the skin requires more shading.

Repeating this process again but for the highlights and the light brown (C=15, M=30, Y=35, K=0) transparent radial gradient I used previously set to Blending Mode Screen and Opacity 25%.

Step 51b: Adding gradients to create further highlights.

Then once they are drawn, I’ll Group them (Ctrl + G) and drag and drop them to the Skin shading clipping mask group.

Step 52

Create New Layer above all the other layer folders and rename it “Earrings”.

Using the Ellipse Tool (L) with a yellow stroke color and 4pt weight, draw a long ellipse. Copy (Ctrl + C) and Paste (Ctrl + V) it and using the Free Transform Tool (E) make it slightly fatter. Then go to Object > Expand.

Step 52a: Creating long ellipses for the hooped earrings.

Using the Pen Tool (P) and then using Pathfinder Minus Front, remove the section of the hoop which is hidden by the ear lobe.

Step 52b: Using Pathfinder to take away the hidden part of the hoop.

Step 53

Copy (Ctrl + C) and Paste in Front (Ctrl + F) the hoop bases. Using the green transparent radial gradient I used for the eye shadow to fill the duplicates. I’m going to invert it and then using the Gradient Tool (G), reposition and shape the gradient to appear to be the back of the hoop so it’s yellow in front.

Then set the Opacity to 75%.

Step 53: Using a gradient to give the impression of shadow.

Step 54

I’m going to add further shading to the hoops. Firstly by adding two shapes to each of the hoops to give the impression of the inside of them being hollow. This is with a dark green (C=90, M=30, Y=95, K=30) set to Blending Mode Multiply and the Opacity of 60%.

Then Copy (Ctrl + C) and Paste in Front (Ctrl + F) the base of the hoop and use it to create a Clipping Mask (Ctrl + 7).

Duplicate the base hoop again and position a white transparent radial gradient over the yellow portion of the hoop to give the impression of a shine. Set this to Screen, 70%.

Step 54: Adding shading and shine to the hoop earring.

Step 55

Using a similar technique as previous, I’m going to use white transparent radial gradients on Blending Mode Color Dodge and Opacity 75% to create a sparkling effect on the hoops.

I’m only going to place these to the yellow portion of the hoop as it can be assumed that a decorative finish would be applied to the outside of the earring.

Step 55: Sparkles are added to the hoop using a radial gradient.

Step 56

Go into the BG layer folder and using the Free Transform Tool (E), alter the shape of the white rectangle and then change the fill color to a pink shade which was used for the lips (C=20, M=100, Y=0, K=0) and change the Opacity to 100%.

I’m then going to create a vignette effect in the background by duplicating the pink rectangle and then applying a black transparent radial gradient set to Blending Mode Multiply.

Step 56: Adding a vignette effect with a black radial gradient.

Step 57

Create New Layer above the Skin layer folder and rename it “Mole”. I always like to add atleast one mole to the skin, as I feel the flaws in a person give them beauty.

To create a simple mole, offset two brown transparent radial gradients upon each other using the Ellipse Tool (L). Then set the Blending Mode to Multiply and the Opacity to 50%.

I then Group them together (Ctrl + G) and I can duplicate them and place them all over the body where I feel is appropriate. In this piece, I’m going to add a mole above the top lip to bring more focus to the lips and then add a couple to her shoulder.

Step 57: Using gradients to create a mole.

Step 58

Finally, using the Artboard Tool (Shift + O), set the boundaries of the art board so it gives a large boarder around the image.

Step 58: Giving the overall piece a frame using the Artboard Tool.

Conclusion

The portrait itself took about 6 hours to complete with the majority of the time spent doing the skin shading and the hair curls. If you’re attempting a portrait this complex in vector for the first time, try not to rush it. It’s the finer details which help build an overall beautiful illustration and not to mention 100% scalable.

The final vector of our Disco Diva.

(rb)

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

Mobile web browsing is the next big thing. At least that’s what the pundits say. Recent data shows there are about 4 billion mobile users (almost half the planet) (source). In 2011, smartphone sales will surpass desktop/laptop computer sales, moving over 400 million units per year (source).

But haven’t we heard this all before? Hasn’t the mobile web been the “next big thing” for each of the last several years? What gives? It doesn’t really matter that 4 billion people have mobile phones unless they are using them to browse the web.

In previous years, two big factors have prevented the mobile web from taking off like everyone thought: inferior hardware and sub-par web browsers. The iPhone changed both for the better in 2007. Smartphones have taken a giant leap forward in the last three years and mobile Safari has led to several WebKit-based mobile browsers being developed.

So thanks to the iPhone and several other mobile innovations that proceeded it, mobile is for real this time. 25% of those 4 billion people are using the web from their phone today. (source).

If you haven’t built a mobile website before, the whole scene might seem a bit overwhelming. Today we’re going to give you the information necessary to answer some of the tough questions that come up when designing a mobile experience:

• Do we need a dedicated mobile site or just a mobile-optimized one?
• What browsers do we optimize for? How can we test them?
• Should we use a mobile framework? If so, are we depending on it for the UI?
• Which mobile framework is the best fit for my project?
• Which frameworks work best for building a native app?

The Browser Landscape

Prior to diving into your text editor and starting your first mobile site, it’s important to understand the lay of the land. Here are the worldwide browser leaders measured between July and December, 2010 according to StatCounter:

One clarification to be made is that iPhone and iPod Touch are treated separately above, but they are both the same browser from a web developer’s point of view. So if their market share is combined appropriately, it comes in ahead of Opera by 3.34%, making it the market leader.

Opera is a big deal now because it’s platform-independent, available on most smartphone operating systems including iOS, Blackberry, Android, Windows Mobile and Symbian. Opera Mobile v10+ and Opera Mini v5+ (different browsers) both have solid web standards support. Opera also provides excellent developer tools for testing.

Most modern mobile browsers are built on the open source WebKit framework, which debuted in a mobile capacity on the iPhone. iOS, Android, Symbian (Nokia), webOS (Palm) and Blackberry v6+ devices all have WebKit browsers by default. WebKit’s javascript and web standards support is excellent, so the only real thing to worry about is optimizing for various device resolutions.

A few other browsers are not big players at the moment, but are worth keeping an eye on. SkyFire tops the list, available on Android and iOS devices. It recently made headlines for generating over $1 million after only three days on the app store, forcing Apple to temporarily disable sales for a short time because of the demand. SkyFire is known for it’s social media integration and ability to convert flash video to a native format that can be seen on the iPhone.

Firefox Mobile is another up-and-comer. It’s available for Nokia N900 phones or any Android 2+ phones and is based on the same technology as Firefox 4 for the desktop. It boasts great video support (including flash), social sharing features and even user agent switching for more advanced users.

Even Microsoft’s Windows Phone 7 is holding it’s own alongside iOS and Android browsers. So even a browser with the infamous “Internet Explorer” name gets a fresh start in the mobile space.

Mobile First

Luke Wroblewski was the first to boldly proclaim that we should design websites for the Mobile First. Luke argues that designing for mobile first helps you focus on the most important elements since you have such limited screen space. He also says that mobile phones are now capable of more than desktop browsers, such as location-aware features and multi-touch gestures. So why not have the full arsenal of capabilities available to you when designing?

Perhaps the most compelling reason to consider designing for mobile first revolves around media queries. Media queries are part of the CSS3 specification that allow you to specify certain styles based on device parameters, most notably width or height. With either of the following lines of code, I can show styles for a device no wider than 480px:

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)" href="styles.css" />

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

For a great run-down about media queries, check out “Responsive Web Design”, an article by Ethan Marcotte.

The problem with media queries is that they don’t resolve properly on many mobile devices (source: Rethinking the Mobile Web). They are, however supported well on modern desktop browsers and even enabled in not-so-modern browsers with help from a javascript file. So if we start with mobile and use media queries to progressively enhance the layout for the desktop, everything works out! By using media queries to optimize a desktop site for mobile, you run the risk of the mobile browser not rendering it properly.

Meta Tags

Mobile meta tags aren’t nearly as important as they used to be, but there are still three mobile-specific tags worth understanding:

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

The viewport meta tag is the newest and most powerful when it comes to mobile, allowing developers to share the width/height of their content with the browser and control how the content is allowed to be zoomed/scaled by the user. Most modern mobile browsers support this tag. Apple gives a nice overview of what the viewport tag is capable of and also details a few iOS-specific tags in their HTML reference library.

<meta name="HandheldFriendly" content="true" />

<meta name="MobileOptimized" content="width" />

When the viewport tag is not supported by the phone, it can fall back on one of two older meta tags. Both should become more obsolete in the coming years, but are a good fallback presently. “HandheldFriendly” simply identifies your site as “mobile friendly” to the phone, but doesn’t let you set any additional parameters. “MobileOptimized” is a proprietary Microsoft tag, which does allow you to specify a width, but isn’t flexible as to zooming or scaling. (source: http://davidbcalhoun.com/tag/mobileoptimized)

Use a Mobile Framework

While it’s not required, most great mobile experiences start with a framework. They help developers create rich, interactive mobile sites with minimal code and are optimized for several platforms out of the box. Popular frameworks also have growing communities, dedicated to improving the product across different browsers as the technology rapidly evolves.

jQTouch

This framework is primarily focused on optimizing websites for the iOS operating system, although it can be easily adjusted to work well for other WebKit-based browsers as well. It’s very flexible and has a solid community of developers working to improve it. (http://jqtouch.com/)

Pros

• Very popular framework with an active community
• Optimized for WebKit, especially iOS
• Great native-like animations and themes
• Good for javascript novices

Cons

• Nearly 70k minified, includes desktop version of jQuery
• It takes some research to find good tutorials
• Meant for smaller sites, probably not web applications

jQuery Mobile

jQuery is the big player we all know and love on the desktop. They have recently released an Alpha of their mobile framework, which brings a lot of the same goodness to mobile devices. What’s most impressive about this framework is it’s adaptability across all the most popular browsers and operating systems. Their graded browser support chart clearly outlines the support across all platforms. (http://jquerymobile.com)

Pros

• Built on the world’s most popular javascript framework
• Huge community
• Supports virtually every modern mobile browser
• Only 13k minified
• Great UI tools, better for cross-device consistency
• Great documentation, novices can pick it up easily

Cons

• Only in Alpha 2 phase, still has a little ways to go
• Doesn’t really look “native” on any device because it supports so many browsers

Zepto

Zepto, created by Thomas Fuchs (script.aculo.us author), is the perfect mobile framework for jQuery pros. It’s less than 3 kb minified, enables jQuery-compatible syntax (most of it) and is optimized for mobile WebKit browsers. There are no default UI controls, so it’s definitely for the more minimalist coders that are interested in a custom design. The fun chalk iPad project from 37signals was created with Zepto. (http://zeptojs.com/)

Pros

• Only 3.3k minified!
• Active community led by someone with serious javascript chops
• Designed with jQuery-compatible syntax

Cons

• No UI tools, only the basics
• Documentation is good, but demos are lacking
• Geared towards more experienced jQuery developers

Sencha Touch

Sencha (includes EXT JS desktop framework) touch is a very impressive javascript framework specifically geared for mobile web apps. It’s probably the best all-in-one framework right now. However, it’s not for beginners. All of the front-end syntax is javascript, so you need javascript chops and experience with the library to make the most of it. Right now it is compatible with iOS and Android devices. (http://www.sencha.com/products/touch/)

Pros

• It’s beautiful
• Great documentation and (paid) support
• Scalable, built for serious web apps
• Has all the UI tools you would need

Cons

• Only optimized for iPhone and Android so far
• Steep learning curve, must be experienced with EXT JS
• All javascript front-end syntax
• Runs fast, but framework is 369k

Yahoo! Blueprint

Blueprint is a robust framework meant to optimize for literally thousands of different devices. It takes raw XML, communicates with Yahoo!’s web services to generate the pages, then renders the content optimized for the device. The SDK is for more advanced users, but for anyone that has experienced the mobile Yahoo! properties, you know it is very powerful. (http://mobile.yahoo.com/devcenter)

Pros

• Comprehensive device support
• Robust features and APIs

Cons

• As mobile browsers evolve, this might be overkill
• Requires Yahoo! web services to work
• Steep learning curve
• Developer site and documentation is confusing

SproutCore Touch

SproutCore is a popular javascript framework for desktop browsers that gives web apps a native look and feel. It’s best known for running Apple’s MobileMe and iWork web services. SproutCore Touch basically adds touch support to the existing framework. It’s still one codebase as I understand it. So if you already have a SproutCore app, it’s pretty easy to optimize it for something like the iPad. (http://blog.sproutcore.com/post/531215199/introducing-sproutcore-touch)

Pros

• Gives almost instant touch support to existing SproutCore apps
• Mature codebase with some big supporters, like Apple
• UI tools are beautiful on the desktop and mobile devices

Cons

• All javascript front-end syntax
• Steep learning curve

Jo

This newer framework is lightweight (8k) and has some really nice elements to it. Compatible with webOS, iOS, Android and Symbian, it’s probably a great fit for smaller sites that don’t have a lot of UI demands. Jo is still new, but it will be really interesting to see how the open source community builds on this solid foundation. (http://joapp.com/)

Pros

• Lightweight (8k), still has nice UI tools out of the box
• Compatible with several operating systems

Cons

• Community is not as active as with other frameworks
• UI doesn’t really feel native on any device
• Codebase still needs more work to be considered with the top-tier frameworks

DHTMLX Touch

This framework is much like Sencha and SproutCore in that it’s all javascript syntax on the front-end and the code is derived from a desktop framework. With that comes an arsenal of robust UI elements and functionality. The touch framework just came out in December of 2010, but look for it to be a player moving forward. (http://dhtmlx.com/touch/)

Pros

• Comprehensive UI tools to fit any need
• Built to do heavy lifting for web applications
• Cool drag & drop visual designer tool (see video)
• Rich feature set based on desktop framework, lots of potential as the framework grows

Cons

• All javascript front-end syntax
• Steep learning curve
• Still in Alpha at the time of writing, documentation is evolving

CSS Grid Framework

The CSS Grid framework is completely different from the above-mentioned tools because it doesn’t include any javascript or UI tools. Technically, it’s not a mobile framework. It’s a fluid, 12-column grid that scales from 1140px wide down to 430px beautifully. You can build with a Mobile First mentality and use media queries to scale your site all the way up to 1140px.

The days of fixed-width websites are numbered as mobile becomes more of a focus for designers and their clients. The CSS Grid framework gives designers the ability to design for one flexible grid and optimize for devices across the entire spectrum.

Pros

• Same HTML/CSS works for your desktop and mobile site
• Progressive enhancement at it’s best thanks to media queries
• No javascript dependencies to render on mobile devices

Cons

• Not all designs can work with this framework; you have to design for it.
• No native or touch-friendly controls
• Best with smaller sites, probably wouldn’t scale for a web application

Testing Tools

Testing on real phones, while optimal, isn’t always an option. The next best thing is to use a simulator to test your mobile website. It takes quite an effort to find all the available simulators online, so I’ve compiled a list here:

Nokia (Symbian S60)- 5.0 is for touch devices, 3.0 is the latest for non-touch devices. SDKs can be downloaded here- http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Symbian_SDKs/

Opera- simple Mac/PC versions of the Opera Mobile emulator are available for download and they have a web-based version of their Opera Mini Simulator. (http://www.opera.com/developer/tools/)

iOS (Apple)- Apple’s simulator is in their SDK and includes support for the iPhone and iPad. The SDK requires OSX to run. (http://developer.apple.com/devcenter/ios/index.action)

Blackberry- Blackberry simulators are available for download on their website and require Windows in order to run. (http://na.blackberry.com/eng/developers/resources/simulators.jsp)

Android- the Android SDK is available for Windows, OSX and Linux, which includes an excellent device simulator. (http://developer.android.com/sdk/index.html)

webOS (Palm/HP)- the Palm SDK is available for OSX, Ubuntu and WIndows computers on their website. (http://bit.ly/cl9jc1)

Microsoft- the 6.5 developer kit is publicly available, while nothing has been officially released for version 7 yet. Engadget ran a tutorial on how to get it running if you are anxious- http://www.engadget.com/2010/03/20/taking-the-windows-phone-7-series-emulator-for-a-test-drive-vid/

Firefox Mobile- the Firefox Mobile browser is a simple download for Windows, OSX or Linux computers on their website. (http://www.mozilla.com/en-US/mobile/download/)

In Conclusion

So it turns out building a mobile website in 2011 and beyond isn’t so bad. For the most part, mobile browsers now support HTML5 and CSS3 better than desktop browsers. Plus, there are all these open source frameworks to help you with the design and interactions. When it comes time to build your next mobile site, hopefully this article will eliminate the guesswork and help you make a great decision.

(rb)