Responsive layouts

Our products should support any type of device, any size screen, and any resolution. They should fit various screens automatically, displaying content in a way that optimizes the user experience on any device.

“There is no device.” 

Relative units

absolute units vs relative units… rem preferred… em nesting troubles… px breaks zoom…

Whitespace & boxes

Avoid putting content into lots of boxes. Instead, use whitespace to separate pieces of content and create visual hierarchy. When creating boxes, avoid rounded corners. Boxes should have squared corners.

Drop shadows

Drop shadows are used very sparingly and subtly. Do not apply drop shadows to content elements like buttons or text. Drop shadows should only be applied to the layout's primary containers. Shadows should not have any blur, they should retain sharp edges. The color of a shadow should be rgba(0,0,0,0.1), or pure black at 10 percent opacity.

Tables

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Responsive embeds

To make sure embedded content maintains its aspect ratio at various screen sizes, wrap the iframe, object, embed, or video in a container with the .responsive-embed class.

<div class="responsive-embed widescreen">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6QJYgm0fRHk" frameborder="0" allowfullscreen></iframe>
</div>

Embedded videos

Disable autoplay. All embedded media should be started by an explicit user action. Autoplay is a bad idea for accessibility, usability, and general sanity. Unexpected sound can conflict with other sounds or quiet environments. W3C discourages the use of autoplay, as it affects a user’s ability to stop it with a screen reader since they navigate by listening.

Make sure text is legible. When displaying text in videos, make sure that it's reasonably large, uses high-contrast colours, and remains on screen for long enough to be read.

Provide subtitles. A lot of video is watched without sound (as much as 85 percent on Facebook). This also makes the vides accessibility for users with auditory disabilities.

Visibility

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Print styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.