Skip to main content

Responsive Design

We aim to provide the best viewing experience possible for your visitors by scaling the content for various screen sizes. This goes for all device sizes: desktop, tablet and mobile phones. This is what is called responsive design.

A major benefit to responsive design is that your site’s layout will automatically change based on the size of the user’s device and they can view the page on small screens without having to pinch and zoom their way around.

 

Technology Overview 

We build responsive design into the CANVAS default brand theme. 

Please inform your site builders that they should not have to modify much HTML and CSS to achieve this; CANVAS is already designed to be responsive based on user experience insights. Please make sure your brand design mockups also adhere to CANVAS design guidelines. However, your site builders should still keep this concept in mind as they add content to the site. Encourage them to discuss with you when they see design mock ups that greatly deviate from the CANVAS responsive layout.   

 

Breakpoint Basics 

Breakpoints are the pixel widths that determine when the site is being viewed on different sized device than a desktop. There are many different breakpoint settings that can be set to control a site’s responsive flow. These settings are referred to as “media queries.” 

For more helpful information on breakpoints, please visit:

 

Breakpoint Layouts 

Our responsive design features 3 layouts with the following breakpoints: 

 

 

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.