Tuesday, 9 June 2015

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.


Golf Predictor Guru! said...

This update caused an inadvertent error on the log in page. This prevented anyone from logging in and has now been fixed. Thank you to all who let me know and apologies for any inconvenience caused.

John Hohlen said...

Hey Aidan - Congrats on the upgrade to adaptive responses. I'm facing the exact same dilemma for Pro Tour Fantasy Golf. I'm thinking about upgrading my public "brochure/signup" site to use Twitter Bootstrap. However, the pages for the actual golf leagues have lots of tables with many columns so I don't think they would display very well on smaller devices. Plus, I got many hours in those tables testing all the different devices. Back then, I even had to make it work with IE 6. What a treat that was!

Golf Predictor Guru! said...

Thanks, John! I'd recommend using bootstrap - it's pretty nifty. With Google penalising non-responsive sites for mobile searches and the growing popularity of such devices, it's a good idea to do the public pages at least!