When it comes to web design, we tend to think about the approach to mobile a lot – and why shouldn’t we. The use of mobile devices to view websites has been increasing constantly, doubling since 2011 every year. Infact, expert advice suggests that by 2016 mobile and tablet use will surpass the use of desktops and laptops. Statistics show that in August 2014, over 30% of all internet content was viewed from mobile browsers
With this in mind, the approach to mobile has been a matter of concern for everyone. When asking yourselves the question – “Which approach should I adopt” consider the following points;
- Who is my target audience
- Is my content suitable for the approach
- Does the website have a particular functionality that may not work on a mobile
- Will the website be optimised for viewing on the mobile
When we talk about web design that responds to the width of a device, the word ‘layout’ keeps coming up. If you are a web designer, web developer or a end client, its important to understand what each kind of layout means. Each layout name defines the behaviour of your website on different screen resolutions.
The Fixed Layout
Sometimes also referred to as a static layout, fixed layout or a boxed layout. This is typically a situation where a fixed width is applied to a website ( usually a 960px width ) and the website is aligned to sit in the centre of your screen.
Traditional approach has always been to stick with this layout. Typically, when a website user would resize their browser on a desktop/laptop, scrollbars would kick into place when the size of your browser would be less than the width of the website.
On modern day mobile devices the website would appear zoomed out. A user can however, zoom into the website and interact with the website.
Larger corporate website, traditional websites and many of the websites created prior to the mobile explosion follow this layout. Today, when we build websites, we don’t opt for this layout. With the exception of some, larger corporations prefer to define a better mobile approach for their website.
The Fluid Layout
The fluid layout, also referred to as the liquid layout or responsive layout uses relative units instead of pixels. The definition of width of elements is usually in percentage. This makes the website stretch across the screen at times.
In most cases, a fluid layout will fill up the screen – which sometimes may cause a problem. On larger screens the elements span out leaving either a lot of white / empty space or you may fine a line of text extending across the screen.
This is not been the best option when it comes to web design and must be avoided as much as possible.
The Adaptive Layout (AWD)
The phrase Adaptive Web Design was coined by Aaron Gustafson. Adaptive web design relies on fixed or predefined screen sizes to change the layout. This is usually achieved with the use of Media Queries (@media).
Using media queries, the website may choose to break completely on certain devices. The ability to use these media queries is largely dependent on width and height of a device.
This approach is widely used by many of the recent websites and works very well if you are absolutely sure of the size of devices you are targeting.
The Responsive Layout (RWD)
The phrase Responsive Web Design was coined several years ago by Ethan Marcotte. Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.
In other words, a Responsive approach is where you website is still based on percentages, but you use media queries to adjust the layout and change the percentage value when required. Your content scales with your layout and your website has a seamless experience on no matter what width your browser is currently set to open on.
A great example is to think of a situation where a potential user is using a browser which is not maximised on his/her screen. Would you website look as intended on their non-maximised browser window without any scrollbars or broken UI?
Essentially, your website in a responsive layout reacts to the browser’s width and not the screen size of your device.
The Key Difference between an Adaptive & Responsive Layout
The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes.
Responsive Web Design relies on flexible and fluid grids, and Adaptive Web Design relies on predefined screen sizes. One of the major distinctions between the two is that Responsive Web Design might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations while Adaptive Web Design is a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.
Which Approach Should I Use?
As mentioned above, ask yourself questions about your target audience and content. The most important determining factor, in our opinion, is the CONTENT! Your content must be the deciding factor on which approach is best for you.
Content that is less text based is suitable for a Responsive Web Design, whereas content that is much more in length would perhaps look better in a Fixed Layout. In the end, every website can be built up with any of the approaches, just make sure you have a strategy in place for its content delivery.
Be sure to checkout other reading material about Responsive and Adaptive Web Design by visiting the following;
