Thinking responsive

Native mobile app vs. Dedicated mobile site vs. Responsive design - Fluid vs. Adaptive vs. Fixed - Mobile first vs. Desktop first vs. Element first.

A practical guide on how to choose the right strategy with multiple platforms in mind.

Which responsive strategy should you choose?

Mobile App

A downloadable application serving a highly personalized mobile experience for the purpose of driving engagement from loyal customers. A good choice if:

  • The website / interface is very interactive
  • Your target users are trend sensitive impulse shoppers with high brand awareness
  • A mobile’s native functionalities are required (calendar, notification, GPS etc.) for the full experience
  • You can afford a long term commitment to maintain and market an individual app

Dedicated mobile site

An 'm.domain' website accessible by redirecting users from the main site, created exclusively for targeting mobile users with tailored content. A good choice if:

  • The business has a high number of online sales and needs a quick solution to reach a wider audience
  • Time and budget are limited, but a mobile version is required for the main function
  • A temporary solution is required until the legacy codebase is converted into a new web presence
  • The marketing budget is limited and it is necessary to leverage the main site's traffic (searchable, shareable)

Single (responsive) website

A single website built on a versatile layout to allow for viewing on various mobile devices and screen sizes (one site fits all). A good choice if:

  • Sources allow the maintenance of only one codebase and the advertising of only one domain
  • The service/product is general, and there is no need for a fully mobile-centric user experience
  • No statistics are available for mobile usage
  • The site needs to be compatible with all device types

How responsive do you need to be?

Full responsive - Fluid

Shows the content based on the available browser space by dynamically resizing the elements, regardless of the device or browser type. A good choice if:

  • No specific device type is targeted and 100% device compatibility is required
  • A large audience needs to be supported
  • User behaviour statistics and developer expertise are available for proper conceptualization

Practical responsive - Adaptive

Changes the layout viewport width by viewport width, ensuring a more relevant content arrangement based on device type. A good choice if:

  • A more tailored solution is required for the user’s situational capabilities
  • There is a need to update the existing website but a complete rewrite is beyond the budget
  • Greater control is required over how the design will look on different devices

Non-responsive - Fixed

Uses one preset page size for all displays, which will be cut on smaller screens and scaled down on mobile devices, allowing the user to zoom in. A good choice if:

  • The business has no online sales, and a brochure-type web presence is enough
  • The website/interface is supposed to be used on a specific desktop screen
  • Full control and pixel perfect implementation are required for proper functionality

Where should you start with the responsive design?

Mobile first

A very focused approach that begins with designing for the main function then aims for higher resolutions (often called progressive enhancement). A good choice if:

  • The number of mobile users is already 80% and above or 50%, but the sales are higher on mobile
  • The experience needs to be optimized for mobile and is merely functional on desktop
  • The website/interface has only a few core features
  • The type of service/product is rather interactive (entertainment, life-style, networking, news etc.)

Desktop first

This means designing for the highest specifications - the best achievable - and then going down to smaller resolutions (often called graceful degradation). A good choice if:

  • Visitor numbers and sales are higher on desktop
  • The website/interface is feature-rich, e.g. productivity, office or business tool
  • The experience needs to be highly refined on desktop and merely functional on mobile
  • The time and budget are limited, but patches are required for the existing product

Element first

Atomic design applied with a responsive mindset enables the individual preparation of the interface parts so they behave responsively. A good choice if:

  • The number of hits is close to equal on mobile and desktop or there are no initial user statistics
  • The website/interface is feature rich and complex and will expand gradually over time
  • Sufficient time and budget are available to build a future proof design system

How to check your responsive website

Full range testing

Check the overall appearance of the page in the context of real devices in order to refine the style before launch and present the design to the stakeholders. Most used tools: OnDevice App.

Measurement check

Check the measurements and details in order to correct the elements, such as paddings, sizing and responsive layout. Most used tools: Resphrame, Material Resizer, Screenqueri, Screenfly, Sizzy.

Element resize check

Check whether the page is responsive at all and that the elements resize without going into detail. Most used tools: I am mobile, Am I responsive design, Resolution Test chrome plugin, Viewport resizer browser plugin.

Congratulation!

You're thinking is complete.

Created by Juli Sudi - Twitter - Digital product designer - 2017 London