Responsive Guidelines

Responsive Guidelines

Content

• Good Visual Hierarchy for your content especially on smaller viewports
• Progressively enhance your content. Spiral out i.e. start with the core of the functionality on the smallest viewport, add more for its main aspects briefly, then optionally develop some aspects fully on larger viewports
• Optimize images for size
• Responsive Images
• As usual in mobile first design, we start designing for the smallest supported viewport. In our case (320x568)

Actions

• navigation placement should be conveniently to reach on mobile
• optimize for touch
  • Click Target Size for touch
  • no hover states for touch
• Scrolling is hard on touch devices, help people
  • search and filter functionality

Input

• Remove inessential form fields
• Input Type Attributes
• Visual Feedback (Spinner/Animation etc.) for touch

Layout

• Size content to the viewport width
• Responsive Typography
  • font size
  • ideal column should contain 70 to 80 characters per line

Modals

There are often better alternatives to modals. Modals, especially large ones, don't scale well on devices with a small viewport. However, it doesn't mean that modals should never be used. Refer to the list below to guide your decisions.

• Confirming an action: Modal is a good choice since users need to act right now
• Warning users: Modal might be a good choice, but be wary of overuse. It should be used only when a long process started to let users know that it's in motion or when a critical error happened
• Editing data: Favor inline editing whenever possible. Otherwise, a form on its own page could also be fine
• Creating data: A form on its own page is better, especially on workflows with multiple steps and on error-prone forms (validation in modals is usually quite bad)
• Displaying data: A page is better choice

Resources

If all of this is new to you, here are some things to check out

• https://responsivedesign.is/
• https://trentwalton.com/2011/07/14/content-choreography/
• https://abookapart.com/products/responsive-web-design
• https://abookapart.com/products/mobile-first
• Why we should avoid modals? https://www.designyourway.net/blog/design/modal-dialog-windows-in-mobile-ui/
• https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1