1. User doesn’t know what the purpose of your site is within 5-7 seconds.

Most users will give up soon after that quick window vanishes…   You already know what you site is there for, so you take it for granted that the user knows too. But often they don’t, and boy oh boy when it comes to those ‘integration solution’ type businesses that appear to do everything and nothing all at once, it can sure be confusing.

A user should never have to work to figure out what your site does. Take that to the bank.

2. User has to wait for your site to load.

Again, users are impatient. Unless your site is a cult design site that users know will be worth waiting for, it’s an epic fail to make ‘em wait more than 5-7 seconds for the site to load. Many will say “3 seconds max, loser!!”.

Given all the places where latency can slow things down, don’t assume the user has the same lighting fast  fiber connection that you do.

If you are a design house and want to show off, give the potential client (everyone who comes to your site is a potential client) a “work examples” page on your site where they can see your seriously tricky Flash work…but don’t lose the potential client before they see your work.

3. Make the most important parts of your site larger than items of lower importance. Use visual heirarchy.

Visual heirarchy. Learn it, live it. There are lots of good books on this topic at Amazon.

Select the most important things you want the user to see, 2-4 items… make ‘em bigger. Select a few more, make ‘em medium sized. All the rest should be small, or just links.

4. Disorganized layouts without a grid are a fail.

To gain the users trust you need an organized easy to understand layout. If your overall layout looks disjointed or disorganized, you are doomed as far as your user TRUSTING your ability to create something of value for them. Granted, some high end fancy design shops can get away with very arty layouts that are hard to navigate (yes it shows how creative you are, we know!)… but for 99% of your work, learn how to apply a grid and use it to organize your layout.

5. Too many visual motifs are a fail. Think simple.

Too many shaded buttons, colors, shadows, gradients, type faces, graphical elements will muddy things. Think simple. Simple is elegant. Create a style guide with some crisp simple elements and stick to it. Limit your main colors to shades of gray and 2 other colors. There is still something positively wonderful about Apple.com.

From: http://www.coolhomepages.com/Top-5-Web-Design-Mistakes/blog-17.html

See below this chart for an interesting trend in Google Adsense too!

From: http://www.coolhomepages.com/Top-30-Most-Important-Web-Technologies/blog-144.html

Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.

The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.

The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.

In total, the test subjects were given more than 500 usability issues, ranging from being distracted by animated graphics to being thrown off course by an illogical checkout flow. These issues were then analyzed and distilled into 63 checkout usability guidelines in a report titled “E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelines from that report with you.

1. Your Checkout Process Should Be Completely Linear

Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.

One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.

The typical way to “accidentally” end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.

Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address” sub-step directs the user to a previous step:

Walmart’s non-linear process. Large view.

Luckily, making the process completely linear is easy. In this case, a sub-step such as “Account creation” should never redirect to a previous step in the checkout process, but instead direct the customer to the next step in the checkout process.

This is critical because the mental model of most customers dictates that a checkout process should be linear. Upon seeing the same page twice, most customers would conclude that the website has an error, because this is what happens with validation errors.

As one test subject said, “This looks suspiciously like the page I was on before. Is there something I didn’t do correctly?”

2. Add Descriptions To Form Field Labels

Issue: Without descriptions, many form field labels can be ambiguous.

“What does this “Address line 2” mean?” a test subject mumbled. Other test subjects were confused by “Billing address.”

The vast majority of test subjects had problems understanding certain labels. They varied in which labels they had trouble with. The problem was critical in a few cases, and one subject gave up a purchase because she couldn’t understand the label for a required field, making it impossible for her to complete the checkout process. Therefore, always provide clear instructions for each field.

One form that caused confusion belongs to HobbyTron, where test subjects had to guess what “First” refers to:

On Apple’s website, the majority of test subjects started typing their zip code in the field labeled “Area code”:

When you have form field labels without any explanation, some of your customers will likely be confused about what information is being asked of them. Alleviate this by adding short descriptions and examples next to labels. Because not all customers need the extra help, you may want to hide these instructions behind a “What’s this?” link, or perhaps slightly fade its color or reduce the font size.

Below are examples of how descriptions below form field labels can help customers understands what inputs are required of them:

Even unambiguous fields, such as “Email address,” are great opportunities to explain what you’ll use the data for. “Email address” may be a sufficient description, but most people would want to know how you’ll use their email address. Why do you need it?

Finally, for fields that users have to fill in by referring to a paper or card, illustrations can enhance the descriptions a lot (for example, an image of an expiration date from a credit card).

3. Avoid Contextual Words Like “Continue”

Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.

Depending on the customer’s state of mind, a button labelled “Continue” in a shopping cart could mean one of two things:

1. Continue shopping
   Say, if the customer is also looking for a shirt to go with those jeans.
2. Continue to checkout
   If the customer has all the products they need and just wants to pay.

Another example is “Back.” Back to the last page? Back to the search results? Where? And how about “Proceed”? These are all contextual words that change in meaning depending on the context (i.e. the page) and the customer’s state of mind.

HobbyTron was one of the websites on which multiple test subjects clicked on the “Continue” button thinking they would continue to the checkout section:

Hobbytron’s Continue button. Large view.

After clicking a wrong button, one test subject said:

It was confusing because I thought, “I want to continue.” I didn’t think about continuing shopping, but rather I was continuing to checkout.

This is a good example of how contextual words, being open to interpretation, can confuse customers. Roughly half of the test subjects at least once clicked a wrong button because of contextual words.

Instead, use words that aren’t open to interpretation, such as “Check out now” and “Shop more.”

4. Visually Reinforce All Sensitive Fields On The Payment Page

Issue: Customers might hesitate if credit card fields don’t appear secure (regardless of actual security).

Many test subjects didn’t think about security until they had to enter their credit card details. In fact, several test subjects talked about certain parts of the checkout page in terms of being “secure” and “insecure” (typically related to credit card details).

Parts of the page with security icons, badges or text and a general “robustness” were perceived as being more secure, while parts without these visual cues inspired less confidence, despite the fact that these fields were all part of the same form on the same page. Technically, there was no difference in security. However, most customers don’t understand the technical workings of forms. All they know about your website is what their gut feeling tells them.

There is a clear divergence between the customer’s mental model of form-field security and the actual security.

As one test subject who had just abandoned their purchase said, “It didn’t look safe enough.” Her reaction wasn’t based on the technical security of the website, but rather on the perceived security of the fields.

Below is a quick mock-up I made to illustrate how you can visually secure your credit card form fields (version B). Notice the background color, padlock image and placement of the GeoTrust seal:

Mock-up of a visual reinforcement. Large view.

By adding visual cues (such as borders, background color, and security icons and badges) around the form fields for credit cards, you can increase their perceived security for non-technical customers.

5. Don’t Use An “Apply” Button In Your Form

Issue: Customers don’t understand “Apply” buttons for distinct sections of a form.

More than half of test subjects were confused by websites with an “Apply” button somewhere in the form; for example, to apply a shipping method to an order.

In almost every case, these buttons were either:

1. Not clicked, even if the relevant input field was filled out;
2. Mistaken for the main form submission button.

Test subjects simply didn’t understand the purpose of having a separate “Apply” button in a form.

Below is Newegg’s checkout, where only half of test subjects who filled in their zip code also clicked the “Go” button (problem 1 from above):

NewEgg’s Apply button. Large view.

The consequence of mistaking “Apply” for the main form submission button is that customers will be redirected back to the same page in order to apply the change, thwarting their expectation of moving to the next step and likely leading them to think that there’s an error on the page (as we saw in guideline #1). This happened to two test subjects, who were left to guess what the error was because no error message was displayed (since a technical error never actually occurred on the page).

Below is a form for American Apparel, where test subjects mistook the “Apply” button for the main form submission button (problem 2) and consequently couldn’t proceed with the purchase.

American Apparel’s Apply button. Large view.

If you really need to update a value before moving on to the next step, then auto-update the value using AJAX or the like, without showing an “Apply” button.

6. Format Field For Expiration Date Exactly As It Appears On Credit Card

Issue: Fields for credit card expiration dates can be tricky to decipher if they aren’t written exactly as they are on the credit card.

Some websites use month names, while other websites use a combination of month names and numbers, while still others just use numbers. Which is best? The correct way to format a field for an expiration date is to match what the customer sees on their credit card (i.e. numbers only). This minimizes confusion and misreading because the user can easily verify the field against their credit card.

Below are four examples of how not to format the fields for expiration date. Example D, with the month written as text and the year in four digits, is the worst.

The correct way to format the month field is to use numbers and to prefix all single-digit numbers (i.e. 1 to 9) with a 0, so that they appear exactly as they do on credit cards (for example, 03 for March).

The correct way to format the year field is to use just two digits, to match the number on the credit card (for example, 14 for 2014).

Our test subjects didn’t have any difficulties when month names were included, as long as they came after the digits. So, “03 – March” is okay, but “March – 03” is not. Whatever is on the credit card should appear at the beginning of each option.

You could put a forward slash (/) between the month and year fields to further match credit cards (so, 03 / 14 for March 2014).

7. Use Only One Column For Form Fields

Issue: Customers have an amazingly difficult time understanding the relationships between form fields in two columns.

Half of the test subjects had problems when form fields were in two columns. There were two typical scenarios:

1. One of the two columns of form fields was missed. It was either dismissed as unrelated or simply overlooked by test subjects.
2. Unrelated form fields were filled in and/or submitted, often causing validation errors.

Below is Perfume’s form for signing into and creating an account:

Perfume.com’s shipping form. Large view.

This form was interpreted in three ways:

1. All form fields should be completed in order to create an account.
2. The “Email address” field and the fields in the right column should be completed to use “Guest checkout.”
3. Either the left or right column should be filled out.

Another example is PetSmart. There, the most common behavior was to overlook the second column, with the “Credit card identification number,” resulting in an error message:

PetSmart.com’s payment form. Large view.

On two occasions, test subjects abandoned their purchase because they kept submitting the wrong data in the wrong column.

Our suggestion is to use a single column. None of our test subjects showed any difficulty with this.

8. Use Shipping Address As Billing Address By Default

Issue: Most customers order products to their home, so requiring both a billing and shipping address doesn’t make sense.

Customers typically order products to their home address. So, by default, you should use the same address for shipping and billing, unless you happen to record data differently for your store.

By defaulting the billing address to the shipping address, your checkout process will have many fewer fields, making it less intimidating for customers. Users also reduce the risk of misspelling their address if they have to enter it only once; they won’t rush through the form as quickly, and if there are errors, the customer will have to fix them only once.

NewEgg’s checkout. Large view.

Moreover, you should hide the billing address fields entirely. Disabling the fields isn’t good enough. On the one website that did this, most test subjects were confused by why the fields were grayed out, with some users clicking on them. Instead, show only the fields for the billing address, unless the customer explicitly asks to use separate shipping and billing addresses.

Some websites have a “Copy shipping address” button. The problem with this is that it also copies any errors, so the customer has to correct the same information twice. While the customer could just click the “Copy shipping address” button once they’ve corrected the error, all of the test subjects in this situation forgot to do so.

Apple’s copy shipping address feature. Large view.

Also, depending on the website’s layout, such a feature could be easily overlooked. On Apple’s website, half of test subjects overlooked the “Copy shipping address” link and ended up typing in the same address again.

A check box (or something similar) is better for this purpose because errors will have to be corrected only once. Amnesty International’s checkout page is a good example of how to do this right:

Amnesty International’s checkout. Large view.

9. Use Clear Error Indications

Issue: Customers overlook error messages, making them less likely to resolve the errors.

More than half our test subjects had serious problems finding or understanding error messages on the websites we tested.

When a customer has problems with a form, the likelihood that they abandon the purchase increases significantly. When a customer fails more than once, they will be inclined to leave the website altogether (whether because they assume they were blocked or the website has a bug or something else).

Below are four examples of a lack of a clear indication of error.

On American Apparel’s website, the yellow bar at the top is actually an error message, saying that the data in the phone field at the bottom isn’t valid:

On Walmart’s website, the two red arrows (next to “Ship to home” and “Site-to-store”) are actually error indicators:

On PetSmart’s website, the red of “State/Province” is not an error indicator, but rather just the style chosen for this particular label:

On Perfume.com’s website, the red does indicate an error in the “Phone” field:

Unless placed in close proximity to the relevant fields, error messages were likely to be overlooked by our test subjects. Many websites present error messages only at the top of the page, not next to the form fields.

Without this proximity, error messages can be difficult to understand. Some test subjects, seeing nothing wrong with the fields, tried to submit the form again, assuming the page didn’t load properly the first time. This, of course, resulted in the same page being shown again with the same error message.

If a customer doesn’t notice or understand your error message, they will not be able to resolve the error or proceed through the checkout process. In such cases, abandonment is inevitable. So, put time and effort into designing and wording your error messages.

Make sure your error messages:

• Are contextualized (that is, not at the top of the page but in close proximity to the relevant fields);
• Are clear and concise;
• Stand out so people notice them (provide high contrast and maybe even use arrows or other visual indicators).

10. Registration Should Be Optional

Issue: Customers strongly resent having to sign up for an account.

Customers dislike having to register for yet another account. This quickly became evident during our testing as every single subject showed great frustration when forced to do it. 30% of them ended up abandoning one of their purchases as a result.

There are many reasons for this resentment.

For one, customers already have a myriad of user names and passwords to remember and don’t want to create an entirely new account just to buy one or two products from an online store.

Another reason is that 40% of test subjects expected to be spammed with marketing material, even if they explicitly declined to sign up for a newsletter during the checkout process. These customers have a mental model in which Account = Newsletter. Or, as one subject described it: “If I create an account, they can send me spam from now on and forever.” Their prior experience on websites that check the newsletter box by default and obscure it likely led them to this conclusion.

Also, customers likely realize that you’re storing their information indefinitely. While most companies keep a customer’s information in their database regardless of whether they registered an account, most customers don’t think of this. It’s about perception, and some customers just don’t like the idea of a website storing their personal information.

Signing up for an account also takes time. It adds more steps and fields to the process—and complexity. Yet another reason to dislike it.

Finally, many customers just don’t understand why they need an account to buy a product. As one subject clearly put it, “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.”

Most test subjects didn’t mind having the option to create an account, but they found it illogical and annoying to be required to do so. Some said they would voluntarily create an account if they regularly bought from the website.

If you’re looking for an unobtrusive way to get customers to sign up for an account, then consider simply asking them after they have completed their purchase. “Would you like an account? Just enter a password in the field below.” You can set their email address as their user name and fill in the account information with their order details. This way, the customer isn’t forced to create an account but has an easy way to do so after completing their purchase. (Remember to explain the benefits of having an account.)

11. Don’t Require Seemingly Unnecessary Information

Issue: Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information.

Refusing to give up their phone number, one test subject anxiously clamored, “Look, why do they need my phone number? What do they need that for? They don’t need it!” Every test subject at one point or another complained about a website that asked for too much personal information.

Being asked for a phone number when the website already had an email address was especially irritating when subjects were trying to make a purchase. The logic goes, if the store already has one way to contact them, why does it need another?

Apple’s checkout process.

If the information is necessary, at least explain why. What is obvious to you may not be obvious to the customer. They have learned to expect the worst when shopping online (usually spam email and phone calls).

Our test subjects were surprisingly forgiving, as long as the website explained why the information was needed. Here’s a tip: don’t hide it behind a link; state it directly in the field’s description. In fact, the test subject we quoted above provided their phone number to another website without any complaints because the store clearly explained that the phone number was needed so that it could contact the customer in case of delivery problems.

The more expensive the order, the more accommodating the customer will be. When buying a laptop, customers want you to be able to contact them. But this holds true only if you require the information in order to complete the purchase. On websites where the field was optional, our subjects weren’t comfortable giving their phone number and simply left the field blank. However, this means that required and optional fields must be clearly distinguished.

Designing A Better Checkout Experience

While there are many more subtleties to designing a good checkout experience, these 11 guidelines go a long way. If you adhere to them, your checkout process will perform well above average.

In a study that he conducted 10 years ago, usability guru Jakob Nielsen concluded that large e-commerce websites violated many basic checkout usability guidelines. It seems little has changed when you look at websites like AllPosters and Walmart.

While a lot of the big websites boast impressive features such as geo-targeting, address validation and state look-up, they don’t manage to get basic usability principles right, and they suffer greatly as a consequence.

With the latest improvements in Web technology and browsers, the potential to create an amazing user experience has increased dramatically. Yet, advanced features shouldn’t be the focus until basic usability guidelines are met. If we add the latest technology just because it’s new and exciting, then today’s abandonment rate of 59.8% is unlikely to decrease.

Things like meaningful flow (see guideline 1), good copywriting (2, 3), simple form design (4, 5, 6, 7, 8, 9), and privacy considerations (10 and 11) go a long way to creating a great checkout experience.

Do yourself and your customers a favor by following these 11 guidelines. Once you’ve covered the basics, you can venture into more advanced territory.

You can find further checkout usability guidelines in our report titled E-Commerce Checkout Usability (not free).

From: http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

Today, we are glad to release a set of 20 high quality E-commerce Icons in 64×64px, available in .png-format. This set was designed by Web Icons Set with the purpose to be used in e-commerce websites and has been exclusively released for Smashing Magazine and its readers. The set includes icons such as Empty Basket, Full Basket, Credit Cards, Delivery, Secure Payment, Checklist, Gifts, Shop Open, Shop Closed, Contact, Wallet and others.

Download the Icon Set for Free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. Please link to this article if you want to spread the word.

• Preview
• Download the Set (.zip, 0.3 Mb)

Behind the Design

As always, here are some insights from the designer:

Web Icon Set aims to provide professional and quality Web icons to Web designers and developers. Every icon is 100% hand-crafted with a strong focus on consistency and usability. We’ve tried to create a set of professionally designed e-commerce icons that can help designers build their e-commerce websites.

Thank you very much, guys! We really appreciate the effort!

From: http://www.smashingmagazine.com/2011/07/28/freebie-professional-e-commerce-icons-set-20-icons/

With this in mind, many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay’s strategy will be very different from an individual’s strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device.

Increasing mobile support could lead to a better experience, but at what cost?

So, as website owners define the level of support they aim to provide, a scale of support for mobile devices emerges. Picking where on the scale your website should sit can be quite tricky; each level of support is not without its pros and cons. Let’s take a look at some of the more common approaches:

Approach A: Tweak What You Have

The most basic and, thus, quickest option is to do only what is required to get the website to work on mobile devices. I use the word “work” loosely here because it can be very subjective, but the main goal is to ensure that the website displays and functions properly on mobile devices and perhaps similarly to the desktop experience.

Sure, delivering a desktop experience on a mobile device is not ideal by any stretch of the imagination, but this option simply offers the minimum required to get the website to function and display OK. With modern mobile devices offering good CSS support and zooming functionality, visitors should at least be able to access the information they need.

How to Implement This Approach?

Simple tweaks could include adjusting the viewport and text size, which will affect the way the website displays on a mobile device. The default viewport dimensions should work well for most layouts, but we can make adjustments using the meta element:

<meta name="viewport" content="width=device-width" />

Text size can also be adjusted for some mobile devices using the CSS text-size-adjust property which specifies a size adjustment for displaying text content:

html {
-webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
-ms-text-size-adjust: auto; }

Different text-size-adjust values demonstrated on the iPhone.

More information on the text-size-adjust property is available in the Safari Developer Library. With a small number of tweaks, you should be able to optimize your website to appear as usable as the desktop experience.

Be careful when making any adjustments to the CSS for mobile visitors: you do not want desktop users ending up with a 200% font size by default! If you think this might happen or you want to further improve the experience, consider putting the CSS in a separate file:

<link rel="stylesheet" href="…" media="handheld, only screen and (max-device width: 480px)" />

Pros:

• Quick to implement;
• Minimal work required to replicate the desktop design;
• Strong brand identification with basic consideration for mobile visitors.

Cons:

• Mobile users could suffer from a poor experience;
• Slow due to users downloading styles and large assets;
• Content and navigation path are not optimized for mobile visitors.

Further Reading

• Pocket-Sized Design: Taking Your Website to the Small Screen
• Safari Developer Library
• Return of the Mobile Stylesheet
• Targeting Screens From Web Apps

Approach B: Adaptive Layout (Media Queries)

Media-dependent styling has been around for a long time; you will almost certainly have used “media types” before:

<link rel="stylesheet" href="…" media="print" />

Media queries, on the other hand, have really started to gain popularity since browser vendors began to support the W3C’s CSS3 “Media Queries” specification.

Most modern browsers, including mobile ones, should now be able to query such things as width, height, device width and height, orientation and more. This has led to more people using media queries to provide responsive designs to their visitors:

Hicksdesign demonstrates adaptive layouts using media queries.

For older browsers, including Internet Explorer 6 to 8, several solutions are available that add some level of support for media queries, such as Respond.js by Scott Jehl.

How to Implement This Approach?

We can target specific resolutions and device sizes. For example, we could target mobile devices with a maximum device width of 480 pixels, such as the iPhone:

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

Or we could put the same media query in our CSS file:

@media only screen and (max-device-width: 480px) {
    // insert styling here…
}

Adaptive layouts need to work with the content already available on your website. This means that the source order and mark-up can play a vital role in providing a logical order to content when linearized for narrow layouts. You will also need to take into account that images will need to scale to fit as their containing elements adapt to different layouts. One way to achieve this is to specify a maximum width:

img { max-width: 100%; }

You could consider providing the mobile experience as the default and the desktop experience through media queries, an idea discussed by both Luke Wroblewski and Peter Gasston. Combining this approach with something like Adapt.js or 320 and up could improve performance for mobile visitors.

However, making the mobile experience the default isn’t without its own problems. Always consider your audience, and review visitor data before finalizing your approach.

Pros:

• Quick to develop, especially when considered from the start;
• Cheap to produce because minimal additional design is required;
• Can result in improved readability and experience for mobile visitors.

Cons:

• Older mobile and desktop browsers, including Internet Explorer 8, do not natively support media queries;
• Visitors could face a short learning curve if the navigation and layout are altered;
• Rendering could potentially be slower as images and non-critical content in the HTML are being downloaded.

Both approach A and approach B beautifully embrace the “One Web” philosophy which sees the Web as one universal medium that should adjust itself to the different environment of its users. Using mobile tweaks and media queries can help to keep the website a standalone, universal entity optimized for both mobile and desktop user experiences. As Jeremy Keith writes in his article,

“Recent developments in areas like performance and responsive design means that we can realistically pursue that vision of serving up content at a URL to everyone to the best ability of their device. At the same time, the opposite approach—creating multiple, tailored URLs—is currently a popular technique.”

— Jeremy Keith, One Web

We will discuss the latter approach in the next sections of this article.

Further Reading

• Responsive Web Design: What It Is and How To Use It
• How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
• Flexible, Mobile-First Layouts With CSS3
• High-Performance Mobile

Approach C: A Dedicated Mobile Website

A website dedicated to mobile users aims to deliver an optimized, and often very different, experience to visitors. These micro or mobile websites can take on a life of their own and often require a lot of research and analysis in order to prioritize and deliver the most important content to users.

Mobile websites from the likes of eBay and Amazon show a very different strategy than their desktop equivalents because screen space and file sizes are at a premium.

How to Implement This Approach?

A dedicated mobile website will normally reside on its own domain or sub-domain, such as mobile.twitter.com:

The main Twitter home page and the mobile version on an iPhone.

Redirecting mobile traffic to a dedicated website ensures that visitors arrive in the right place. But if you do this, provide a link to allow visitors to access to the full version! Also make sure that mobile users are redirected to the correct page when deep linking from another source.

Assets such as images should be kept to a minimum. And popular content, common tasks and key navigational paths should be highlighted to give users exactly what they want. More often than not, there is no room for advertisements in mobile versions.

Despite the extra work, the result can be a faster, more streamlined experience that puts the most important features and content at the user’s fingertips.

Pros:

• Greatly improved performance;
• Optimized paths make it easy and fast for users;
• Enhances your support of and appeal to growing mobile consumer market.

Cons:

• Relatively expensive to build and maintain;
• Time-consuming because assets must be optimized and content prioritized;
• Higher learning curve if the layout and content are very different from the desktop versions.

Further Reading

• A Study of Trends in Mobile Design
• Lessons From Mobile Web Design
• How to Build a Mobile Website

Approach X: Native Apps

Finally, another option to consider is a native app. Apps can be the ultimate in an optimized, streamlined journey for visitors, and they often have native controls. Several properties, such as eBay, Twitter and Amazon, have clear user goals and have therefore invested time and effort into creating native apps that provide the best possible experience on a wide range of devices.

How to Implement This Approach?

A native app should provide the best possible experience for users on the go, while taking full advantage of device-specific features and controls. This approach is very different from the others described, and the project could be considered “ad hoc” development, correlating more closely to the user’s goals than the content or features on your website.

If this appeals to you, consider using an SDK, such as the ones available from PhoneGap and Appcelerator. These SDKs enable developers with a Web background to create applications and tap into native APIs that are not always available in the browser. Native app development can be quite bespoke and is sometimes undertaken parallel to the main website.

Facebook, which offers a native app, is a good example of how a integrated approach can ensure that content is accessible through full, mobile, touch and app versions, each optimized for the best possible experience.

Facebook can be accessed through full, mobile, touch and native app interfaces.

Pros:

• Streamlined journeys;
• Device controls are native and optimized for platform in terms of speed and performance;
• Incredibly lightweight, with minimal bandwidth usage.

Cons:

• Requires bespoke development;
• Creating and maintaining apps for a range of devices is time-consuming;
• Third-party approval is required before the app is available in stores.

Further Reading

• Apps vs. the Web
• Mobile Apps: Design for Mobile Conversion
• A Useful Collection of iPhone/iPad Apps Developer Tools and Resources

Which Approach Is Right For You?

Approach A and Approach B offer varying levels of support and often could be considered as a “quick win” strategy. Consider them if you want to improve the experience and optimize readability for mobile visitors at minimal cost.

A strongly related design strategy would be to start with a mobile layout of the website first, having a strong focus on content and navigation and then extend the mobile experience to larger desktop experiences. You can find some interesting workflow techniques for this strategy in Luke Wroblewski’s conference notes of Ethan Marcotte’s talk The Responsive Designer’s Workflow. For instance, you might need to consider using server-side media queries as well as fluid images in the development process.

Approach C requires considerably more time to develop and maintain but results in a faster, more streamlined website for task-oriented visitors. Approach X requires significantly more time to develop and approval from third-party app stores. But it might be ideal if your brand has many mobile users who expect a flawless experience. The main problem with these two approaches is that they aren’t scalable as new mobile devices might require new versions of the websites which increases costs and makes maintenance more difficult.

Ultimately, your approach should be guided by your content, objectives and visitors. What might work in theory doesn’t necessarily work in practice. A bit of digging in your analytics might show that a large proportion of visitors are on mobile devices, and so the extra time spent improving their experience would be worth it. Once you have all of the data, you can make an informed decision about which approach will benefit you — and more importantly — your visitors.

From: http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/

There was a time when kids’ websites were brash and busy, packed with colors and cartoon typography. Fortunately, the scale of the children’s market across most product ranges has resulted in rapid innovation in recent years. Most websites aimed at children (or children and adults) now follow principles that take some account of kids’ perspectives on Web design.

Both young kids and teenagers appear to like many of the same design traits that adults like, including clarity and high-quality content. At the same time, kids seem to enjoy a wider range of interactive features and greater novelty. This article explores child- and teen-friendly Web design guidelines and looks at the steps designers should consider before getting involved in work that will be marketed to kids and their parents or caregivers.

Hopefully, Web designers will be able to use these guidelines to attract more business from clients who deliver Web services to children, by demonstrating an awareness of the needs of this special age group.

Show Respect

Children become sophisticated consumers from a surprisingly early age. They are sensitive to age-targeting and bias in website design, so it’s important not to talk down to them.

A designer’s best defence against patronizing youngsters is to get some kids to comment on the design in the planning stage, because there’s a difference between remembering what it was like to be a kid and being a kid. This distinction operates on a number of levels in a design, ranging from the stylistic preferences discussed on Jacob Nielson’s usability website to the emerging behaviors brought on by widespread generational changes to Internet use.

Lego’s shopping website shows considerable respect for kids and parents alike. Products are arranged in clear categories, the overall styling is clean and consistent, and visitors can zoom in on products to see exactly what they will be buying. Kids can browse and navigate freely, while focusing on the product rather than being distracted by intrusive advertising and gimmicks. When they find the product they want, the child can easily draw their parent’s attention to the splendid item they’re about to pay for.

Stick To Plain Talk

Research-based guidelines by Usability.gov state that adults like plain speaking as much as kids. Consequently, there is little to be gained from excluding kids from any website by making the language, layout, navigation or typography any more complex than is necessary. At the most basic level, over-elaborate language and dense text risk turning a website into a picture gallery, because the text, the wider message and the sale are lost when a child disengages from most of the content. The approach is simply not necessary because more able or sophisticated readers are happy to read concise language and seek further details as required.

Mr. Men is a website aimed at pre-schoolers and their parents. The straightforward design, with its white space, bright colors, concise text and blocky buttons, draws visitors in. The big buttons filter visitors to age-relevant sections of the website. The website features images of all of the characters, activities for pre-schoolers and shopping options. The shopping is outsourced to stores such as Amazon; as a result, Amazon gets most of the cash, but the owner needs to do very little to maintain the website.

The Mr. Men design may not be flashy or highly interactive, but it stays on task and bridges the gap between two generations very effectively.

Gain Trust

Parents and children look for safe, reputable, secure websites where content is actively moderated and support is on hand. Parents in particular will appreciate a certain amount of hand-holding in the form of accessible tutorials and walkthroughs. One of the most successful websites in recent years to build trust also happens to be one of the most controversial.

The various Sims games and websites (such as the Sims 3 website displayed below) cover a wide range of teenage and adult themes. The characters of players can get blind drunk, stay up all night, have kids way too early and do a good deal more. Electronic Arts gets around parental concerns by using its website to convince parents to trust the company. It does so with a well-rounded and integrated set of support services. The clear interface, familiar features from the games, forums, contact details, concise documentation and abundance of video tutorials all contribute to portraying the games as safe, consequence-free sandbox worlds. From there, it’s not a stretch for many parents to think that letting their kids look after a couple of virtual toddlers is not such a bad idea.

One critical part of the hand-holding process for any website is the sign-up process, which Debra Gelman discusses in detail over on A List Apart. The article is recommended reading, because sign-ups are critical to the success of most websites and should be trustworthy and convenient to use.

Web designers might also wish to read through the Byron Report, which investigates the concerns of UK adults regarding children’s websites. The report’s attention on the opinions of adults seems worthy, given that they are the ones completing sales and paying for purchases.

Interact

According to Jacob Nielsen’s research on teenagers, interactive website features (such as forums, mini-games, polls, ranking systems, competitions and 3-D interfaces) are valued by kids if they build a sense of community and foster participation. Bolting such features on will not likely prove effective, because kids will soon see the gaps and re-evaluate the website, despite any initial interest.

Stardoll integrates a range of interactive features and community support very well, offering a glitzy, glamorous look at fashion for tween and teenage girls. Any number of other websites allow you to dress up avatars and chat about your creations online with friends; Stardoll stands out by offering plenty of options for styling avatars and for its friendly and well-integrated community. The interactive community gives it a leg up on websites that offer only interactivity or only a static community.

A recent report (PDF) from PlayScience proposes that the blend of interactive content and community features found on websites such as Stardoll is particularly effective on websites aimed at girls. The research depicts boys as being more focused on games, while girls switch between many different social and interactive activities.

Reward Loyalty

Kids consider their virtual goods and reputation as meaningful possessions, which is the reason they spend money on advancements, awards, objects and other persistent virtual items. With global sales of virtual goods already running at $7 billion annually, many online businesses would likely benefit from design features that attract and retain customers and that promote repeat purchases.

At present there tends to be a divide between website-specific award and ranking schemes on the one hand and aggregated personal content on social networks on the other. A kid’s badges, high scores, avatars and items are generally specific to a website, while their photos, chats, links and music live on a social networking platform.

Websites looking to capture that all-important loyalty that leads to subscriptions and sales of virtual goods might want to take account of how to build and sustain loyalty. If the economics of the website call for a proprietary approach, then beefing up the internal model is probably necessary. If fuller integration is commercially viable, then standalone systems like CubePoints demonstrate the type of coherent schemes that could be put in place. For example, even a standard WordPress subscription website can bring together a reward scheme and social networking functionality with the quick addition of a
CubePoints plug-in and a forum plug-in.

Offer Choice

There are many ways to present kids with choices through thoughtful design. Just a few options are consultative polls, competitions, push-button style makeovers and a lot of custom avatars. Typically, these basic elements should gel with the overall style and, particularly, with any other interactivity on the website.

In addition, Web designers might consider it a priority to offer their own in-house or site-specific choices. Opening up choice in this way involves looking at users’ workflow and the motivations underlying their use of the website. The following are a few ways to create more choice:

• Allowing visitors to adjust the pace and frequency of interaction,
• Offering flexible or open-ended environments,
• Varying the range of activities offered,
• Helping visitors construct and extend their own goals,
• Offering multiple levels of hand-holding,
• Enabling the construction and deconstruction of sections of the user’s experience.

Among such options, the greatest choice comes with co-design, where kids go beyond decorating avatars and completing polls and start to independently shape their own gameplay.

FreeRealms is perhaps the most effective co-design website around now. Players learn the interface, play mini-games, advance through levels and collect possessions. Then, quite suddenly, they are running wizard schools, setting up modest online ventures and investing in real estate. This happens without any instruction or guidance from the game, but rather from within the safety of a moderated and fully logged Web environment. For all intents and purposes, the website operates much like Second Life, without the live ammunition.

Aim For High Impact

For some, high-impact Web design equates with 3-D graphics and both feet jammed on the accelerator. This presents a problem, because few things will make the user’s progress through a website go slower than lavish 3-D content. Certain types of gaming websites are suited to in-your-face 3-D experiences, but there are a lot of ways to achieve high impact.

Comic websites (such as those by Marvel and DC Comics) are particularly good at using existing content to bolster subscription services, mainly by recycling characters and artwork from their extensive libraries. Visitors have pretty much instant access to many high-impact static images and the means to build their own mini-comics and heroic characters in 2-D. There’s no need for much 3-D in these circumstances, because the websites are mainly about enjoying the comic book format. Video games and movies linked to recognized comic brands are already licensed to alternative distribution channels.

Be Child-Centered

Education Arcade’s report (PDF) discusses attempts to combine video game entertainment and education (or “edutainment”) several years ago. These efforts show the dangers of passing off learning activities as fun by sugar-coating them with mini-games. Some game websites, including Sony’s FreeRealms, have succeeded in offering independent learning within a decidedly gaming world. For now, delivering formal learning through genuinely entertaining websites remains a relatively expensive proposition.

However, Sims 3 and Free Realms are examples of highly flexible but not hugely expensive resources that support a wide range of curriculum priorities. For those who need more convincing, the relatively new start-up MangaHigh is an encouraging effort to combine purposeful number-crunching alongside genuinely entertaining design and gameplay.

The dividing line can be uncertain and contextual, but as soon as kids sense that an activity or interaction prioritizes a lesson ahead of engagement and motivation, they seem to switch off.

Conclusions

Ordinarily, now would be the time to highlight a couple of points as key considerations. But it might be more helpful to draw attention to a particular approach that hasn’t been covered yet but that stands out from the rest.

Kids enjoy novelty, and adults go to a lot of trouble to organize parties and outings that give kids new ideas and novel experiences. Ideally, a website aimed at kids does the same. Ask yourself what you could offer that would fit seamlessly in their existing Web experience and that would enable them to do something they haven’t done before.

If you want to do that, you’ll need to suppress the urge to start on screen and spend a bit more time in the planning stage. The reward is a much tighter fit between your design and the kids you’re designing for.

Case Studies And Tutorials

The websites identified above as examples of good design share a number of characteristics, including a strong visual style, plenty of color and a focus on clarity. Cartoons are perhaps the most popular style right now, but designers have a lot of options. A look at the Periodic Table of Visualization Methods would help most teams. The right side of the table is the place to pick up ideas on designing for kids.

Archives and Museum Informatics reviews the design process for the Tate Gallery’s online resources for kids aged 6 to 12. The case study, titled “Doing It for the Kids: Tate Online on Engaging, Entertaining and (Stealthily) Educating Six to 12-Year-Olds,” offers a step-by-step approach to meeting the design requirements of a large organization. Cartoons and comics are not the only option, but they have a visual language that many kids appreciate. Scott McCloud’s Understanding Comics has been around for a while, and it is an invaluable guide to designing comic art or in a comic style in any media.

Participants in the 2011 SxSW Interactive festival visualized the entire conference using infographics. Their efforts led to the remarkable display of sketches, charts and diagrams on display at Ogilvy Notes. One of the visualizations is all about Web design for kids and well worth a visit. The chart provides a good starting point for thinking about what factors to take into account when mapping out a website for kids.

Web designers with strong graphic design skills have a valuable weapon in their arsenal. Those without affordable access to such skills could be at a disadvantage, but it’s surprising how much can be achieved with a digital camera and some cheap software. For example, Comic Life is inexpensive and able to apply a wide range of comic layouts and styles, yielding some fairly credible results in PDF format.

From: http://www.smashingmagazine.com/2011/07/06/best-practices-for-designing-websites-for-kids/

brandstack

hugsformonsters

inflicted

ipolecat

stereosuper

ngenworks

pixiapps

wireframeplus

pieoneers

jeandelbrel

dailymile

gdzl

cascadebreweryco

themanyfacesof

marketingvirtuel

dmcloud

irrationalgames

carolrivello

creashit

leegustin

apadeloup

sohtanaka

mailchimp

upthemes

davidhellmann

agens

4mots

criticalzero

playr

denisechandler

From: http://designm.ag/inspiration/30-interesting-404-pages/

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.

SpeckyBoy

You might assume that the primary and secondary navigations are marked in a wrong way on the image above, but I believe that this is not the case.

Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).

Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,” “Contribute,” “Advertise” and so on. For other websites, the links might be for the client area, FAQ or help page.

If you’d like to learn more about primary and secondary navigation, “Understanding Site Navigation: Key Terms” is a great article with detailed explanations of different navigation terms, including for primary and secondary menus.

The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.

Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it? No matter how organized the content is, if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, there’s a great method that designers can try: card sorting.

Information Architecture: Card Sorting

What’s the best way to organize content? How should the navigation be labelled and grouped and positioned? How will people use the navigation?

Card sorting is commonly used in information architecture and can help Web designers answer all of these questions even before the design phase begins. Card sorting basically helps designers organize navigation, especially complex navigation, in the most efficient way possible.

One complaint I hear regularly about websites… is that they’re designed around how the organization is structured. Given that the information architecture is usually completed by internal teams, this makes sense. One way to get input on structuring a site to reflect a a visitor’s way of thinking is by collecting input from card sorts.

Card sorts are a way to have website visitors organize and label content. It’s useful to have a visitor show you how she’d approach your website, and grouping and labeling are key elements for determining the best navigation for a website. Of course, you’re likely to get a variety of different groupings from users, so you’ll be looking for overlaps and commonalities while also considering how to help those who used varying  groups and labels.

– Amy Hissrich

Card sorting can be used to determine menus and sub-menus, the wording on them and even their design and structure. We’ll go over the basics here, but be sure to check out the resources below for more information, guides and examples.

(Image: Dunk the Funk)

There are two types:

• Open card sorting is when participants are given cards with content topics and are asked to organize them into groups. They are given no information or context beforehand. Then they name the groups. Depending on the project, participants could be asked to create two groups, unlimited groups, sub-groups and so on. They could also be asked to organize the groups and content into the hierarchy they think best.
• Closed card sorting is when participants are given cards with content topics as well as the categories to put them into (and even sometimes sub-categories). Participants are not responsible for naming the cards. This option is great for exiting websites with established categories, menus, etc.

Below are some resources and further information on card sorting:

• “Card Sorting for Navigation Design”
• “Card Sorting: Introduction”
• “Card Sorting: Mistakes Made and Lessons Learned”
• “Card Sorting: Stacking the Deck for Better Navigation”
• Card Sorting: Designing Usable Categories

There are also many applications for card sorting, some desktop and others online. Online card sorting can be easier to run, but it’s not always the right choice. A great article on UX for the Masses that covers the pros and cons of each approach: “Online Card Sorting: Even Better Than the Real Thing?” For easy card-sorting tools, check out OptimalSort, WebSort and UserZoom.

Grouped Content: Classification Schemes

When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?

Below is a list of the most common content classification methods, along with suggestions for what each is best for:

• Most recent to oldest
  Suitable for time-sensitive content.
• Alphabetical
  Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.
• Most popular or most used
  Great for interest-based browsing, rather than content that users need.
• Geographical
  Is certain content irrelevant to certain regions or sub-regions?
• In the order of the process
  If the content in some way represents a process (for example, “How to file your taxes”), then it could be organized according to the order of actions the user has to take. FeverBee has a great example of this: “How to Build an Online Community: The Ultimate List of Resources.” While the website is a blog, the content isn’t necessarily time-sensitive, so the author has created a great navigational structure that puts much of the content into a step-by-step process.

For more on classification schemes, check out UX Booth’s “Classification Schemes (and When to Use Them).”

From: http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

• Requirements analysis
  This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
• Project charter
  The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
• Site map
  A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
• Contracts that define roles, copyright and financial points
  This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
• Gain access to servers and build folder structure
  Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
• Determine required software and resources (stock photography, fonts, etc.)
  Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.

Resource links for this phase:

• Jumpchart: Client/developer collaboration tool
• Dropbox: File-sharing and collaboration tool
• Mindmeister: Free online mind-mapping software
• Writing Bulletproof Web Design Contracts

2. Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

• Wireframe and design elements planning
  This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
• Mock-ups based on requirements analysis
  Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
• Review and approval cycle
  A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
• Slice and code valid XHTML/CSS
  It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.

Resource links for this phase:

• Printable Sketch Templates for Wireframing
• Color Scheme Designer
• Type Tester, font comparison
• iPlotz, online template and wireframing tool
• Stripe Generator
• Favicon Generator
• Icon Finder
• Stock Exchange, free stock photos

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

• Build development framework.
  This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
• Code templates for each page type.
  A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
• Develop and test special features and interactivity.
  Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
• Fill with content.
  Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
• Test and verify links and functionality.
  This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Resource links for this phase:

• Wufoo, form generator
• Adobe Browserlab, cross-browser analysis
• Choosing the Right Web Platform

4. Launch

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

• Polishing
  Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
• Transfer to live server
  This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
• Testing
  Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
• Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
  Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Resource links for this phase:

• W3C Validation (HTML, CSS)
• Adobe Browserlab, cross-browser analysis

5. Post-Launch

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Always leave the client as succinctly informed as possible, and try to predict any questions they may have. Don’t leave the project with a closed door; communicate that you’re available for future maintenance and are committed to ongoing support. If maintenance charges haven’t already been shared, establish them now.

• Hand off to client
  Be sure the client is satisfied with the product and that all contractual obligations have been met (refer to the project charter). A closed project should leave both you and the client satisfied, with no burned bridges.
• Provide documentation and source files
  Provide documentation for the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises for the client later on, and it will also be useful should they ever work with another Web developer.
• Project close, final documentation
  Get the client to sign off on the last checks, provide your contact information for support, and officially close the project. Maintain a relationship with the client, though; checking in a month down the road to make sure everything is going smoothly is often appreciated.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

From: http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/

It got me thinking – why is that a bunch of good ideas aren’t as good as one good idea? And how can a designer feel free to expand his or her creativity while narrowing the focus?

The approach of throwing everything up and seeing what sticks is great if you’re talking about a brainstorming session and a whiteboard. It’s not a great approach if you’re talking about a thousand printed sheets of 28-lb linen paper. So instead of thinking in terms of limiting your freewheeling ideas, think of letting your ideas fly, but only in an early stage of the process. In other words, as many crazy ideas as you can come up with the better. But don’t print there. Take it a few steps farther.

Stephen King in his book On Writing famously quoted Sir Arthur Quiller-Couch as writing, “Murder your darlings.” It’s harsh and it’s not easy. But as much as you love every one of your amazing ideas up there on the whiteboard – your “darlings” – you must get rid of them and mercilessly go with the best idea for your client and the brand whether it’s the most mind-blowing of your ideas or not. I once had a professor who did his first round of grading papers by picking out one decent sentence out of the whole paper then telling us to ditch the rest and start over from just that one sentence.

But there is an alternative to coldblooded murder – just put the darlings on ice. Keep a notebook or file with the great ideas that didn’t make the cut and save them for another day, another project. No mourning the darlings and no creating a crowded unwieldy design just because you can’t bear to part with them. It works out for everyone.

Sometimes the problem isn’t an over-abundance of creative ideas, but a dearth. We’ve all had days when the creative spark just ain’t there. Too many times, though, I’ve seen busy over-wrought designs that seem as if in lieu of any good ideas, the designer threw a multitude of ideas together and swirled them around like a child smearing food around the plate so it looks as if they ate something. Resist the temptation to throw in everything and the kitchen sink just to distract yourself and the client from the fact that you haven’t come up with a winning idea yet. Then get back to the whiteboard.

Even if you do have several smart ideas, too many of them in one place is not only crowded, it also taxes the viewer’s mind and memory. A logo or design must be memorable. A design that looks like a page out of Where’s Waldo is not easy to reproduce in one’s memory. No one will be able to identify that certain something that truly captures the essence of your brand if it is hidden or if they have to think hard and look closely to find it. A design should capture the brand with an almost singular image, color scheme, or pattern that viewers will come to recognize and associate with your client’s business.

It’s counter-intuitive, but simple designs send a more nuanced complicated message than a design with multiple elements. Instead of distracting the mind, it captures the mind and gives the viewer’s imagination some room to think as well. If you’re struggling to come up with a simpler design a good way to start over is to do some more research on other brands within your client’s industry. Being in touch with the flavor of the industry will help you develop a specific approach from the beginning rather than an all-things-to-all-people approach. Certainly you want your design to be original, but it is also helpful to get a feel for the kind of designs and complexity level that your particular audience is used to and drawn to.

If the name of the brand you are working on is especially creative, engaging, snappy, or memorable, let it do the bulk of the work and find a simple but unexpected way to incorporate a design around it or a design that highlights the name rather than distracting from it.

Coming up with ideas is the fun part of design. But the satisfaction comes when you’ve carved a fine sleek sculpture out of your original mound of ideas. This refining process is worth the work. A lack of focus in design can translate to a more general lack of focus, and no client or designer wants to be associated with a lack of focus. If a business or a designer can’t even keep their stationery looking organized and focused, it sends the message to potential customers that the business or designer is not focused in their other work either. A sophisticated and efficient design, on the other hand, sends the message that complex thinking and efficient work are part of the brand. And that’s one good idea.

From: http://justcreativedesign.com/2011/06/15/be-creative-but-please-dont-overdo-it/