Websites with a responsive design make it easy to read content across a variety of devices.
It allows for interaction without needing to resize or scroll because the content is placed in a flexible grid that flows based on screen size.
Responsive design also removes the need to design separately for mobile devices since every device is served from a unified design.
Responsive design helps you make beautiful web sites! Yet, attention should be paid to where content is placed in your guides because it can get rearranged to suit the screen size of the user.
This means your guide will appear differently across various devices. A beautifully designed multi-column layout created on a desktop computer will appear as a one-column page on a student's mobile device.
Take, for instance, this three-column page layout where the highlight of the page is centered in the top-center of the page.
Now consider this same layout on a mobile device.
Notice how the main content is not on top anymore. This important content might get overlooked since it is buried further down the page.
There is a predictable pattern for how columns get rearranged.
The home page should use a 2-column 75/25 layout. An 80/20 or 70/30 layout is also acceptable.
The following boxes are recommended for this page:
Pages should normally be in a one- or two-column layout. Avoid three or more columns.
Profile boxes should only be used on the home page. Don't use a profile box to take up space!