Your Genealogy Websites and Mobiles

From the day when mobile phones first came onto the market I have avoided them! I didn't want them intruding into my private life, and that of others in public areas. A definite No, No! However, technology catches up with us all, and for a while I have been watching the growth of the internet on mobiles. A month ago I asked a friend if I could view my home page on his mobile, only to see that it split! Nothing for it - I had to buy one, not an iphone, I might add, but an economical windows.

The image on the right shows my index page after I had made a number of changes to the coding and you may like to compare it with the PC version at My Website. In this view it is now not too bad, and can be scrolled to the left to see the off-screen portion, and if the phone is rotated to a horizontal position then it fits fine.

There are still some problems, the left hand column is pushed left, so is partly obscured by the background, and if the view is enlarged then the Guild of One-Name Studies blue logo pushes the footer down so that a brown background space appears.

Styling

The page was already built with the design being separate from the content using CSS, which fortunately makes changes easier, and there were quite a number to make. When designing the site I had only given consideration to the appearance when the width is not less than 800px, with mobiles we are talking about a maximum of 480px - quite a difference, and as a result the above is a compromise, as I was not willing to change the overall design of the PC version. For example the tree image is a background-image called by the CSS and not the HTML which means that its proportions relative to the space available cannot be changed, hence the left-hand column being partially obscured.

What I was able to do though, was to convert all the font and image sizes to ems so that they would change proportionately. Similarly the margins and spaces were also changed from pixels to ems and the overflow for the two columns was changed to "hidden". Unfortunately the Guild logo is already in place before the hidden statement kicks in, hence the brown space mentioned above.

The Problems

They are just presentational problems, but the main one is that mobiles do not have a hover state, which is unfortunate because my CSS based navigation comprises drop-down menus hidden in the blue bar, Sure, when the bar is tapped they drop-down OK, but they do not respond when tapped as the site is already on its merry way to the default link for each header! There is no way that I wish to change the navigation on the main site.

What Now

It is clear that the only way I can resolve the navigation is to write an app style navigation system to replace the drop-down menus for each of the sections for which they apply. It is a little more complex than this, though, as my main site has around 7000 pages which currently use my "blue bar" navigation I would like all to be accessible from a mobile. As far as I can see, this means that I am going to have to design a separate app style navigation linking back to the main and sub menus.

Comment

I hope that I might have given some thoughts which may help those considering a similar project, and would welcome comments on my proposed app style navigation.

© Ron Ferguson 2010

Genealogy Website: The Nav Bars

 A web page can be considered as being built on layers, the first being the base, or blank page, usually white but it can be given a colour. For my new site I have put another, slightly smaller, background layer on top, followed by the data and images. In my case I consider the nav bars as being a new layer since the drop-downs must sit on top of any data and images. One point about images, IE6, and earlier, do not recognise the ".png" transparency. Google will find many scripts to cure this, one of which is to be found here.

To date, I have used javascript for my drop-down menus, however it is now possible to write these in CSS. Unfortunately, because to do this the latest CSS standard is used there are problems with older browsers, in particular with IE6. The image on the right is a sneak preview of a section of my new index page, and as can be seen the drop-down sits on top.

To make them display on top of images is easy, simply use the "z-index" CSS style. However for other image forms it can be quite tricky. For Flash, within the "Object" tag the line < param name="wmode" value="transparent" > needs to be included. IFrames present a different problem, and to date, despite having tested varying "solutions", I have yet to find a way of stopping the nav bars from going behind the image for IE7 and earlier. Still, I've three weeks left!

Now, the above are the easy problems, again it is IE6 which causes the real head ache, because CSS drop-down menus simply do not work! To the rescue comes Suckerfish and the Sons of Suckerfish, which for my purposes I had to modify even further.

In my first Blog in this series I mentioned that I wished to eliminate/minimise the use of javascript, and for the navigation this has largely been achieved. As you will see to get them to work in the early versions of IE, and I no longer bother writing for IE5.5 and earlier, javascript has been a necessity, this I feel is a fair compromise. If those using IE6 do not have javascript enabled the navigation will not work, but it is still possible for visitors to get round the site albeit with more difficulty. (If you are viewing this using IE6, please upgrade, especially as you can now see our headaches!)

My final point concerns testing, I use Firefox for most of my development work and test in IE8, Opera, Safari, Chrome, Sea Monkey and Bing, these I have on my PC. As I do not have a Mac. I rather hope that if it works with Safari it will be OK (not really satisfactory, but there we go!). So how do I test in earlier versions of IE? A nice free piece of kit called IE Tester enables this to be acheived.; although still in Alpha version, and not every bit works fully, it does do the job, and for me is a life saver.

© Ron Ferguson 2010

Genealogy Websites: New, Improved, Updated & How

My current site Fergy's Website has been in its current form for over a year, except for the Pedigree pages having been converted to CSS. I commenced work on the new site in November 2009 with a view to launch on 1 March 2010, although this was pushed back to 1 April 2010 mainly due to illness.

What I hope to do over my next few Blogs is to illustrate the objectives and problems and how these were overcome. Please do not think that this is going to be so technical it will over your head, some of it perhaps, but most can be applied with little knowledge of programming.

It is essential to draw up the criteria which need to be met for the revised site, mine are:

• It must be based on the Legacy Pedigree Web creation function, for no other reason that I really like this layout. I have looked at formats such as The Next Generation, and others, most of which require a GEDCOM upload, but, for me, Legacy was the one.
• To maximise the use of CSS to separate out the design from the HTML data.
• To replace the Javascript navigation with CSS, and in general, minimise the use of Javascript.
• Where possible apply the most modern CSS and HTML standards.
• To ensure cross-browser compliance, including IE6 - which continues to be used by a surprisingly high percentage of genealogists!
• To redesign the Index page, which given that I do not pretend to be a designer is no mean feat!
• To ensure W3C standards are met.

Some of the above aims obviously conflict with each other, so compromises have to be made. These will be described later.

The first problem is that the Legacy Pedigree web pages are not W3C compliant and are written exclusively in HTML. Whilst I had converted the major design components to CSS, to convert all would have meant writing a program to automate this, or using a program which would use Regular Expressions to convert each tag individually - ugh! Unfortunately the first alternative I thought to be beyond my VB.Net programming skills.

However, in 2009 Ltools released a program for Legacy users which validates the HTML and converts all to CSS, and it was this which I used last year to overcome this main stumbling block to achieving a major aim. Some information on the use of this tool is also given in my tutorial here.

The other items will be considered in future Blogs, so watch this space!

Tips for Family Tree Webpages 2

In my last blog we looked at measuring and analysing the number who visit your web pages. I now wish to turn to attracting people to your websites. After all, if we didn't wish for visitors we wouldn't have the site in the first place!

For my genealogy pages I use Legacy to generate the Pedigree Pages, in my Fergys Website and the Family Group pages for my north west England Fergusons. On their own these pages are not particularly attractive, so I wrap them in headers and footers to make them more appealing, and add pictures where possible. This is my first point, visitors need to like the site which they visit. I also consider the index page, for many their first impression of the site, should be a visually attractive page. Unfortunately I am not good on design, so I try to make them a little different to the norm (or use a template).

Another essential is the ease of navigation. There is nothing worse than going to a site and not being able to find the area within which wishes to look. If javascript is used then do ensure that there is a noscript option for those who do not have javascript enabled, otherwise your site could fail at the first page. Talking of javascript reminds me that not all search engines read it, so the noscript option is needed for them also. It goes without saying that the links must work on your server, and not just on your PC, and similarly that your pictures must be displayed; not the empty box with a red cross!

Finally we have the content. The names pages in genealogy sites will attract only those who are looking for John Smith so try adding other pages. I have a relative who was murdered and his story attracts quite a few visits, but for some reason the most popular page on my site is a biopic of all the British Prime Ministers. It is also very worthwhile to ensure that the title of each page emphases the content of that page.

In the next blog I will look at search engines and promoting the site.

© Ronald Ferguson 2009