Designing for Campus Suite

 

Overview

This article will outline key concepts of Responsive Web Design (RWD) that designers should take into account when creating a theme for Campus Suite. Do note that much of this article is targeted at designers who have not taken part of the coding process and built a responsive design from the ground up. RWD has several unique concepts that should be understood before creating a design file. 

 

The Grid

A fluid grid system is absolutely essential to designing responsive web sites -- you cannot have a responsive web site without one! In this system, we replace the idea of fixed pixel widths with fluid percentages of the total page width (with one exception, see Custom Grid Modifications.) This allows each element of a responsive page to recalculate and adjust based on changing browser widths and screen sizes.  

Campus Suite utilizes the base Foundation CSS Framework (version 3.) Foundation, created by ZURB, is an incredibly powerful CSS framework for building prototypes and responsive web design. The Foundation framework allows Campus Suite to serve our customers' growing need for device- and browser-independent, responsive design and content.

 

Custom Grid Modifications

Innersync has modified Foundation's grid elements so as to simplify them into just a handful of available page layouts. This is to create a more compatible environment for Campus Suite modules and components. It also allows our customers easier content editing.

Because of this slight functionality change, please consider the following important specifications before delving into the design process:

 

Grid File

For an easy design base, download the pixel-perfect custom Campus Suite grid file in Photoshop format (desktop computer size):

Click here to download Campus Suite 2.5 grid file (PSD)


Media Queries

The real power behind responsive designs is the use of media queries. How a user views, consumes, and interacts with information on a web site is dictated by the size of their viewing screen. Media queries give designers the power to accommodate these stark differences easily, without creating secondary and restrictive mobile web sites or device-specific applications.

For our purposes, media queries are used to make sweeping layout changes to a site as the browser scales down to smaller sizes. One can even completely redesign a web site for different screen sizes solely using this technology. Each element of your web site thus becomes modular, in that an element does not always have to occupy the same spot on a page for every screen size -- areas such as headers, quick links, menu bars, and so on can all be placed in different areas at will, all based around the size of a user's screen. 

For example, information that fits well in the header of a web site's desktop version may not be pertinent enough to be included in the very limited header area of the site's smaller sizes. In this case, said information can be placed elsewhere (usually further down) on the site, or it can even be completely hidden. 

 

 

Example of a typical web site as viewed through a large desktop computer screen:

Media Queries utilized to re-arrange web site for mobile versions. Only the most pertinent information should be kept at top:

 

 

Scalable

Because responsive designs are meant to scale to the variable size of each user's viewing experience, thinking of elements in constant values (such as pixels or points) must be avoided. Scalable elements should be sized relatively.

This is especially important when choosing font sizes. Media Queries, as mentioned above, allow developers to change the font scaling for smaller screen sizes, ensuring that the font size is always appropriate for the viewer's screen. Font aesthetics fall within the designer's domain, so it is important to give the developers this information with the layout file. When doing so, think of font sizes not in fixed pixels, but in proportions: font a should always be 1.5 times larger than the main body font: font b. Font c should always be 0.75 times the size of font b

Another scalability issue comes in the form of background images and textures that do not tile seamlessly. Because we cannot predict the exact dimensions an element will be for any given viewer of our responsive design, it is imperative to use background imagery that can scale to any width or height. This can be achieved by utilizing images that tile without seam lines or disruptions.

 

Further Reading

We highly encourage designers who are preparing to tackle a Campus Suite theme design to take advantage of these valuable extra resources dedicated to the subject of responsive web design. Here you will find links to some of our designers' favorite articles and tutorials.

 

Final Deliverables

Because Innersync's designers will be responsible for developing your design in the Campus Suite responsive framework, it is helpful to have the document's layers organized in a way that will ease this process. Please utilize layer groupings to effectively outline the site's important areas (such as header, sidebar, content, footer, quick links, and so on.) 

Innersync requires submission of the following items: