Okay Jacob

Optimizing Your Website For Speed

Jacob Haug — Tue, 07 Dec 2010 02:08:39 +0000

Making Your Website Fast

Recently, Google, made the announcement that the speed your website loads is now calculated into their page ranking. To that I say….good for Google! Think about it, what do you do when a website is slow or doesn’t load…you LEAVE! In the world of the Internet, you have mere seconds to capture a visitor’s interest before they leave and find your competitors. Can you afford to have them leave just because of your websites speed? In fact, I think Google says it best…

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. — Quote From: Google Blog

So, what can you do to make your website faster? Well, that’s what I’m going to be covering in this article. Lately, I’ve been extremely focused on making The Web Squeeze faster. This isn’t just because Google is taking website speed into account in it’s ranking — it’s because we want our website to be fast for our readers. We want happy readers! Since we just did a redesign, I thought this was the perfect time to work on speed, so that’s what I did.
I knew the basics of optimizing a website for speed, so that’s where I started. But, I didn’t want to stop at the basics. I wanted to do as much as I could and expand my knowledge past the basics. With some research, and of course, some discussion and help from our web design forum, I was able to do just that! Without further ado, here’s what I did, and how it impacted our website’s speed. (I should mention that I’m not done, and probably won’t ever be done, so hopefully you’ll see more articles just like this one!)

Website Speed Checklist

The Basics

Put your inline JavaScript and CSS into external documents!
Reduce HTTP Requests
- CSS Sprites
- Consolidate JavaScript and CSS
Move JavaScript to your footer!
Minify JavaScript
Minify CSS
Minify HTML
GZIP all static content
Compress and optimize images
Caching using mod_cache
Reduce the overall download size

Beyond The Basics

Domain Sharding
CDN (Content Delivery Network)
Intelligent Caching
Progressive Page Rendering
Speed up the backend application
Database Caching
File Caching

For Your Consideration (Advanced)

Use a distributed application object cache (memcache)
Use Squid or another caching reverse proxy
Use a load balancer

Now, let’s get down and dirty and go over this checklist!

Website Speed 101

The Basics Explained

Put your inline JavaScript and CSS into external documents!

What do you mean by inline code, Jacob? Well, glad you asked! What I mean by “inline” is any on-page styling and any on-page JavaScript! Here are a few examples…
Inline CSS Examples…


I am RED!

Inline JavaScript Examples…

By moving your inline CSS and JavaScript to external documents you’ll be able to improve your website speed, but that’s not all!
You’ll also…

Reduce Code Bloat
Decrease your code to content ratio
Make your website more maintainable
Get that warm, fuzzy feeling and know your code is near perfect!

One of my questions was how would moving inline code improve my website’s load time? The answer was found at Yahoo’s Developer Network!

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files. — Quote From: Yahoo Developer Network

Great, so now you don’t have any inline JavaScript or CSS, what’s next?

Reduce HTTP Requests

Reducing HTTP requests is an imperative part of improving your website’s response time. The fewer requests you make, the faster your website loads. Think about it — if your website has 20 images on the homepage and you find a way to combine the images using CSS sprites to a mere 10 images, then your site will load much faster.

CSS Sprites

This is a little tricky to explain. The idea is for you to take multiple smaller images and combine them into one large image. Then, using CSS you can shift around and display the part of the image that is needed, instead of having to get multiple small images multiple times. This technique is normally used in navigation menus, but it can be used virtually anywhere. Sprites are very cool and you should check them out.
There’s no need to re-invent the wheel. Here are a few excellent resources to help you learn more about CSS Sprites!

Consolidate JavaScript and CSS

According to Yahoo, a staggering 80% of the end-user response time is spent on the front-end downloading all the components in the page!

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times. — Quote From: Yahoo Developer Network

Move JavaScript to your footer!

Keep in mind JavaScript is used to enhance the visual effects in your website. So, by moving this into the footer it will be loaded last because the browser loads sequentially top to bottom. The most important part of your design is your CSS styles which should be in the header, followed by your content and finally the JavaScript (which is your effects). Moving JavaScript to the footer does not necessarily improve your site’s load time — but it improves the “perceived” load time. Having this in the footer fools the eye. To the user, it looks like everything is loaded…but in reality the JavaScript could still be downloading. That is how I think of it. But, it actually has to do with parallel downloads.

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames. — Quote From: Yahoo Developer Network

Minify JavaScript
Minify CSS
Minify HTML

Minifying is taking out all new lines and comments and putting everything on one line. Since new lines and comments all add to your document’s size, by minifying your JavaScript and CSS and removing all that, you are reducing the document’s overall file size thereby reducing the amount that needs to be downloaded by the end user.
There are a few tools available that will minify your JavaScript for you, and I’ll link to those in the tools section below.
Minifying your HTML and CSS is not as easy as minifying your JavaScript. When it comes to these, you want them in a readable format so that later on you will be able to locate the parts you want to edit. You CAN minify — but you have to keep future edits in mind. My solution to this was to write a PHP function that loops through all your HTML code and removes any new lines or comments; thereby minifying your code on the fly. In other words, I use PHP to go through the code before it is sent to the user and remove all new lines or comments. My original copy never changes, so my comments and formatting are there, but they are never downloaded to the user. In a future article, I’ll write more on my coding for this.

GZIP all static content

The goal here is the same as above, with minifying your HTML, CSS and JavaScript. You want to reduce the document size, which in return reduces the amount the end user has to download. GZipping is the same as the computer term “zip.” You are compressing all the static components, which is the same as making a zip file on your computer. GZip uses a slightly better compression algorithm for this so it makes the files even smaller.
There are multiple ways you can apply a GZip, but most tend to use .htaccess.


                                                                                    mod_gzip_on Yes
                                        mod_gzip_dechunk Yes
                                        mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
                                        mod_gzip_item_include handler ^cgi-script$
                                        mod_gzip_item_include mime ^text/.*
                                        mod_gzip_item_include mime ^application/x-javascript.*
                                        mod_gzip_item_exclude mime ^image/.*
                                        mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Compress images

Again, the goal here is to reduce what the end user has to download so that load time is faster. Keep in mind, when you save an image in your image editor, if you are saving it for your website the smaller you can make the image the faster it will load for the user. Can you save it at 80% quality and not really notice any difference? Most of the time you can! This is step one. Your next step is to take the image and “smushit.” The team at Yahoo has developed a handy tool that allows you to smush or compress your images even smaller without noticing any change in quality. So — why not “smushit?”

Configure ETags
Add an Expires or a Cache-Control Header

ETags explained by Yahoo Developer Network….

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the ETag response header. — Quote From: Yahoo Developer Network

Add an Expires or a Cache-Control Header explained by Yahoo Developer Network….

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components. — Quote From: Yahoo Developer Network

There are many ways you can go about adding an ETag and controlling how your files and documents are cached, however, most of the time this is done through your .htaccess file. Here’s an example….

                                        # ETAG CACHING #
                                        Header unset ETag
                                        FileETag None
                                        # HEADER CACHING #

                                                                                    Header set Cache-Control "max-age=2592000"

                                                                                    Header set Cache-Control "max-age=604800"

                                                                                    Header set Cache-Control "max-age=600"

                                                                                    Header unset Cache-Control

                                                                                    # ALTERNATE EXPIRES CACHING #
                                        ExpiresActive On
                                        ExpiresDefault A604800
                                        ExpiresByType image/x-icon A2592000
                                        ExpiresByType application/x-javascript A2592000
                                        ExpiresByType text/css A2592000
                                        ExpiresByType text/html A300

                                                                                    ExpiresActive Off

Reduce the overall download size

This should all start to be second nature to you now. Make your files as small as you can so that the user doesn’t have to download as much. In review, here are the basics we have covered so far.

Reduce code bloat
Make images smaller
Use CSS Sprites
Take advantage of minifying, caching, and ETags
GZip static elements
Put JavaScript and CSS in external documents
Put JavaScript in the footer

The Tool List

There were loads of articles, tutorials, books, tools, and websites that I found helpful along my way. I’ll include a list of a few of my favorites below. Hopefully, in the coming articles I’ll compile a more comprehensive list of great articles, tutorials, tools, and websites!

Speed Optimization Tools

Speed Optimization Resources

Your website needs to be fast! And now that Google is taking this into account in its rankings, speed is an even greater consideration. Here, we have just touched on the basics. In my next article we will continue on…”Beyond the Basics.”

* Note: Special thanks to Mike Hopley from our forum for his insight and support in the writing of this article.

Into The Breach

Jacob Haug — Tue, 07 Dec 2010 02:06:16 +0000

Into The Breach

On this episode of The Web Squeeze podcast we go “Into The Breach” with Michael Santarcangelo.

Download Now!

Into The Breach

Into the Breach answers the question, “What happens when breach is only a symptom?”

Michael Santarcangelo guides a bold – and refreshing — look at addressing the challenges of protecting information – and reveals the real challenge as a human paradox. As Michael explains,

“People have been unintentionally and systematically disconnected from the consequences of their actions for so long, they are no longer held accountable or take responsibility,” explains Michael. “The real key to protecting information is to engage people in the process and support them with the right tools and technology.”

An expert on human ecology, Michael is quick to point out that we do not have a “people problem” and explains why suggesting people are “the weakest link” or other commonly used phrases is nothing more than a copout. By explaining the human paradox, Michael demonstrates how people are actually the heart of the solution. He then sets forth a clear plan that explains how to engage, empower and enable individuals to take back responsibility.

How do I get the book?

Michael has generously agreed to give away 3 copies of his book “Into The Breach.” In order to be entered into the contest all you have to do is ask an intriguing or thought provoking question below or on twitter! We’ll announce the winners on February 26, 2010!

If you can’t wait, and want it NOW!

Michael has also agreed to give a 50% DISCOUNT to our listeners. Just use the code “thewebsqueeze” at the shopping cart!

Get It Now!

In order to use the code, the book must be added to the cart (instead of using the “buy now” button)
once the cart pops up, enter the code: thewebsqueeze

Show Notes

Backup Solutions

BackBlaze (Software Backup Solution, Recommend by Michael)
Carbonite (Alternative Software Based Solution)
Mozy (Alternative Software Based Solution)
Drobo (Hardware Based Solution)
CrashPlan & CrashPlan Pro (Family Solution)

Security Links

Security Development Lifecycle (Microsoft)
OWASP (Improve Web Application Security)

Password Managers

Michael’s Site

About The Hosts

Jacob Haug (Host) – My name is Jacob Haug, and I spend the majority of my time in website development. I donate many hours each day helping the web community with technical aspects of website design and development. My current project is The Web Squeeze. A “NEW”, “FRESH”, Web Design and Development community dedicated to helping make the internet a better place! @JacobHaug

Linda Chadbourne (Host) – Linda Chadbourne has been a web designer since 1998. A large portion of her day also involves graphic and logo design for Cozy Penguin Web Studio which she owns and operates. Linda is also one of the co-founders of The Web Squeeze which is a Web Design and Development Help Forum. In her free time she is an avid family person, horseback rider and reader. @Lchad

Michael Santarcaneglo (Guest) – The author of Into the Breach, Michael is a human catalyst that uncovers real challenges. He helps organizations (like Microsoft, Diebold and others) harness the power of people to rapidly develop efficient and effective solutions that turn insiders into allies who reduce business risk. Learn more at www.securitycatalyst.com, follow his adventures at www.catalystontour.com or engage with him on twitter.com/catalyst.

Communicating Effectively

Jacob Haug — Tue, 07 Dec 2010 02:04:05 +0000

Communicating Effectively

On this episode of The Web Squeeze podcast we give you tips on how you how you can help your client select the right services at the right price!

Download Now!

Show Notes

Sample Contact Form (Coming Soon…)

About The Hosts

Never Update Your Copyright Again!

Jacob Haug — Tue, 07 Dec 2010 02:00:35 +0000

Recently, I was reading an article on Smashing Magazine called…”Don’t Forget The Small Stuff This Year“, and within that article it reminded users to update their copyright statement each new year!

Have you ever forgotten to update your copyright statement to 2010? I know I have, however; let’s make sure that doesn’t happen again. With this short PHP code snippet, your statement will automatically update! How cool is that?

We’re going to change the above to…

                                        © Copyright < ?php echo date('Y'); ?> The Web Squeeze, LLC. All Rights Reserved.

The key in the above code is this line…

                                        < ?php echo date('Y'); ?>

The above line of code is using PHP’s built in date function. We’re saying echo out the current year (Y) in a 4 digit format. (e.g. 2010) If you’ve never used the date function, or want to customize the above a bit further, check out the date function.

http://us2.php.net/manual/en/function.date.php

I hope this helps make your life just a tad easier!

Is Your Computer Killing you???

Jacob Haug — Sun, 05 Dec 2010 15:58:44 +0000

Will Your Computer Be the “DEATH” of You?

Amazing true story of how my geeky ways almost killed me!

I love what I do. Probably most of us would say that or we wouldn’t be in this business. I’m online maybe 16-18 hours a day and I love every minute of it. My family says I’m “hooked.” My computer is like a drug. When I sign onto the computer, a sense of well being and peace races through my veins. It’s like being excited, but yet, being at peace at the same time. As I answer emails, work on podcasts, and handle the hundreds of details that pop up in the course of a day-I feel alive!

Downhill Spiral

I’m not sure when things began to change for me. Over the course of months I found myself being sick more and more. I’d have a bout of bronchitis, then just as I was beginning to feel a little better, I’d come down with a stomach flu. I went to the doctor several times. I began to feel like the fictional character “Monk.” I carried hand sanitizer and wipes with me all the time. I know that made me look even more geeky-but at that point I didn’t care. I was just tired of being sick all the time.

Matters went from bad to worse. Instead of thriving on excitement and eating stress for breakfast-I began to have trouble coping with even small issues. The thought of a looming deadline would send my heart racing. One day a friend who was working with me accidentally erased one of my external hard drives. I actually had chest pains! I thought I was dying. I went back to my doctor, who began to suspect that perhaps I had some anxiety and depression issues. Ya think? Pills were offered and taken, but they seemed to make matters worse.

My health went from worse to horrible. I was tired and fatigued all the time. I ached all over, like I was about to come down with the flu. Instead of being online all the time-I barely signed on anymore. I slept 20 hours a day and when I got up to eat, I still felt tired. I was too tired to die. Maybe you’ve been there, too. I couldn’t focus for more than a half hour at a time. My work suffered. I all but disappeared. Linda and Karinne (my business partners) must have thought I was cheating on them with another forum. Finally, they called me on it and I knew I had to do something.

What’s Wrong With Me?

I went back to by doc for a physical. I saw a new physician who talked to me about my complaints and my lifestyle. She asked if I got out in the sun much and I said, “no, not really.” Then, what she said shocked me a little. “I am seeing more and more patients with Vitamin D Deficiency. Vitamin D is known as the “sunshine vitamin.” Your body manufactures the Vitamin D it needs by absorbing the sunshine on your skin. Here in this area, we are at a higher elevation and folks here don’t get a lot of good strong sunshine. People who work indoors all the time, like you computer gurus, are especially at risk. This didn’t use to be much of a problem-but in med school they are beginning to teach more about it now. Kids stay indoors, watch TV and play video games, and when they do go outside their parents slather them in sun block. Vitamin D deficiency is showing up a lot. Let’s test your Vitamin D levels and go from there.”

I was on to the lab, where in my opinion they took out way too many little tubes of my precious blood. I almost passed out. But sure enough, in a few days I got a call from a nurse who was desperate to get me on prescription supplements.

“Your Vitamin D level is 10 mg. The low threshold of normal is 25. This is dangerously low. It can cause lots of problems so we want to get you on a high level supplement. Don’t bother to go out and buy any over the counter Vitamin D. You won’t be able to get enough that way. We’ll call you in a prescription and then check your levels in about 3 months. Your B12 is real low too. You need to start taking some supplements on your own or come in for some shots.”

Oh yeah! Shots are just what I want to jump in line for. I was kind of shocked, and didn’t really believe all this panic over a stupid vitamin. After all, I make sure to stop working long enough to eat at least once a day. But, I eat a lot at that one meal. And I don’t eat just junk. I eat a lot of chicken quesadillas and seven layer burritos from Taco Bell. I mean, think about it-there’s chicken and tomatoes and lettuce and cheese. That kind of thing is pretty good for you. So, I really didn’t get the whole deficiency thing.

I took so time to study this out. The connection between Vitamin D and strong bones has long been accepted. But there’s much more than that. Vitamin D is needed to help your body absorb calcium. And calcium is needed for strong bones and teeth. So, perhaps my first clue as to a vitamin D deficiency may have been those 18 cavities I popped up with a couple of years ago. And me being sick a lot-that fits too. Vitamin D has a hormone-like role as it is metabolized. In addition to its role in bone health, Vitamin D is also needed by other systems in the body. Vitamin D deficiency has been linked to depression, insulin resistance, muscle function, and weakened immune systems. Thus, I began to see that perhaps my low Vitamin D levels played a role in my general aches and fatigue, my depression, and all the other illnesses I came down with.

How Much Do You Need and Where Do You Get It?

Surprisingly, few foods contain Vitamin D. Of the things I might eat, there’s a little in milk, cheese, egg yolks, and some fish. I’m not big on any of that except cheese. The recommended daily intake of D3 is 400-600 I.U (international unites) a day. A glass of milk fortified with Vitamin D has a fourth of that. So, drink a couple glasses of milk and some fortified orange juice and you’re almost there! Not really. Many experts recommend 1000 to 2000 IU a day. You have to walk a fine line because Vitamin D is not water soluble and you can overdose. You should have your doctor monitor you if you are taking higher doses of Vitamin D.

WEB MD explains,

“Vitamin D is so important that your body makes it by itself — but only after skin exposure to sufficient sunlight. This is a problem for people in northern climates. In the U.S., only people who live south of a line drawn from Los Angeles to Columbia, S.C., get enough sunlight for vitamin D production throughout the year.
Dark skin absorbs less sunlight, so people with dark skin do not get as much vitamin D from sun exposure as do light-skinned people. This is a particular problem for African-Americans in the northern U.S.
Five to 30 minutes of sun exposure to the face, legs, or back — without sunscreen — at least twice a week should give you plenty of vitamin D.
But this much direct sun exposure might also expose you to potentially dangerous levels of cancer-causing UV radiation. And unless you live in the South or Southwest, you probably don’t get enough sunlight during the winter months.
It’s probably a better idea to get vitamin D from foods or from supplements.”

He’s Alive

Dr. Polansky prescribed 50,000 units a day for a week-then one of those high dose pills a week for the next three months. No wonder they said I couldn’t get that much on my own! I also got a couple of B12 shots.

I followed her instructions to the letter, and amazingly enough began to feel much better. I felt like Frankenstein rising up- “He’s alive…he’s alive.” I couldn’t change my eating habits. I am what I am-a fast food junkie. I do try to get out in the sun more and I continue to take over the counter supplements. I am feeling much better. I am back online. I still sleep more than I used to, but it’s a more reasonable amount of time.

Vitamin D deficiency is an occupational hazard we should all be aware of. We geeks are obsessive about our work and can’t bear to leave the keyboard for long. While we all take time to run virus scans and install updates to ensure our computer is at optimal performance levels, we often deny ourselves the same courtesy. Remember, you are a needed “peripheral.” Without its operator, your computer is useless. Here’s hoping you will learn from my “near death” experience. Don’t wait till your body sends you a big 404 error.

Question & Answer With Dr. Polansky

By: Meredith Polansky, MD.

Who is most likely to have a Vitamin D deficiency?

At this point, it seems like just about everyone has some degree of deficiency! But those at most risk are those who stay in doors all the time and those who use sun block all the time.

I take a multivitamin every day. Wouldn’t this take care of any potential Vitamin D deficiency?

No. We now realize that the daily recommended value is way too low. In the next few years the CDC will recommend 1000 IU per day in addition to fortifying frequently eaten foods with Vitamin D.

What about tanning beds? Would it be a good idea to use a tanning bed in the winter if I would like a more natural approach?

Tanning beds are NOT natural sunlight. They do not provide the right type of light for the body to manufacture Vitamin D.

How can I tell if I am getting enough Vitamin D? Doesn’t my doctor check for this in my yearly physical?

Many MDs are now starting to check levels annually during the patient’s physical. You can request the doctor check your Vitamin D levels at any time, however.

What about my children? How much Vitamin D should they have and how can I be sure they are getting it?

The same amount-1000IU daily. Talk to your doctor if you are concerned they are not getting adequate Vitamin D.

Any other advice?

Go play in the sun!

Fancy Directory Listing (Using htaccess)

Jacob Haug — Sun, 05 Dec 2010 15:53:46 +0000

Fancy Directory Listing (Using htaccess)

In this tutorial I cover the basics of htaccess, how to create a custom Apache directory listing using .htaccess. If you look at the default Apache directory listing you’ll see a plain, boring, dull, hard to read design. Our objective for the course of this tutorial is to spice up that design, and learn some htaccess in the process!

For those that would just like to see the finished results, you can see the before and afters here.

http://www.thewebsqueeze.com/samples/directory-listing/

The Rules

Before we get started I want to cover the SUPER basics of htaccess. This will help those who aren’t familiar with how Apache and htaccess work understand what we are doing as we go along. (These are generic rules, and may differ from server to server, depending on the configuration. Ask your server administrator if you receive any errors.)

All htaccess code should be placed in a text document named ‘.htaccess’.
htaccess works on a recursive basis. So any command you type will work for the current directory, and all sub-directories under that, unless otherwise specified.
You can have any number of htaccess files on your domain. The root of your domain can have a master htaccess file, and then you can override the master htaccess file within sub-directories off the root of the domain.
In htaccess, any line prefixed with a “#” symbol is considered to be a comment. You should comment your code so you can refer to that comment 3-4 months down the road when you are trying to figure out why you coded it in that way.
If ever in doubt you can read the Apache documentation. (http://httpd.apache.org/docs/2.2/) Or, you could ask the kind hearted folks at The Web Squeeze in our forum! (http://www.thewebsqueeze.com/forum/)

Let’s get started!

Here’s the default directory listing for Apache! Now, you might not see this by default, in fact you may see a Forbidden page, however, we’ll fix that with this next bit of code!

I always start my htaccess documents with what I call “General Rewrites”, those are the rewrites that I tend to duplicate throughout all my htaccess documents.

                                        # START :: General Rules
                                        RewriteEngine On
                                        RewriteBase /

In htaccess any line prefixed with a “#” symbol is considered to be a comment. So, for organizational purposes I have commented the start and end of sections. We are then turning on the RewriteEngine and setting the base for the engine, if it’s not already set.

                                        Options +Indexes

First, as you may already know htaccess has countless options to allow you to control how your domain works and loads without editing server configuration files. The “Options” directive controls which server features are available in a particular directory. You can view all the available options on Apache’s website.

http://httpd.apache.org/docs/2.0/mod/core.html#options

So, we’re saying find the “Indexes” option within the “Options” directive, and turn that on. By adding that “+” sign in-front of “Indexes” you are effectively turning on Apache’s directory index for not only that directory, but all sub-directories below that location.

This means that if a URL which points to a directory is requested, and there isn’t a DirectoryIndex (e.g. index.html) then mod_autoindex will return a formatted listing of the directory.

You could also turn off Apache directory listing by replacing the “+” with a “-”, effectively telling Apache, not to list the contents of that directory and all directories below that.

                                        Options +FollowSymLinks
                                        # END :: General Rules

FollowSymLinks tells Apache to follow symbolic links. Wikipedia defines a symbolic link as…

A symbolic link (also symlink or soft link) is a special type of file that contains a reference to another file or directory in the form of an absolute or relative path and that affects pathname resolution.

                                        # START :: Error Documents
                                        ErrorDocument 400 default
                                        ErrorDocument 401 default
                                        ErrorDocument 403 default
                                        ErrorDocument 404 default
                                        ErrorDocument 500 default
                                        # END :: Error Documents

Here, I’m setting all ErrorDocuments to the server default. You could replace ‘default’ with an absolute or relative path to the location of your error documents. You can read more about that here.

http://httpd.apache.org/docs/1.3/mod/core.html#errordocument

                                        # START :: URL Rewrites
                                        RewriteCond %{HTTP_HOST} !^clients.samples\.thewebsqueeze\.com$ [NC]
                                        RewriteRule ^(.*)$ http://clients.samples.thewebsqueeze.com/$1 [R=301,L]
                                        # END :: URL Rewrites

Here, I’m setting a rewrite condition. You can think of it like an “if” statement in PHP. If the URL doesn’t equal ‘clients.samples.thewebsqueeze.com’, with anything on the end, then do whatever the rewrite rule is. In this case, then, redirect them to ‘http://clients.samples.thewebsqueeze.com/’. You’ll want to either delete these lines, or change them to match the location of your fancy directory! You could also alter this to remove or add the ‘www’ for your domain. See below example.

                                        # START :: URL Rewrites
                                        RewriteCond %{HTTP_HOST} !^www\.thewebsqueeze\.com$ [NC]
                                        RewriteRule ^(.*)$ http://www.thewebsqueeze.com/$1 [R=301,L]
                                        # END :: URL Rewrites

Now, this last bit of code is a method of securing our directory’s htaccess file against attacks. Protecting your site’s htaccess file is critical to maintaining a secure environment.

                                        # START :: Strong .htaccess Protection
                                        
                                        order allow,deny
                                        deny from all
                                        
                                        # END :: Strong .htaccess Protection

You can read more about the above method at Perishable Press.

Now, let’s recap all the code thus far!

                                        # START :: General Rules
                                        RewriteEngine On
                                        RewriteBase /
                                        Options +Indexes
                                        Options +FollowSymLinks
                                        # END :: General Rules

# START :: Error Documents
                                        ErrorDocument 400 default
                                        ErrorDocument 401 default
                                        ErrorDocument 403 default
                                        ErrorDocument 404 default
                                        ErrorDocument 500 default
                                        # END :: Error Documents

# START :: URL Rewrites
                                        RewriteCond %{HTTP_HOST} !^clients.samples\.thewebsqueeze\.com$ [NC]
                                        RewriteRule ^(.*)$ http://clients.samples.thewebsqueeze.com/$1 [R=301,L]
                                        # END :: URL Rewrites

# START :: Strong .htaccess Protection
                                        
                                        order allow,deny
                                        deny from all
                                        
                                        # END :: Strong .htaccess Protection

So, now we’ve defined some basic rules, and your directory listing should look like mine!

Next, we’re going to get started customizing the htaccess listing! So, what are you waiting for? Let’s go!

Pretty Directory Listing (htaccess)

                                        # START :: Directory Customization

Here we are creating an if module which says, if the Apache Module ‘mod_autoindex.c’ is available and installed, then do whatever is inside. You would end that IfModule like so…

                                        
                                        # END :: Directory Customization

But, let’s not end it just yet. This is going to be the core of our directory listing. So, in-between the starting and ending ‘IfModule’, add the following.

                                        # Set Index Options
                                        IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* XHTML HTMLtable SuppressHTMLPreamble SuppressRules SuppressDescription SuppressLastModified SuppressSize IconHeight=16 IconWidth=16 IconsAreLinks

Here we’re setting our directory index options. That’s a lot to undertake, so I’ll go over it piece by piece.

                                        IndexOptions

The IndexOptions directive specifies how Apache handles the directory indexing. You can see all the ‘IndexOptions’ available to you by seeing the Apache documentation.

http://httpd.apache.org/docs/2.0/mod/mod_autoindex.html#indexoptions

                                        IndexOptions IgnoreCase FancyIndexing FoldersFirst

After ‘IndexOptions’ we are setting all the different options for that directory. We are choosing to ignore case for the directory listing. Next, we are applying ‘FancyIndexing’, and setting folders to display before files using the ‘FoldersFirst’ declaration.

                                        NameWidth=* DescriptionWidth=* XHTML HTMLtable

We continue by setting the width of the name and description to ‘*’ which essentially means that it will grow the column to the necessary width in bytes. This means that no line wrapping will happen for longer file/directory names. We then turn on ‘XHTML’, you can leave this out if you are coding an HTML document. After that, we apply an HTML table around the directory listing using ‘HTMLtable’. This allows us to style the table without messing up the columns.

                                        SuppressHTMLPreamble SuppressRules SuppressDescription SuppressLastModified SuppressSize IconHeight=16 IconWidth=16 IconsAreLinks

‘SuppressHTMLPreamble’ removes the starting , and tags allowing you to code that in your header and footer documents below. ‘SuppressRules’ removes the horizontal rule lines (

). We then remove the description (SuppressDescription), last modified date (SupressLastModified), and size columns (SuppressSize). After which, we set the ‘IconHeight’ and ‘IconWidth’ to 16px, and make the icons links. (IconsAreLinks) Continuing on….

                                        # Set Display Order
                                        IndexOrderDefault Ascending Name

Here we set the index order to ascending by the file/folder name. So this means it’s in alphabetical order!

                                        # Specify Header File
                                        HeaderName /i/header.shtml

# Specify Footer File
                                        ReadmeName /i/footer.shtml

This is one of the keys! Here we are setting the location of the header and footer documents. These documents contain the structure of the directory listing. We’re using .shtml so that we can do some server side scripting later on. (Make sure you change the location/name of those documents to where they will be stored on your server.)

                                        # Ignore These Files/Folders
                                        IndexIgnore header.shtml footer.shtml i images cgi-bin favicon.ico .htaccess .ftpquota .DS_Store icons *.log *,v *,t .??* *~ *#

Here we are telling Apache not to display any of the files or folders that follow ‘IndexIgnore’, this is great as it allows you to hide your images directory…etc.


# END :: Directory Customization

Finally, we end the ‘IfModule’. Quickly recapping the above code….

                                        # START :: Directory Customization
                                        
                                        # Set Index Options
                                        IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* XHTML HTMLtable SuppressHTMLPreamble SuppressRules SuppressDescription SuppressLastModified SuppressSize IconHeight=16 IconWidth=16 IconsAreLinks

# Set Display Order
                                        IndexOrderDefault Ascending Name

# Specify Header File
                                        HeaderName /i/header.shtml

# Specify Footer File
                                        ReadmeName /i/footer.shtml

# Ignore These Files/Folders
                                        IndexIgnore header.shtml footer.shtml i _htaccess-code clients.zip images cgi-bin favicon.ico .htaccess .ftpquota .DS_Store icons *.log *,v *,t .??* *~ *#


                                        # END :: Directory Customization

Now, we need to add the SHTML documents to the mix. You’ll notice I use some server side scripting, however, I won’t go into detail on that as it’s not the objective of this tutorial.

HEADER.SHTML

                                        < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                        
                                        
                                        
                                        TWS Clients :: Choose A Client

	
                                        America Online, LLC.

	
                                        Apple Inc.

	
                                        Cisco Systems, Inc.

	
                                        Dell, Inc.

	
                                        Electronic Arts, Inc.

	
                                        Google, Inc.

	
                                        IBM, Inc.

	
                                        Logitech, Inc.

	
                                        Microsoft, Inc.

	
                                        <!--#echo var="Request_URI" -->
                                        
                                        
                                        
                                        




                                        
                                        
                                        
                                        TWS Clients
                                        Location: 

	
                                        America Online, LLC.
                                        Location: 

	
                                        Apple Inc.
                                        Location: 

	
                                        Cisco Systems, Inc.
                                        Location: 

	
                                        Dell, Inc.
                                        Location: 

	
                                        Electronic Arts, Inc.
                                        Location: 

	
                                        Google, Inc.
                                        Location: 

	
                                        IBM, Inc.
                                        Location: 

	
                                        Logitech, Inc.
                                        Location: 

	
                                        Microsoft, Inc.
                                        Location: 

	
                                        
                                        Location:

FOOTER.SHTML

Icons By: FAMFAMFAM

STYLE.CSS

                                        html, body, div, span, applet, object, iframe,
                                        header, footer, nav, section, article, aside,
                                        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
                                        a, abbr, acronym, address, big, cite, code,
                                        del, dfn, font, img, ins, kbd, q, s, samp,
                                        small, strike, sub, sup, tt, var,
                                        dl, dt, dd, ol, ul, li,
                                        fieldset, form, label, legend,
                                        table, caption, tbody, tfoot, thead, tr, th, td {
                                        margin:0;
                                        padding:0;
                                        border:0;
                                        outline:0;
                                        font-weight:inherit;
                                        font-style:inherit;
                                        font-size:100%;
                                        font-family:inherit;
                                        vertical-align:baseline;
                                        }
                                        body {
                                        background:#469bfc;
                                        color:#333;
                                        font-family:Tahoma, Geneva, sans-serif;
                                        width:100%;
                                        float:left;
                                        padding:0 0 30px;
                                        }
                                        #wrap {
                                        width:360px;
                                        margin:30px auto 0;
                                        }
                                        #main {
                                        width:300px;
                                        float:left;
                                        padding:30px;
                                        background:#fafafa;
                                        border:6px solid #007ede;
                                        }
                                        h1 {
                                        font: 2.0em Georgia, serif;
                                        text-align:center;
                                        color:#78D316;
                                        }
                                        h3.location {
                                        font-size:13px;
                                        font-weight: bold;
                                        margin:12px 0 30px;
                                        text-align:center;
                                        color:#4D7EC7;
                                        }
                                        a:link, a:visited {
                                        text-decoration: none;
                                        color: #024591;
                                        }
                                        a:hover, a:active {
                                        text-decoration: underline;
                                        color: #006be6;
                                        }
                                        table {
                                        width:100%;
                                        padding:0;
                                        margin:0;
                                        border:0;
                                        }
                                        tr {
                                        width:100%;
                                        padding:0;
                                        margin:0;
                                        border:0;
                                        }
                                        tr:nth-child(even) {
                                        background:#def2ff;
                                        }
                                        th {
                                        display:none;
                                        }
                                        td {
                                        height:20px;
                                        padding:10px;
                                        margin:0;
                                        }
                                        td:nth-child(1){
                                        width:16px;
                                        }
                                        hr {
                                        display:none;
                                        }
                                        p {
                                        margin:20px 0 0;
                                        font-size:14px;
                                        text-align:center;
                                        }

Your directory listing should look like mine now!

But, what about the icons? Well, continue on to the next part!

Adding Custom Icons

Almost all of the icons used for directory symbols were downloaded from FAMFAMFAM. You can download the Silk Icon set below.

http://www.famfamfam.com/lab/icons/silk/

Once you’ve downloaded the icons, your ready to start! Find the following section of code.


# END :: Directory Customization

Above the end ‘’ add the following lines of code.

                                        # START :: DEFINE FILE & FOLDER ICONS
                                        # Default Icon
                                        DefaultIcon /i/images/icons/resultset_next.png

 # Folder/Directory Icon
                                        AddIcon /i/images/icons/folder.png ^^DIRECTORY^^

 # Up a directory
                                        AddIcon /i/images/icons/arrow_undo.png ..

Again, I heavily commented each line, thereby making it easier to update later. Basically, I’m defining a default icon for files, and a default icon for directories. After which we define the icon used to “Go Back”, or up a directory.

                                        # Directory Icons
                                        AddIcon /i/images/client-icons/aol.png AOL
                                        AddIcon /i/images/client-icons/apple.png Apple
                                        AddIcon /i/images/client-icons/cisco.png Cisco
                                        AddIcon /i/images/client-icons/dell.png Dell
                                        AddIcon /i/images/client-icons/ea.png EA
                                        AddIcon /i/images/client-icons/google.png Google
                                        AddIcon /i/images/client-icons/ibm.png IBM
                                        AddIcon /i/images/client-icons/logitech.png Logitech
                                        AddIcon /i/images/client-icons/microsoft.png Microsoft

Now I’m setting custom icons for my main directory listing. You set a custom icon in the following format….

                                        AddIcon /location/to/graphic.png FILE-NAME

So, you see how I assigned icons to certain folders, but what about file formats? You don’t want to have to assign an icon to every mp3 file using the above method. Here’s a method to assign an icon to file formats.

                                        # START :: DEFINE FILE FORMAT ICONS
                                        # PDF Documents
                                        AddIcon /i/images/icons/book_open.png .pdf

 # Word Documents
                                        AddIcon /i/images/icons/page_white_word.png .txt .doc .rtf .log .asc

 # Pictures
                                        AddIcon /i/images/icons/picture.png .jpg .jpeg .jpe .png .gif .mpg .ico .psd

 # Music
                                        AddIcon /i/images/icons/music.png .mp3 .wav .vox .wma .ra .ram .ogg .vqf .aac

 # Video/Movies
                                        AddIcon /i/images/icons/film.png .mov .avi .wmv .mpeg

 # HTML
                                        AddIcon /i/images/icons/html.png .html .htm .shtm .shtml

 # XHTML
                                        AddIcon /i/images/icons/xhtml.png .xhtml

 # CSS
                                        AddIcon /i/images/icons/css.png .css

 # PHP
                                        AddIcon /i/images/icons/script.png .php

 # ASP / JavaScript
                                        AddIcon /i/images/icons/script.png .asp .js .xml

 # Flash
                                        AddIcon /i/images/icons/page_white_actionscript.png .swf .fla .as

 # Compressed Documents
                                        AddIcon /i/images/icons/page_white_zip.png .zip .rar .gz .bz2

 # Disk Image
                                        AddIcon /i/images/icons/drive_web.png .iso .rpm

 # Torrent Files
                                        AddIcon /i/images/icons/application_lightning.png .torrent
                                        # END :: DEFINE FILE FORMAT ICONS

This basically works the same way.

                                        AddIcon /location/to/graphic.png .FILE-TYPE

Again, all the icons are from the Silk Icon set by FAMFAMFAM. You can download them and view them here.

http://www.famfamfam.com/lab/icons/silk/
http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png

You can also add file and folder descriptions using this format.

                                        # START :: File Type Descriptions
                                        AddDescription "Music/Sound File" .mp3
                                        AddDescription "GZIP compressed TAR archive" .tgz .tar.gz
                                        AddDescription "GZIP compressed archive" .Z .z .gz .zip
                                        ......etc.....
                                        # END :: File Type Descriptions

That adds a description for certain file types, with a span class around the description. You can also target certain directories or files.

                                        # START :: Folder Descriptions
                                        AddDescription "[Go Back..]" ..
                                        AddDescription "[American Online, LLC.]" AOL
                                        AddDescription "[Apple Inc.]" Apple
                                        AddDescription "[Cisco Systems, Inc.]" Cisco
                                        AddDescription "[Dell Inc.]" Dell
                                        AddDescription "[Electronic Arts, Inc.]" EA
                                        AddDescription "[Google, Inc.]" Google
                                        AddDescription "[IBM, Inc.]" IBM
                                        AddDescription "[Logitech, Inc.]" Logitech
                                        AddDescription "[Microsoft, Inc.]" Microsoft
                                        # END :: Folder Descriptions

You can also add a default description for other “unknown” file types/folders by using a wildcard.

                                        # Default Description
                                        AddDescription "" *

Apache Directory Listing Gallery

I didn’t have time to cover all of the possible options you can use when styling your custom Apache directory listing, however, I hope the samples I designed will help you!

http://samples.thewebsqueeze.com/directory-listing/

Clients Listing

BEFORE

AFTER

Media Listing

BEFORE

AFTER

Linux Mirror

You can view all the designs, and download the code here.

http://www.thewebsqueeze.com/samples/directory-listing/

If you have any questions, ask them below. Now, go out a design your own fancy directory listings and post them in the comments section below!

Making The Sale: Ice Cubes to Eskimos

Jacob Haug — Sun, 05 Dec 2010 15:47:22 +0000

Making The Sale: Ice Cubes to Eskimos

On this episode of The Web Squeeze podcast we tell you all the secrets about making the sale! Our special guest for this episode is John O’Nolan! We cover questions like, “How do you get business and keep it coming?”, and “How do you go from low-paying jobs to high-paying jobs”, as well as your user questions!

Download Now!

Show Notes

About The Hosts

John O’Nolan is a happy-go-lucky web designer and entrepreneur from West Sussex in the United Kingdom. He specialises in user interface design, CSS, and WordPress development. You can find his most recent work on his company website, and his regular ramblings about owning and running a web design business on his personal website. @JohnONolan

Starting Freelancing

Jacob Haug — Sun, 05 Dec 2010 15:44:18 +0000

This is the first podcast that I did for The Web Squeeze. We are planning on doing regular podcasts every other week, all on topics related to freelancing and running your freelance web design business. This podcast features the questions you asked about freelancing! We’d love to read your thoughts on it, and suggestions for future topics, or questions you may have that you want us to answer! So make sure to comment and let us know what you think!

Websites Mentioned

satellitedev.com – Japh’s Web Development Company.
john.onolan.org – Popular Freelance Blogger

Download Now

About The Hosts

Japh Thomson (Guest) – I’m a web developer. I’ve been developing websites for over 10 years, from learning HTML and CSS, through to programming web applications and CMSes in PHP and MySQL. I really enjoy learning new languages, techniques, and technologies. I also enjoy learning new spoken languages, traveling and experiencing different cultures. @japh

Are you a sucky website designer?

Jacob Haug — Sun, 05 Dec 2010 15:38:50 +0000

Recently, I visited a friend who volunteered to help me with some database issues. Database…nothing makes me feel like a mental midget quite like database design. But, my friend is a database Einstein. Bob is a highly paid professional consultant. When our session was over he asked me to return the favor by critiquing his new website. I was horrified by what I saw. And when he told me how much he paid for the site, I really saw red! I was embarrassed to be a member of a profession where someone could pass off crap like this and call it a professionally designed website. It’s just plain malpractice! Since we live in a world where anyone can throw up a site and call themselves a “Web Designer” let’s be honest with ourselves, folks! Are you a crack designer, or just a crackpot?

1. Is your website slow?

When I clicked on Bob’s site, I patted my foot and waited for it to load. And I waited and waited and waited. Remember, on a commercial site customers are not going to wait forever. I don’t care if you have loads of fun graphics and interesting pictures, if the customer gets bored waiting for your site to load-he’s gone! Optimize your graphics and images for being viewed on the web. You can lower the quality a bit, and the item will load faster and still look good. Use Yslow (Yslow: Going From F To A) to tell you what’s wrong with your site and how to improve it.

2. Are you designing images that contain your client’s text?

This was particularly problematic with Bob’s site. His whole content area was an image. The text was inside the image. I suppose the designer did this so he could have the exact pretty font that he wanted. But, this is a big mistake so far as accessibility goes for both search engines and screen readers. They can’t read the images and there was no alternate text. Bob is starting a bed and breakfast business. Good search engine rankings are a high priority for him, as for most businesses. What you have to remember is that search engines primarily pull from text. They can glean some data from flash, JavaScript, and alt attributes on images; but those are secondary to the page’s text. It you don’t have good content and keywords, then you are not going to rank well in a search engine.

Here’s what Google had indexed for Bob’s site.

Louisa’s Porch-Welcome
1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7 …
www.bobswebsite.com/ – 6k – Cached – Similar pages

The reason why it is indexed like this, is because the only thing Google can pick up is the flash slide show.

3. Do you have bad design practices?

Tables are for tabular data. They are for rows and columns of information. Period. You don’t use tables for layout. Tables as a design element went out of vogue years ago. It may be easy to design with them, but doing so marks you as being an inexperienced designer and a loser. Tables use more bytes of markup and take longer to download. What you are trying to do is separate your presentation from your structure. Your structure is your content…your heading and the paragraphs of content. Your presentation or style is elsewhere in a CSS document. Separating the two will make your website faster, easier to update, and will improve your search engine rankings. Get rid of tables for layout. (Why Tables Are Stupid, Benefits To Hand Coding Your Website)

If you are using a CSS layout with divs, then there should be no need for spacer gifs. This is an obsolete practice. Use padding and margins in your CSS document. I laugh at spacer gifs. They are old school and mark you as a sucky designer.

4. Do you have music playing by default in the background?

I hate music on websites. I hate it when I am secretly surfing the web at church and suddenly some vulgar rap music blasts out, causing little ‘ole ladies to blush and my pastor to banish me to the parking lot. Now, sometimes clients insist on music. I have designed sites myself that included music, but I was held at gunpoint and they threatened to shoot my dog! Unless your site is for an artist or a music store-skip the music! Consider your target market. If you expect a cross section of visitors, then you have to realize they will all have different tastes in music. What pleases one will annoy another. And you don’t want to annoy your potential market. Also, music slows down your site-another big drawback in today’s world of instant gratification. Good quality music is either expensive, or hard to come by. You can’t just post up your favorite Beetles song. There are copyright issues to be considered. Avoid messing around with music. It’s just not worth it.

5. Do you have a horizontal scroll bar?

How annoying! Don’t use a horizontal cheat bar. Lay out your page so that your users don’t have to scroll up and down, and sideways, too.

6. Do you have popups and blinking banners on your website?

Blinking ads are irritating! I’d rather stick a fork in my eye than try to read something with a flashing ad above it. If you want users to stay on your site longer and want return traffic, do away with the flashy obnoxious banners, pop ups and animations. If you need to draw attention to a line, try changing the font size. You can also emphasize the old-fashioned way with bold or italics. Sometimes less really is more.

7. Do you have a doctype?

In the first line of your (X)HTML code, you specify a doctype. It tells your visitor’s browser how to parse the page. It defines which version of (X)HTML your document is using. Doctype tells browsers how you are going to code. You don’t want browsers to have to guess whether you are using HTML or XHTML or what version of those languages you may be using. If you don’t specify, then your browser will kick into quirks mode-which basically means it will guess. And it will guess wrong. Chances are your pages won’t display consistently in different browsers. You don’t want this to happen. (Choosing The Best Doctype For Your Website)

8. Do you have content faux-pas?

My sister sent out a dozen resumes looking for a CNA job. What she didn’t notice was that her helpful word processor corrected her spelling. All her resumes listed her as looking for a job as a CAN. Not too many openings for “CANs” these days. (And yes, she is a blonde!) If you write content be sure to look for errors. I find it helpful to let it sit overnight, and look at it critically with fresh eyes the next morning. Another trick is to start with the last line and read the text backwards. You’d be surprised how many errors you can find with that technique.

Even if a client provides their own content, you should still proofread it for spelling and grammar. Publishing content with spelling or other errors makes you look bad. And on that note, if the content is bad, it makes you look bad no matter who wrote it. One time I was doing a website for some sort of pyramid sales company. The guy’s content was crap, so I took the liberty of brushing it up, thinking he would be grateful. He wasn’t. When the site was published he changed it back to his original wording. I was so embarrassed by it that I never took credit for the site.

If you write the content, proofreading is even more important. Nothing is more embarrassing than making a big mistake and having a user report it to your client. So be sure to have you client look at there content to be sure their is no mistakes. Remember-spell check is your friend, and your worst enemy!

9. Do you ask for client input?

Back to my friend Bob. He talked to his designer and got a price quote, and the next thing he knew a finished site appeared. He admitted to me that he was not really happy with it-but since it was done already he kind of felt obligated. He felt like he was at fault for not being more specific. Most clients are not that nice. They are going to turn purple and scream if you pull that crap. Be sure you include the client in on your planning. Many designers will do a mock-up in photoshop to give the clients some ideas. Client interaction is the key to a successful end product. (The Reality Of Client Interaction) And remember ActiveCollab was a great way to facilitate client input. (ActiveCollab Review)

10. Do you have a contract?

I told my friend Bob that his website needed some work. I made several suggestions for necessary changes and asked if his designer could make these changes. He didn’t have a clue! You need a contract to protect both you as the designer, and also set out for the client exactly when your duty ends and what correction or changes will cost. (Get A Good Contract Section, The Reality Of Client Interaction) If you don’t have a contract-then you are an amateur.

What’s your score?

So how do you rate? There are some true crackpot designers out there-designers who take advantage of people who are not web savvy. They give us all a bad name. Let’s do our best to show them the error of their ways and help them become true professionals.

Disclaimer: All names have been changed to protect the innocent (and the guilty). So, if you see the afore-referenced designer, tell him he owes Bob a redesign. And if you see Bob….shhhhhhhh!

Friends Don’t Let Friends Buy PCs

Jacob Haug — Sun, 05 Dec 2010 15:26:36 +0000

Why I Told My Sister to Buy a Mac

In my circle of friends, I am well-known as a computer geek. As a geek, people are drawn to me with all their mundane computer questions. I get calls all the time from people asking me how to speed up their system or what to do when their hard drive crashes. I tell them I am really a web designer and not a computer technician. I even have a T-shirt that says, “NO, I will NOT fix your computer!” But, I still have six computers in my office now, each in various stages of disrepair. Not long ago my sister called to get my help with a new computer purchase. Having recently bought a MacBook Pro, I tried to get her to convert as well. Here are a few reasons why I think Mac is a great choice for the average user, and an even better choice for the design professional.

First of all, and very important to my non-geek sister, Macs come pretty much loaded out with what you need. There are less decisions to be made about RAM and ROM and those other troubling issues that confound a PC user. Sis pretty much just plays games on her system. She wanted a computer that would run her games faster than her old PC. Right there is one problem with PCs. A computer novice tends to think if it is “new” that it will be faster. That is not necessarily true. On Black Friday my sister got up at 3:00am and raced to Best Buy to grab their advertised package. For $399.00 she would have a “new” system. It was a real let down when I pointed out to her that the new system was not really that much more powerful than her old system. Yes, it had 2 gigs of RAM and a 320 GB hard drive. But the processor speed was way low and the graphics card was totally inadequate to run the games she wanted to buy. With a Mac, there aren’t any tricks like this. The stats are clearly listed on a Mac and they come with a minimum level of sufficiency. If I send her to buy a MacBook, the lowest processor she could get would be a 2.0 GHz Intel Core 2 Duo. That would be quite sufficient for her needs. And the fact is, because the Mac OS is specifically built to handle the hardware that is installed, it is much more efficient and faster. Apple doesn’t license out its OS to various manufacturers. For example, Microsoft sells their OS to pretty much any computer company who wants to throw one together. That computer manufacturer will, in turn, purchase hardware from whatever source and software from another source and put the machine together. That means that the various hardware components will work together, but are not designed to work together efficiently. With a Mac, all the hardware components are engineered to work with the Mac OS. You get a system built by the same people who make the OS, the applications, and the computer itself. This means that everything works together flawlessly and efficiently. Whatever you can do with your 512 MEG graphics card and 4 gigs of RAM, I can do with half the hardware in half the time on my Mac. This is just plain amazing! So, I can trust my innocent sister to Apple and know that she will walk away with a usable system.

Another important thing to an innocent user, is the virus factor. I get lots of calls from people with all sorts of strange things happening to their system. The screen is shaking, or they are locked out of their files, or they’ve got a BSOD. I begged my sister to buy a Mac, because your chances of getting a virus are so much less. There are over 100,000 harmful viruses lurking out in cyberspace. Most of these are designed to infect PCs. Macs are immune to most of them, in large part due to its UNIX based OS. It is much more stable. In order for any software to mess with your system, you have to type in your password. Vista has tried to copy this innate security, but has failed miserably. Again, I have received countless calls from people with compatibility issues after upgrading to Vista. I have pulled my hair out trying to figure out why Vista has suddenly locked my clients out of their files or won’t let them use their routers. It’s like Vista has a mind of its own–and has LOST it! But when I upgraded my Mac to Leopard it was flawless. Again, Apple knew what hardware components were in my system and it just worked. I want my sister to have a system that “just works” because that means I can spend my time doing what I want to do, and not feel obligated to run over to her place to format and restore her system.

And that’s another issue with a PC. Every year or so it is recommended that you format a Windows computer. You can delay this by defragging every so often…but eventually it will get so bogged down that you just have to clean house. Now a lot of novices would just figure they have a virus or something, and go out and buy a new system at this point. You’ve got to wonder if this is really some diabolical Microsoft marketing plan. To avoid buying a new system, many users will haul their system into the shop where the techs there advise a format and restore. It’s truly sad. Bad things happen when I format. It seems I always neglect to back up some little file somewhere and end up losing something that was “irreplaceable.” With a Mac, it defrags “on the go.” You avoid all the hassle associated with defragging or formatting.

The other thing my sister was worried about, was being able to use the software that she already has. By software, Sis means games. She wouldn’t know a word processor if it jumped out and bit her on the …well you get the picture. But she can rest easy knowing that she can, in fact, play all her favorite games. And she has several choices about how she does that. If she wants to use a Windows game and wants all of her system resources dedicated towards that game, she can install “Boot Camp.” This program was created by Apple, and it’s FREE. Basically, it creates another partition on your hard drive, on which Windows is installed. With this program you can shut down your Mac, and select “Windows” as you boot back up. Your Mac comes up and acts just like it’s a PC. It may even run slightly better than most PCs. Then, you can use whatever games or applications that you ran on your old PC.

If you don’t want to have to restart your computer to run Windows, there are a couple of good third-party applications that let you work in both OSs. You have probably heard of “Parallels.” This program creates a file that runs the Windows OS, right along with the Mac OS. The two run simultaneously. You can flip from one OS to the other like a book. You can copy and paste back and forth between programs running concurrently in the two different OS’s. Your other option, and my personal favorite, is called VMware Fusion. This is another third-party application that is just incredible. It allows you to run your windows programs directly from your Mac dock. You just run through the dock and select that option. Then the program springs up and you can easily run the software you need straight from your dock. No muss, no fuss! However, the caveat to this is that when you run in the Windows pasture, you are going to step in the same dung that all PCs get mired in. You are going to be susceptible to viruses and that horrible NTFS is going to slow you down. Your system may begin to get spyware and malware and crash, just like a PC. That means you may have to defrag and format and all that crap that we thought we were going to avoid with a Mac. These problems won’t affect your Mac side, but they will sure get to your Windows files. In light of this, you want to try to get away from Windows and all the horror that comes with it. You can run a program called “CrossOver” for Mac. This program is truly the brightest thing out there. CrossOver emulates Windows in that it takes any windows application, and magically turns that ap into an executable Mac program. You don’t have to infect your Mac with Windows. Using CrossOver you can stay away from Windows completely.

Another great thing for my sister, is that Mac really has superb support. If, heaven forbid, I don’t answer my cell phone; she can call Apple. If she gets the AppleCare Protection Plan, she could call Apple with all her questions and problems for the next three years. I could have a life again! She would get world class support, based right here in the USA . If my sister bought a Mac, it would be a win-win situation for the both of us.

These are just a few of the reasons why I recommend a Mac to my friends and family. But there are even more reasons to recommend a Mac to a Web designer. First of all, I find that Mac is much faster than my PC. I’ve got to have a system that flies along as fast as my hyperactive mind. I hate waiting, and I find that my Mac glides along at breakneck speed. Again, that’s because components are all engineered by Apple to work together.

Another thing I noticed is that my Mac is able to run several different applications and not get bogged down. I can have Flash up and running, and also have Photoshop and Fireworks there ready to go. To illustrate this, I can tell you that my PC has a 512 graphics card, 4 gigs of RAM, and a 4 GHz processor. With my PC, I could run Flash, Firefox, and Illustrator together at the same time. But if I needed to open up Photoshop or any other program, I would have to shut down an application to make room. These programs are all pretty big resource hogs and they maxed out my PC quite fast. But with my Mac, I routinely have 19 or 20 different programs up and running. I like to keep my mail program and IM open, as well as Safari, Flash, Firefox, Illustrator, Quicktime, Transmit, Coda , SK Edit, BB Edit, Fireworks, Photoshop, and usually iTunes . Of course, I have to have a browser with Webforumz open, too! You may not believe me, but I can run all those programs simultaneously, no sweat, on my Mac. When I switched to Mac it was like entering a time warp and being transported to the future. And, I am loving every minute of it.

Macs come with Apache installed. All you have to do is turn it on. Once activated, this allows you to test your code locally without having to upload it to a web server. This saves a lot of time. You can test your HTML and PHP/MySQL locally without having to download it and make edits, then upload it to test it, then repeating the process over and over and over. You can use Apache in combination with a program called “Transmit.” Transmit allows you to to synchronize your local files with your remote server. This means that you will always have the latest version of your code on your server, as well as in your local files.

As mentioned, Transmit is a great program. Mac has several of those great “can’t live without” programs for designer geeks. Another is Coda. Coda has great color syntaxing. This helps me a lot as I am slightly dyslexic and sometimes have trouble seeing coding problems. Coda lets me keep track of all my websites, and makes accessing them for edits a breeze. It also lets me view my sites in different browsers. When you get a Mac, deciding what programs you need can be a little daunting. I’m going to link to my favorite ones so you can study up on this yourself.

I hope that you will give more thought to a Mac. It has been a great choice for me. For some reason I wasn’t able to sell my sister. She came home on Black Friday with another PC. Gee, I wish she was a paying customer! I foresee many visits to her place in my future. But you geeks who are more savvy than she, may want to take the plunge. Once you go Mac, you’ll never look back!

Links: