Saturday 10 June 2017

Design Update for Golf Predictor!


Old Golf Predictor Design

New Golf Predictor Design
I am pleased to unveil a brand new look for Golf Predictor! This new look is now live on the site and I hope you will agree that it is a significant improvement on the existing design. Both the old and new designs are shown in the screenshots above. Gone is the now antiquated page metaphor and in comes a cleaner, more modern responsive design. Some notes on this new look:

  1. As my design skills are somewhat limited, I had to procure a new theme for the upgrade. As my budget was also somewhat limited, I used the free Corlate theme! Although this theme is a few years old, I found it appealing and I adapted it to my needs. 
  2. Unlike the debacle of the recent European Tour website upgrade, no functionality is lost or significantly changed. Indeed, most pages should look much the same within the new theme. The only change is that some menu items had to be moved (see below). Hopefully, this update will be smoother than the shambles of the European Tour one!
  3. I had to move some menu items to fit in with the new design. Many links that were in the main menu have been moved to the new bottom menu on each page (e.g. the blog/contact/links pages on the public facing site and the "My GP" Menu in the member section). The link to the search page in the member section has been moved to top right of the page and changed to a search icon.
  4. Unfortunately for me, updating the design was a much bigger job than simply changing the template. Although the content part of each page looks similar to before, almost all the CSS had to be rewritten and tested on various browsers and devices. The good news for me is that the site CSS is now much cleaner and the site will be much easier to update in the future.
  5. I have tested the new design on Windows on FireFox, Chrome, Edge and IE11, in addition to iOS Safari/Chrome (iPhone/iPad) and Android Chrome (phone and tablet). There are some minor issues with mobile devices and with iOS in particular (see below).
  6. The main problems with iOS are the pop-up charts and Features images hover text on home page. The latter doesn't work and the former is only an issue on iPhones (iPads are fine), mainly in portrait mode. Rotating the iPhone and using the extreme left or right to scroll up and down is an acceptable workaround for the iPhone 6 and above. However, viewing the pop-up charts on smaller/older iPhones may still present problems. 
  7. Chrome on iOS appears to have less of the minor display issues than Safari.
  8. I have been able to fix several minor bugs in the system which I found while testing the new design.
  9. Because this new look offers the ability to display much more text in an attractive manner, I have removed the text pop-ups from public pages and incorporated the text into the main body of the page. This also helps with page loading times, as fewer JavaScript files are loaded in the background.
  10. I have removed the breadcrumb from the top left of the content area, as it is not necessary, being beside the page title!
  11. Some compromises had to made to keep the site loading times to a minimum. For example, the home page images are the lowest acceptable quality and I threw out the fancy viewer for the Features images to save loading two more JavaScript files for a marginally better experience than the built in browser one.
  12. Similar to the tweaks outlined here, I consolidated and minimised the JavaScript and CSS files to minimise loading time for the new home page (and the other public facing pages). The new design has many more images than the old home design, but as stated above, I have saved them in the lowest quality possible without sacrificing quality.
  13. In case you're wondering, the three slider images on the new home page are from photos I took myself! The first is from the Oceânico Victoria Golf Course in Vilamoura (Portugal Masters), the second is from Carne (my home course in County Mayo, Ireland) and the final one is the eighteenth green in Fota Island in Cork (Irish Open).
  14. You will have to refresh/reload any page you recently viewed on the site to see the updated version.
  15. Every web page on the site should have been updated and tested. If you spot any overlooked pages or other errors, please contact me via the support link below.

A lot of work has gone in to this new Golf Predictor design and I really hope you like it. As usual, any feedback is welcome, via the Contact GP page or commenting on this post. Just another way to make Golf Predictor even better!

2 comments:

Golf Predictor Guru! said...

I have tweaked the member section of the site for fairly wide devices (viewports between 992 and 1199px) to display better. All content will now display wider for these devices, almost at the same width as for the widest devices (1200px and up). This means more of the available screen width is used and there is less white space on either side of the content.

Golf Predictor Guru! said...

I've had to disable the Google font used on the public pages as it was really slowing down the display of the site, according to Google PageSpeed Insights. I have changed the font from Google Open Sans to Helvetica and the site performance has improved significantly. Google Open Sans remains the font in the member section however.