Category Archives: Web Design Resource

If you are moving your website, be sure not to forget!

Two things, which are very important, and are often overlooked when companies are moving or redesigning their websites are email accounts and search engine links.

I have new clients every year who have existing websites and either want them redesigned or to have a content management system put in, and I am very conscientious about both making sure their email will still work after the migration and/or updates take place, and that I set up a server script to redirect all of their old site’s URLs to the new site’s corresponding pages. This ensures that when people google them, they end up on a valid page and don’t get a “page not found” error.

One site that I was hired to reprogram last year had several hundred pages on their old site, and I redirected every one to the corresponding page in the new design with a .htaccess script using 301 redirects. When a sites’ page links are drastically changed, with the URL redirection your search engine placement might dip temporarily, but without the 301 redirects, it will plummet. Plus, it isn’t professional if someone querying your site ends up with “page not found” errors.

I have found that not all design firms look out for their new client’s transitions. Many industry based website platforms don’t offer email accounts at all, and very often the support person assigned to a client doesn’t have the programming background to know how to ensure that the old site URLs will redirect to the new.

I had three clients who  migrated from my hosting to other website platforms that specialize in their industry last year, and in two cases, the way I found out that the transition had gone through, was by them calling me in confusion because their email wasn’t working any more, and/or that when they googled their site, they ended up with a bunch of broken links.

So please, if you are migrating your site to a new platform or server, or having it redesigned in such a way that the site links will change, make sure to ask your designer/programmer about helping you both migrate your email accounts, and set up 301 redirects on the new server to seamlessly redirect the old site links to the new site. This will ensure neither your search engine traffic or your communications are interrupted.

If your server sets the allow_url_fopen and allow_url_include PHP directives OFF

Here is some great geeky information given by network solutions customer service to one of my clients, who passed it on to me. Since my servers have similar security standards, I frequently refer to the code examples and solutions illustrated below.

For security reasons (to prevent “PHP include” hacker attacks),  some servers set the allow_url_fopen and allow_url_include PHP directives to off. If you see errors similar to the following on your website, then your website (or software you have installed on your website) uses insecure PHP calls.

Common Errors

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in /……../ on line (..)

Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /……../ on line (..)

Warning: getimagesize() [function.getimagesize]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Warning: readfile() [function.readfile]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Solution

WordPress / Joomla / Drupal Software: These applications do not use functions that require allow_url_fopen or allow_url_include to be turned on. However, certain third party plugins may require changes. If you see any of the errors above, try to isolate which plugin is causing the issue and replace it with an alternative plugin. You should also consider reporting the issue to the plugin developer so that they may fix it in an upcoming release. Alternatively, you can check out some of the examples below and attempt to fix the errors yourself.

Note: Do not attempt to fix issues yourself if you do not have prior software development experience. If the below does not make sense, you should consult with your web professional.

The errors above manifest themselves when your website is attempting to retrieve outside web URLs. The solution is to use the PHP Curl library to do so instead, which is more secure. How you use PHP ‘s Curl library to circumvent this issue depends on which warning you’ve received.

Example 1: Warning: fopen() [function.fopen]:

$file = “http://news.google.com/news?ned=us&topic=h&output=rss”;

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, “startElement”, “endElement”);
xml_set_character_data_handler($xml_parser, “characterData”);

if (!($fp = fopen($file, “r”))) {
die(“could not open XML input”);
}

while ($data = fread($fp, 4096)) {
if (!xml_parse($xml_parser, $data, feof($fp))) {
die(sprintf(“XML error: %s at line %d”,
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}

In the above example, an attempt to open a Google RSS feed is being made. The fopen() call will fail because $file is an outside web site, and the rest of the code will not be executed. To properly load the RSS feed and parse, this snipit of code would need to be rewritten as follows:

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, “startElement”, “endElement”);
xml_set_character_data_handler($xml_parser, “characterData”);

$file = “http://news.google.com/news?ned=us&topic=h&output=rss”;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $file);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xmldata = curl_exec($ch);
curl_close($ch);

$xmldata = split(“\n”,$xmldata);

foreach ($xmldata as $data) {
if (!xml_parse($xml_parser, $data)) {
die(sprintf(“XML error: %s at line %d”,
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}

Example 2: Warning: file_get_contents() [function.file-get-contents]:

<?php

$contents = file_get_contents(‘http://www.cnn.com/’);

echo $contents;

?>

In the above example, the file_get_contents function is used to retrieve the content of the CNN website. You can accomplish the same thing safely using CURL as follows:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.cnn.com’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $contents;
?>

Example 3: Warning: include() [function.include]:

Including files from web hosts is not allowed.

<? php include(“http://www.example.com/new.php”); ?>

If the file that you are trying to include is local, use relative paths instead , not the web URL. Otherwise, use the following:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.example.com/mew.php’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $file_contents;
?>

Example 4: Warning: getimagesize() [function.getimagesize]:

getimagesize() allows you to get the height, width and size of an image file. To use getimagesize() safely, CURL can be used to get the remote file, the data can be saved to a local temporary image file and getimagesize() can be used on the local version.

<php

$filename = “http://www.example.com/example.jpg”;

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, $filename);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

$contents = curl_exec($ch);
curl_close($ch);

$new_image = ImageCreateFromString($contents);
imagejpeg($new_image, “temp.jpg”,100);

$size = getimagesize(“temp.jpg”);

// width and height

$width = $size[0];
$height = $size[1];

Example 5: Warning: readfile() [function.readfile]:

<?php

$contents = readfile(‘http://www.example.com/some.txt’);

echo $contents;

?>

In the above example, the readfile function is used to retrieve the content of a remote text file. You can accomplish the same thing safely using CURL as follows:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.example.com/some.txt’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $contents;
?>

The above examples are not guaranteed to run without changes, they are strictly guidance to illustrate how to safely retrieve off-site content.

four things to think about before you start your web design

There are some important things to think about BEFORE you start the web design process. If you work these out before you begin, you might save yourself a lot of time and money.

1. FUNCTION
The first step to developing a web site is to figure out exactly what the function of that web site is going to be. By function, I mean what do you want your website to do for you, and how effortlessly or intuitively will it do it. You need to have thought out what role you want your web site to play in your business in order to have a good design developed.

For example: Is it to sell a product? Is it an on-line catalog? Does it tell a story? Is it an educational tool? Are you using it to support a cause? Is it entertainment? Do you just want it to answer a bunch of those questions that people are calling and pestering you with: hours you’re open, contact info etc.

A web site can have more than one function, however it’s critical to have a clear idea of what those are before you meet with your web designer.

2. WHO IS YOUR TARGET AUDIENCE?
It is important to start researching who your target audience is, how they are going to find your site, what will make them stay on your site, and what you want them to do when they arrive at your site. The answers to these questions effect every step of the web design process.

3. SEO and INFRASTRUCTURE
Search engine optimization plays a critical role in how the website will be designed and programmed. The names of files, the type of coding, the directory structure all add to that mysterious algorithm of how well your site will be indexed by the search engines.

Before programming a website, some research needs to be done on the keywords you would optimize with to attract your target audience.

I always design my content management systems so that my clients can update their content and meta tags, but beyond this, I can name the very files and directories that make up the site with keywords.

There are different options in how to code a website, and these will need to be discussed in relationship to search engine traffic (css, flash, html). Even if you opt to use a blog platform for your website,  the research you do on keywords will help you when you create your categories, tags and name your posts.

4. USABILITY
Marketing and usability should play a role in the website design and structure.

The graphic design isn’t just pretty, it’s usability. It is important to be clear about what you want visitors to do when they get to your site. There is lots of research on what parts of a web page people look at the most, how colors effect behavior, how to write effective content for your target audience. The graphic design and layout of content is a balance between visual branding and persuasion. Here are some good resources on usability.

If you plan on working with an SEO specialist and/or marketing specialist, my advise is to have them meet with you and the website programmer/development team so that everyone is on the same page.

The last thing you want to do is build a website and after it is built, have an SEO person or marketing person tell you it needs to be redone in order to attract and keep visitors.

google analytics and referring sites – where to place your advertising dollars

I encourage all of my clients to sign up for google analytics. It is free. It is easy to install on your website or blog, and it gives incredibly useful information about your website traffic.

Everybody is tightening their budgets right now, and where to place your online advertising dollars is a big question. Not only does google analytics let you see which websites are sending traffic to your website, it lets you search those statistics.

Today one of my online advertising links was up for renewal. I thought to myself, before I spend this money, I want to see if this site is actually directing visitors to me. I logged into google analytics. I clicked on the date range and set it from January 1st, 2008 until the present. I clicked on “Traffic Source” then clicked on “Referring Sites”, and it pulled up a graph with the site usage starting with the sites that refer the most traffic – but here is the secret weapon – at the bottom of that graph is a search field.

google_analytics1

I typed in the name of the website that was selling me the link to see exactly how much traffic they had sent me last year. I found out the exact number of visits to my website in one year resulted from that advertising. What a powerful tool this is! Now, with the help of google analytics, I can make really informed decisions, very easily, about what sites are sending me clients and which aren’t. Being able to search the data for the specific website address is an incredible feature. It saved me so much time. With just two clicks, I could see exactly how much traffic a given site was sending me within a specific date range.

If you don’t have a google analytics account, and you run a blog or website, I encourage you to sign up for one today. Being able to view referring sites is the tiniest fraction of the useful information that it will supply to you concerning the visitors to your website, where they come from, how they navigate your site, which pages they land on and how long they stay. Even if you’re not going to look at the data right now – sign up and start compiling the data. Just go to http://google.com/analytics

preparing images for the web using photoshop elements.

Now that you have the ability to upload images to your website, do you have questions on how to prepare them for the web? I have put together some tutorials using adobe photoshop elements which show the how to of resizing, cropping and some quick color correction. I have chosen adobe photoshop elements because it is a relatively inexpensive software ($80) and it is cross platform.

  • Adobe Photoshop Elements for Windows – My image editing tutorial use adobe photoshop elements. This is a relatively inexpensive software that allows you to prepare images for the web. It is a paired down version of Adobe Photoshop (which costs over $600) adobe photoshop elements runs around $80 depending where you purchase it.
  • Adobe Photoshop Elements for Mac – My image editing tutorial use adobe photoshop elements. This is a relatively inexpensive software that allows you to prepare images for the web. It is a paired down version of Adobe Photoshop (which costs over $600) adobe photoshop elements runs arounc $80 depending where you purchase it, and is cross platform.
  • Resizing and Cropping Images – This tutorial walks you through how to resize and crop images in adobe photoshop elements – to prepare them for your content management interface.
    YouTube Preview Image
  • Selecting and changing line images – This tutorial shows you how to remove a line image from its background in Photoshop Elements. This is useful if you have a line drawing or signature that you want to upload to your website and have it match your website’s color.
    YouTube Preview Image
  • Preparing Graphics for the web – An article with tips on preparing your graphics for the web. It addresses the issue of why photographs uploaded to the web might appear less vibrant than on your computer, how to compose portraits and tips on taking product shots.
  • Quick color correction using levels – Do your photos need a little color enhancement before you post them to the web? Here is a quick tutorial on how to easily polish up those images, bringing up or down the lights, the darks and adjusting colors.
    YouTube Preview Image
  • Cutting the background away from an image – This Tutorial takes you through removing the background from an image in photoshop elements, leaving you with the object in the image surrounded by a transparent field.
    YouTube Preview Image