WEB SITE DESIGN - ADVANCED

ONLINE CLASS WEB SITE

This Class WAS Given At The Los Angeles Family History Library or LAFHL
which has been renamed The Los Angeles FamilySearch Library or LAFSL.

Revised 4 December 2013.
Instructor -- Jon Schweitzer

HOME    OLD LAFSL HOME    NEW LAFSL HOME

The LAFSL is located at 10741 Santa Monica Blvd., Los Angeles, CA, phone (310) 474-9990. The NEW LAFSL Website is at https://familysearch.org/learn/wiki/en/Los_Angeles_Family_History_Library The OLD LAFSL Website is at http://www.lafhl.org/index.htm and the Research at LAFSL Website is at http://www.encinojon.com/lafhl/

Consult my Webmastering - Free Tests, Tips And Links (Web Site) that is a companion to this class.

Also see Publishing your Family History on the Internet

• MAIN CLASS TOPICS
1. INTRODUCTION TO THE CLASS
2. REVIEW WEB TRAFFIC
3. SEARCH ENGINE RANKING
4. REDESIGN FOR RANKING
5. LINK CHECKING
6. SITE MAPS
7. SEO - ADVANCED SEARCH ENGINE OPTIMIZATION
8. ADVANCED PROMOTION
9. MAKE AND ADD FAVICON TO WEBSITE
10. ADVANCED WEBMASTERING
11. TESTING WEBSITES FOR EVERYTHING
12. MOBILE WEBSITE DESIGN
13. USERNAME AND PASSWORD PROTECTION
14. DUPLICATE CONTENT
15. BUYING AN EXPIRED DOMAIN NAME


flag bar

1. INTRODUCTION TO THE CLASS

2. REVIEW WEB TRAFFIC
Install a counter that will collect visitor's details such as browsers, keywords and referring pages.
You can review the details to redesign you site.
Try the SiteCounter counter at http://statcounter.com/ Install the counter at the bottom of the page. See more about counters in 7. of WEB SITE DESIGN - INTERMEDIATE CLASS Web Site.

3. SEARCH ENGINE RANKING
Read about ranking at http://www.bruceclay.com/seo/tools.htm
Determined the rank in search engines using the Web site at http://www.mikes-marketing-tools.com/ranking-reports/ and http://www.digitalpoint.com/tools/keywords/
Download and use the software AgentWeb Ranking at http://www.aadsoft.com/agentwebranking/ranks.htm

4. REDESIGN FOR RANKING
Read more about ranking at http://www.bruceclay.com/web_rank.htm

5. LINK CHECKING
Test the links of each page at http://watson.addy.com/

Test the links on the whole site using the free installed Xenu at http://home.snafu.de/tilman/xenulink.html

6. SITE MAPS
See http://www.sitepronews.com/archives/2009/nov/23.html

The HTML sitemap may be made using this Website at http://www.akamarketing.com/html-sitemap-maker/index.php?action=download_map Go to the "page source" and copy and paste just the HTML for the site map into a new page in your HTML editor.

After generating the HTML Site Map for your page, put this code in the header of the HTML Site Map web page:
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
<META NAME="GOOGLEBOT" CONTENT="FOLLOW, NOINDEX">

The XML sitemap may also be made using this Website http://www.web-site-map.com/index.php

Make a robots.txt file for the sitemap.xml as explained in these two websites http://www.quickonlinetips.com/archives/2007/04/the-correct-way-to-add-sitemap-link-to-robotstxt-file/ and http://www.thesearchguru.com/robots-text-file.asp

Text in the robots.txt file:
Sitemap: http://www.??????/sitemap.xml
User-agent: *
Disallow:

7. SEO - ADVANCED SEARCH ENGINE OPTIMIZATION
Read everything at http://www.bruceclay.com/seo/search-engine-optimization.htm

See http://www.searchengineguide.com/stoney-degeyter/seo-101-everything-you-need-to-know-abou.php

Screaming Frog displays EVERYTHING for SEO. The best is at http://www.screamingfrog.co.uk/seo-spider/

Google’s 200 Ranking Factors: The Complete List is at http://backlinko.com/google-ranking-factors

Use the ABS - META Tag Analyzer at the bottom of the site at http://www.scrubtheweb.com/abs/meta-check.html

Place external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.

A great list of SEO tools is at http://www.sitepronews.com/2013/05/15/jill-whalens-seo-tools-and-extensions/

8. ADVANCED PROMOTION
Examine the promotion material at http://www.vodahost.com/thesecrets.pdf and http://www.computerhope.com/promote.htm
and http://www.bruceclay.com/web_pt.htm
Review the "Publicizing Your Web Sites" at http://goldray.com/register.htm

9. MAKE AND ADD FAVICON TO WEBSITE
The favicon is the small square graphics to the left of the Web site's URL on the browser.
Make up pixel by pixel or from an image at http://www.rw-designer.com/online_icon_maker.php

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:
1. Upload the generated file ("favicon.ico") to your site. Verify it's there by typing http://mysite.com/favicon.ico in the browser's location, where "mysite.com" is your site's address.

2. Next, insert the below code in the HEAD section of your pages, at the very least, your site's main index page:
<link rel="shortcut icon" href="/favicon.ico">

3. That's it! Note that your favicon may not appear immediately after you've completed the above two steps. In fact, it may take a few days, and in Internet Explorer, sometimes the favicon will disappear from time to time due to a browser bug.

10. ADVANCED WEBMASTERING
The Web Developer's Virtual Library also has 100's of links at http://wdvl.internet.com/

For a Web Page Analyzer and the Web Page Speed, use http://websiteoptimization.com/services/analyze/

Add a "404 error" or "404 page not found" page. See http://www.thesitewizard.com/archive/custom404.shtml

11. TESTING WEBSITES FOR EVERYTHING
All online tests below should be free except the last one.

Screaming Frog displays EVERYTHING for SEO. The best is at http://www.screamingfrog.co.uk/seo-spider/

Web Page Analyzer - 0.98 - from Website Optimization is at http://www.websiteoptimization.com/services/analyze/

20 Free Online Tools for Website Speed Testing are at http://sixrevisions.com/tools/free-website-speed-testing/

Load test your website online at http://loadimpact.com/

A SEO testing tool is at http://www.seoworkers.com/tools/analyzer.html

A very advanced performance testing site made by GOOGLE is WEBPAGETEST at http://www.webpagetest.org/

560 Free and $$ Web Site Test Tools and Site Management Tools are shown free at http://www.softwareqatest.com/qatweb1.html#FREE

12. MOBILE WEBSITE DESIGN
It is now a very strong requirement that you MUST design for the very fast growing use of mobile hand held devices. You must provide websites that mobile device users can use or make one website that is "Responsive" or will change or modify itself to suit the device that is being used to view the website. See Mobile Web Design: Best Practices and How to Write Web Pages for Mobile Devices and A User-Centered Approach To Web Design For Mobile Devices and 5 Reasons Why Responsive Web Design is Good for SEO

A few suggestions from the Making Your Website Mobile in 4 parts
Part 1. Making Your Website Mobile
Part 2. Making Your Website Mobile
Part 3. Making Your Website Mobile
Part 4. Making Your Website Mobile are

• Don't code in tables - you'll want one long vertical scrolling column.
• Don't code in Frames.
• Don't use excessive JavaScript or PHP or any other code - you'll want to use good ole fashioned HTML - and plus, coding for a mobile site will allow you to use some of your HTML5 skills.
• Don't use large images that can take forever to load - you can use small images that leave a small footprint.
• Don't try and recreate the main site - your mobile site should contain only the most important content that your visitors need access to.

See the HTML5 compatibility on mobile and tablet browsers with testing on real devices at http://mobilehtml5.org/

See a short list of Viewport Sizes for Web Design for Mobiles and Tablets at HERE.

A Mobile Compatibility Table is at http://www.quirksmode.org/m/table.html

See a complete list of Viewport Sizes or Screen Resolutions for Web Design for Mobiles and Tablets at HERE.

6 free mobile device emulators for testing your website are HERE.

See what your website looks like on mobile devices using this free website at http://www.mobilephoneemulator.com/

Use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels at this free website at http://responsivepx.com/

A free report provides both a score (from 1 to 5) and in-depth analysis including errors in webpages to determine how well your website performs on a mobile device is obtained using the website at http://ready.mobi/launch.jsp?locale=en_EN

A free report provides a very in-depth analysis including errors in webpages when viewed on a mobile device at http://validator.w3.org/mobile/

13. USERNAME AND PASSWORD PROTECTION
You must make 2 files that are added to your server directory file.

The two files are named .htaccess for the access and .htpasswd for the username and password.

Contact the web site hosting company to ask for the server's "absolute path" to your directory file as shown in red in the sample AuthUserFile in the sample .htaccess file below.

You must encrypt the username and password before you save the .htpasswd file.
Use an online free web site to do the encryption such as http://www.4webhelp.net/us/password.php

To make these files you must use a text editor like Notepad or Wordpad. You must save these files with quotation marks around the file names. I suggest that you add to the AuthName in .htaccess the notice that people can e-mail you for the username and password.

You might have to change your server "permissions" to allow use of the files.
See section 25. at http://www.encinojon.com/comintsec/

The sample .htaccess file
AuthType Basic
AuthName "Username and Password Required. Email John at john@1stnetusa.com for the Username and Password."
AuthUserFile /home/content/e/n/c/encinojon/html/mary/.htpasswd
AuthGroupFile /dev/null
Require valid-user

The sample encrypted .htpasswd file
john:$apr1$Kmoiytt3$cYe5rSj2k01C20UbZUeNy/

See http://www.4webhelp.net/tutorials/misc/htaccess.php
http://kb.iu.edu/data/abeq.html
http://mashable.com/2008/05/03/5-free-tools-to-password-protect-your-sites/

14. DUPLICATE CONTENT
Duplicate content is a term used in the field of search engine optimization to describe content that appears on more than one web page on the Internet.

Malicious duplicate content refers to content that is intentionally duplicated in an effort to manipulate search results and gain more traffic. This is known as search spam.

When duplicate content is present, website owners may suffer rankings and traffic losses, and search engines provide less relevant results.

Use Copyscape to find the duplicate content at http://www.copyscape.com/ and Plagspotter at http://www.plagspotter.com/ and Virante at http://www.virante.org/seo-tools/duplicate-content

How to fix the duplicate content is found HERE.

15. BUYING AN EXPIRED DOMAIN NAME
See http://www.pixelmade.com/blog/domain-names/how-buy-expired-domain-name
http://www.mikeindustries.com/blog/archive/2005/03/how-to-snatch-an-expiring-domain
http://www.networksolutions.com/education/before-you-buy-check-expired-domain-names-for-problems/
http://support.godaddy.com/help/article/6700/what-happens-after-domain-names-expire
http://www.opensrs.com/docs/opensrsrwi/expired_domains.htm

flag bar

WEB SITE DESIGN FOR BEGINNERS CLASS

WEB SITE DESIGN - INTERMEDIATE CLASS

Webmastering - Free Tests, Tips And Links

Publishing your Family History on the Internet
Send comments about this Web site to the Webmaster.
Click Here to E-mail him.

This site may be freely linked, but not duplicated.
Copyright © 2003-2013 by Jon Schweitzer. All rights reserved.
This site and any internal links are copyrighted.