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

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