Annette Fowler

Cascade Responsive Design Site Launch!

Est. Reading Time: 2 minutes

This afternoon, we launched a fully responsive Cascade server site at – Grossmont-Cuyamaca Community College District! This site was already in Cascade and the original graphical design was by another firm, but Beacon was entirely responsible for the new responsive design and the implementation into Cascade.

Big thanks to all those involved:

Jennifer did a lovely job of coming up with a responsive design that wasn’t too big a departure from their existing site, but still functional in a mobile capacity.

Tiffany did virtually all of the development and Cascade implementation herself, including her first solo site launch today! The client was able to work and publish in Cascade for the entire duration of the project while Tiffany developed and was only frozen out of Cascade for two days while the final implementation was completed, and that the implementation was completed a full day ahead of schedule!

Justin provided analysis assistance and a bit of as needed development.

In case you aren’t familiar with the term “responsive design”, it is defined as:

Addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.  Responsive Web Design

A responsive design meets the following criteria:

  • Valid and tested HTML 5 using media queries to query the browser for information and display content accordingly (supported by all modern desktop browsers, including IE9, and nearly all mobile browsers)
  • Clean, sensible CSS3
  • HTML coded to use a flexible/fluid grid– Fluid layouts are flexible and resize with the browser window because width, margin and padding elements (even fonts and images) and are defined in percentages and ems. As the resolution changes, the layout adjusts to fit.  For example:
  • Displays flexible images and media, like the site, for example
  • No left/right scroll bars when content area is reduced in width and gracefully displays each break point without jumping or reloading

More information about responsive design from other Beacon blog posts:


One Trackback

  • By » NCTA Responsive Redesign Launch on April 30, 2013 at 10:53 am

    [...] Beacon Technologies is excited to announce the launch of NCTA’s responsive site redesign at! The site was already in Cascade, but Beacon’s team helped to redesign the existing site with slight graphic changes and adopt a fluid grid layout. Our development team helped implement a new “rounded” look and highlight key areas of the site to improve site navigation and ease-of-use for the end user. View another one of our projects for more information on responsive design. [...]