Newsletter Width

Probably the most common question regarding newsletter is what dimensions should they be.  The problem is each mail client is completely different.  Some are tall and skinny, others short and fat.  It’s kind of like the left over bin at a bargain basement sale, you don’t know what you’re going to get.  According to campaignmontior.com, they suggest not to go any wider than 550-600 pixels.

Tables for Structure

You’ve spent all this time using divs and CSS in your websites to layout everything.  Well with email you can forget all that. Back to the 1990’s we go.  Best practice for laying out columns or any other structural areas is to use the good ol’ table.  A lot mail clients don’t support the CSS that make using divs a viable solutions.

Inline Styles

It’s generally good practice to keep all your styles inline.  Some mail clients take pleasure in adding their own CSS to the equation which throws yours out the window. Inline styles insure the mail client uses your styles and not theirs.  If you do wish to put your styles at the top of your document, just be sure to do it within the body tag.  I know what your thinking…but that won’t validate?  You’re absolute right, but some mail clients totally discard the head tag, so anything in there will be thrown out like 2 month old milk.

Padding or Width, Not Both

In CSS it’s generally good practice to keep padding and width separate.  The same goes for emails.  Width and padding don’t get along. Think of them like the contenders in the next UFC fight night.  Since the mail clients are still stuck in prehistoric web days, padding can sometimes add to the width, even if the width is specified.  If you need to have both then you’ll have to put a table within a table.  The outside table cell specifying the width, and the inside one specifying the padding.

Backgrounds

Unfortunately Outlook 2007 screwed this up for everyone.  It doesn’t support background images.  So consider this when designing your next newsletter.  Also the body tag gets stripped of any styles, so if you put a background color on it, it won’t show up in some mail clients.  You’re best bet is to wrap you’re entire newsletter in a table, and apply the background color to the cell.  It’s also good practice to use the old bgcolor attribute in place of the CSS.  It ensures that all mail clients will display your background color.

JavaScript / Flash

Plain and simple, JavaScript and Flash aren’t supported, some cases they are, but most aren’t..  They’re like the embarrassing friend of yours that nobody wants to hang out with.  Sorry.

Images

Consider it good practice to always specify the width, height, and alt tags of all your images.  A lot of email clients have images shut off automatically.  With the width and height specified it will keep the structure of your layout, and the alt tag will give a description of the image. 

One extra little tip for images, sometimes you’ll notice an extra space underneath your images that you can’t get rid of.  This can be a couple of things.

1. You set your doctype of your document.  Get rid of the doctype, or set it to HTML 4 transitional to fix this problem.
2. An old HTML bug where the image should be right up against the closing </td> or else it throws in an extra space.

Conclusion

In general try and think like you’re back in the old days of internet.  For those younger people out there that haven’t developed in the olden days, now you see what we had to put up with, nothing works the way it should…wow I sound like my father.

Positioning

The problem with loading JavaScript files is when they’re being downloaded the browser doesn’t download anything else.  So JavaScript affectively blocks your browsers from downloading other assets like CSS, or images. Giving the illusion that your page takes longer to load simply because the users notice the CSS and images not being loaded.  A simple trick is to place all of your JavaScript just before the end body tag.  This way it insures everything else has already started loading before it hits your JavaScript.  Really you’re not speeding up anything, just re-arranging how things load.

Load it When You Need it

JavaScript should only be used as an enhancement. Your website should work perfectly fine when JavaScript is shut off.  If it doesn’t you should consider looking into Progressive Enhancement. It’s a method that make sure your HTML is laid out first, then you add the bells and whistles.  That aside, because JavaScript shouldn’t be completely necessary, you should be able to load the script as you need them…not on page load.  This will speed up your initial page load, and get people into your site quicker. 

So how do you do this you ask?  With JavaScript of course.  Here is some code:

The function importFile() will add an element to the head of your document, just like you would normally.

To use these function you might do something like this:

It checks to see if a function you have in your JavaScript file exists, if it doesn’t then load the JavaScript file.

Delaying

The problem with loading your JavaScript on demand is there can be a pause while the script loads.  To prevent this we can just put a delay on loading the JavaScript.  This way it won’t load on page load, and it will be ready for whenever you need it.  This might look something like this:

Other Methods

Besides that you should consider combining all your JavaScript into one file, this way there are less requests for your browser to make.

Also consider caching you’re JavaScript files.  If the browser already has the file on hand it won’t download it, saving precious load time.

Lastly consider compressing your files, the smaller the files, the less the user has to download.

Conclusion

Hopefully these methods will help speed up your load times a bit.  You’re users will thank you for it…or rather they won’t complain as much…which is sort of like a thank you

Trust No One

The biggest issue in terms of security is trusting your users.  If you have a form and you automatically assume that the user is going to put their name in the name field, you’re less likely to write code that will validate what users are typing in.  From a security perspective you have to think of your users as the shifty looking guy on the corner.  Don’t trust them. Consider all input data tainted like the moldy piece of cheese in the back of your fridge.  In PHP, a general rule of thumb is that all data in PHP’s superglobals ($_POST, $_GET..etc) should be considered tainted.  Even the $_SERVER array is not fully safe because it contains some data provided by the client.  The only exception to this rule is the $_SESSION array, which is kept on the server and never over the internet. 

Are You Filtering?

Filtering is simply the process of making sure that only good input data is processed.  There are two common ways of handing this, Black listing and White listing.

Black Listing

Black listing is the less restrictive form of the two.  It assumes that the programmer knows everything that isn’t allowed to pass through.  An example of this might be to check for profanity.  The programmer would create a list of swear words, and for every input the code would cross reference this list to see if it matches the list.  If it does, then the program handles it accordingly.

Example:

White Listing

White listing is probably the more common method for security.  It automatically assumes that all data is bad.  Instead of identifying which information isn’t acceptable, you select which information IS acceptable. Kind of like going through a bag of jelly beans and only eating the red ones….mmmm.  Since you control the data that comes in, attackers malicious code won’t be accepted if it doesn’t match the criteria. For this reason white listing is a much stronger protection against attacks then black listing.

Example:

Do You Escape Your Output?

Output is any information leaving your application.  This can mean text going to a web browser, or to your database. Escaping the output ensures that there are no harmful commands within the output.  So for example, in a blog you might have a comments section where users can input any info the might like.  What if that info is JavaScript?  When you output the comments and they’re not escaped, the JavaScript will display too.  This can mean stealing of your users cookies, passwords, etc. Escaping is super important for protecting the recipient of your output, whether it is your database or your users.  Fortunately PHP makes escaping very simple.  If you’re escaping content for the web browser you can use the method htmlentities().  This basically turns any special characters into a non harmful version. So the browser will display <script> instead of acting upon it.

Here is an example:

For databases you’ll have to use a different method. For mysql you can use mysql_escape_string(), and if you have it installed mysql_real_escape_string(). The later offers a more extensive job then the first method.  Also if you’re using PHP 5 you can use prepared statements.  Prepared statements are SQL statements that have place holders. (SELECT * FROM table WHERE `username` = :placeholder)  The place holder is then populated afterwards.  How can this help you?  To use these place holders you have to use the PHP Data Object (PDO).  Fortunately PDO does all the hard work of escaping your output for you…isn’t that nice of them.

Here is an example of PDO in action:

Conclusion

If you took anything away from the post I hope it is to filter inputs and escape outputs.  There is quite a few other things that can be done to help with security. What we discussed here should be at least the bear minimum that you use on a regular basis.

Why Customize your 404 Page?

All browsers give some sort of page letting you know that the page wasn’t found. Why would you create your own of the browser handles this for you? Simply because browser error pages aren’t user friendly and are often confusing for non-computer savvy users. Ideally you would want to create a page that is helpful to the user. Some how they navigated to a page that doesn’t exist, so help them get back on track.

What You Should Have on Your 404 Page

The name of the game is to make users less frustrated. They’re lost and they need some help. First thing you should offer them is a link to your sitemap and your homepage. These will offer a quick way to get back in the game. Alternatively you can put a search bar in your 404 page. This gives a familiar way for your users to find what they are looking for. There are mixed feelings about putting a contact form on your 404 page. The idea is that users can tell you that your page is missing. Ideally though, you should be actively checking that you aren’t missing any pages. Google webmaster tools can help you with this. Here is an example of a 404 page. Granted there are much better 404 pages out there, this is just a sample of the basic tools that you should have.

Create Your 404 Page

You’ll need to create a HTML page. Try to keep it very simple for the user. They’re lost so you have to create a clear path for them to follow. You’ll find a lot of humourous 404 pages to help keep the users entertained. Although this is nice, make sure you have a way for users to get back to your site. Also remember to keep your page above 512 bytes. Earlier IE browsers don’t handle small 404 pages well. Throw in an image and it should solve this problem.

Also, it is probably a good idea to put a robots meta tag telling search engines not to crawl your 404 page.

Example:

Put the 404 Page on Your Site

After you have your HTML page created, dump it onto your server and take note of where it is. You’ll have to reference it later when setting up the server.

Setting Up the Server for Your 404 page

A lot of web hosts and CMSs allow you to setup your custom 404 page right from within the control panel. This should be the first thing you check as it gives you a nice interface to work with. The alternative isn’t complicated, but why trouble yourself if you don’t have to.

You’ll need to know what kind of server you are on if you don’t plan on using the control panel. If you are on an Apache server you can create a file by the name of .htaccess .

Within this file you just have to put the line:

Replace 404.html with the path to your 404 page. This will tell the server where to look if it encounters the error 404 (page not found).

If you have an iis server (windows) than it’s a little more complicated. You’ll have to open your internet service manager, select the properties of your web server, then head to the custom errors tab. You’ll find all of the error codes there, just select 404 and replace the page with the one that you created. For a more in depth look at this you can visit this tutorial on how to create a custom 404 page in iis.

That’s it you should have your 404 page up and running. Type in a bogus address to your domain to test it out. eg. http://www.devirutoso.com/fake-address

Related Links

Creating a Custom 404 Error Page
How to Create a Custom 404 Error Page in Microsoft IIS
Creating User Friendly 404 Pages

Things that Hurt Your Web Usability

This is a list of usability no-nos that can frustrate your users. Try and avoid the following.

Hiding Information from the User

Nothing is more frustrating than going on a site and you can’t find what you’re looking for. If your user is looking for something simple like contact info, rates or prices and can’t find them, its more than likely they’re going to go somewhere else. Make it easy to find information they’ll use.

Forcing Users to Do Things Your Way

When filling out forms the user should have to worry if there are dashes in their phone number or credit card. Take care of this on the coding side, and give your users a care free time while using your website.

Ask for Info You Don’t Need

There is nothing worse than having to fill out a huge form just try a demo. People don’t like to give out unnecessary information. If you’re getting information from your forms like ‘asdf’ it might be a good indicator to shorten it up.

Faking Sincerity

People aren’t stupid, they can tell when you are being sincere and when you just want something from them. Have content that can actually help people and not try and sell them something.

Wasting Users Time

Long flash intros and wading through feel-good marketing photos fall under this category. People are in a hurry. If you waste their time, don’t expect them to hang around.

Your Site Looks Amateurish

You could have the best content in the world but, if your website is sloppy, disorganized or generally unprofessional, users will loose all confidence in the content on your site.

Things that Help Your Web Usability

This is a list of things that can instill confidence in your user. With good reason, some of these are direct opposites of what can hurt your web usability.

Know What People Want and Make it Obvious

This could double as the definition of web usability. You just need to take the time and figure out how people are going to use your site, then make it really simple for them to do so.

Tell User What They Want to Know

It’s a good idea to be upfront with your users. A good example is shipping costs. People want to know this. They probably already know there is going to be a charge, so why not be upfront with them and gain there trust.

Save Users Steps Wherever you Can

Take the time in coding to make the users life easier. Try and make any processes as short as possible. Amazon.com does a good job of this with their one-click checkout for members.

Take the Time

You want to make sure you take the time to make sure your content is well organized, easy to find, presented nicely, and is accurate. Without these the users confidence in your content goes out the window.

Good FAQs

Having a good FAQs section can really help out users. Make sure that your FAQs are up to date, there is nothing worse than searching through irrelevant FAQs. Also don’t use FAQs as a marketing pitch. (e.g. “I’m glad you asked that…we have sooo many features that handle this exact problem…yada yada yada.”)

Make it Easy to Recover From Errors

People make mistakes. If you give them a way to recover from them, they’ll love you for it. iGoogle does a good job of this when you remove a widget from your home page. They give you the option to undo incase you mistakenly press the remove button.

Appologize if Neccessary

If there is a case that you just can’t get around, applogize for your shortcommings. A common case is if your site is down for maintenace.

Hopefully these will help guide you to improve your web usability on your site. When in doubt just try and figure out what will make things faster and easier for your user.

Reduce Complexity

This is probably the most important of all reasons to use a function.  You can create a function and forget about its inner workings.  This creates an abstraction of all the code within it by hiding the information every time you use the function. Not to mention it helps with code size, maintainability, and correctness.

Example:

//Complex ———————–
if ($val >= 32 || $val < 10){

for($i =0; $i < 10; $i++){
echo “name”. $i
}
}else{
echo “no name”;
}

//Simple ———————–
echo getName($val);

?>

Make Code Easier To Read

Putting a piece of code within a well named function is one of the best ways to document your code. Instead of reading multiple lines of code you can simply read a single descriptive line of code.

Example:

// Difficult to read…it takes time to
//figure out what is going on.
$names = array(’Bob’,'Ted’,'Bill’);
for ($i = 0; $i < count($names); $i++){
echo $names[$i];
}

//Self explanitory code.
DisplayNames();

?>

Avoid Duplicate Code

If you find that you have several instances of the same code spread through out, it is probably a good indication you should use a function in its place.

Example:

function getUserName(){
$firstname = getFirstName();
$lastname = getLastName();
$name = $firstname . ” ” . $lastname;
return $name;
}

// Functions prevents having to use duplicate code.
echo “Welcome “. getUserName() . “!”;
echo “What kind of name is “. getUserName() . “?”;

?>

Hide Sequences

It is usually a good idea to hide the order in which things happen.  If a program has a set of processes it has to go through, it’s best that each process doesn’t have to rely on any others to work.  Placing each process in it’s own function will help keep things organized.

Example:

$userName = getUsername();
$validUsername = checkUsername($userName);
updateDatabase($validUsername);

?>

Improve Portability

Use functions to help portability by isolating code into nice little packages.

Example:

// First lame program
echo add(1,7);

//Function works just as well in any program…as lame as it might be.
for ($i = 0; $i
echo $;
}
?>

Simplify complicated Boolean Tests

If you have an overly complicated Boolean test, placing the test within a function can help make your condition statements a lot easier to read, and use.

Example:

//Complicated
if ((2*5+3/7)/2 > 30){
echo “wtf?”;
}

//Simplified
if (isValidNumber()){
echo “Ahh much better.”;
}

?>

Improve Performance

Instead of running around trying to optimize your code in several places, functions allow you to place your code into one place.  This way you can optimize your code in one place and it will take effect in several areas, in turn making your life easier.

Entire Program

At this point you should just figure out what you want the application to do. Figure out the prerequisites and the ultimate goal of the application.

Packages

At this point you want to figure out how you want to split up the application.  Some examples might be user interface, graphics, data storage, business rules…etc.  Basically layout everything your application will need in the most general of terms.

Design Classes

Each package should be separated further into classes. Also you should be figuring out how each class interacts with one another.  An example might be splitting up the business rules package into smaller pieces. You might have a class for parsing data from the database, one class for any rules, one class for any restrictions…etc.

Design Methods

Break down the classes even further into methods.  For each class you should figure out the elements it needs.  Also which methods are private and which ones are public. For example you might have a class for manipulating data from the database.  You might break the class down into methods that handle adding info, editing info, selecting info and deleting info.

Internal Method Design

Now you’re down to the nitty gritty. You should just fill out the methods and make them work. At this point you should have a firm understanding how your application is laid out and how each method / class interacts with one another.

How Patterns Come About

Web design standards usually come about when one website first uses it, and people find the element so useful that they copy it for their own website. A good example of this might be tabs navigation. They’re common place in web design now-a-days, but there was a time when these didn’t exist in web form. Someone thought it might be a good idea to create a navigation that replicated the real world filing system. Sure enough it was a hit, and spread like wild fire.

Patterns are Useful

Why would you use web design patterns? The beauty of design patterns is that you already know people know how to use them. If you feel like being creative and create a cool navigation, you’re taking the chance that someone might not figure it out. Why not use a design standard that has been tried and true, and put your own twist on it. Users quickly scan websites looking for what they need. If design patterns are in place it gives the user a sense of familiarity, and in turn helping them navigate without frustration.

Designer Troubles

Designers often avoid using these standards with good reason. Often times the designer feels that they have been paid to create something new and exciting, and there is nothing new and exciting about commonly used elements. By all means try and create new and exciting elements, but make sure they are painfully easy to use. If it requires an explanation, there are going to be people out there that don’t get it. Instead use a design standard and dress it up a bit with your own flair.

Examples

Here is a list of a couple of patterns. If you wish to see a complete list please visit Yahoo’s design pattern library or Welie’s design pattern library.

Accordion

Breadcrumbs

Tag Cloud

Footer Sitemap

Autocomplete

Paging

Tabs

Shopping Cart

Rating

Vote to Promote

Prominent = Important

Humans naturally look for similarities and differences in everything. That’s how we can tell people apart. Naturally things that stand out get more attention that ones that don’t. Like noticing the person with the crazy hair in the subway…what were they thinking? Fortunately with design we get to choose what is more prominent. How do you do this you ask? There are several ways.

Here is a list of a few:

• Put near the top of the page
• Make the info Larger
• Make the info Bolder
• Give text a different color
• Separate with white space
• All of the above

The more of these you use, the prominent it will be. Having a more prominent element will be a separater letting the user know that anything around it more than likely relates to it.

Items Related Logically are Related Visually

Grouping Under Header – Placing information underneath a header logically suggests that it belongs to that header.  This is common in newspapers, and pretty well any text you read.  This creates a visual hierarchy.

Same Visual Styles – Much like brothers or sisters, you can usually tell when people are related because they look similar.  Same thing applies to text, if you want something to relate to one another, use the same styling. e.g. All links are blue and underlined.

Clearly Defined Area – Like putting your socks in a sock drawer, putting text into defined areas help organize information. By doing so also helps suggest that all the information is related.

Nest Information Visually

Visually placing information nested within one another is an easy way to create a relationship with information. On the out most you have a general description, as you work your way inwards it becomes more specific.

Be Careful About Creating Unwanted Relationships

Unfortunately it is easy to create unwanted relationships. All it takes is a misplaced emphasis on some text, that leaves the wrong impression. So be careful how you lay things out.

Minimal Complexity

The main goal in any program should be to minimize complexity.  As a developer most of your time will be maintaining or upgrading existing code. If it is a complete mess, then your life is going to be that much harder. Try and avoid those solutions where you use a one line complex solution to replace 20 lines of easy to read code. In a year, when you come back to that code, it will take you that much longer to figure out what you did.

Ease Of Maintenance

This is making your code easy to update. Find where your code is most likely going to change, and make it easy to update. The easier you make it, the easier your life is going to be down the road.  Think of it as a little insurance for your code.

Loose Coupling

So What is loose coupling? It is when one portion of code is not dependant on another to run properly. It is bundling code into nice little self reliant packages that don’t rely on any outside code.  How do you do this? Make good use of abstraction and information hiding.

Extensibility

This means that you design your program so that you can add or remove elements from your program without disturbing the underlying structure of the program. A good example would be a plug-in.

Reusability

Write code that will be able to be used in unrelated projects.  Save yourself some time. Again information hiding is your best bet for making this happen.

High Fan-in

This refers to having a large number of classes that use a given class. This implies that you are making good use of utility classes. For example you might have a bunch of classes that use the Math class to do calculations.

Low to medium Fan-out

This refers to having a low to medium amount of classes used by any given class.  If you had a class that includes 7 or more classes this is considered high fan out.  So try and keep the number of classes you include down to a minimum.  Having a high fan-out suggests that the design may be too complex.

Portability

Simply put, design a system that can be moved to another environment.  This isn’t always a requirement of a program, but it should be considered. It might make your life easier if you find out your program does have to work on different platforms.

Leanness

Leanness means making the design with no extra parts.  Everything that is within the design has to be there.  This is generally a goal if you have speed and efficiency in mind.  A good example of where this might come in handy is creating a program that has to run on a system with limited resources (cell phone, older computers)

Standard Techniques

Try and standardize your code.  If each developer puts in their own flavor of code you will end up with an unwieldy mess. Try to layout common approaches for developers to follow, and it will give your code a sense of familiarity for all developers working on it.