Layout

Responsive web design

All DCC websites or applications should be built to be fully responsive and allow for a full range of device or screen sizes.

Frameworks

Where possible it is preferred that Foundation 6 is used for any new website or application builds. If another framework is to be considered then this will need to be authorised by the Digital Delivery Team first.

Download Foundation 6

Page width and content width

Foundation 6 will allow a site to fill the full width of a screen but also allows for content to have a max width based on the media queries below. It is recommended that written content should not expand beyond the ‘Large’ screen size unless you are specifically creating content for TV screens (see more on content layouts in the typography section). Slideshows, Images, scrollers and other presentation / layout effects can however fill the full screen width if required.

Screen sizes and media queries

For the majority of websites, Foundation 6’s standard media queries should be used which are as follows:

Screen size Widths in ems Widths in pixels
Small 0 – 40em 0 – 640px
Medium 40.063em – 64em 641 – 1024px
Large 64.063em – 90em 1025 – 1440px
XLarge 90.063em – 120em 1441 – 1920px

See a more detailed breakdown and how to reference in SASS here:

http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html

In some cases, it may be necessary to consider further media query break points to improve the user experience on certain devices or screen sizes. Where needed, we would recommend using the following approach detailed here:

https://zurb.com/expo/lessons/beyond-small-medium-and-large-foundation-breakpoint-crash-course

Spacing

To ensure content is easy to read and sections have clearly defined areas, a suitable amount of spacing or guttering should be used. Foundation 6 by default allows for the following guttering out of the box, however, you should not rely on this default if your content cramped or harder to read.

Breakpoint Gutter size
small 20px
medium 30px

Below are some useful resources about how ‘white space’ or ‘negative space’ should be used to improve your website’s design:

Grids

Depending on which framework you are using, guttering and spacing should use the framework’s default to avoid issues with future upgrades.

Foundation 6

http://foundation.zurb.com/sites/docs/grid.html

Legacy grids

Below are grid references for previous versions of framework that may still exist in some DCC websites. The below are for reference only and should not be used on any new site developments.

Further considerations

When using a grid frame work, avoid images/sections automatically filling the whole screen on tablet / larger mobile screen sizes. Where possible, consider having two or more columns before going to a full width layout.