What Makes a Website Look Dated?

While browsing around the web this morning, I came across an interesting article that I would pass on to my readers. The article was written by James George and posted on the Design Festival website.

Having an outdated style for your website can leave a negative impression with your visitors, reduce your overall traffic, and lower the interest and credibility of your site. Retro or vintage designs are great, but retro/​vintage and outdated are two entirely different concepts, and no visitor will interpret an outdated site as a purposeful throwback to an earlier time.

He calls our attention to the following "pitfalls."

  1. Having Anything that is Flashing or Blinking – The flashing and blink icons and banners still turn up on occasion especially on hobby sites. To my way of thinking, there is nothing more annoying that flashing and blinking items on a page. This is especially true if you are trying to sell something to your viewer.
  2. Generic Colors -  for hyperlink states. I’m not sure I totally agree with this as sometimes the generic colors work well with a site. However, I do use CSS to style hyperlinks on my site with colors that match the rest of the site.
  3. Generic Typefaces -  Google Web Fonts makes it easy to integrate custom typefaces as part of your website. You don’t have to stick with Arial, Helvetica, Verdana and the other “web safe” typefaces. You might also consider the CSS3 @font-face Rule. The @font-face rule is only supported by newer browsers.
  4. Using Tables for Your Design – Tables are meant to be used to present data NOT for site layout. You can and should construct all of your layout ideas using CSS. Add dimension to your websites by using the text shadow and box shadow CSS properties. Remember though, these properties are only supported by newer, modern browsers
  5. Using Images Where You Could Use CSS – One of the most common uses of images was the ability to use "fancy fonts" for typography since not everyone might have the font you chose to use on their computer. With Google Web Fonts and @fontface integration, you can find almost any style of typeface that will match what you are looking for.
  6. Not Taking Advantage of CSS at All  – Using CSS will make your site much faster to load and much easier to update and maintain.
  7. Not Using Transparency in Logos & Images That Require It – Is yours a site that uses a certain background color with a logo image pasted against it? Looks kind of haphazard. Create your images with a transparent background and it will look so much more professional.

It’s important that you the web designer stay up-to-date on the latest practices so that YOUR website doesn’t look dated. Ask yourself if YOUR website has any of the qualities mentioned above. If so, you might want to consider redesigning it or at least updating it.

You can read What Makes a Website Look Dated? by visiting the Design Festival site.

The Definitive Guide to (Mostly) Free Images

My husband is always telling me “There is NO free lunch” when an offer seems to good to be true. Everything comes with a price. A recent article from SitePoint discusses free or mostly free images available on the Internet.

Even services like Gmail and Facebook come with a price—namely, your privacy. (Free with a string attached would be more accurate.) It’s the same with “free” images from sites like Flickr and and Stock.XCHNG.

The article goes on to discuss what you need to know about free and mostly free images on the web and using those images on YOUR site.

  • Creative Commons: A Non-Traditional Copyright Model
  • Which is Best: Creative Commons or Royalty Free/Right Managed?
  • Public Domain Images

I would urge anyone who is in the habit of right clicking and saving the image and then using it on YOUR website or the site of someone you may be helping to read The Definitive Guide to (Mostly) Free Images by John Tabita.

Equal Height Columns Without Using Images

If you would like to learn how you can create the equal height columns look without having to use images, the folks at Project VII have posted a tutorial PVII Equal Height CSS Columns. The tutorial includes the step-by-step instructions as well as the required javascript file to “make it happen.”

Instead of using background images, CSS hacks, or CSS that is not yet supported by all browsers, PVII Equal Height Columns uses modern DOM Script to work its magic.

The folks at Project VII have been making Dreamweaver extensions (plug-ins) since 1998. Unfortunately the company does not develop extensions for Expression Web.

If you like the idea of equal height columns without having to create the images needed, head over to the Project VII website and download all of the asset files needed for PVII Equal Height CSS Columns. The files are free and the tutorial does NOT require Dreamweaver. You can follow it and use it with an web editor as long as you have a basic understanding of writing HTML and CSS.

Thanks to Al Sparber and Gerry Jacobsen for providing the tutorial.

Five Things Not to Forget on a New Site!

I discovered a new blog today – Dazzlin Donna. One of her posts, Don’t Forget These Five Things on a New SIte, reminded me of a couple of things I sometimes forget. What about you, does your site contain the following?

Robots.txt file

A robots.txt file will tell the search engines to index every page or your site or not allow certain pages. If you want all pages of your site indexed, the robots.txt file should look like this:

User-Agent: *
Disallow:

If you do NOT have a robots.txt file, the default behavior is to index everything. If you want to disallow certain directories, then you need to specify them in your robots.txt file.  In that case, your file might look something like this:

User-agent: *
Disallow: /cgi-bin/
Disallow: /folder-name/
Disallow: /folder-name/

You can write your own robots.txt file or use  can generate a custom robots.txt file with a tool like http://tools.seobook.com/robots-txt/generator/

You can read more  about what a robots.txt file is all about, by visiting http://www.robotstxt.org/robotstxt.html.

XML sitemap

An XML sitemap is not required on your site but is a good way to let the search engines know about pages on your sites that are available for crawling.

Google introduced Google Sitemaps so web developers can publish lists of links from across their sites. The basic premise is that some sites have a large number of dynamic pages that are only available through the use of forms and user entries. The Sitemap files can then be used to indicate to a web crawler how such pages can be found. Google, Bing, Yahoo and Ask now jointly support the Sitemaps protocol. ~ Wikipedia ~

To read more about sitemaps, visit http://www.sitemaps.org/. If you have a WordPress blog, then download this plugin, and that job will be a little easier.

Custom 404 page

What does a visitor to your site see if they try and visit a page that no longer exists?  A generic 404 – Not Found page? Or have you provided them with a custom 404 page that allows them to continue to navigate your site? You can find a tutorial on Custom Error Pages – Customizing BlueHost Error Pages on our sister site, Expression Web Tutorials & Templates and one on How to create custom Error Pages on Genealogy Web Creations.

Do your visitors a favor and create your own Custom 404 page.

Favicon

What is a Favicon? It’s that tiny little graphic that shows when you bookmark a site like the EW on this blog. A favicon (short for favorites icon) is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.  Use any square image file and run it through a favicon generator like the one provided by Dynamic Drive. Upload the file to the root directory of your site and insert the code given below in the head section of your page.

The code to inset the favicon looks like this <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico>

Analytics code

And last but not lease, don’t forget to add your analytics or stats code to your new site. Whether you use Google Analytics or a different one, find the instructions and the code to use and add it to your pages.

You can read Dazzlin Donna’s full post Five Things Not to Forget on a New Site! Thanks Donna for a great reminder.