As the Senior Front-end Developer at Gibe Digital, it is crucial that I stay up-to-date with the latest in HTML, CSS and JavaScript.
I need to know how these technologies are being used, who is using them, and where they are being used. I can then use them to inspire or help with future projects. It also ensures I have an idea of what is possible and what is popular or mainstream on the internet.
As such, I am going to start a regular feature about my favourite websites. Every month I will provide a simple review about a website that I find inspiring, focussing on the build, technology used or ingenuity of the user experience.
MSN's UK Olympics website
The first website in the series is quite topical as we close to the end of the London 2012 Olympics - MSN's UK Olympics website; a responsive website with the latest Olympic news, photos and videos.
This website is a great example of the latest in Microsoft's rebrand, utilising the Metro design style that has been rolled-out across the Microsoft family of products, services and websites in recent months. They really have tightened the consistency of design and approach across the brand.
The Metro design style also lends itself well to responsive layouts. The grid look and simplistic design makes it perfect to adjust content for smartphones, tablets and desktop/laptop screens.
The responsive layout utilises a series of blocks that move, resize and scale based on the screen size and/or orientation. For example a smaller screen such as a smartphone or small tablet will see a series of blocks in single column. A large tablet or desktop computer would see up to three columns, changeable block widths and greater use of the screen width.
The fluid layout between each responsive trigger point also means that a variety of different sized screens will see an optimised layout.
A responsive layout with fluid movement
The layout targets three device types: desktops, tablets and small screens (see image below).
The blocks are then set to square or rectangle based on size of the screen. Smaller screens view a single column of stacked blocks, tablets, notebooks can see a 2 column layout and larger tablets and desktops will be treated to a three column layout with the introduction of rectangles and varying formats.
The fluid layout between the three trigger points means more screen sizes gain a degree of optimisation, providing a consistent and tidy user experience when viewing the website.
Cross-browseR support
Some responsive web design techniques are not fully supported by all browsers, but there are fixes for older browsers.
Microsoft Internet Explorer (IE) has the largest issues. Media queries, used for responsive design, are not supported in older versions of IE (less than IE9) and most developers, including myself, would try to ensure that older browsers adopted the desktop layout by default.
MSN has ditched any support for older IE browsers (less than IE9) and serves up the text version instead. This is really forward-thinking approach and is impressive to see them pushing the usage of new technology and IE9 as opposed to older, dated browsers like IE6, IE7 and IE8.
Visit MSN's UK Olympics website: london.msn.co.uk
