How can I make my site look good on all computers?

When you are building your site, it is important to remember a few things about your visitors. Your visitors will not be viewing your site on the same internet speed or browser size/type as you. This means that your site will load different on different computers. Here are some tips and tricks for making sure your visitors have a great experience when they view your site.

Make Sure your Site Loads Fast

How quickly your website loads depends on a couple factors; how large the files are on the site and the connection speed of the computer viewing the site. Connection speed is determined by the viewing computer's Internet Service Provider (DSL, Dial Up, FIOS, are all examples of connection speeds).

The first step is to make sure your images and other media files are compressed. The higher the compression, the smaller the file size, and this will make them load faster.

Note, the visual size and the file size are not directly related. Meaning, if you make a picture visually smaller on the page, the original file size will stay the same, and still load slow.

There are many tools out there for compressing audio, video and images, and ultimately it is up to you to find the tool you are most comfortable with. Since images are most frequently used,  here is some information on best practices for using images on your site.

Best Practices for Images

You should edit your images before you upload them. If you don't have photoshop, I recommend downloading which is a free tool that has a lot of the basic functionality of photoshop. Open the image in your editor and resize the image. I usually select a width of 300px or less for anything that does not require extensive detail. The standard screen resolution for visitors is between 800x600 and 1024x768. There are higher screen resolutions, but most of your visitors will be viewing the site in those two resolultions. To avoid having an image take over the screen, setting it to 300px or less gives you at least another 300px for the template and text. Then, save the image as a jpg, or gif; stay away from bmp or bitmap at all cost, that is the largest file size. Make sure you use a simple file name with no special characters. While this wont make it load faster, it will avoid potential errors caused by special characters in the file names down the road.

Keep your Home Page SIMPLE

Your home page should be simple and engaging, like the cover of a book. Avoid media files like background music or page effects on the home page. Here is an example of a simple, eye-catching, home page -

Browser Compatibility - Making your Site Look Good on All Computers

There are a few things you'll want to consider when you're making a site that will look good on all computers.

  1. Avoid using the spacebar to align text/content. The template and text are meant to stretch and shrink to fit the screen, but when you put "hard" content like large images and spaces to align content, this will stretch the template unnaturally on smaller screens.
  2. Use multiple content boxes. This will help down the road when you need to edit specific content.
  3. Use the split content box option for the multi column effect (for the smaller images on your home page for example)

You could use a website called browsershots to see how your site might look on different computers/browsers/etc. I find it pretty useful. You don't need to check ALL those browsers, just Firefox and IE to start.

Have more questions? Submit a request


Article is closed for comments.