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: http://webresizer.com/ 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.

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 is being discontinued, Expression is a great web editing program. You'll be able to use it for years!

8. New SEO rules: the first three items in the head MUST be in this order:
<head>
<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 in just the small cell phone view:

/* ====================== */
/* ===== 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: http://ami.responsivedesign.is/   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.  Google Fonts

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="http://fonts.googleapis.com/css?family=Open+Sans|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!

Submitted by Marsha Bryant


Quick Links
Contact Us

The USGenWeb Project, Free Genealogy OnlineComments and administrative-type problems should be emailed to the National Coordinator. For suggestons, concerns or complaints regarding a specific web site within the USGenWeb Project, please use the Contact Form.

Direct comments, technical difficulties or suggestions about this web site to the Webmaster.