Design, Development, and Consulting » Website Advice

Pimp My Web Page: Simple to Complex

Peter — Tue, 22 Jun 2010 06:28:51 +0000

Let’s start with the simplest web page:

```
Hello World!
```

Well, that’s nice, but there’s certain information missing. We should add a doctype to let the browser know what flavor of HTML, XHTML, etc we’re using. This declares the document type definition (DTD) in use for the document.

We should also add things like the HTML elements, a HEAD element for specifying more information about the page, a BODY for the contents.

We should also let the browser know our character encoding with a meta tag.

So now we have:

```
    
```
```
        
```
```
        Greetings World
```
```
    
```
```
    
```
```
        Hello World!
```
```
    
```

What about the look of the page? Let’s add some CSS:

```
    
```
```
        
```
```
        Greetings World
```

```
    
```
```
    
```
```
        Hello World!
```
```
    
```

Of course we should throw that into an external style sheet:

```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
    
```

and:

```
/* styles.css */
```
```
body {
```
```
    background-color:#BDC4D4;
```
```
}
```

Let’s add two images:

```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```

Hmmm… but we’re making two requests to the server for these two images. We can pass the same amount of information to the user with only one request to the server using sprites.

Sprites are often used in divs or other elements as background images. We’ll use sprites as background images, but they’ll be the background to an IMG element. “null.png” is simply a transparent pixel:

The HTML:

```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

The CSS:

```
/* styles.css */
```
```
body {
```
```
    background-color:#BDC4D4;
```
```
}
```
```
.sprite {
```
```
    width:80px;
```
```
    height:80px;
```
```
    background:url('images/sprite.png')
```
```
}
```
```
.image2 {
```
```
    background-position:-80px;
```
```
}
```

Well, ok, but our sight isn’t going to change much over time, so once a visitor see our site, they should cache it in their browser for future use. This’ll make the page load faster for everyone, since it reduces server load, and it speeds up the loading of pages by repeat visitors.

We can accomplich this using HTTP headers. This is not the HTML HEADER tag. HTTP headers are lines that the server sends to the browser before the contents of the page… this means we can’t put the HTTP headers into the HTML file. We’ll have to use something server side for this. PHP has a header() function, which makes things really easy:

```
// Expires one year from now
```

$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);

```
// Format date
```

$date =  date('D, d M Y H:i:s', $expires);

```
// Send HTTP header
```
```
header("Expires: $date GMT");
```
```
?>
```
```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

We could have done the above with Apache or whatever server itself we’re using. PHP is nice for illustration, since we can keep all the code in the HTML file. Since the HTTP header comes before the HTML content, you cannot put any HTML before the PHP header() function.

Ok, now we’re getting somewhere, but we’ve still got all this text and stuff on our web page…. ok we don’t, but we could have all this stuff, if we had a big web page, or it may look like a lot of stuff to someone with a limping dial up in East Timor. Well, why don’t we compress all our stuff. Let’s GZIP it.

```
// Expires one year from now
```

$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);

```
// Format date
```

$date =  date('D, d M Y H:i:s', $expires);

```
// Send HTTP header
```
```
header("Expires: $date GMT");
```

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))

```
    ob_start("ob_gzhandler");
```
```
else
```
```
    ob_start();
```
```
?>
```
```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

You can confirm that you’re properly GZIPPED.

Ok. With PHP we can also flush the buffer early:

```
    
```
```
    
```
```
    
```

It’s great that our CSS is in its own file, but it still has a bunch of whitespace. Why don’t we minify it.

I used the YUI compressor with this command:

java -jar yuicompressor-2.4.2.jar styles.css -o styles.min.css --type css

To get this CSS file:

body{background-color:#BDC4D4;}.sprite{width:80px;height:80px;background:url('images/sprite.png');}.image2{background-position:-80px;}

We can do the same minification with our Javascript if we have any, and remember to include your Javascript as far to the bottom of the page as you can.

Take a look at the final page.

Why use a Content Management System

Peter — Wed, 26 May 2010 05:41:34 +0000

You can feel free to skip this entire article if you have a website that you are happy with… hold on, there’s something else… and you can easily update it. Notice that I said you, not your latte drinking, jargon spouting, charge by the hour web air quotes consultant.

One of the main reasons to use a content management system is to enable you to update the content, and sometimes the look of your site. A CMS (I’ll explain what it is soon) should enable you to do this in a painless way. In other words, without cracking open any sort of O’Reilly book with “the Definitive Guide” somewhere in the title.

This brings me back to what exactly is a Content Management System. Sorry, I didn’t link you to this Wikipedia page because it’s not all that helpful. In broad terms a CMS lets you have control of your website without having to understand all the code that makes it work. Of course there are many different CMSes, and some are better at this than others. But basically a CMS is like the controls on your car. The controls on your car let you drive a car without having to understand how an engine works. Now, some cars are better at doing this than others. If you’ve got a Fiat with 300,000 miles on it, then you don’t get into the car without your tool box right? But if you’ve got a new Honda you may not even know where the lever to open the hood is. Basically, sometimes you’re going to have to deal with the innards of your car or your web site, but hopefully not often.

Sounds good right? You don’t want to drive a car and get oil on your hands, and you don’t want to make a website and get ones and zeros on your hands…. or those < and > symbols or whatever. Now you just have to pick a CMS. I’ll jump the gun here and tell you that WordPress is often a good choice.

But you’ve got plenty of other choices, some free (as in beard (or leg hair), beer, or fall depending on what you pick): Concrete5, Drupal, Joomla, WordPress… and some for payment (as in investment or hole in your computer screen you stuff money into that will be lost forever depending on what you pick): City Desk, Expression Engine, Sharepoint, Sitefinity…

I like WordPress for small business sites. It’s pretty easy to use, very flexible, open source, and built from PHP and MySQL which are also open source. Like I said, there’s plenty of other choices, many of them excellent.

Ok, so where was I? Something about Fiats and oil on your hands. Time for Car Talk? Wait, I was talking about Content Management Systems and why they help you not to get your hands dirty.

So, a CMS puts the power back into the user’s hands. Admittedly even a CMS has a learning curve, and sometimes you will run into things that you need to dive into the

Here’s a concrete example. It’s a very simple one. Let’s say you have a web page, and it’s about food. You care about food. You don’t care too much about clunky computer code. You’ve got all sorts of stuff on your webpage including some of the dishes you create for your clients. You’ve just made a new dish you’re very proud of, and you want to put it on your website. Now, at first you might say that it should be easy. You can figure out how to modify the page on the server. Well maybe, but since you have a nice site, it’s not just one page. Each recipe is filed under one or more food categories. Each recipe has a pretty background. Some of the recipes may be highlighted in special sections. Basically, it’ll take a long time for you to figure out how to add just one recipe to your site. You’ll have to update a lot of things, and you’ll probably break your site a few times before you succeed. Granted, you’ll learn a lot about HTML, Javascript, PHP, MySQL, Apache, and who know what else, but you don’t care about that, you care about food.

A CMS handles these type of things for you. How? Well, by creating a bunch of control panels that let you add to, subtract from, and modify your site.

Don’t worry even if you have a CMS, you’ll still be able to throw plenty of money at your latte drinking, jargon spouting, charge by the hour web air quotes consultant… but you’ll be able to do it while having control over your own site. In fact, the hope is that the more work you get done on tweaking your CMS to fit your needs, the more control you’ll have, so all that money becomes a good investment, not just lattes down the drain.

Why I Like to use Dreamhost for Web Hosting

Peter — Sat, 03 Apr 2010 23:49:18 +0000

There is an over abundance of web hosting options. There are options to get pretty good hosting for free, or if you want, you can get pretty bad hosting for a lot. Anyway, the choices are overwhelming. I’ve tried several web hosting services, but for the past few years I’ve stuck with one: Dreamhost – affordable, complete, and good overall.

Now, there’s all sorts of things Dreamhost offers, and you can read about them on their site (if you do sign up with them, please use the referral code “netlumination” to get $49 off monthly, 1 year, or 2 year hosting).

The important thing for me when I first got hosting was that they had PHP and MySQL. They have PHP5, MySQL, Perl, Python, Crontab access, full CGI, Ruby on Rails, SSI, CVS, Subversion, and a full Unix shell.

So if you sign up and just plop down a simple HTML home page that’s fine and obvious. But here’s something I just found out. Let’s say a little later you decide to learn object oriented programming and you start practicing with C++. You wouldn’t think Dreamhost can help, but they can. Just log in to your Unix shell type “g++” and the name of your C++ file, and you’ve got a compiled executable file. If you want an IDE for your C++ practice then just type “emacs” and then key in “M-x gdb” (M is your meta key – “alt” usually). Of course, that’s just the tip of the iceberg. If you want to play around with Python, just type “python” at the Unix shell prompt. There are many languages you can play with.

The example I gave is very specific and particular to me, but my point is that Dreamhost hosting grows with you. I’m still using the same plan I started with, and I’m still learning all the tools it offers.

In addition to the programming options, Dreamhost also makes it easy to set up software without fuss (you don’t have to learn to tar ball, unball, dezip? whatever, you just click once). They have one click install for many things, and they always seem to be adding stuff. Some of the installs I see in my panel right now include: WordPress, Gallery, ZenCart, PHPGedView, OpenX, Pligg, dotProject, Moodle, Joomla, phpBB, MediaWiki, WebCalendar, Advanced Poll, Trac, StatusNet, Zenphoto, and Drupal. Of course if you want something they don’t have, you have the flexibility and option to add it yourself.

What really prompted me to write this is starting to use the Unix shell. All of a sudden I realized that Dreamhost was providing me with all sorts of stuff I didn’t even know about and have yet to learn. Often when you learn about new tools, you have to go out and buy them before you can use them. The Unix shell comes with your account, and all the tools in it are all ready for use. With Dreamhost it feels like you’ve got Home Depot in your garage.

More on Search Engine Optimization

Peter — Thu, 02 Apr 2009 21:45:30 +0000

If you look at sites offering search engine optimization, or SEO, you’ll notice that the prices can get pretty high. If all that is involved is making sure all the elements on your page have your keywords correctly woven into them, then how can SEO services be so expensive? Well, it turns out that the words on your pages are just a small part of the picture.

Google and other search engines have very complicated ways of figuring out how to order sites in their searches. If only the keywords on the pages themselves mattered, then a useless page that lists only the keyword thousands of times would always be first. So that doesn’t work. What search engines decided is that they would look at who links to a page, and also the outgoing links from a page. It gets complicated since it’s not just the number of pages that link to your page that is important but also their quality in the eyes of the search engine. Links to your page from other pages are called back links. The more of these you have more top ranking sites the better you will do in the eyes of search engines.

In addition to number of links, there are other differences among sites. For example you’ll notice that .edu, .gov, and .org sites often achieve very high rankings. So, if you can get links from any of these type of sites, your page will do very well.

That’s presenting things with the broad brush stroke. Not only are the number and quality of your links important, but as usual, the devil is in the details. Your back links must be from pages that have the same keywords as yours. Additional if you really want good search engine optimization the words in the back links themselves should be your keywords. For example, if you make neon signs, then you want other pages dealing with neon signs to link to you, and you want these links to specifically say “neon signs”….. not your name, or you companies name. No one’s going to search for your name or your companies name when they’re considering the options. If they already know about you and want you to do their neon signs, they’ll just pick up the phone and call. You want people who search for neon signs to see you in the search engines, since they don’t know about you and can give you business.

All of this takes work a lot of effort. You have to know how to get others to point to your page. You have to know who should point to your page. There are many ways of doing this. You can buy, trade, or create links. All of this will take time, money, or both.

Just to illustrate a complication that a good search engine optimization specialist would take into account, consider trading links. This sounds easy, right? You email another site that has you keywords, and you get them to link to you, while you link to them. Not if you’re really good. Since unreciprocated links work better than reciprocated links. After all, the search engines know that anyone can trade links, but not anyone get a link without giving one. So it is ideal to use multiple sites when trading links. They link to yours and you use a different domain name to link to theirs. As you can see, there are many different choices in how to do things. This means that the quality of SEO you get is highly dependent and based on who you deal with.

In addition to these specific individual strategies, you have to have an overall strategy for moving up in the rankings. This is important in order to create a realistic goals.

A common SEO strategy is to move up in the rankings for a very long series of keywords and then gradually increase your rankings for shorter and shorter phrases. For example there may not be much competition for “tennis pros from Rhode Island who are left handed,” so if you happen to be a left handed tennis pro from Rhode Island, you are in luck. You’ll move up in rankings quick. Then you can concentrate on “tennis pros from Rhode Island” Then “tennis pros.” And finally you can show up on the first page of search for the key word “tennis.” A long way down the road. “tennis pros from Rhode Island who are left handed,” shows 7,280 results in Google. “Tennis” has 190,000,000 results. SEO is an ongoing process.

So you see, search engine optimization only begins with your page. Your url, title, alt image tags, h1 headings, etc. are only a small part of the picture. The content of other websites and a cohesive overall strategy will also determine the success of your SEO. This is why the process is more complicated than just paying attention to the content of your pages, but not everyone knows this, and not everyone uses the same strategies and techniques. Make sure you understand what you are purchasing. Do this by asking questions and looking at the details.

Look for samples of things you like and dislike

Peter — Thu, 24 Jul 2008 21:55:30 +0000

How do you tell your designer what you want if you don’t know what all your options are. The answer is simple: samples.

One of the first things you will do when you begin working with a web developer is to describe how you want your site to look and feel, the audience you are targeting, etc., but a picture is worth a thousand words, and a url is worth ten thousand.

It is the web designers job to know the latest technological possibilities, not yours. So you may not even be aware that it is possible to ask for certain things… for example to have your web page show up well on the Amazon Kindle or on screen projectors.

You can get around this problem by doing something fun… surfing the web and collecting the urls of sites that you like and don’t like. When you approach your web designer, give them this list. They will be able to gain an organic understanding of what you want. Like this, they will be able to understand which of the newest bells and whistles would be necessary on your site, since they’ll have a good broad understanding of the type of site you are striving toward. Samples of your likes and dislikes will greatly aid in getting exactly the site you are looking for.

So, make sure you have a list of sites you like and sites you dislike when you approach your web designer. It will open up possibilities for you site you don’t even know exist.

Style guides

Peter — Tue, 10 Jun 2008 17:12:21 +0000

One of the difficulties in having a web site designed for you is that you may not know what to look for. A way to get around this is to ask for explanations… in writing.

For example, you may have a web designer come up with a look for your site. Make sure you ask for a written description of this look. This is called a style guide. A style guide may relate to the combination of colors on a site, each page’s layout, the feel of the writing on the site, or all of the previous. The style guide itself may be online, in electronic form, or even a physical booklet. The style guide will not only help you understand the work that is going in to developing your site, it is also a very valuable resource. A style guide allows someone who has never worked on you site before to edit your current pages and add new pages to your site while maintaining the look and feel of the overall website. This guarantees that your site will not only look good the first day it goes live, but that your site will continue to look good after years of edits and updates.

Web page validity

Peter — Sat, 07 Jun 2008 01:36:09 +0000

Markup validation sounds like a technical topic, but it is a factor that must be understood so that your website will be available to the largest number of customers or readers.

Markup validation is the process that is used to make sure the code on you web pages conforms to the “rules of grammar” of the world wide web. If your pages are valid, not only can the most people access your pages now, but people will continue to be able to access your pages in the future.

You may well ask why having valid web pages is important. After all, if you are able to view your web page, and it looks nice, that’s good enough, right? Well, not everyone has the same monitor resolution as you. What if someone wants to quickly buy your product, and all they have available is a cell phone? Having valid pages means that you present the data on your site in a certain predictable and agreed upon way. This means that the greatest number of devices, and so customers, will be able to access your site, since the makers of these devices will be able to count on the manner in which you give them information.

Additionally, as you’ve noticed, things change quickly on the web. If your site looks good today, unless it is valid, it may not look good tomorrow…. even on your computer. When the way we communicate over the world wide web is changed, attention is paid to making things backward compliant. In other words, many of the functions on old sites will still work with the new browsers and devices, as long as they worked with the old standards.

Essentially, designing your site without paying attention to being valid is like gambling. You gamble whether people on other computers and devices will be able to properly access your site, and you gamble whether people will be able to properly access your site in the future. Well, to narrow it down further, it’s like playing Russian Roulette. If people can’t access your site, they won’t visit it. If people don’t visit your site, they won’t buy your products. It’s not something you want to gamble on.

How can you tell, whether a page on a site valid? Fortunately that’s easy. Just enter it’s URL into a markup validator, like this one. You generally will not need to use a validator yourself, since your web designer will make the pages of your site valid, but it is nice to know that if you are curious, you can quickly tell whether your customers are likely able to access your site.

Here is some more information on markup validation. It is an explanation by the W3C, the organization in charge of the protocols and guidelines for the world wide web, as to why markup validation is important.

Site maintenance

Peter — Wed, 04 Jun 2008 19:05:29 +0000

Let us say that you had the perfect website designed for you. It is beautiful and has everything you need. Well, after a while, you decide to change your inventory. Now you want to update your online inventory and change your online FAQ page. Are you going to have to spend more money to have the web designer come back and do this for you, or are you going to risk your site by going into the code yourself? Fortunately there is a third option. Have your site designed with areas that can be edited by the website owner… that’s you.

You may still want to have your web designer come back and do maintenance on your site, but you do not want to have to call your designer every time you want to add copy or edit your contacts page.

Here is a site that allows the owner to edit some important information on the site easily. Stock.Netlumination is a site that displays some of my photos. The potential buyer will enter the site through the home page. When I want to change information about photos, or add photos, I go to this, the editing page.

Normally this page would be password protected, but I left it accessible to the public, so I can demonstrate its features. If you click on a photo in the editing mode, you are taken to a page where you can modify the information without having to deal with any messy XHTML code. For example, here is a page that would allow me to edit information about one of my photos of Mount Hood, simply by changing the prefilled form and entering the correct password. Once I hit submit, the site will automatically generate the necessary code, and it will update to display the new information.

Having pages like this will enable you to have better and more direct control over your site. It will allow your web developer to concentrate on maintaining the accessibility, look, and feel of the siste, while allowing you to control its content.

As you design your web page with you web developer, make sure you spend some time thinking about what parts of your site you will want to be able to easily edit yourself.

Why Search Engine Optimization is important

Peter — Sat, 31 May 2008 02:23:59 +0000

A web site can often appear like a store front. Look at pages like Amazon.com or Target.com. But appearance can be misleading…

The most important thing about a store, besides what it sells, is where it is located. If you pick your location well, customers will pass by your store and you will make lots of money. Contrastingly, people hardly ever randomly chance upon a web page. There really is no such thing as good location for a web page. There is only good visibility, which is how easy your web page is to find. This is where search engine optimization (SEO) comes into play. A good web developer can make your web page visible to the people who are looking for exactly what you are offering.

When people look for web pages they use search engines, links from other web sites, or the referral of friends. So when someone is looking for a website, they are looking for very specific things. They are not just passing by; they are searching for just the right thing.

So, you want to make sure that when a customer is brought to your site from a search engine or a referring site, they find exactly what they are looking for. Unlike the customers of a brick and mortar shop, people looking at web sites will not browse if they do not instantly see what they are looking for. They will not ask or search; they will leave.

This means that a successful website must have very good SEO. SEO is not simply having a good ranking in Google. It is having a good ranking for the words that people type in when looking for the resources your site has to offer.

Having a good ranking in search engines can be done with hard work and detail oriented web design. Finding the correct keywords for your site is part art, since you have to anticipate the words or phrases that people will type into the search enging when looking for sites like yours. A good web developer can help you set up SEO for your site, so that it is visible to the people looking for it.

Design, Development, and Consulting » Website Advice

Pimp My Web Page: Simple to Complex

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Why use a Content Management System

Why I Like to use Dreamhost for Web Hosting

More on Search Engine Optimization

Look for samples of things you like and dislike

Style guides

Web page validity

Site maintenance

Why Search Engine Optimization is important