Tips & Tricks
1. Naming your pages: make all of the letters lower case and use NO spaces between words. For example - 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 templates have 6 heading tags and quite a few classes that you can use to create a more interesting design for 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, resize/crop the image, and then download the finished product. It's easy.
Try the free FastStone Viewer for editing photos or Paint Shop Pro, either are easier to use and cheaper than Photoshop.
6. While we're on the subject of images...
Make sure you remove width and height attributes in "Code View" for images over 250px wide. If the page is shrinking for smaller viewports and the image dimensions are expressly stated, the image won't shrink correctly.
Make sure to include this default image class in your CSS file: 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:
Kompozer
Online HTML - HTML editing is handy.
Beautify your code: https://codebeautify.org/
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. For larger viewports, like Desktops, the site layout expands. For 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. Depending on the volume of changes required, updating older code may not be worth the effort to make the website responsive to smaller viewports.
Below is some of the coding I used for making this site mobile-friendly in 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: https://ui.dev/amiresponsive 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 font types that are found on most user's operating systems (such as Arial) and display in an 11 or 12 pt font size. Do not use 'Fancy' fonts as they detract from the data and may not display correctly if the user does not have that same font on their operating system. 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 and they do not require users to have them installed on their operating system.
That's it! Cool fonts for your web!
11. Automatic year update script:
<script type="text/javascript">
var today = new Date()
var year =
today.getFullYear()
document.write(year)
</script>
12. Last updated script:
<script
language="Javascript">
document.write("Last Updated: " +
document.lastModified +"");
</script>
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 code below must be inserted above the <TITLE> tag.
<!--BREAK
FRAMES-->
<script type="text/javascript">if (window.self !=window.top)
window.top.location = window.self.location;</script>
<!--END BREAK
FRAMES-->
_____
Page content reviewed and/or updated by the Advisory Board 2023 Jan
Contact the National Coordinator with Project questions, suggestions, or concerns.
Contact any Web Management Team member for usgenweb.org website questions, suggestions, or concerns.
Please include a link if your inquiry is about a specific page or Project website.