Web Design, Search Engine Optimization, and Life

Automatic Magazine Layout

noreply@blogger.com (Joe Garite II) — Wed, 13 Sep 2006 02:53:00 +0000

By: Harvey Kane
Auto-resized images are a common feature on the web now. Automating the process of resizing images saves a lot of time—it’s certainly quicker than manually resizing images in Photoshop—and is a good way to manage images on a site. But when a good designer crops your images manually, they always looks better.

The problem with automatic uploads is particularly evident when several images of completely different dimensions are displayed together on a page, such as four product images that have been uploaded through a content management system (CMS). Finding an attractive way of displaying any two, three, or four images together (regardless of shape and size) has always been difficult without manual resizing or cropping.

This article covers a PHP-based technique for automatically resizing—and more importantly, positioning—between two and eight images in what I call a magazine-style layout (images in a magazine are always carefully positioned—usually one image takes pride of place and several smaller images surround it).

Example 1 shows the final output of this technique. The only information we need to supply to the script is the width of the container, and the file name of each image. Amazingly, everything else can be calculated.

Different dimensions

Consider the following three images of different sizes and dimensions, which could have been uploaded via a CMS…

Three user-uploaded images, all of different dimensions. In their current shape, these images are unlikely to look attractive. A more desireable layout is shown below

The same three images resized and positioned correctly.

Anyone with an image-editing program such as Photoshop can achieve this effect very quickly, but it needs to be done manually. This method uses of some server-side PHP scripting and some rather complicated algebra to achieve the same effect, no manual tweaking involved.

The solution

Using PHP to resize the images on the server, we are able to calculate the exact size that each image should be so they will fit together in a nice square box. This will maintain our aspect ratios, work with almost any image proportion, and allow us to do all the dirty work on the server. Square images are no problem either (see Example 2).

Getting started

First things first, you will need a PHP web host who has the GD2.x extension enabled. Fortunately, this is quite common these days. You will also need a good image resizing script. I have included a basic script here, but it’s always a good idea to use a script that caches the output, as dynamic images can really slow down your server. Copy the supplied class file to your web server and note its location on the server.

Create a basic script as follows… (line wraps marked » —Ed.)

# include the class file
require_once('magazinelayout.class.php');

# Define the width for the output area (pixels)
$width = 600;

# Define padding around each image - this *must* be included
#in your stylesheet (pixels)
$padding = 3;

# Define your template for outputting images
# (Don't forget to escape the &)
$template = '<img src="image.php?size=[size]&amp;file=[image]" »
alt="" />';

# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);

# Add the images in any order
$mag->addImage( 'landscape1.jpg' );
$mag->addImage( 'portrait1.jpg' );
$mag->addImage( 'landscape2.jpg' );

# display the output

echo $mag->getHtml();

That’s it. Running the script should display three images in an attractive layout; the exact look of the layout will be determined by whether the images are landscape (longer than tall) or portrait (taller than long).

How does it work?

The above code is basic object-oriented PHP. It sets up a new class, adds some images into an array, and processes them. The getHtml() method is the key. Let’s take a look.

Getting image ratios

As images are added, we detect whether they are landscape or portrait using PHP’s getimagesize function. This gives us the height and width of the image, which we use to find a ratio of width : height. This function is quite processor intensive, but it can’t be avoided.

We don’t need to know the height and width, but we’ll use the ratios later on, so we’ll save them to an array. At this point, we also decide whether we are dealing with landscape or portrait images, as this determines which template the script will use. The template above is based on two landscape images and one portrait.

Calculating sizes

Our goal is to get the three images to look right within an overall fixed width—the overall height will vary depending on the image dimensions. The complicated part of all this is figuring out the right size for each image. If we did it in Photoshop, it would involve resizing each image until it “looks right,” and every change will potentially upset the balance of the other images. My first attempt at this script wasn’t too different from a Photoshop trial-and-error process; the script started a counter at 1 and tried every size up to 500px until it found a working combination. The sound of my processor fan kicking on convinced me there had to be a better way.

Algebra

It turns out my problem can be solved using algebra—something I spent a lot of time learning at university, but never managed to find a practical application for. Ten years on, it’s coming into use for the first time.

Certain parts of our equation we know:

t = Total width—The total width of all images specified when the class is called.

r1, r2, r3 = Ratios—We have already calculated the ratios of each image based on the width and height.

What we don’t know…

w1—The width of the left column—one required piece of information.

w2—The width of the right portrait image, also required.

The following diagram shows the values we know and those we don’t. Known values have a checkmark, unknown have a question mark.

A diagram showing the relation of our equation values to the layout.

Given these widths, our image script can figure out the heights because we already know the aspect ratio of each image. If we can use algebra to find w1 and w2, we have all we need.

What we also know

We also know that the height of the portrait image is equal to the combined height of the two landscape images, expressed as…

h1 = h2 + h3

And we know that the same height is also equal to the portrait image’s width divided by its ratio:

h1 = w2 / r1

We also know the height of the landscape images is their width divided by their ratio.

h2 = w1 / r2
h3 = w1 / r3

After some rearranging of elements, I am starting to put everything into one equation, with the goal of finding w1. A trip to the Quickmath calculator gives me the result I need.

W1 = t / ( r1 * ( 1/r2 + 1/r3 + 1/r4 ) + 1 )

Some padding, please

At this point, it became apparent that the first designer to look at the output would be wanting some padding between the images. This is not as simple as adding a few pixels onto each image, because the left-hand side is going to have more padding overall than the right which will throw the formatting. Example 3 shows the layout without any padding.

With a little help from the calculator, I arrived at the following equations:

The formula for one of the layouts.

Things are starting to look a little more complicated here, but this does work.

Enough maths, back to PHP

This was never meant to be a lesson in mathematics, but we now have enough information to plug back into our PHP script. By replacing the algebra variables with PHP variables, we create a formula for finding the information we are missing.

Given the ratios of the images and the overall container width, we can calculate the width of all images—enough for the image resizing script to do its job.

CSS

Because we don’t use tables for positioning anymore, I had to find a way of making the layout look good using CSS. Because we are dealing with squares, this is quite straightforward using the images in a floating div. All was working well until I tried the version with padding between the images in IE. Because IE handles padding differently than other browsers, it offset the images by a few pixels and ruined the effect.

One way to work around this problem is to place the image inside a container div and apply margins to the image. This will force the container to the right size, which gives the much needed effect of padding between the images. Default CSS is as follows:

.magazine-image {
background: #fff;
border: 1px #eee solid;
}
.magazine-image img {
padding: 0px;
background: #fff;
margin: 2px;
border: 1px #eee solid;
}

Different layouts

This script contains six different layouts based on different formulas. The layouts accomodate from one to four images each. If you need to display six images, the script simply uses the four-image layout followed by the two-image layout (see Example 4). Some of the layouts are more appropriate for certain combinations of image size, such as 2x landscape 1x portrait; others are more generic. Example 5 shows how the script can be used at different widths to fit any space of your page.

Possible uses

The obvious use for this script is anywhere where more than one user-submitted image needs to be presented in a HTML page. I’m thinking product databases, forum image uploads, random image rotations, etc, etc.

Once you have ten or so images, you are better off using an AJAX based image gallery, but this script will fill the gap nicely up until that point.

Download

The full source code and examples are downloadable.

Thanks and credits

Thanks to Alexander Burkhardt for the use of the demo images. The images were taken on the lovely Hokianga Harbour in Northland New Zealand.

Illustration by Kevin Cornell

Harvey Kane is a PHP Web developer living in Auckland, New Zealand who publishes SEO Articles and tools. By day, he produces CMS websites for small businesses.

Website Promotion: Getting Started

noreply@blogger.com (Joe Garite II) — Sun, 03 Sep 2006 16:34:00 +0000

Website Promotion: Getting Started
By: Joe Garite II

Okay, if you have read my last article Search Engine Optimization: Getting Started than you are ready for this article. If you haven’t, bookmark this article and jump on over to that article. When you’re done with that come back to this one. If you have already read it than you can continue to read on. In this article I am going to tell you the FREE ways of getting advertising and promotion. Ready? Lets go!

Search Engine Submission
You’ve optimized the site you want to make money on so lets start to submit it to search engines. Now you may have seen those ads that tell you they will give you 500 Search Engine Submissions for only $19.95, let me be one of the first to tell you that it’s a waste of money. All you need to do is go to Google.com. That’s right, one search engine will take care of all your needs. Google has become such a huge search engine, that the majority (not all mind you) will crawl through Google to get their index. So head over to http://www.Google.com/addurl.htm and submit your website. People ask “how often should I submit my website?”, I usually submit once every couple of months (2-3 should be good). However, there are others that will say you only need to submit it once. It’s a judgement call that you can make. But be warned, if you submit too often your website will be “sandboxed”. When submitting to Google, you must be patient, VERY VERY PATIENT. There have been websites that can take 6-12 months just to get indexed, but when it finally does, you will see the difference as long as you have fresh content (the key to any website).

Inbound Links
Inbound links hold a great deal of importance when Google decides where you are to be placed on their search engine. The more inbound links you have, the closer to the top of the search you will be. Remember that single keyword/key phrase I told you to use? Type it in Google and find your top three competitors. Write down their URL and do another search in Google for each URL. Than click “View links to this site”. This will give you an idea of how many links your competitors have going to them. You can also use this method to check how many websites are linking to you. While doing this, you can also look for a place to add your link to those websites. When requesting that a website add your link, make sure that the area you are going to be placed in has less than 40 links on it. Any more than that and the search engines may consider it to be a link farm (this will also result in sandboxing).

Article Submissions
Do you know a lot about what your doing? Sure you do, that’s why you do it. Take that knowledge and put it into an article. By writing articles (just like this one) you are creating fresh content for your website. Not only can these articles go into your website, but you can submit them to FREE Article Publishers such as ArticleBlast and EzineArticles. When writing your article you can include an “About the Author” section also known as a resource box. Inside the resource box you would put a link to your website. This counts as an inbound link to your website.

Google Adsense
Some people may choose to go the path of using Google Adsense. This is perfectly fine if you are in a rush to get targeted traffic to your website and if you have the money to spend on it. The average budget for Google Adsense is generally $300 a month and up. But it really depends on how much you want to spend and how desperate you are to get traffic flowing to your website. The higher your budget, the more traffic you are sure to get. Keep in mind, however, just like any of advertising method, Google Adsense does not guarantee paying customers. You must make sure that your advertisement shows exactly what your website is about to avoid wasted clicks. Do not make them general and do not lie to your customer. It’s a waste of your time and a waste of their’s.
For those who aren’t in a rush to get traffic into their website, but want to experiement with Google Adsense, I would suggest no more than $100 as a budget and using 2-3 target keywords. The Google Adsense path is a good way to get traffic, but can be a costly investment. And some months may not always be in the black because of it. Be wary when preparing your budget. And always make sure you have enough to pay your web hosting bills.

Conclusion
There are still many more ways to promote your website, online and offline. I will go into some detail about offline promotion and how you can go about doing so for some reasonable prices.

Joe Garite II of WebReality.net has seven years of experience in the Web Design field. He focuses mainly on the UI of a website, but is now in the Search Engine Optimization field.

Search Engine Optimization: Getting Started

noreply@blogger.com (Joe Garite II) — Sat, 02 Sep 2006 16:29:00 +0000

Search Engine Optimization: Getting Started
By: Joe Garite II

Okay, so you’ve got yourself a nice website and your advertising campaigns are starting to bring in some customers. But what if there was a way to advertise without paying for it? Would you take the time to learn about it? If you answered yes than keep reading. If you answered no than you can continue to pay for your advertising campaigns barely making profits and never increase your revenue.

I am going to explain some of the first steps to get your website not only optimized for the search engines, but to push your website up in the rankings war. Grab yourself a cup of coffee and maybe a muffin and take out your pen and paper, lets start brainstorming.

First you need to categorize your website. Figure out what category it is best suited under. For example if I am selling computer programs that aid web designers, I would categorize my website under Computer Software. That was easy enough right? Okay, now comes the difficult part. You need to pick one, just one, keyword or key phrase that you want to base your homepage on. Focusing on one keyword/key phrase makes it more valuable in the page in which it is located. The value of the keyword/key phrase is known as weight. You want your pages weight to hold 2% of the keyword/key phrase. This sounds easy, but it’s not. Let me tell you how to do this.

The TITLE tag
First is the most important part, the “<>” tag. This is the number one item to use your keyword in. If I were to give my website selling computer programs that aid web designers, I may use “<>Computer Software for Web Design”. Although it contains a “stop” word (for), the top key phrase I am trying to work with is before that word.

The META tag
Than there are the META tags. Simply put, these tags go inside the “<> ” tags in your html. They allow the search engines to pull up your website using the keywords and describe your website using the description. Without these tags, you simply can’t have your website pulled up in the search engines.

The ALT tag
Next is the ALT tag which is used in images on your website. If you wanted to put “Computer Software for Web Designers” at the top of the page using a font that I know nobody else has, I would have to use an image. Inside this image I would use an ALT tag called alt=computer software for web designers”. Although the ALT tag is not as powerful as using the natural text itself some cases can’t be avoided.

The Body
We’re almost done. This isn’t hard at all right? Okay, so now that we have our HTML side optimized its time to work on the side that users see. When doing this, you need to be careful not to over use the keyword/key phrase but you need to use it enough to give it the weight it needs to be considered important. This is the tricky part. One good way to do this is to use it in your links whenever possible. Search engines like to see those types of links at the top of the page, so if you can use text links instead of images this would help your weight increase. Don’t forget to also include them at the bottom of the page. Although it is less effective, it does help. The other way is to include the keyword/key phrase into the body. For example in the sentence “Use it to help you make a better website” I would say “Use this computer software for web designers to assist you in making a better website”. Make sure you don’t go crazy with the keyword/key phrase, if you use it too much the search engines may “sandbox” you assuming you are spamming.

This concludes the beginning steps to Search Engine Optimization. There are many ways to raise your rank in the search engines. In future articles I will explain how to advertise for free using your area of expertise. Until next time…

About the author:

Joe Garite II of WebReality.net has seven years of experience in the Web Design field. He focuses mainly on the UI of a website, but is now in the Search Engine Optimization field.

New Job

noreply@blogger.com (Joe Garite II) — Fri, 01 Sep 2006 20:59:00 +0000

This just in, as of August 21st, 2006, I will be working for a Web Design Studio located in Staten Island known as Trusty Solutions. However, I am unable to disclose any information concerning my work completed their. So, if you have a big job that you feel you want me to work on, but don't think I can handle it alone, now I can work with Trusty Solutions on your job.

About Me

noreply@blogger.com (Joe Garite II) — Fri, 01 Sep 2006 18:59:00 +0000

WebReality.net is a small web design and development company located in Staten Island, New York. It is is run by a single Web Designer and has been in business since 2001. Because I am a small web design company, I am able to offer my client the lowest web design prices compared to those bigger web design companies. The greatest thing about working with a small/freelance Web Design company such as myself is that when you have a question or want to speak with someone, you will actually get a real live person.

My specialty is designing high quality HTML/CSS web sites that are quick loading, search engine friendly, affordable and easy for visitors to use. I also offer a variety of options for reaching the search engines such as search engine optimization, competition research, and keyword research. All of these are necessities in competiting in the world wide web today.

Over the years, I have become skilled at designing and promoting web sites for the Internet. I have been involved in creating and promoting website's both from scratch and from client designs.

No two web sites are ever the same, just as no two customers' needs are the same, so I treat every web design project that way. I also believe that designing an effective web site should not be so expensive that the average start-up, entrepreneur, or worker from home cannot afford it. That is why I offer affordable web design services, and because of the affordability do not believe I skimp on the design services. I thrive to give my clients more than what they pay for. Why you may ask? It's all about making the customer (you) happy.

I am dependable; offer a wide range of web design and promotional services as well as knowledge that will help your online presence succeed.

I am also very proud to say that I have never had an unhappy client, or had to refund a single payment for any of the services I provided.

E-mail WebReality.net to contact us about your design project. You are not obligated to purchase any services by contacting us.