Wholetree – Responsive Web Design

Responsive web design is understandably very popular with nearly one third of all website views in 2014 coming from a smart phone.  This means every website needs to be responsive so as to provide an optimal viewing experience across radically different devices and screen sizes from mobile phones, through various sized tablets, laptops and super high definition HD monitors.  Screen sizes will always be changing so it is important to design sites that can adapt to any screen size and still look and work well.

According to Google responsive web design should serve the same HTML content to all devices, so that all your visitors see the same information.  It is how this information is styled across different screen sizes that is important but this also means that creating a separate theme or template for mobile, tablet and desktop is also not a good option as it means that you will more than likely be serving different content.

This responsive web design project required me to re-work an existing bespoke Wordpress template to be responsive across all devices and screen sizes.  The advances in mobile technology and internet access mean that it is no longer sufficient for a website to be mobile friendly; it must be fully optimised for mobile traffic if it is to compete in this expanding avenue of digital marketing and provide users with a pleasant experience.  This means that the project required stripping down the existing theme and adopting a “Mobile-first” strategy to make sure load times for mobile devices are kept to a minimum.  I was able to maintain the existing design for mobile sites and used it as a basis for the styling of the responsive version.  I added a javascript-powered, pop-out mobile navigation, popularised by the iPhone Facebook app and familiar to anyone using a smart phone to browse the web.

The site uses four breakpoints to snap to four different layouts, changing the number of columns as screens get larger; making the most of the space on different devices.

Back to Portfolio Visit Website Get A Quote