Cracking the Multi-Screen Maze

How to get past the jargon and adopt the right strategy to designing for multiple screen sizes

Rush Hour

Does this conversation sound familiar? If you have ever been part of / witness to a UX designer & web developer discussing how a digital interface should scale across different screen sizes, then you know what I am talking about. It’s usually an unintelligible discussion punctuated with awkward silences and confused expressions.

Even ten years after web browsing across footprints started gaining ground, designers and developers don’t have a common vocabulary when it comes to talking about multi-screen strategies for digital interfaces.

Why is deciding on a multi-screen design strategy such a difficult task?

  1. Confusing Terminology: Fixed? Fluid? Responsive? Adaptive? There are many different web development approaches to choose from. What creates the confusion is that the terms are not only similar sounding but are also used interchangeably by designers/developers.
  2. Diffusion of Responsibility: When it comes deciding on web development approaches, designers and developers tend to pass the buck to each other. Developers feel that its upto the designer to account for difference in screen sizes during the design phase and ensure that the design renders properly on all devices. Designers however feel that the responsibility lies squarely with the development team to advise on an appropriate muti-screen strategy based on technology/platform constraints and maintenance considerations.
  3. Delayed Decision Making: Considering both parties avoid taking ownership, any serious discussion about what web development approach tends to only take place at the end of the design phase, and that’s usually too late. The design is already locked in and deciding on how a design will scale across devices at the half-way stage of the entire process leads to rework, un-ending iteration loops, project delays and cost overruns which ulimately leads to sub-par UX.

What are the different multi-screen approaches and how are they different from each other?

Let’s start with a quick introduction:

  • Fixed – The same design gets used across different screens sizes/devices.
  • Fluid – The design expands, and compresses based on screen size
  • Responsive – Now this is where the confusion starts. This approach is similar to Fluid except that in Fluid the UI elements only expand and compress, however in the responsive approach design elements rearrange themselves (horizontally and vertically) according to the screen size.
  • Adaptive – A different design is served for different screen sizes

To understand the differences better, let’s look at the pros and cons of each approach.

Fixed

Pros

  1. Fixed approach is easier and faster to design for, since the design does not change for different screen sizes

Cons

  1. Designing using this approach can create a lot of extra white space when viewed on larger screen than originally designed for.
  2. On mobile, user has to scroll or has to pinch and zoom to read text, often times user ends up clicking on an unintended button with their finger, which is much larger than a cursor.

In a nutshell, you would have to be crazy to use this approach in a multi-screen world for your online channels. Fixed approach = Bad UX. Period.

Fluid

Pros

  1. This type of approach ensures the design fits on desktops of varying screen sizes, hence providing a slightly better experience on desktops.

Cons

  1. The designer has to ensure that the design stays intact on various screen resolutions
  2. Overflowing or bleeding of content on smaller screen has to be handled
  3. Doesn’t work well with mobile. The design tends to look squashed and some of your elements might start overlapping each other

Not a suitable approach considering you can’t afford to lose out on mobile experience. So, the Fluid approach is also a recipe for bad UX.

Responsive

Pros

  1. In a responsive website, there is only one master layout, for both desktop and mobile, and elements rearrange themselves to fit across devices.
  2. Since there is just one layout, chances of something getting missed out is less.

Cons

  1. It’s the most difficult approach for a designer as, they have to understand how the layout shifts from device to device and design accordingly.
  2. The layouts can’t be completely different, in some way they have to be derived from rearranging elements in a uniform fashion.
  3. Since all the content are downloaded & only relevant content shown on mobile, it is a bit slow to load.
  4. This requires a thorough development and testing process to ensure it is displayed correctly on all devices and all browsers. The design has to planned well, so it can work on different screen sizes.

If you get past the learning curve, the responsive approach will fit your criteria 90% of the time. (Which is the reason for its popularity)

Adaptive Approach

Adaptive design, fundamentally, has multiple fixed designs (one for desktop, one for tablet and one for mobile). So, when you open a browser, the site chooses the best layout for that screen size and displays it to the user.

Pros

  1. Designer have the most control on the design in this approach. They can design dedicated interfaces for each device without worrying about re-arrangement of the UI elements, which in turn translates to optimum UX.

Cons

  1. This is the most tedious approach, as a designer has to create different layouts for each screen size (minimum two different layouts are required one for mobile & one for desktop).
  2. While creating different layouts for different screen sizes, it’s difficult to cover all the screen resolutions, especially the new ones.
  3. Since the designs can be completely different, there are high chances of elements being missed out or updates not being made properly on all instances
  4. Adaptive approach is also expensive, to implement and maintain, because the designer has to design up to 6 different design layouts which in turn will have 6 different webpages on the server so as to have the best one ready to be displayed with the screen specifications of the user
  5. Sometimes the mobile website has a different URL, which may cause losing out on SEO points, if not handled correctly

Overall, an Adaptive approach gives the designer the maximum amount of control.

So, which approach should I choose?

Considering the current digital landscape, the decision basically boils down to two approaches: Responsive or Adaptive. The best approach between the two is the one that best fits your situation and provides the best user experience.

Responsive Adaptive
Slower to load. Good for small simple sites. Faster. Best for larger and complicated sites.
Less webpages to maintain. Higher maintenance effort & cost.
Code is complicated. More prone to errors and design may not render as desired across all devices and browsers. Targets specific devices. Offers design and development teams more control.

 

Both Responsive and Adaptive approaches are advancing rapidly. Over time responsive designs will probably get faster, adaptive design might end up becoming cheaper to maintain, or we just might see a new kind of approach develop. Whatever your approach, the bottom line is: if your users are using multiple devices to access your online channel, your interface will need to scale seamlessly. And the only way that will happen is if the design and development teams…

  • Take co-ownership of the multi-screen strategy
  • Communicate with a shared understanding of the context and the different approaches
  • Decide early

References

  • https://www.markupbox.com/blog/fixed-vs-fluid-vs-adaptive-vs-responsive-layout/
  • https://www.boredpanda.com/cats-are-liquids/
  • https://exsite.ie/history-of-responsive-web-design/
  • https://giphy.com/
  • https://knowyourmeme.com/photos/1090703-im-you-but-stronger

You might also want to check out