Golf Predictor Public Pages Go Responsive!

Before and after view of the GP homepage as shown on a small device (width 320px)

The entire section of Golf Predictor viewable to the public has gone responsive. This includes the home page for the site and all pages which link off it, e.g. Links and About Us pages. This means that these pages will now display better on screens of all sizes, from large monitors down to mobile phones.

Before now, these pages would only display properly on screens with a minimum width of about 800 pixels, but now they adapt to much smaller screen sizes (to a minimum of 320 pixels, which corresponds to an iPhone 4 screen in portrait mode, for example). This was done primarily to provide a better experience for users of mobile devices. However, with Google Search now penalising non-responsive web sites, I finally got the impetus to do it! The results can be seen in the screenshot above, which shows the homepage on a device 320 pixels wide. The old homepage is shown on the left and is truncated, with users having to swipe/scroll to see all the page. On the right, the new responsive homepage is shown, with the content resizing to fit the screen. Note that the two menus are replaced by the so called "hamburger" icons, which provide a dropdown menu when clicked on smaller devices.

Some notes on this new responsiveness:

1. Despite the fact that the site looks the same as before on larger devices (e.g. computer monitors), a lot of niggly CSS work had to be done to get it to scale down to the smaller devices!
2. With the plethora of mobile devices of varying sizes, it is not possible to cater for or test on them all. I have tested the site on a computer, an iPhone 4, a 2012 Nexus 7 and a Galaxy Note 4.
3. There is a viewport bug on older versions of iOS which doesn't scale the device properly when you change from portrait to landscape. I have taken steps to minimise this, but when you go back to portrait, you may have to adjust the page slightly with a swipe.
4. The site displays better on FireFox than Chrome on the Nexus 7 with Android Lollipop 5.1.1. On Chrome, the top menu "hamburger icon" is not positioned properly. I have therefore retained the two menus, with the login/register links appearing in both.
5. Interestingly, the site looks and behaves great on both FireFox and Chrome on the Note 4 with an earlier version of Lollipop (5.0.1). 
6. The normal menus appear in landscape mode on the Nexus 7. However, the mobile menus still appear on the Note 4 in landscape mode, despite its size!

Overall, this improves the appearance of the public facing pages across all devices. There are currently no plans to extend this responsiveness to the member section of the site. This is mainly due to the difficulty in displaying the stats tables and panels on smaller screens. The public facing pages are mostly text with some images, which are easier to make responsive. Therefore, it is still recommended to use a larger screened device (and a PC in particular!) to use Golf Predictor.