Select A State

Tips, Tricks & Miscellaneous Information

1. Naming your pages: make all of the letters lower case and use NO spaces between words. For example - gettingstarted.html or "camel case" - gettingStarted.html

2. Do NOT copy any text from "Word", etc. directly into your web. Paste the text into notepad to remove all formatting. If you copy directly into your web, you may get lots of formatting code you don't need.

3. Make use of the Heading Tags. Most template have 6 heading tags and quite a few classes that you can use to give interest to your website. Check our "Styling Text" page for samples of things used in this template.

4. Meta Tags: To help get your site listed in search engines and directories, add descriptions to each page. Google is not looking at keywords any longer, so make sure your description of the page and the content of the page match.

5. Photo / Image Tips:

If you don't have an image program to edit your images, try this free one: You upload your image and resize/crop it and then download the finished product. It's easy.

I like Paint Shop Pro for image editing. It's easier and cheaper than Photoshop.

FastStone Viewer for Editing Photos, it's free

6. While we're on the subject of images...

Make sure you take off width and height of your images in code view for images over 250px wide. When the page is shrinking for smaller viewports, if the size is still on the image, it won't shrink correctly.

Make sure you use this is your css coding:   img {border: none; max-width: 100%; box-sizing: border-box;} (there is no "dot" in front of the img code.)

7. Get a Free copy of Expression Web 4

Microsoft has discontinued Expression Web 4 and is offering it FREE! Go to this download page to get your copy. Although it has been discontinued, Expression is a great web editing program. You'll be able to use it for years!

You can also use these:
Online HTML - HTML editing is handy.
Beautify your code:

8. New SEO rules: the first three items in the head MUST be in this order:
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>text goes here</title>

9. Mobile-Friendly, Responsive Website: What is it and does it matter?

What is it? Mobile-Friendly or Responsive Websites are those that "respond" to different size viewports. In other words, they shrink or grow to fit the size of the window that the viewer is using. Larger viewports, like Desktops, the site layout expands. Smaller viewports, like cellphones, the site collapses. Navigation of the site is also affected by the viewport size. You can't have a 6 inch line of links across the top show up in a 2.5 inch screen without scrolling right or left, unless the site is coded for the line of links to do something different. That "different" usually is the code drops down into separate lines of links.

Does It Matter? If the majority of your viewers are coming into your site from Desktop Computers, then the short answer is, "No, it doesn't matter." If, however, people are using other devices (laptops, cell phones, iPads, tablets, etc.), then it does matter. People expect to see mobile-optimized sites on their devices. If your site is not mobile-friendly, what happens? It depends (don't you love that answer!). Some designs will shrink better than others. Table-based designs, however; are the worst. They don't shrink well. Google penalizes you for not having mobile-friendly, mobile-compliant websites. So to answer the question, "Does it matter?" you have to make that decision yourself.

Can you just add a few lines of code to make it mobile-friendly? NOPE. You will have to style each separate element in your "Media Queries" portion of your css.

Is it easy? It's not too difficult, but it is very time-consuming and some sites that are older may not be worth the time you have to place into them to have them be responsive.

Below is some of the coding I used for making this site mobile-friendly inthe small cell phone view:

/* ====================== */br>/* ===== SMALL DEVICE 01 ===== */
/* ====================== */
@media screen and (max-width: 320px) {
.wrapper {width: 90%;margin: 0 auto;}
.headerBox3a {display: none; visibility: hidden;}
.headerBox3b {float: none; width: 100%; }
.headerBox3c {float: none; width: 100%; padding-bottom: 20px; margin-top: -20px;}
.mapbox {display: none; visibility: hidden;}
/* === content box coding ==== */
.contentBox3a, .contentBox3b, .contentBox3c,
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 0 1% 20px 1%; padding: 0; float: none;}
/* === miscellaneous coding ==== */
h1 {font-size: 1.9em; margin-top: 0;}
h2 {font-size: 1.5em;}

How can I tell what my site looks like on different devices?

I like checking my sites here:   All you have to do is paste the url (address) of your site into the form and click on "GO!" It will show you what your site looks like in 4 different viewports.

10.  Fonts

Use fonts at least 11 or 12 pts. Such as Arial. Do not use 'Fancy' fonts, they detract from the data. Colored fonts on weird background colors are very hard on the eyes. FYI: Try looking at Red Text on a Black Background sometime. Try not to use blinking or animated text, it can cause seizures.

Google fonts are a way to get cool fonts on your site without having to add font folders. They're super easy to put into your site.

  1. First, go HERE to pick out your font(s).
  2. Add the font to your CSS file. For this web, here is an example for a Heading 1 tag using the Google Font, "Lora":
    h1 {font: 38px 'Lora', Verdana, Helvetica, sans-serif; color: #272646;}
    The body of this web uses 'Open Sans'
  3. Add the font to the <head> of your page:
    <link href="|Raleway|Lora:400,400italic|Jura" rel="stylesheet" type="text/css">
    [I've used 4 Google Fonts in this web: Open Sans, Raleway, Lora and Jura. All separated by a pipe | ]

That's it! Cool fonts for your web!

Useful Javascripts for your web: Thank you Mary Schwanke

11. Automatic year update script:
<script type="text/javascript">
var today = new Date()
var year = today.getFullYear()

12. Last updated script:
<script language="Javascript">
document.write("Last Updated: " + document.lastModified +"");

13. Breaking Out of Frames

Sometimes other sites take your pages and place them in a "Frame" with their information on the outside. This makes it look as if the information is on their site. You can stop that from happening without your authorization by adding this into your web pages.
The location must be above <TITLE>
Contributed by W. David Samuelsen

<script type="text/javascript">if (window.self ! = window.self.location;</script>

Submitted by Marsha Bryant

Updated by AB June 2021

Quick Links
Contact Us

The USGenWeb Project, Free Genealogy Online

Contact the National Coordinator for administrative-type comments, suggestions, questions, and concerns about the USGenWeb Project. When applicable, please provide the location of a specific website within the USGenWeb Project.

Contact the USGenWeb Web Management Team for technical comments, suggestions, questions, and concerns about the USGenWeb Project website. When applicable, please provide the location of a specific page of the USGenWeb Project website.