This article discusses some simple things you can change on an old website without much effort or re-working of the HTML coding – ideal for situations where you don’t want to go for a full re-design but want to make some minor changes to improve your website’s appeal.

Background Images

The first easy switch that comes to mind is an updated background image.  Does your site have a plain color background?  You can really spice up a design by adding a gradient or texture to the background of the page overall – just make sure that it is congruent with the overall feel of the site!

Re-work Typography

Poorly thought-out (or rushed, as is usually the case) typography can cause a dated or otherwise unappealing look.  Put some thought into your fonts and heading styles and be sure to have ample line height.  By making everything more consistent from page to page and adding typographic contrast between headings and body text you will look your pages look cleaner.

Upgrade to CSS3!

New options in CSS3 make adding some pizazz to an old design easy.  Using new CSS3 styles like text-shadow, border radius, and more, you can add a layer of design precision to your websites that was previously only possible using images!

Use Brighter, Sharper Images

Using media and interface elements using higher quality images and more saturated colors in your design can bring a more modern look to your website.

Implement Sharing Tools

A truly easy upgrade for any website is adding a sharing tool, such as the Meebo Bar to the site.  While this doesn’t effect the design much, it does bring some modern functionality to the website with no coding required!

In this article, I’ll provide a sample script that I have used and adapted for several galleries and other similar tasks. This article is meant for developers, but I will do my best to take as much of the “lingo” out of it as I can, and explain and document it well. Even if you don’t know programming or PHP at all, this should be a useful tool for you. I developed this with only a basic knowledge of PHP syntax and a bit of guess and check. Check out the example!

Robot work

If you are a web developer, you’ve probably been in this situation before, and this code snippet might look familiar:

<li><a href=”images/gallery/01/01.jpg” title=”Caption” rel=”lightbox”><img src=”images/gallery/01/thumbs/01.jpg” alt=”Click for Full Size” /></a></li>

For every image in your gallery, that line needs to be repeated, with the image source, link href, and caption changed. Sounds like a wrist-cramp in the making – definitely what I’d call “Robot work”.

A Scripted Solution

This situation just begs to be automated. Being a php enthusiast, I decided to embark on a small adventure – write a script that will produce this HTML automatically. Here it is, in all its simplistic glory (Pardon any coding faux pas – I am not the most experienced PHP developer in the world). This script is used with a lightbox gallery called “Sexy Light Box”. A grid of thumbnails which can be clicked on for larger view is our goal here.

<?php
$folder = 'images/gallery/';
$extension = '.jpg';
$group = '[group1]';
$caption = 'Caption';
$alt = '';
$title = '';
$iterations = 28;

$wrap1 = '<li><a href="';
$wrap2 = '" rel="sexylightbox';
$wrap3 = '" title="';
$wrap4 = '"><img src="';
$wrap5 = '" alt="';
$wrap6 = '" /></a></li>';
$i = 1;

while ($i <= $iterations) {
if ($i >= 10) {
$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n";
} else {
$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";
}
echo ("$string");
$i++;
}
?>

The Breakdown

This script allows the developer to simply define the gallery directory, number of images, and an (optional – not included in this version) array of captions. Below I will explain the code line by line.

$folder = 'media/gallery';

Defines the folder in which the images are.

$extension = '.jpg';

Image extension. Currently the script requires that all images have the same filetype

$group = '[group1]';

Most lightbox scripts support “groups” or galleries – matching “rel” tags define your gallery

$caption = 'Caption';

Title tag of the linked full-size image. Most lightbox scripts use this as a caption.

$alt = '';

Alt tags for the images. This could be converted to an array if you are concerned about unique alt tags for your gallery thumbnails

$iterations = 28;

The number of images in the gallery.

$wrap1 - $wrap6

these are just the chopped parts of the HTML that is being created and wrapped around the variables.

while ($i <= $iterations) {

$i is a placeholder variable known as an “index”. It is increased by each time the while loop is completed. Once $i is greater to or equal than $iterations, the loops condition becomes false and it is no longer repeated

if ($i >= 10) {

This line is deals with the naming scheme of the images. I name my images 01.jpg, 02.jpg … instead of 1.jpg, 2.jpg etc. Because of this, I had to include a line that would add a “0” to the code IF the image number is less than 10.

$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n"; }

This is the line where all of the HTML wraps and the variables you set earlier are combined. This version of the command includes the “0” I mentioned earlier. The final HTML that is about to be “echoed” is saved to the variable $string

else {

If the image number is 10 or above…

$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";

This familiar line of code has the same function as the previous “combiner” line. The only difference is that this one leaves out the 0, to avoid getting “010.jpg”.

echo ("$string");

This prints the first line of the gallery! Yay! The echo command takes our “$string” variable and prints it to our webpage.

$i++; }

The index variable $i is incremented, or increased by 1. This keeps our script from looping infinitely and lets it know when we’re out of images. Once the script hits this line, it goes back to the top of the “while” loop. If the initiating condition (“$i <= $iterations”) is true, the loop will run again, creating a new line for our gallery.

Simple enough?

This is a pretty basic script, and I’m sure it could be improved upon, but for now it definitely saves time, and is easily adapted to many purposes.

Pros and Cons

Pros: Adaptable, time saving, and simple. The script is re-usable several times on the same page if more than one gallery is on the page.

Cons: Slight server overhead which is probably negligible. Each time the page loads, the server has to generate that HTML. In my opinion, this hardly matters for such a small-scale site.

Wrapping Up

Thanks for checking out this script. I hope you’ve learned something from it!

You can download the example code HERE.

To learn more about the javascript used to make the gallery fancy, check out Sexy Light Box – compatible with jQuery AND mootools.

Free clipart

http://www.webweaver.nu/clipart/

Web Generator

http://www.ornj.net/webalbum/

Free Photo Gallery Generator

There are several programs to choose from at this link

http://www.web-album-maker.com/

Free CSS templates (Which we do not use)

http://www.freecsstemplates.org/

Theme/Color - This is the first impression the user gets when visiting your site and can be the determining factor if they stay or leave.  When creating a theme for your site keep it simple.  The easiest way to do this is by designating areas for your header (logo/banner), navigation, content, and footer (copyright, contact info, etc) that fit together to create a square/rectangle on the page.  When picking colors try picking ones that flow together and are easy on the users eyes.  There are many tools on the web that can assist with this such as a color wheel which help with getting lighter/darker shades and colors that compliment each other.

Navigation/Menu - This is another crucial part to your site and should be visible on all pages near the top or in a sidebar for easy access.  A menu may also be placed at the bottom for your users convenience if your site content is long or you have a flash (elderly users or older browsers may not recognize this) navigation.  However the bottom of your page shouldn’t  be the primary source of navigation.  Another thing to remember is to never have broken links because they look unprofessional and can frustrate the user.  Even if a page is not up yet you should still never leave the link broken.  Simply create a page letting the user know the page is currently under construction and to check back.

Content – This can also make or break your website.  When adding content be sure to break it up with line breaks, bullets, images, different alignment, etc.  A user does not want to sit and read a wall of text, they want to get the key information easily.  If a page is really long there may be a chance that you could take a section and place it on its own page.  You also want to make sure you keep related information together and unrelated information apart to avoid confusion from the user.

Footer – The final thing in maximizing your sites potential is creating a footer for the bottom of your pages.  A footer should contain copyright information and your contact information such as address, phone, e-mail, etc for quick access to the user.   The footer should not however replace a contact page.

2.  Many people research products and services on the internet prior to their purchase.

3.  You are able to update important information about your business.

4.  A web site allows a business to reach their local market.

5.  By having your customers utilize your web site to answer frequently asked questions, you will be reducing costs.

6.  Information about your business is available 24 hours a day, seven days a week.

7.  Obtain important feedback from your customers.

8.  Stay in contact with your customers.

9.  Promote your business by allowing your customers to view your product or market.

Before you go blasting NAV links all over the place you should first consider the style and placement location on the page. There are two primary possibilities for link style – Buttons & Text links.

Buttons – This style of link is most suited for visual appeal or aesthetics. The button size determines how much text can be placed on the button as a description. Typically you are limited to one or two short words.

Text links – This style of link is suited for providing a more detailed description of the link. This style also has a huge benefit as an SEO element.

After considering the style of the link, the next critical factor is placement. Where NAV links are placed varies from site to site, the most common place is either vertically on the left top side of the page or horizontally across the top of the page. While there are other places for NAV links I would suggest that one of these two locations be used. Most people are use to finding links on the left or top so why rock the boat? Remember you want to make navigation as easy as possible. However no matter where you place the site NAV links, it’s of the highest priority to consistently place those links in the same location on each and every page of the site.

Here are 3 additional tips for improving site navigation. Some sites place NAV links in unusual places. The most common place is across the top or down the left side of all pages. However there are three other areas for placement of NAV links that will aid visitors when visiting your site.

1) In the page footer. It can be frustrating to get to the bottom of a long page then have to scroll back to the top to find the NAV links. Having NAV links in the page footer is a nice convenience for the user.

2) In a sitemap. A sitemap should contain links to all pages within the site. This makes it easy for a user to quickly and easily find all information or pages on the site. The sitemap NAV link is typically located in the page footer. BTW – A sitemap aids search engines in finding and indexing the pages of your site.

3) Within the flow of text. If you have vital pages that you want your visitors to see you can make additional access easy by placing a NAV link in the flow of content or text. Users, when reading, can simply click the link without having to traverse the web page to find the NAV link to get to the page of interest – very cool! You can also gain benefit with search engines by using the keyword of the page being linked to as the text for the link.

For sure navigation is important for the success of your website. The easier you can make it for a visitor to travel around the site the happier they will be. This alone does not guarantee a customer will buy your product or service but it does help to ensure they won’t leave frustrated.

This article provided by Woody Longacre.

The future of Web sites involves using a background image along with the layout in conjunction. For many years we have put patterns and one color backgrounds in our sites. It is time to  evolve into large background images and integrating those images into the layout of Web sites. Overlap some images with text, extend them over other elements. Make things interesting to the viewer so they will want to be more visually engaged in the Web site. Don’t be afraid of white space. There is nothing wrong with it. Its there to push your eye to where you want your customer to go.

As a business owner please be aware of these evolving strategies and make sure you make the right decision when choosing who is creating your Web site.