Layout
All pages on the Mind site consist of rows, and within these rows, columms. The way the columns are laid out within each row may be referred to as the row type.
Page templates are set up so that content is aligned in a way that makes sense to the user and makes the page easy to navigate. This ensures that we don't need to rely so much on colour blocks, boxes and lines around content.
We believe that the content should be the main focus, so we should work to reduce all unnecessary distractions.
Rows and columns
There are a number of different types of row that can be used on our web pages, each with a slightly different column layout (see below).
Depending upon the nature of the content you are creating, you may choose one or several different types of layout when putting a page together.
For consistency, use a pre-existing template where possible, and refer to similar, previously approved pages on the site to see how they're laid out. It's better to replicate than to reinvent.
Screen sizes
Our site has been built to be responsive, so the pages display well on a variety of devices and screen sizes.
To keep things simple we target four common groups:
- Desktop - screens equal to or greater than 1200px wide
- Laptop - screens equal to or greater than 992px wide
- Tablet - screens equal to or greater than 768px wide
- Mobile - screens less than 768px wide
This doesn't always work smoothly however, so sometimes the content needs to be tweaked in order to work as intended.
It's important when previewing your page to check how it looks on devices other than the default desktop view. The preview function on Umbraco allows you to do this by clicking the different devices in the lefthand column.
