Checklists > Web Design and Development

Effective Use of PHP Variables

Use variable only if you think you will need them again in the same script.

Break down your task into simple steps. You can then focus on the code when typing it out.
Interger zero and a Boolean false are treated as equal.

Use foreach instead of for loop. A for loop requires you to know the number of items in the array.
When you are coding it's OK for bricks to fall and hit heads, but as a developed it's important for you to know which brick came loose and hit your head. Most users DO NOT like falling bricks.

${$variable} - an important tip that has helped numerous times. The braces tell PHP to evaluate the contents of the variable first.

Block Access to Hidden Files and Directories

We try to push our code to productions servers without hidden files and directors, like our revision system directors, but that doesn't always happen. This snippet prevents those files from being accessible:

RewriteCond %{SCRIPT_FILENAME} -d [OR] RewriteCond %{SCRIPT_FILENAME} -f RewriteRule "(^|/)\." - [F]

See also
How To Block Bots, Ban IP Addresses With .htaccess


Colorful Words

Colour in Web Design

Source:Sitepoint article 'Essential colour checklists for Web design' by Marta Eleniak (april 28, 2003)

  • Main ingredient for legibility is contrast. You can test your legibility by converting your site to monochrome. Use strong contrast between the background color and the text color.
  • If you need to show pattern, place it in the center because our eyes work harder to take in patterns on the periphary.
  • Important information to the user does not reply on colour alone.
  • Avoid using too many colours at the same time, it creates a confusing overall effect.
  • Black text on white background is best.
  • Red and green are best used in the centre of the screen and black, white, yellow and blue are best used on the periphary
  • Brighter colours are better by interfaces that will be viewed for a long period of time or if designed for older users.
  • If you want colours to be easily distinguished from each other, use darker shades of blue, red, and purple and paler shades of green, yellow and orange.
  • Colours do not the mean the same thing to different people.
  • To convey low prices use brighter colours such a yellow
  • Beige, blue, burgundy, and dark green give impression of high quality, solidity and tradition.

Do Not

  • Do not use red and green where you need to distinguish between them to understand the content.
  • Do not use blue and yellow together when you need to distinguish between them to understand the content.
  • Do not use grey text
  • Do not use differnt blues simultaneously
  • Do not use fluorescent colours.
  • Do not pair extremes of wavelength (opposite ends of color chart) like red and blue as it induces headaches
  • Do not use high chroma colours together like blue and yellow

Homepage Usability

Here are some tips I learned from reading Homepage Usability by Jakob Nielsen and Marie Tahir.

  • Put logo in the upper let.
  • Include a tagline that summarizes what the company does/site does.
  • Include an About Us section (or better yet, About ).
  • Use imperative language for mandatory tasks
  • Do not use 'click here' for link names.
  • Never name a category 'links', qualify what type of links.
  • If a link launches a PDF, tell the user.
  • Use only icons that are extremely obvious and recognizable.
  • Search input box should allow for 25-30 characters.
  • Do not label the search box, just attach a search button.
  • Window titles should be no more that 7/8 words long.
  • Do not use splash screens.
  • Use relative font sizes, not absolute sizes.
  • Include a privacy policy - establish trust with your visitors.
  • Only include Help if necessary and if so place it in the upper right.

How to Check Reading Level

If you want to check the reading level of a document, you can do that using the spelling and grammar checker in Microsoft Word ( You can also configure the Advanced Search settings ( in Google to show the reading level for documents in the search results.

Meta Tag Suggestions

Be concise, use short words, short sentences, short paragraphs.

A short sentence on average is 12 words.

A short paragraph is on average three sentences (36 words long).

Attention grabbing words:

Announcing, benefit, bonus, choose, claim, discover, dissatisfied, easy, eliminate, exclusive, fast/fastest. Free, free trial, guarantee, help, idea, imagine, improved, introducing, learn, look, love, money, new, now, offer, opportunity, proven, sale, save, secret, select, sensational, special, surprise, today, warning, why, win, you.

More Information

Selecting and Changing All Text Layers at Once in Photoshop and PSE

You can also watch this tip on video on our blog: Selecting and Changing All Text Layers at Once in Photoshop and PSE [Video] When you are working on a project with a number of text layers, there is a quick way to select all of the text layers at once. This is handy to know in case you want to change the font for your project, but you don't want to have to hunt for each text layer and change them manually.

Here's how: Select one of the text layers in the Layers panel. These layers will have a T icon on the left side of the layer. From the Menu bar, choose Select > Similar layers. The software will search for all layers similar to the one you have selected, so in this case all of the text layers will be highlighted. To change the font, get the Type tool while leaving all of the text layers selected. Choose a new font in the Options bar across the top of the editing window. Your font choice will replace the current font type in each text layer automatically. You can change the font size, style and orientation this way, too.

Timesheets and Website Maintenance

Here is a great idea from the Sitepoint Tribune #446 - A Timely Way to Achieve Success

Do You Have Five Minutes?

You've started tracking your time, and are increasingly aware of the amount of five minute freebies you are currently giving away in support requests and tiny content fixes.

What you need is a way to keep the administration of invoicing those small blocks of time to a minimum - for you, and the person receiving the invoice at your client's end.

A few years ago, we embraced the idea of prepaid block hours. These have been a savior for us, and we've managed to claw back many of the minutes and hours we previously wiped off.

To make things even sweeter for our clients, we offer a discount rate to those who prepay their time, and then we charge those 10 minute fixes to these blocks. At the end of the prepaid block, we send a detailed time sheet for the work we did.

We offer a small discount on our five-hour block, then increase it according to the size of the block; we also have 10-hour, 20-hour, and 50-hour plans. We've allowed clients to choose which plan they want and then pay for it up-front, saving everyone the pain of multiple invoices for tiny amounts.

Now, when we're asked by a client to spend 15 minutes tweaking some content, we simply charge it to this block and then send a report at the end.

Try it out; your clients and, importantly, your bank balance will appreciate the move!

UX is Simple

If something is unclear - clarify it

If something is arduous - lighten the load

If something is complex - make it simpler

If something is over verbose - strip it back

If something is ambiguous - clarify it

If something is big - make it feel manageable

If people get lost let them find their way out

If something goes wrong - let people recover

If something seems pointless - show the value

If something is dry add some levity

If something is dreary add some delight

If something needs explaining - explain it carefully

Make the important stuff important and the other stuff less so

Less is more (but you probably knew that)

Make desired actions obvious - show the way

If something feels daunting - provide support

If something goes right - say it did

If something goes bad - say it did

If something requires effort - set expectations

If something feels risky provide reassurance

If something feels fragile make it feel solid

If somethings looks great it’ll help to make it feel great

Bring structure to the unstructured

Don’t presume anything

Don’t try to be clever


Web Form Standards

After several years of trial and error, here are my standards for creating forms.

Separate the content of the form from the code that takes place when the form is submitted. It is WAY easier to maintain the design, allows for the possibility of different file formats, and easier to setup for testing.

Follow the process through from start to finish until there are no errors; but create a test routine in the form to allow full access for debugging the code.

1. Variable names should be logical and explanatory.

2. Set the maxlength attribute to match the MySQL field length.

3. Validate the content input into the form. Always.

Web site Error Codes

301 status code

An HTTP status code returned by a web server indicating that content has been moved from one location to another. A 301 status code indicates a permanent server redirect, which is a signal that the original page no longer exists and that users and search engines should view the new page as the canonical version of that content.

302 status code

The 302 status code means that the document requested is “Found” but temporarily resides under a different URL. Since a permanent redirect has not been used, the client should continue to use the original requested URL for future requests.

400 status code

The 400 status code means a “Bad Request,” indicating that the server is not able to understand the document request due to malformed syntax.

401 status code

The 401 status code means “Unauthorized.” The server is requesting user authentication prior to fulfilling the document request.

403 status code

The 403 status code means “Forbidden.” The server understood the request, but is refusing to fulfill it. The webmaster may wish to alert the user as to why her request has been denied. If the organization does not wish to provide a reason, a 404 (Not Found) status code can be displayed instead.

404 status code

The 404 error message represents a document “Not Found.” This means that the client was able to communicate with the server, but the server could not find the requested document. Alternatively, the server could be configured to not fulfill the request and not provide a reason why.

410 status code

Similar to a 404 (Not Found) error message, the 410 status code indicates that the requested document is intentionally “Gone” (i.e., is no longer available), and there is no forwarding address.

The 410 status code is usually used for limited-display documents such as promotional information. It is up to the webmaster to determine at what point to remove the 410 status message.

500 status code

The 500 error message states that there was an “Internal Server Error” that has prevented the document request from being fulfilled.

501 status code

The 501 error message is displayed when the server does not recognize the document request method. The server is not capable of fulfilling this request and states that the request was “Not Implemented.”

Writing Content for your Web site

Meaningful content on your web site helps visitors make descisions or have fun. Determining what meaningful content is for your web site requires brainstorming and planning. Talk to your visitors, ask questions, look at competitors' web sites.

Your web site is more than just an advertisment, let people know who you are. Tell them what you do, why you do it, and show them how you do it. Testimonials of what others think of what you are doing.

In addition, add media - sound, motion, animation, or video. Make the experience as rich and engaging as possible. But always remember to consider mobile and keep the content light.

Different types of content help meet the different goals of your audience. Use them to add rich content to your site. Getting to know your audience well, so the content you provide hits the mark.

Writing Guidelines Checklist


  • The content of the web site provides value to the user.
  • The writing supports the reader’s task.
  • The user is not required to read or navigate through irrelevant material to reach relevant material.
  • The text includes a call to action.
  • The reader interacts with the text as much as possible.
  • The information is accurate, authoritative, and up to date.
  • The information will be easy to maintain.
  • Items that need to be regularly updated have been documented.


  • The text is comprehensible and targeted at the right reading level.
  • Sentences are short, direct, concrete, and active.
  • New information is grounded in known information.
  • Text is in lay language, avoiding jargon, insider references, and
  • obscure humor.


  • The typeface is legible and the font size is sufficient.
  • Italics are avoided except at large sizes.
  • Boldface and all caps are only used for short pieces of text. (Boldface is
  • preferred over all caps.)
  • Text has sufficient contrast with the background color and is not placed
  • over a conflicting pattern.


  • Emphasis is provided with appropriate headings, lead-ins, and pull quotes.
  • Opening sentences and paragraphs summarize the content.
  • Text is short, simple, and concise.
  • Text is specific and objective.
  • Text is broken into useful chunks and bulleted


  • Page titles provide useful orienting clues.
  • Headings match the reader’s goals.
  • Readers know where they are and what each page is about.


  • The text is divided between pages based on user tasks (i.e., pages are divided so users can skip portions irrelevant to them).
  • If scrolling is required, the user has appropriate cues within the text that more material is present, and horizontal rules are avoided.
  • Pages are self-explanatory: each page stands on its own.


  • Fundamentals are sound: grammar, spelling, capitalization, and punctuation.
  • Tone is natural and accessible.
  • Style is consistent.
  • Terminology is unambiguous.
  • Active sentences are used.


  • Static text is never blue or underlined.
  • Text links are left in the default color.
  • Different types of links are distinguished graphically (e.g., audio clips
  • vs. video clips).
  • Link text is descriptive and specific.
  • Email links explicitly show the email address.
  • Links don’t cross punctuation or line breaks.


  • The order of steps through the form is clear.
  • Submit buttons are clearly labeled with descriptive text.
  • Reset buttons are avoided.
  • Required fields are clearly labeled.


  • Metatag description and keywords are provided for each page.
  • Non-body text is specific and consistent: titles, ALT text, captions,
  • headings, and buttons.

Writing for Screen Readers

  • Text is concise.
  • The top of the page contains meaningful, page-specific information.
  • Link names are self-explanatory.


  • The layout does not depend on a specific typeface or font size.
  • The specified typeface works well on all platforms.
  • The default font size of the browser is used.
  • Semantic tags, rather than format tags, are used wherever possible.
  • Text aligns with graphics on the page and with other text blocks.
  • All centered text on the page is centered around one axis of symmetry.
  • Related text doesn’t appear in multiple columns.
  • Headings are closer to their body text than to other text on the screen.

Intellectual Property

  • The copyright notice is present and in the correct format.
  • Trademarks and service marks follow corporate standards.
  • Company branding is strictly adhered to.
  • No information is confidential or sensitive.


For each of the following, specify the standards this site will follow:

  • Person: [1] 1st and 2nd person (recommended), or [1] 3rd person
  • Commas before the last item in a list:

[1] “A, B, and C” (preferred), or [1] “A, B and C”

  • Punctuation within quotes: [1] traditional punctuation (“text,”), or [1] logical punctuation (“text”,) (preferred)
  • Header alignment: [1] left, [1] center, or [1] right
  • Paragraph format: [1] double-space between paragraphs, or indented opening of paragraphs
  • Common spelling, hyphenation, and capitalization conventions, e.g., Internet or [1] internet, [1] web site or [1] website, [1] email or [1] e-mail
  • Preferred file format for text files (e.g., plain text, RTF, Word, HTML)
  • Preferred file format for figures (e.g., EPS, Photoshop, TIFF, PICT, BMP, gif, jpeg)

Writing Style Guide

Content is key on your web site.A writing style guide will help inform how content is developed for a web site.

Clients will gladly exchange time for value and insight, so provide relevant, valuable, and usable content.You want to draw your reader in, help reader orient and convey information.People use the web to solve problems, and they expect the site to be worth the time it takes to find out if you can help.

Style Guidelines

Here are some general guidelines when composing your content:

  • Refer to the company in the first person
  • Refer to the reader in the second person
  • Use direct, simple sentences
  • Divide the text into easy-to-read chunks
  • Factual and content-rich information
  • Main themes at top of each page
  • Lists as bulleted items not prose
  • Clear section titles, liberally use headings (help user find info)
  • Avoid ambiguity
  • Use straight quotes
  • "Web site" is two words

The most important thing to remember is:

Be concise, use short words, short sentences, short paragraphs.Short sentences: average 12 words. Short paragraphs: average three sentences (36 words long)

Why is Content So Important?

Your web site is geared towards your clients so create client focused content. Write your content to help people navigate the site: make steps clear, state what options are available. Focus on what the client wants first and then tell them about your qualifications.

  • Avoid jargon and buzzwords.
  • Make your pages load quickly and avoid gimmicks.Flash introductions and pop-up windows waste your visitor's time.
  • Make it easy, visitors should be able to navigate your site and locate information easily.
  • Most people scan, so make the pages easy to read.
  • Keep content current, At a minimum, refresh content once a month.
  • Your site should convey your visual identity.The content, appearance, and usability of your site reflects your style and shows your competence as a professional.Show them how you treat clients.Demonstrate how your company makes a difference to the client.Tell your story, describe your mission, list your clients, and educate.
  • Communicate with personality.Use your site to give visitors a glimpse of the personality and culture of your practice.

Thoughts on being a programmer

  • Don't be an asshole.
  • Simple code is hard to write.
  • Exquisitely simple code is exquisitely hard to write.
  • Just because it's easy to understand doesn't mean it was easy to write.
  • In fact, the easier it is to understand, the harder it probably was to write.
  • There are many ways to do something.
  • The first way you think of is highly unlikely to be the best way.
  • Anyway, there probably is no best way - just lots of ways that are differently good.
  • There's always plenty of room for improvement - in your code, in your abilities, in you.
  • If you think you're as good as you're ever going to be - you're probably right.
  • "One-line changes" aren't.
  • Learn to desire success more than you fear failure.
  • You're only old when you can no longer learn new tricks.
  • Always back up before tidying up.
  • RTFM.
  • Err vicariously.
  • Sometimes
    it's OK to be a bit of an asshole. But don't make a habit of it.

The verbs we use to describe what people do with our work—use, navigate, interact—all underscore the power, the agency, that sits in the user’s hands. The value of the web, of social, of mobile, all rests on the foundation that the work we do requires the active participation of the audience, and that the value of our work is only measured through their engagement.

Optimize Your Site

  • Use sprites as often as possible.
  • Concatenate and mini your css (2 max per page)
  • Concatenate and mini your js (2 max per page)
  • Optimize all images
  • Load only what you need at first.
  • Add tel link on responsive sites to all phone numbers.
  • Optimal typographic measure (45-90 characters per line) - it makes reading easier on all lines.
  • Apparently, there is minimal cache of size in RAM, 10K on some. So the amount of 'stuff' in the site - html, images, code, etc. means there are slow downs and complexitiy in loading on mobile devices. So if you support with moble first with your design, then you can be more careful with what you do with your site. [source]

Optimize Images for Emails on Retina Displays

High-pixel density displays are becoming more and more common, but an increase in pixels per inch can make small images look fuzzy and unfocused. Fabio has a simple way to avoid using ugly images in emails:

Double the size of the image, and then constrain its width with either CSS or the width attribute on the img tag. The result is an image that maintains its sharpness on new device screens and works across many email clients.

Is this why flat design is so popular?

If you want people to recognize an object (for example, an icon), use a simple geometric drawing of the object. This will make it easier to recognize the underlying geons, and thus make the object easier and faster to recognize.Favor 2D elements over 3D ones. The eyes communicate what they see to the brain as a 2D object. 3D representations on the screen may actually slow down recognition and comprehension.

Shorter Deliverables are Better

It’s important for developers to remember, especially with non-technical clients, that progress you can visualize with a user interface is often the only thing that matters to the client. Non-technical clients don’t care that you pushed out 500 lines of code this week, or that you had a hard time interacting with some web service; the only metric by which they can gauge progress is what they can see on the screen. That’s not to say that doing good work on the back-end is irrelevant, but rather that you need to make all this good work tangible in the eyes of the client.

Which is why I like weekly or bi-weekly deliverables. Anything shorter than that often puts the developer in a hard place: maybe they get stuck doing back-end work for two days and don’t have time to finish the interface, so they have nothing to show the client.

Most common passwords (avoid them)

test testuser admin administrator demo demouser password password1 password123 qwerty test123 letmein [business name]

Buttons on Web Forms

Buttons are a key component of your Web site, here are some common practises:

First, make the label clear and concise. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons "Go" for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.

Include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.

Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.

Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.

The entire button area should be clickable.

However, because they play a critical role in website usability, the buttons should meet some key principles:

  1. First consider the labeling. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons “Go” for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.
  2. As mentioned, include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.
  3. Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.
  4. Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.
  5. Though obvious, we should note that the entire button area should be clickable.

Optional Design Ideas
iPhone Like Buttons
Css Sprite Generator
Simple Button Sprite
Scalable Buttons

Another type of redirect is the refresh type of redirect. This is easily done in HTML as a meta refresh redirect. In PHP, you can
do this as follows:

echo 'You\'ll be redirected in about 10 secs. If not, click <a

This is not a search engine friendly redirect and along with 302 redirection, it should not be used for SEO purposes. The only
thing that is acceptable to most search engines including Google is the 301 redirect.

301 redirect all non-www URLs to www URLs using PHP (assuming your protocol is http:// all throughout your website and
not using https):

//Get current page URL
$currentpageurl= $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
//Check if the URL is non-www version
if (!(preg_match("/www/i",$currentpageurl))) {
//URL is a non-www version, append www to the URL
//301 redirect to the www version
header("Location: $wwwversion",TRUE,301);

3.) 301 redirect all http to https (non-secure to secure 301 redirection):

//Check if it is not using the secure port which is 443
if ($_SERVER["SERVER_PORT"] != "443") {
//not connecting through secure https port, this URL is using http protocol
//append https
//Redirect to the secure version
header("Location: $secureversion",TRUE,301);
echo "Hi, this will redirect any non-secure page to equivalent secure page";

Conditional 301 redirect (redirect when the URL matches to a given URL)

//Function to get the current URL of the website
function currentpageurl() {
$currentpageurl = 'http';
if ($_SERVER["HTTPS"] == "on") {$currentpageurl .= "s";}
$currentpageurl .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$currentpageurlL .=
} else {
$currentpageurl .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
return $currentpageurl;
//Equate the current URL with $currentpageurl variable
//Conditional check to redirect
if ($currentpageurl=="") {
//URL match, do 301 redirect

The above example will only do a 301 redirect to the homepage URL if the URL is

General Notes

  • Logo should be in the upper left corner of the site.  It should be a link to the home page of the site.
  • Include a tag line summarizing what the company/site does.
  • Make homepage clearly different than rest of site *
  • Use imperative language for mandatory tasks, ex. 'enter a city'.
  • Do not use 'click here' for link names.
  • Use icons only if they are extremely obvious/recognizable.
  • Limit window titles to no more than 7/8 words.
  • Use relative font sizes not absolute sizes.
  • Explain benefits of registration.
  • Make important buttons stand out.
  • Use descriptive labels and supporting text for buttons.
  • Avoid reset buttons.
  • Adjust settings on server to allow for common typos and misspellings for URLs (for example ww instead of www). Setup wildcard domains (*
  • Eliminate extraneous navigation elements during a multi-step process such as a checkout or registration.  Avoid distracting the user.

Search Engines

  • Search input box should allow 25-30 characters
  • Do not label the search input box, just attach a search button.
  • Plan for imperfect searchers
  • Study previous search results to identify problems
  • If search returns an avalanche of results, offer means of narrowing results.
  • If no results return, offer an easy way to expand results
  • Explain how search works, give examples and tips.


  • Explain the process and provide cues as they proceed through the process.
  • Put cursor in first required form fields
  • Show progress
  • Fix tab order
  • Integrate help
  • Provide confirmation
  • Indicate required fields with an asterisk and/or include the word 'required' or 'optional' next to each field.
  • Indicated required field titles in bold.
  • Provide formatting examples for data
  • Provide pulldowns or lists to ensure accurate data.
  • Use Javascript to disable buttons once they are clicked (have them fade out or change the text on the button).
  • Offer contextual help right on the form.

Custom 404 Pages

  • Include the company's name and logo.
  • Include an explanation of why visitor is seeing the page
  • A list of common mistakes that explain the problem
  • Links back to home page and/or relevant pages
  • A search engine to help find right information
  • An email link for visitors to report errors/problems

Contact Us Page

  • Spell out the email address, do not hide it in a text link.
  • Let them know the expected response time
  • State hours of operation
  • Provide map with address

Acknowledgement Emails

  • Include timeframe for formal response
  • Include phone number and real name.
  • Use tracking numbers as a reference
  • Provide a clear and accurate subject line
  • Explain what to do next if issue is unresolved
  • Sign the email.

Questions to answer

   1. What should people know about a site so they are not misled and do not waste their time?
   2. What is the site about?
   3. For whom is the site intended?
   4. Why should people stick around? What can you do on this site?
   5. What do people need to know about the company to place their trust in its site?
   6. What are the main reasons users want to come to the site? Are they reflected on the homepage?
   7. Is the homepage intuitive with respect to the pathways that are available?
   8. Are error messages helpful and instructive?
   9. Can visitors access the information they want from multiple locations or are they restricted to a narrow pathway?
Product Descriptions

  • Why should they buy?
  • What are the customer's needs?
  • What are their concerns?

Product Listing Page

  • Include brief description along with price.
  • Integrate price anchoring.
  • Include a buy it now link
  • Allow for sorting - name, brand, price, date, featured items.
  • Allow for comparison

Product Pages

  • Highlight features and benefits.
  • Provide lots of details, photos and images that provide answers.
  • User reviews
  • Buy button
  • Allow for navigation to next item in category


  • Clearly state the error at the top of the page and the problem area that needs to be corrected.
  • Indicate problem are with bold red text
  • Draw attention to the problem with an alert icon or graphical cue
  • Offer possible solutions to the problem.
  • Do not force visitors to retype data correctly, accept alternative formats.
  • Accept all valid data and only ask for problem info (do not send them back to the same form).
  • Be consistent in all error messages.
  • Lead with a clear heading and the most important information
  • Offer bullet points not blocks of text
  • Use bold red text and color variations to highlight crucial information
  • Edit copy so that it is brief and meaningful.


Cost of the Solution

There’s the known cost in terms of what we’d spend to solve a problem. That’s the cost of solution. But we do better comparing it to the cost of the problem to get an idea of whether we actually want to invest in the solution. Sometimes the solution costs more than the problem. That’s a pill perfectionists swallow, a lot. So when we face a recurring manual task we may first calculate how much that task, the problem, costs us. And then we look at how much automating the task, the solution, would cost. A task that requires two minutes every week may not be worth spending several tens of thousands of dollars to automate.

And then there’s cost in terms of comparative cost. Personally, I’ve found myself saying “we shouldn’t do this because it’s expensive” a lot. That “expensive” has rarely meant high-priced. It had to be seen as comparative, “more expensive.” In a code scenario let’s think of solving a styling problem by inserting extra markup instead of accepting additional complexity in the style sheet (although you already know that getting the markup right is important). That solution could turn out expensive not absolutely, as inserting that extra markup might only require a few seconds, but relatively because it would require every team member to know about the new constraint, because it would require being done many more times, and because overall it would be more work.

Design of Sites


  • Be consistent
  • Offer informative feedback
  • Rely on recognition over recall
  • Help customers prevent and recover from errors
  • Support customer control and freedom (ex. Provide multiple ways to navigate)
  • Help frequent customers use accelerators
  • Strive for aesthetic and minimalist design

Customer Centered Design Myths

  • Good Design is just common sense.Why are there so many bad sites? Web design teams have to remember they are not the customer. They cannot predict how customers will think or act.
  • Only Experts Create Good Design.
  • Web Interfaces Can be Redesigned Right before Launch.
  • Good Design Takes Too Long and Costs Too Much. Customer centered design does add some up-front costs because you have to talk to customers, make prototypes, get feedback on prototypes, etc.But it reduces back-end costs - the costs incurred as a result of responding to customer dissatisfaction.Reduces total development time and costs because it focuses on finding problems in early stages of design,
  • Good design is just Cool Graphics. Graphics are only on part of the larger picture of what to communicate and how.
  • Web Interface Guidelines Will Guide You to Good Design. These are a good checklist but they only address how the site is implemented not what features the site should have, the organization of the site, or the flow between individual web pages.
  • Customers Can Always Rely on Documentation and Help.These are important but customers are not patient enough to sift through them to find help.
  • Market Research Takes Care of Understanding Customer Needs. It is helpful for understanding customer attitudes and intentions but does not explain customer behavior.What the customer does with an interface is critical.
  • Quality Assurance Groups Make Sure that Web Sites Work Well. The purpose and focus of quality assurance is different from those of customer-centered design.Software testing is often technology driven, not customer driver.
  • When technology becomes the central factor in web design, it becomes technology for technology's sake.
  • Avoid using computer-based tools in the early design stages.Iterate more and explore the design space more broadly on paper.
  • Avoid gold plating the site (making it perfect before deploying), deploy features in stages, plan for future growth.
  1. Process

    1. Discovery
    2. Exploration
    3. Refinement
    4. Production
    5. Implementation
    6. Launch
    7. Maintenance


    Customer Analysis Document

    1. Motivation of customers to visit the site or the value proposition
    2. Task analysis of intended customers, describing the people, their tasks, the technologies they use, and their social and organizational issues.
      • People - who are the customers? What are their interests? What are their ages? Etc.
      • Tasks - What tasks do your customers do on other sites? What do they come to your current web site tot do? What specific tasks do they want to do there? Etc.
      • Technology
      • Social issues

    Business Analysis Document

    1. Business plan- business goals of the site and client's needs
    2. Competitive analysis- determines features of competition's sites and identifies features important to customers.What is the competitive advantage of the site (high level goals)
    3. Metrics for success- how will success be measured? Examples: attract customers, keep them coming back, conversion rate of visitors to customers

    Requirements/Specifications Document

    1. Project Description- describes common purpose and ultimate goals for client and customer
    2. List of Tasks, Scenarios, Storyboards- number of tasks depends on complexity of proposed work. Label tasks as easy, moderate or difficult
      Comprehensive List of Proposed Features - 'must haves', 'should haves', 'could haves'. Use competitive comparisons, surveys, market research. Each feature should have statement on how it will be evaluated or tested.
    3. Overall design Goals
    4. Metrics- measure if team reached goals and requirements. State how features will be evaluated in the final site.

    Be Brief and concise, use lots of diagrams, make it interesting because these documents are often tedious to read.


    • Generate and explore designs, reflect ideas on site structure and navigation.
    • Generate several prototypes.
    • Deliverables: site maps, storyboards, and schematics (in sets). Each set shows a design alternative addressing issues in customer analysis document, business analysis document and specifications document


    • Choose one idea and develop it further. Highly detailed prototype. Refine, detail and informally test the design. Break site down into classes of pages.
    • Deliverables: one site map, storyboard and schematic (in more detailed form than previous).


    • Interactive prototype, written descriptions, guidelines, and specifications.
    • Include as much detail as possible on layout, navigation, visuals and content for each page.
    • Deliverables:
      • design document -describe how site works in great detail.
      • Interactive prototypes
      • Technical specifications
      • Design guidelines - general rules to prevent inconsistencies
      • Writing style guide


    • Create parts of site to create polished and fully functional site
    • Determine naming conventions for files and folders
    • Useful tools - revision control system, bug tracking database
    • Test site rigorously
    • Deliverables: completed sites, maintenance document, test plan document, updates

    Launch Phase

    • Minor polishing:
    • Check for spelling and grammar errors
    • Verify all links
    • Check for broken images


    • Changing code and fixing bugs.
    • Collecting usability and satisfaction metrics
    • Verify all links
    • Check for spelling and grammar errors
    • Ensure pages follow design guidelines
    • Periodically backup site
    • Update FAQ
    • Check team is writing for search engines
    • Maintain server logs
    • Deliverables:
      • Periodic web site metrics (total hits, conversion rates, number paying customers, usability evaluations)
      • Bug reports
      • Periodic backups

    Writing for Search Engines

    Write distinctive page titles for every page.

    Write keyword filled descriptive text neat the top of each page.Include keywords in context.

    Use keyword meta tags for:

    • Terms customers use most frequently
    • Main site themes
    • Synonyms
    • Common misspellings

    Make site accessible to web crawlers (similar barriers as for site accessibility).

    Use robots.txt file

    Strategies to avoid:

    • Repeated keywords
    • Keywords that do not describe content on site
    • Keywords owned by other sites
    • Colored text same as background to hide words
    • Repeated URL submissions to search engines
    • Fake pages for search engines
    • Slow pages
    • Pages with same HTML title
    • Pages with same content but different URL
    • Special characters in URL (& and %)