What is the difference between responsive website layouts?

Responsive Website Layouts

Which Responsive Website Layout?

There are many different buzz words around responsive website and mobile layouts, but what does it all mean and which one is best?

Let’s look at the options; you have Fixed, Alternate or Responsive Website layouts. Within the umbrella of Responsive Website design there are a few options: Fluid/Liquid, Responsive, Elastic and Adaptive layouts.

Fixed layouts:

A fixed layout is simply a website that has been designed for a specific pixel size and will not alter (or care) what size screen, or device, the end user is using. If the screen is a wide resolution then there will be blank space at the edges, when viewed on a smaller screen the browser will scroll to see the rest of the information. On mobile devices it may scale the page down to fit the device but text will be difficult to read.

fixedlayout

Pros:

  • Only 1 site design to manage and test
  • Most modern browsers will scale sites down for mobile rather than having to scroll around the page
  • Much easier to design as only 1 size of graphic is required

Cons:

  • Provides a poor experience on mobile
  • Users may miss important information
  • As average screen sizes grow you are left with more white space

Alternate Sites/Layouts aka a Mobile Version:

Alternate layouts are when you have different sites for different sizes/devices. Typically this includes a fixed Desktop version of a design and a fixed Mobile version of the design. On a desktop device you will view the site as a standard fixed site but if you visit on a mobile device you will be served a different layout and possibly even different content. You may also be forwarded to a different site URL such as m.example.com.

alternatelayouts
Pros:

  • Better user experience for mobile users
  • Only need to create 2 sets of fixed graphics

Cons:

  • A fixed mobile site may not make allowances for future technology
  • Effectively 2 separate websites to manage and control
  • Can penalize SEO standing for duplicate content
  • Harder to create a unified experience

Responsive Websites:

Fluid/Liquid Layout:

A fluid or liquid layout is a type of responsive website that uses percentage widths to size every element, the bigger the screen the bigger the elements. The design tends to go to the edge of the design and elements do not move position depending on the device or size. If a column is 20% of the width on a desktop device it will be 20% of the width on a mobile device.
fluidlayout

Pros:

  • No need to worry about targeting certain devices or screen sizes

Cons:

  • Complicated to design
  • Needs testing at multiple sizes to ensure consistent feel

Responsive layout:

A responsive website layout is a layout that responds in some way to the device or size the page is being viewed at and then changes to improve that site.

Instead of being fixed width’s the elements are built with percentages so a column takes up a set percentage of the screen regardless of the screen size. The difference between a liquid and responsive site is a responsive site uses different layouts of the same content depending upon screen size. The important distinguishing trait is that the elements can move position, so on a desktop you may have 2 columns but on a mobile you have a single column with the left content first.

Think of the Responsive layout as a group of liquid layouts using the same content.

responsivelayoutPros:

  • Content can be rearranged so most important points are at the top on mobile
  • Consistent feel on all devices without creating a poor experience

Cons:

  • More complicated to design
  • Images need to be big enough for all devices so can create bloated sites

Elastic Layout:

An elastic layout is very similar to a liquid or responsive layout in the fact that elements resize depending on the size; however instead of referencing percentages it is set by a figure relative to the font size. The bigger the font on the device the larger the elements appear.

Responsive-Website-elasticPros:

  • Dynamically fits the device

Cons:

  • If a user has altered their zoom or font size it can drastically effect the site layout

Adaptive Layout:

An adaptive layout loads the same content in different layouts depending upon the screen size however the sizes are fixed for that screen size. You may have a small layout for devices under 300px, medium for devices between 301px and 999px and large layout for devices over 1000px. The amount of white space at the edges of a window will increase between the size breakpoints.

Think of the Adaptive layout as a group of fixed layouts using the same content.

Responsive-Website-AdaptivePros:

  • Less testing/issues as you are creating a limited number of screen sizes
  • Different images and styles can be used for different devices meaning you can optimize load times per device/size

Cons:

  • May need updates as new devices are released

Conclusion:

So which layout is best? That depends on your audience and your internal resource. Every layout is going to compromise a particular element so it is important to decide what is important.

It is also important to look at your current visitors and your target product or service. For example if you are selling materials for the building trade it may be useful to focus on Mobile design first as customers may be quickly browsing for a material whilst on site.

For an internet Services Company mobile may not be the first priority as your visitors are probably working at desktop computers. However don’t discount mobile entirely as they may forward a link to a colleague on the road who needs the same experience on mobile.

Use your analytics to see how much mobile traffic you are currently getting, but be aware this can be a chicken and egg situation, if your site gives a poor mobile experience you may not appear as high in mobile search so will have less mobile visitors.

Responsive designs do allow for better future proofing as it is easier to accommodate for new devices and screen sizes as they are developed.

To conclude, it really depends on your individual situation and needs but some concideration for mobile visitors is vital and will only become more important throughout 2015.

We recommend responsive websites for our ecommerce customers (Shopify & Bigcommerce) as it is the best solution for most customers. For our eBay mobile customers we actually use a hybrid between an alternate and responsive layout.

For more information about our mobile products or Responsive Website products visit Frooition.com

What is the difference between responsive website layouts? was last modified: April 29th, 2016 by Andrew Pinner