Web design is a tricky art that combines both the creative and the analytical skill sets to create something unique and visually compelling. At the end of the day, good web design is more than the sum of its parts. Beginner and amateur designers may think that web design consists of finding a web host that’s reliable and simply uploading a pre-designed template, but there’s more to it than that, much much.

The above is the introduction to a post that recently appeared online at speckyboy Design magazine.  I thought it appropriate for this blog since it deals with beginning web design which many genealogists are trying to do. It does not matter whether you are hosting your site on RootsWeb servers or are paying for hosting somewhere. These seven tips offer some good advice.

1. Site Navigation – One of the most important aspects of designing your site is the site navigation. Your menu should appear on evey page of your site as who knows where you visitor will enter – maybe by a side door rather than the front door. Can he or she get to other parts of your site or only back to the Home Page. Spend some time thinking about and designing your Site Navigation.
2. Typography - Eye catching fonts that are not distracting allow you to do a lot with a little. Don’t overdo it with too many font changes or use fonts that you viewer may not have on their computer.
3. Page Layout – A clean and well organized layout will keep your visitors from getting lost and confused. Spend some time organizing your site with plain old paper and pencil before you actually start the design process.
4. User Interaction
5. The Color Palette -Color selection can make a big difference when it come to designing an attractive website. Choosing colors that go well together and compliment your design can take time but it is well worth it in the long run.
6. Page Optimization – Speed and responsiveness are both a front-end and a back-end issue. Everything on your site does not have to appear on the Home page. Make sure you use good search engine optimization techniques when building your pages.
7. Overall Focus and Goals -  Ask yourself what your site is trying to accomplish and what message you want to communicate to your audience, and you’ll have a better idea of how to proceed.

You can read Seven Super Quick Tips for Beginner and Amateur Web Designers in its entirety.

Ninite lets you pick your favorite software from among an extensive list (Web browsers, messaging, media, images, documents, security, runtimes, file sharing, utilities, compression, developer tools and more), creates a batch installer for them and then installs them for you automatically.

Install multiple apps at once without toolbars or clicking Next. It’s as simple as 1, 2, 3!

1. Pick your favorite software below.
2. Click “Get Installer” and run it.
3. You’re done!

Since I had just purchased a new desktop computer and still had some setting up to do, I decided to give it a try. Worked perfectly and saved lots of time.

Site Templates

These FREE Expression Web Site Templates were previously announced on Expression Web Tips. They are available for all versions of Expression Web. They will also work in FrontPage 2003 and the free Sharepoint Designer 2007.

The set of twelve site templates are based on Eric Meyer’s CSS Sculptor for Expression Web produced by Webassit but no longer available. Each of the site template packages is complete with a linked style sheet and dwt and is commented in-depth so they are easy for you to use.  Included is a search box and contact form with instructions on how to use them and full instructions on working with these and other pages of the site. You can download all twelve of the templates at Expression Web Site Templates.

The Site Templates are available as:

• One column, with top navigation, header, and footer
• Two column, with left sidebar, top navigation, header, and footer
• Two column, right sidebar, top navigation, header, and footer
• Three columns, left and right sidebar, top navigation

Within each of the above four groups, you will find the following layouts available:

• Fixed width to 800px
• Fixed Width to 1024px
• Liquid Width

Each package include the following pages with instructions on how to use them and why you should include them as part of your site.

• Working With Forms
• Add a Search Box – Add Bing Search Box
• About Privacy Policies on your site
• Site Map page
• Links page
• About page
• Working with a Site DWT

Download the Expression Web Site Templates and remember they WILL WORK with both FrontPage 2003 as well as SharePoint Designer 2007. Tweak them by changing the colors and graphic images. Make them your own. This is our gift to you, the web design community.

“Most people do family history whenever they can fit it in their busy lives, on evenings, holidays, weekends, and so forth. Whether you are a beginner or experienced researcher, you can choose subjects of interest to you from the available classes and watch them anytime and anywhere,” said FamilySearch Community Services Manager Diane Loosle.

According to Loosle, the free online classes are one part of the growing number of tools FamilySearch is building for its online patrons.

All of the classes can be accessed from the Family Search site www.familysearch.org by clicking on Free Online Classes on the home page. Included in the classes offered are:

• England Beginning Research Series
• Germany Research Series
• Ireland Research Series
• Italy Research Series
• Research Principles and Tools
• Russia Research Series
• United States Research

You can watch the video online or download it to your computer to watch. You can also download the class outline in pdf format.

Visit the Research Series Classes Online.

You can read the entire article on the database http://www.wvculture.org/history/vitalrecordsarticle.pdf and then head on over to the West Virginia online vital records database to start your research.

The DAR Genealogical Research System is a combination of several databases created in recent years to organize the large quantity of information that the DAR has collected since its inception in 1890. Much of the work to create these research tools is the direct result of funding provided by the President General’s Project of the administrations of Linda Tinker Watkins (2001-2004) and Presley Merritt Wagoner (2004-2007). This system of databases will continue to expand as new information is added.

Once you click on the link DAR Genealogical Research System, you will see the screen pictured below

Click thumbnail for a larger view.

You can access the various databases through the “tabs” along the top of the search screen. The following descriptions provide basic information about each database.

Ancestor Tab

The Ancestor Tab is the working database of the DAR Genealogy Office and the data are taken from verified membership applications and supplemental applications. The database is NOT a comprehensive list of all individuals who served in the Revolutionary War.

Member Tab

You may search for basic information on a member’s ancestor record using their national number, name and other fields using the Member Tab.

Descendants Tab

The Descendants database is an index of the names found on the lineage page of DAR applications and supplemental applications. This database is an ongoing project. If you do not locate the name you are expecting to find it may be because not all the applications have been indexed.

GRC Tab

The DAR’s Genealogical Records Committee Reports began in 1913 and are added to every year. The information in these 20,000 typescript volumes is predominately Bible record and cemetery record transcriptions along with many other types of transcribed or abstracted genealogical sources.

Resources Tab

Researchers will find a variety of links to other resources of use in genealogical research in this section of the system.

Library Catalog Tab

This section provides a direct link to the DAR Library’s online catalog.

You can obtain a much more detailed description of each of the tabs by visiting http://www.dar.org/library/online_research.cfm

Using my own ancestor, Solomon Phillips, as an example, the image below is what you will see if you search on the Descendants Tab.

Click on thumbnail for larger image.

If you click on the icon you can view the list. View a screenshot of the Descendant’s List.

Take some time to explore all of the options available on this new tool available to aid in your genealogy research.

For some files on a Freepages site I’m in the process of developing, I would like to restrict the size of the page window to a fraction of the normal size. The problem is whether this is possible and, if so, how to accomplish it.

Barry Carlson, a frequent contributor to the list, proposed the following with examples.

• The popup Window version – Click on a Link to see it working
• A CSS Pseudo Window version – Click on a Link to see it working

The Pseudo Window is totally generated using CSS, and though more complex to get going is faster and doesn’t need a call to the server each time a link is clicked.   Both versions use JavaScript, but those familiar with commerce on the internet will know that you can’t do anything without JavaScript enabled.  Both versions work down to and including IE5.01, while Firefox 3.5, Safari 4 and Chrome 2 will show rounded corners for the Pseudo Window version. ~Barry ~

Absolute Link

An absolute link is created when the href value is a fully qualified URL, including:

• the transfer protocol: http://
• domain name: e.g. www.yourdomain.com
• and filename: e.g. your-page.html

An absolute link to the Expression Web Tutorials & Templates homepage looks like this:

<a title=”Expression Web Tutorials &amp; Templates.” href=”http://www.expression-web-tutorials.com/index.html”>Expression Web Tutorials &amp; Templates</a>

If you are linking between websites, you must use an absolute link. If you are linking to the Home Page of your site OR the index page in any directory, then you do not need to include the file name. Why? When the path does not include a filename, the server attempts to open the directory index, or default file. The default file name will depend on what your server requires.

<a title=”Expression Web Tutorials &amp; Templates.” href=”http://www.expression-web-tutorials.com/”>Expression Web Tutorials &amp; Templates</a>

will take you to the same location as the link shown above.

Relative Link

A relative link is created when the destination href value is relative to the location of the current webpage or source anchor.

A relative link to the Expression Web Tutorials & Templates homepage, from any webpage in the SAME directory, looks like this:

<a title=”Expression Web Tutorials &amp; Templates.” href=”index.html”>Expression Web Tutorials &amp; Templates</a>

This tells the browser to look in the current directory and open the file index.html.

A relative link can only be used when linking within a website; or when the source and destination anchors are under the same domain name.

Which is Best SEOwise?

Page rank is determined by the quality (PR) and quantity of incoming links to a page. In most cases the homepage will have far more incoming links than other pages on the site. Links from your own site to other pages are also part of the equation. Google sees the following as totally different pages:

www.expression-web-tutorials.com/
www.expression-web-tutorials.com/index.html

Cricket Walker, who offers free classes on SEO Techniques recommends using absolute links ESPECIALLY for your Home Page. You can read Absolute vs. Relative Links to understand why.

HTML and CSS Validation Tools

• W3C Validation – HTML – The most commonly known tool  is the online W3C Validation Service. You can validate by URI, file upload or directly inputting the markup.
• W3C Validation – CSS – W3C also has a CSS validation service that  allows validation via URI, file upload and direct markup input.
• [Firefox] Web Developer Toolbar -  The Web Developer toolbar extension for Firefox has tools to check HTML and CSS validation. I use this one on a daily basis.
• [Browser Independent] W3C Validator Favelets – A quick and easy way to give just about any major browser a way to validate HTML and CSS is by using favelets. Favelets are bookmarked snippets of JavaScript to add extra functionality.
• Your Development Editor – Most development editors offer some sort of validation tool. Expression Web is my editor of choice and it provides validation tools.
• Validator S.A.C. -  Validator S.A.C. (Stand Alone Complex) is a stand-alone, easy to install, version of the W3C’s HTML / XHTML Markup Validator for Mac OS X. Validator S.A.C. is a normal Mac OS X application. No installation is required, just put Validator S.A.C. where you need it (hard drive, flash drive, CD-R, etc).

Validation is a tool to help you make sure your code is standards compliant.

Browser Compatibility Testing

If everyone was using the same browser and the most up-to-date version of that browser, then browser testing would be much easier. BUT, this is the real world. My default browser is Firefox, but I know from viewing my site statistics, that Internet Explorer is used by a large number of my site visitors. And there are many still using IE6 as well as IE7 and IE8. I want all of them to have a good experience when viewing. So I do testing in three browsers – Firefox, Internet Explorer, and Opera. My web editor, Expression Web, also allows me to check in multiple browsers from within the editing window by using SuperPreview. I have the current versions of Firefox, Internet Explorer, and Opera installed on my system. Some of you may also have Safari installed.

• Older Versions of Firefox – If you need to check in older versions of Firfox, there are ways to do this. For Windows Users: Standalone Firefox (older versions) via Portableapps.com and for Mac Users: MultiFirefox 2.0
• Older Versions of Safari – for  Windows based web developers there is no easy solution to test multiple versions of Safari. For Mac users there is a nice collection of standalone versions of Safari provided by Michel Fortin.
• Older Versions of Internet Explorer - There’s no easy way to interactively test older versions of IE.

Snapshot Services

You can use several browser snapshot services which will just show an image of how the site will look for a wide array of browsers. This will not allow you to interact with your site in the various browsers but will give you an idea of how it renders.

• Adobe BrowserLab -  Adobe recently came out with a new service called BrowserLab which lets you view a snap shot of a website via URL in different browsers. It’s fast, free and gives you a couple different viewing options to compare different browser versions.
• Browsershots.org – Browsershots.org is the same idea has Adobe BrowserLab but with several differences. You can test way more browsers on more platforms with more options like screensize, color depth, javascript, flash, etc. The downside is that the service is a little slower (sometimes too slow).
• Browsercam - Browsercam is basically the same thing as Browsershots but is a paid service but offers some more in depth features. I have not yet used this service.

Read  13 Ways to Browser Test and Validate Your Work in its entirety.

Expression Web MVP’s Tina Clarke and Pat Geary will give you instructions and tools to get you on the right track. Your purchase of the EBook also gives you access to the owners/students section of the site which contians additional tips and FREE templates you can use.

Obtain your ebook at http://frontpage-to-expression.com/ and save some credit crunch monies just in time for the summer holidays.

You can obtain other f ree ebooks and f ree templates at the following sites
http://any-expression.com/

http://expression-web-tutorials.com/

http://www.genealogy-web-creations.com/

Happy Summer Holidays!!