Golf Predictor Member Pages Go Responsive!

Old non-responsive (left) and new responsive (right) Prediction Ranking page

Further to this code update post earlier this year and this public pages go responsive post last year, I am happy to announce that the member section of Golf Predictor has now also finally gone responsive. This means that all site 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 to provide a better experience for users of mobile devices.

The results can be seen in the screenshot above, which shows the main prediction page on a device 320 pixels wide. The old Prediction Rankings page 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 Prediction Rankings page is shown, with the content resizing to fit the screen. Note that, like before, the two menus are replaced by the so called "hamburger" icons, which provide a dropdown menu when clicked on smaller devices. Note also that the data table appears truncated on the new responsive page. The whole table is actually available via a simple swipe (on a mobile device) and this is explained in point two below.

Some notes on this new responsiveness (similar to notes from linked post above):

1. Despite the fact that the site looks almost identical to 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! Some minor compromises had to be made in some instances, but users on wide screens should not notice any difference from before (except for the Season Segment panel - see point six below).  
2. There were two choices when it came to dealing with the wide data tables on Golf Predictor. I could either drop columns on smaller devices or add scrolling to allow users to access all the information on the smaller page. I went with the latter option as it offered no loss in information and it was much easier to implement! On a mobile device, the entire table can be viewed with a simple left or right swipe.This also applied to the many charts on the site, which also use a scrollbar on a small screen rather than being squashing down to a very small size. 
3. Further to the above point, most mobile devices do not display scroll bars when wide content is displayed. Therefore, it can be difficult to know if there is more content or not without actually flicking the content in question.
4. Depending on the (width of the) values returned, scroll bars may now be displayed on some data tables (e.g. on the compare pages) in full screen mode.The font size has been reduced on certain data tables to minimise the chances of this happening.
5. 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 tablet (Android Lollipop) and a Galaxy Note 4 phone (Android Marshmallow).
6. Changing from portrait to landscape (or vice versa) on a mobile device can sometimes result in having to pinch to display the page at the correct zoom level. On investigation, this was ultimately caused mainly by the text pop ups on the site. Therefore, I have either decreased the width of such pop-ups  on mobile devices or, in some cases, removed the pop-up text. For example, in the Season Segment panel on the Prediction Data page, I have removed the pop-up text entirely and reformatted the panel. On some pages, e.g. the site home page, it's not feasible to remove the text pop-ups, so this issue may persist on such pages. The position of some pop-ups have also had to be adjusted to optimise the display across all devices.
7. 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!
8. The biggest issues with the smaller screens are with the pop-up charts. When clicking on one, you may have to scroll up if you see a darkened screen (this is the background for the pop-up window).
9. In addition, I had issues with the pop-up charts on Safari on my old iPhone. Scrolling on the data tables worked fine, but scrolling in the modal pop-ups didn't work at all. After much ado, I was finally able to get them to work in an acceptable manner.
10. It is not recommended to look at the pop-up charts in landscape mode on a small mobile device (e.g. a phone). Depending on the size of the device, you may not be able to access the Close button on the bottom of the pop-up. However, you should still be able to close it with the X button on the top right of the pop-up.
11. A lot of work has gone into updating and testing the member section on the above mentioned devices. Every single page in the member section has been updated and I have carried out extensive testing. It is possible a page slipped through the cracks or your particular device displays a page differently. Please contact me immediately if you experience any layout issues on the site. 
12. You may have to refresh a page to see the changes, if you have viewed it recently.

Overall, this improves the appearance of the member section pages across all devices. However, due to the many stats tables, panels and charts on the site, it is still recommended to use a larger screened device (and a PC in particular!) to use Golf Predictor.