You should always design for small screens first (“mobile first design”). Users interact online on a vast array of different devices and therefore screen sizes.

Our default layout relies on bootstrap for it’s structure. You can therefore use a combination of their classes.

Bootstrap grid system and sizes

As we use Bootstrap for our layout system, we currently have the following types of layouts.

• Category pages (1 column, buttons are in either rows of 2 or 3.)
• Article page (2 columns, content on the left, and complimentary information on the right hand side).

Category pages

Category pages uses the following markup for layout. Depending on the nature of your service, this may not be appropriate and therefore will need user research and user testing to understand what works with your users.

Article pages

Article pages are broken up into 2 sections. Content and complimentary.

• Content will have the articles content.
• Complimentary will have a right hand sidebar which is made up of either other articles that the current section the article is in, downloadable information, contact information etc.

 

 

 

Back to top