Best Practices and Accessibility

Responsive design helps you make beautiful web sites! 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.

Luckily, we have transitioned most guides to side-navigation layout with a single column of content. This makes the mobile rendering a bit more predictable. 

On mobile, columns are arranged as follows: 

• The side navigation buttons will be first.
• The boxes appearing under those buttons will be second.
• The boxes in the main column will appear in the same order.
• The footer box will always be last.

• Place your most important content in the top box since this is guaranteed to always be the first box after navigation.
• Break up content so there is a natural flow when the columns are rearranged.
• Group similar or themed content closer together so they don't get separated.
• View your guide on multiple screens (or resize your browser window to activate the responsive design scripts) before publishing.

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 changes 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.