Maryland Science Center

Information at Your Fingertips

Responsive Web Design

Responsive Web Design

The entire website was redesigned to have equally strong usability on Smartphones, tablets, and desktop machines. In this case, the Responsive coding layer took place as a second phase after TBG established the desktop design, but we took in account many mobile first type considerations. Because of the diversity of “ad hoc” content styles in the site (related to the need for varied visual marketing), TBG paid special attention to in-line CSS styles, allowing the Science Center more latitude to make rich text content fully Responsive.

science-center-higlight1
CMS Implementation

CMS Implementation

Responsive Web Design and the need for automated content re-usage (i.e. “related links” on the page) drive a need for more detailed CMS implementations. This means that where a smaller marketing team, working for a mid-sized nonprofit might have once managed its content through a desktop application as a collection of HTML files, this approach no longer works. Of course, CMS platforms bring many advantages, so it is good that the need for mobile support has made them necessary in a broader variety of cases. In terms of efficiency, organization, and time-to-market, moving the Science Center site to a CMS has added significant value for the organization.

science-center-higlight2

TBG & Maryland Science Center

When it was time for the Maryland Science Center (MSC) to rethink its current site, the organization turned to its digital agency of record, TBG (The Berndt Group), who had designed previous and highly successful versions of the site. Continuing this rich collaboration was a great experience for both parties.

The Science Center has changed considerably through the years, and knew it needed to reach a more diverse group of audiences and rethink the site structure to better serve the organization. The new site needed to focus brand and messages to go beyond kids, encouraging broader audience participation among adults—especially the emerging “maker” scene, and other niche audiences. This presented three primary challenges for the redesign project:

  • structuring the site in a way that would speak to diverse groups while remaining highly usable;
  • presenting large amounts of content in a way that is visually engaging as appropriate for a science museum; and
  • providing more universal access for all users.

This was a step away from the previous strategy which focused more on children as the audience.  

Of course, the digital world had also changed since the last redesign. A huge shift to mobile and tablet computing was driving an imperative for fully Responsive Web Design—an approach that was challenging to implement given the Science Center’s large amount of relatively unstructured content due to a large number of “special pages” that are an inevitable part of the highly visual marketing of a science attraction. But, we all knew that Smartphone support was crucial to the organization’s success going forward. Working with TBG, the institution was ultimately able to both better structure content through a new CMS implementation in WordPress, and to create a unique set of technical work-arounds that allowed ad hoc sections of pages to have the best possible Responsive experience, given the circumstances, through intelligent CSS classes that could be mapped to content within free text areas of the page.

"So many of our visitors use their phones and tablets as their primary screen and we needed a website that works for them. This new responsive site addresses that need and allows us to put information about the Science Center right at their fingertips."

Chris Cropper

Senior Director of Marketing, Maryland Science Center

Live Site

What We Did

Technology Partners

Awards

  • trophy iconWinner: Webby Award
  • star iconFully Responsive Web Design
  • 10+Year Partnership MSC & TBG
  • heart iconAmong the Oldest Scientific Institutions in the U.S.
  • trophy iconWinner: ADDY Award
Creating an Easy Content Management Paradigm

Creating an Easy Content Management Paradigm

Additional, primary goals for the redesign included:

  • creating an easy content management paradigm for MSC staff, given the large volume of site content—requiring architecting the site in a CMS;
  • changing internal processes; and
  • training staff.

With new and better content, more interconnections among content (related links), and a better experience deepens the user’s connection with the institution, drives more ticket sales, and more thoroughly markets the organization’s diverse offerings to its broadening audience.

Special Features

Special Features

The site also contained a number of special features:

  • sortable calendars by category and interest;
  • a new calendar page that lets users sort by interest level and includes a featured event section;
  • improved navigation and increased readability;
  • new exhibit pages with exhibit highlight sections and easy to can headlines;
  • HTML 5 animations with up-to-date MSC happenings; and 
  • reformatted showtime pages help users to better plan their visit.