Choosing a strategy for responsively designed websites and mobile sites for the optimal responsiveness

Thinking responsive

Choosing a strategy for responsively designed websites and mobile sites for the optimal responsiveness

When would the native mobile app, the dedicated mobile site or the responsively designed website be the best choice? How to set up the website responsiveness and when to go with mobile first, desktop first or element first design?

When would the native mobile app, the dedicated mobile site or the responsively designed website be the best choice?
Which platform to choose for the optimal website responsiveness?

Which platform to choose for the optimal website responsiveness?

Mobile App as responsive platform

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 website as responsive platform

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)
Designing websites responsively

Single (responsive) website

A single responsively designed 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 to approach website responsiveness?

How to approach website responsiveness?

Fluid website responsiveness

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
Adaptive website responsiveness

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
Fixed website design strategy

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 to start designing responsively from?

Where to start designing responsively from?

Designing responsively mobile first

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.)
Designing responsively desktop first

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
Designing responsively element first

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 test website responsiveness?

How to test website responsiveness?

OnDeviceapp fro testing and presenting website responsiveness

Full range testing

Check the overall appearance of the page in the context of real devices in order to refine the style before presenting the website responsiveness to the stakeholders. Most used tools: OnDevice App website responsiveness presentation tool.

Test website responsiveness tools

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.

Test responsiveness of website tools

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. Keep on designing responsively.

Completed - Choosing a strategy for responsively designed websites and mobile sites for the optimal responsiveness
Created by Juli Sudi - Twitter - Digital product designer - 2017 London