Skip to main content

Design for Mobile Devices

Question: What educational resource does almost every student have in their possession almost all of the time?

Answer: A smart phone.

Designing for smaller screen sizes such as smart phones means that the content of your course should be as responsive as possible. Responsive design is not a requirement to meet accessibility standards, but it is best practice for universal design — designing for the greatest number of people possible.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation (vertical or horizontal display). — Smashing Magazine: Responsive Web Design

Tips for Responsive Design

Apply these tips to make your content as accessible, understandable, and usable when displayed on smaller mobile devices.

  • Use Web pages for content instead of Word, PowerPoint, or PDF documents. While text for Web pages is easy to read on all displays regardless of size, Word, PowerPoint, and PDF files scale down to fit smaller mobile screens and make the text almost impossible to read.
  • Break longer paragraphs into two or three sentences whenever possible. On smaller screens, long paragraphs require users to scroll and scroll and scroll down the screen. Long paragraphs make it easy for users to lose their place. White space between shorter paragraphs acts as landmarks which helps users track their reading progress.
  • Use headers to divide content into sections. Headers help users scroll down pages to quickly find specific information.
  • Avoid decorative images. Decorative images can increase the load time for pages — especially when users are on mobile networks.

Last updated: 8/7/2018