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