OK, the internet, as we know it, has been around for two decades now. Yet, as anyone that does any web research knows, there are still a lot of old nasty looking web sites out there that still have the appearance of those initial web sites that were created in the mid-1990s. Yikes.  Nothing says "I have not kept up with my website, nor I have moved along with the times" than these old primordial sites.

As a web designer/developer I cringe when I find these fossils. They hark back to when people had dial up connections (I can hear the old 24K modem donkey-screech as I think about it). The monitors were tiny little things, where if the words filled the page, that was OK. Web sites were not "designed" in those days - some geeky programmer would create them. They consisted of nothing but words, save the odd poorly placed photo. There was no styling, no consideration for fonts, SEO, or eye-pleasing graphics.

Following is a list of ways to make your site (or keep your site) looking old and dated:


#1  Have everything over to the left or spread across the entire screen.

In the old days, no one knew about putting your content into a container and using CSS to center that <div> like margin: 0 auto; The big problem with this left placed content, or content that takes up the whole page, is for people with wide monitors. Besides looking stupid, it makes it hard to read. Oh byt the way, Yahoo News decided to go back to this format just recently.  I have since removed the bookmark that I had for Yahoo News.

Another place that Yahoo drops the ball is Yahoo Mail. The message is spread across 80% of the monitor screen.  A lot of sites have this, where they spread the content across the whole screen, including gmail, wikipedia, etc.  Talk about hard to read!!! Yes you can resize the browser window - but your visitor shouldn't have to do this. It's like having a guest over for dinner and making them wash the dishes.

For easier reading, keep the maximum width of a block of text to around 600 pixels. 


#2  No Graphics, standard serif font, no styling whatsoever

Simple sites are fine. Not everything needs to make you say "Wow!", but c'mon throw in some styling for a nice clean readable font, place your content in a container that has a slightly different color that your body background color to set it apart. Scale down those heading tags a bit.  The default sizes that browsers use for <h1> through <h4> are ridiculously huge. Graphic designers were always taught that serif fonts were better for body text because the little serifs made it easier for the eye to follow. This was before the invention of pixels, which totally screw up serifs. You should use sans-serif fonts for body copy as far as I am concerned. Serif is OK for headlines - or if you have some retro site or something.


#3  Little tiny photos

I belonged to a Meet Up group for Web Entrepreneurs. The leader of the group was promoting people to create their own web sites. He would scoff at me when I said that I was taking classes to be a web designer. Well, one evening, we had a critique session where we brought up each person's web site and the group would review the layout, the message, the overall impact, etc. The leader had a medical group web site that was dismal. It was full of little tiny photos. You could barely discern the image of the photo. He had been told to keep the size down on his images so the page loaded more quickly.

Hello, Broadband!!! We can use larger photos these days, that is if they are optimized properly.  If you can't see the photo - then you are loosing its impact.  Just don't use it, and certainly don't use a bunch of little photos, use one single large photo.


#4  Dancing Javascript images or jumping .gif files.

In the early stages of internet development, the programmers discovered that they could use javascript or .gif images that danced around the screen, or did little rotations or turned on and off. It got peoples attention, great.  What fun.

Don't use them. They are distracting, dated, cheap looking and just plain wrong. It is extremely hard to read the content if your eyes are being distracted by some little flashing icon. I think that a nice javascript slideshow is OK, as long as the changes are slow and gradual. Not sliding across the screen at a rapid speed.


#5  Fuzzy graphics for headings 

Before CSS3 and the advent of @fontface, web designers would use graphics for their headings. There create the headings in Photoshop of Illustrator then upload them into the page with an ><img> tag. What they don't realize is that that heading that looks so crisp and pretty in Photoshop or Illustrator, gets messed up by the browser. The computer and the browser will only interpret images, .jpg, .png or .gif, to a certain resolution when it comes through as a web page. It is getting better with high def tablets, but that is only a share of the market. People still use monitors to surf the net. These graphic image headings are fuzzy or pixelated. The other problem with using graphics for headings is that it is bad for SEO.  SEO wants TEXT in those <h1> and <h2> tags so it knows what is on the web page. The alt="" does not carry the same SEO weight as <h1> or <h2>.

If you load a custom font in with your CSS and use that, you can do some pretty cool things with fonts, and they come across nice and crisp. You can now even use cool things like text-shadow (depending on the browser) and add some pop. Mr. SEO will love you for it.


#6  Really S-L-O-W loading photographs 

You have seen it, someone that didn't know what they were doing, uploaded a huge file for the photo but forced the width and height of the <img> to fit on the page. The image slowly paints itself down the screen as the web page loads, and likely holds up other content in the process. This is a page loading speed nightmare! 

Teach your people to optimize the image before they put it in the web page.  It won't look any better because it's a large file.  It will just look dopey and make your web site look like it came from 1998. Crop your images to the correct size before uploading them to the site - or install some PHP program to change the dimensions of the image before your web page loads it up.

This is especially important for mobile devices - they are almost back to dial-up speed with their page loads.


#7  Super narrow web pages

Back when monitors had 760 pixel wide screens, web pages were designed to fit into this width. I was even taught to use this width for the container only two years ago. If your visitor has a wide monitor - go ahead and take advantage of that fact. Even those cheapy 15" flat-screen monitors that the cheap boss for everyone in the office, or smaller laptops, still have 1024 pixels to offer.

Use Responsive Web Design and set a wider width for the containing <div> for monitors. You can use those more narrow widths for the tablets if you want.


#8  No favicon

Everone has a favicon these days - that little image that shows up in the browser tab or on a bookmark for your web page. A web page looks naked without one.


#9 Having an old Copyright date at the bottom

You have seen this where no one has touched the website in years or overlooked this part. There is a Copyright date of 2004 or something or a range of dates that have long since gone. It is a simple step to update the Copyright to a new year. You can even have some PHP code that does it for you.