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

Colour

Colorful Words

Colour in Web Design

Source:Sitepoint article 'Essential colour checklists for Web design' by Marta Eleniak (april 28, 2003) http://www.sitepoint.com/print/1126

  • 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.

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

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.

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.”

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.

Most common passwords (avoid them)

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

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:

header("refresh:5;url=http://www.example.org/targeturl.php");
echo 'You\'ll be redirected in about 10 secs. If not, click <a
href="http://www.example.org/anotherurl.php">here.';

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
$wwwversion="http://www.".$currentpageurl;
//301 redirect to the www version
header("Location: $wwwversion",TRUE,301);
exit();
}

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

$currenturl= $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
//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
$secureversion="https://".$currenturl;
//Redirect to the secure version
header("Location: $secureversion",TRUE,301);
exit();
}
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 .=
$_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$currentpageurl .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $currentpageurl;
}
//Equate the current URL with $currentpageurl variable
$currentpageurl=currentpageurl();
//Conditional check to redirect
if ($currentpageurl=="http://www.example.org/301redirecttest.php") {
//URL match, do 301 redirect
header('Location: http://www.example.org/',TRUE,301);
exit();
}

The above example will only do a 301 redirect to the homepage URL http://www.example.org if the URL is
http://www.example.org/301redirecttest.php

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 (*.yourdomain.com).
  • 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.

Forms

  • 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

Errors

  • 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.

 

This page contains information I gathered and thought were very useful. See more notes on programming.