Adaptive Web Design

So you have got your dream website. It is search engine optimised to perfection, filled with brilliant and engaging content and the traffic is flowing in. Is it ready for the mobile boom though? Your clients have never had more options for viewing your content on mobile devices, so having your site viewable (and usable!) on a small screen is fast becoming a survival requirement for all businesses

According to 2012 Google data, 51% of the UK population had a Smartphone, an increase of 30% on 2011. The need for mobile optimisation is further reinforced by the fact that 4.6 billion people worldwide are mobile subscribers.  At the same time the world had only 1.8 billion  internet users. Compare the two numbers and think what will happen when all those phone owners get an internet connection on their handset… However, the most solid endorsement for the  growing need for mobile-ready websites is the fact that by 2020 Smartphones will sell 3 times faster  than desktop computers!

Whether they are browsing on their latest android phone on the bus, or lying on the sofa flicking through your site on their iPad, your customers are demanding mobile. Without fluid CSS your site will be clunky and hard to navigate. This poor usability could result in higher bounce rates and higher bounce rates equal less conversions (i.e. less money for you)

Would it not be great to get your website developed with adaptive web design? Imagine it automatically adjusting to any screen resolution and looking great no matter what device it is viewed on? No squashing images or turning text into tiny undecipherable squiggles…

What Is Fluid Layout CSS?

Rising popularity of different screen sizes (i.e. desktop PCs, laptops, tablets, mobile phones etc.) means business owners have to invest in additional versions of their websites to keep their clients happy… and spending. But there is an alternative.

We believe fluid (flexible) website design is the one approach that truly future-proofs websites. In traditional (‘normal’) website design the look of any given page (including the position of certain elements, their size etc.) is ‘set in stone’, no matter what resolution and shape of screen it is being viewed on. With modern ‘adjustable’ web design, the holy grail of a ‘one site that fits them all’ becomes an attainable reality.

Take our website as a case in point. Below you can view some snapshots of what it looks like on a few of the more common screen sizes, both mobile and static.
Fluid CSS Design

Why not try it yourself now? Grab the bottom corner of your web browser and drag it around, making the window larger and smaller. Notice how the images and text resize and relocate based on the resolution? That is fluid CSS in operation.

Web designers cannot predict what new gizmos, and therefore screen sizes, will appear on the market in the future. This means that companies constantly had to play ‘catch up’ with the technology their prospective clients used to access websites… until flexible design was developed.

Fluid layout CSS design erases this hassle because it removes the need for designing and building several pre-defined, isolated ‘looks’ for each varying screen size. Instead, there is only one complex version of the website which makes use of ‘snap points’. These are used to rearrange elements on a page, usually moving them one under the other or into new clusters within a pre-set hierarchy, instead of simply squashing text and images until they are unreadable. Thus, as screen size changes, headings, images and text etc. move around so that the site can be viewed on all possible devices. Thanks to fluid CSS this happens on-demand and without losing quality or clarity.

Additionally, when there are multiple versions of one website (e.g. desktop, tablet and mobile) each needs to be accessed and changed separately to ensure comparability of content across devices. Thanks to fluid CSS any website updates only need to be done once, making website maintenance quicker and, most importantly, cheaper for you.

Adaptive Web Design

As specialists in the design and implementation of complex database-driven websites (such as Binamic has worked with KeeResources on template design and development for many household car manufacturing brands. As part of our work with KeeResources, we were asked to create “Car Comparator” and “Car Tax Calculator” (CTC) online tools in adaptive CSS formats. Summaries of both can be found below.

Car Comparator:

  • a database-driven Car Comparator tool, which allows visitors to compare their chosen model against up to four competitor cars based on a plethora of performance measures (such as fuel efficiency, running cost, CO2 emissions and on the road price)

Car Tax Calculator:

  • a Car Tax Calculator for all models, which allows users to estimate the tax burden associated with a particular model over the next three years, as well as recalculate potential values based on changing variables relating to both the individual (e.g. personal tax band, allowances) and the car (e.g. different paint jobs, alternate interior trims etc.)

In partnership with KeeResources we have built these platforms for Renault, Citroen, Volkswagen and other manufacturers. Our most recent database driven responsive CSS design was for Jaguar, which coincided with the launch of a new, redesigned global website for the brand.

Fluid Design Solutions For You

Are you convinced yet? The need for mobile compatibility is not just a fad, mobile device use is only going to increase and now is the time to ensure your website is ready. Whether your site is a bustling Magento e-commerce platform or a bespoke WordPress design we can ensure it is prepared for the mobile revolution. Please call us on 01753 878435 or email us today to discuss what we can do for you.

Written by Ryan Hill

Comments are closed.