Web design trends change so frequently. When we initially designed and built the K3 Business Solutions website towards the end of 2011 it was up to date, had a wealth of functionality and served it’s purpose well. In the last year-and-a-bit since then, the site had begun to look dated and slightly out of fashion. As the company continued to grow and expand, K3 decided that it was time for a re-design of their website, including a full facelift and ensuring that the site was viewable on the ever-growing army of mobile devices out there.
Responsive Web Design – Mobile Friendly Websites
Over the last 6-8 months we have fully embraced the responsive web design trend at Futuresys, most notably with our Pro Templates and the online shop and blog we recently created for Fluteoffice.
When we say “responsive web design” we are referring to the process of ensuring that a website adapts itself to work on a range of screen sizes and devices, including mobile phones and tablets. Previously, many websites have been built using fixed widths, meaning that viewing them on the move has always been difficult and a rather user-unfriendly experience. A survey by Ofcom in December 2012 showed that 58% of the UK population now own a smartphone (that’s more than 36 million of us!) and that 19% (almost 12 million) possess a tablet, such as an iPad, proving that you simply can’t afford to ignore these devices when building websites any more.
To make a website “responsive”, you effectively create it so that the structure and the appearance of page adapt and change as the screen gets smaller. Imagine a page with a header section, some content below and a sidebar to the right. Below is an example of how this structure may be adapted as the screen size gets smaller, ensuring that the important information is still shown and can be easily read, regardless of what device you’re viewing the site on:
As you can see this may involve making the design more linear as screen sizes get smaller and horizontal space decreases. Since the swiping motion used to scroll down on most touch devices is far more vertical-friendly than scrolling through long pages with a mouse wheel, this is the most user-friendly way to go.
The Redesign – K3 Business Solutions
The redesign was based on current “flat” web design trends, pioneered primarily by Microsoft and used by companies such as Etch. The idea behind this style is to use big bold colours and strong but simple fonts and is demonstrated in the Windows 8 operating system. The decision was made to drop the turquoise/blue/green colour that the original site was based on and move towards a more professional looking black and white combination, making use of bold colours for important call-to-action elements such as buttons and colour coding other important sections of the site.
Once the design was agreed upon and the site was built, we began the process of enhancing the design for mobile devices. We made sure that all the important information was still visible and made the whole page a lot more linear, doing things such as disabling the hover effect for the drop-down menu as you obviously can’t hover on touch devices! One of the most important additions was the inclusion of a “Skip to Content” button at the top of every page. The K3 Business Solutions website has quite a large header section, which contains a lot of important information and links which needed to be present at all times. By adding a “Skip to Content” button we gave mobile users a quick and easy way to get straight to the content of the page.
The 4 “verticals” boxes (Food, Fashion, Manufacturing and Distribution) were also modified to become more mobile friendly, removing the images and stacking them in columns of two. Below this on the full site, the content is split into 2 columns with “News”, “Events” and “On-Demand Webinars” on the left and a “Get in Touch” contact form to the right. The “News” and “Get in Touch” sections are both expanded by default but to save space on the mobile version, these have been closed up and all sections now sit in one column.
You can view the site here!
If you’re interested in making your site responsive to attract the ever-increasing numbers of mobile device users, get in touch! We’re always happy to help and have the solution you need to ensure your website doesn’t get left behind!
