Responsive design helps you make beautiful websites! Yet, attention should be paid to where content is placed in your guides because it will 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 phone.
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 phone.
Notice how the main content is not on top anymore. This important content might get overlooked since it is buried below the left column.
There is a predictable pattern for how columns get rearranged.
- The top box will always be first.
- The left column will be second.
- Additional columns will wrap around below the top box and left column in order from left-to-right.
- The footer box will always be last.