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.
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:
- Why white space by Paul Boag:
https://boagworld.com/design/why-whitespace-matters/ - Download this free eBook ‘Zen of White Space in web UI Design’ by UXPin:
https://www.uxpin.com/studio/ebooks/white-space-web-ui-design-ratios-minimalism/
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.
- Foundation 5
http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html - Bootstrap
http://getbootstrap.com/css/#grid
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.