Golf Predictor New Look Now Live

New look Home page

New look page from Member section showing more new effects

Further to this post last week, I am pleased to announce an updated look for Golf Predictor. As can be seen in the screenshots above, the site has undergone a facelift, courtesy of Twitter Bootstrap. For those who don't know, Twitter Bootstrap is a cross-browser UI (User Interface) framework that has been made available to everyone by the brains behind the Twitter look and feel. This allows the addition of snazzy effects to a website with little effort (in theory anyway, if you exclude Internet Explorer (IE) in particular!) and I have incorporated many of these into Golf Predictor. Twitter Bootstrap has been heavily customised for the site and the major changes to Golf Predictor are:

1. As can be seen in both images above, the original dropdown menu has been replaced with two new ones: one across the very top of the site and a fixed one in the same position as the old menu. As well as looking much nicer in general, the fixed menu and dropdown options on both menus have nice rounded corners and background shadowing*. The top menu contains a new logo on the left hand side and log in/log out/register links as appropriate on the right hand side. The links to the content pages remain on the fixed menu on the main 'page'. On both menus, each top level menu option has an icon associated with it. Two menus are used to ensure the updated design looks and behaves best on a wide variety of devices** from smartphones up to high resolution monitors.
2. As shown in the second screenshot above, the member section menu has been revamped with more logical groupings of existing pages. New categories include "Predictions", "Results" and "Form". This should make things easier to find in the long run and facilitate the addition of new features in the future.
3. As can be seen above, the banner graphic that was across the top of the page has been removed. 
4. The main home page has been revamped somewhat with the GP logo in a rounded grey panel* and most of the text in two columns.Some of this can be seen in the first screenshot above.
5. The font used for the web site has been updated for a more modern look.
6. The tournament information panel on the various prediction pages is now in a nice panel with rounded corners*.
7. Various status messages (e.g. unsubscribed messages) now appear in coloured panels with rounded corners*. This can be seen in the second screenshot above.
8. Pop-up text on the various pages now has rounded corners and background shadowing*.
9. Headings, buttons, breadcrumbs, text boxes, drop down lists and other page elements have also been spruced up thanks to Twitter Bootstrap. Note that some of these changes are browser dependent.

The page metaphor with the grass (ala a putting green!) background still persist as I think those elements still look pretty good! Overall though, this update is a major improvement over the original look of the site. More effects will probably be added to the site over the coming months, but unlike this update, these will be be minor tweaks.

You should update your browser to the latest version, especially if using IE (and particularly if using IE7 or, God forbid, an even older version!). As mentioned already, Twitter Bootstrap is cross-browser, but there were several issues with IE in particular. These have been largely overcome, but if you view the site with IE7 or IE8, it should work, but it will not look as nice as later versions (IE 10 is imminent!). This is mainly due to the reason already noted at the end of this post. The site has also been tested on Firefox 15, Chrome 22, Opera 12, Safari 5.1.7 and Safari mobile. It is impossible to design a non trivial site these days that looks the same in all browsers on all devices and on all monitor types at all resolutions, but I believe that I have achieved the best compromise.

I trust you agree that this update has made Golf Predictor even better! A lot of work has gone into this new look, so please let me know what you think of the "Twitter Bootstrapification"! If you find an issue, please contact me as soon as possible.


*Internet Explorer versions 8 and below do not support rounded corners or shadowing.
**Golf Predictor is not designed for mobile devices, but it should appear reasonably well on most tablets (e.g. iPad, Galaxy Tab etc.) and smartphones (e.g. iPhone, Galaxy SIII etc.), Note however that the site uses Flash charts at the moment, which are not supported on some mobile devices (e.g. Apple products).