Drupal Responsive Theme Design

High school and college students use mobile phones and tablets more often than the general populace.

These young people are much more likely to use a smaller screen device as their only portal into the Internet.

Arapahoe Community College had an active Drupal 6 website, but they needed to meet their students and prospective students where they live online - on their mobile device. The analytics from their site indicated that students were often using the smallest smartphone screen widths (320 px). It was imperative that all of the site information not only display on a larger screen size but also display legibly on these very small screens.

  • Monarch Digital designed and developed a responsive Drupal 7 theme based upon their original fixed-width theme.
  • On a desktop or laptop, the theme had to remain unchanged - even on Internet Explorer 8.
  • The basic layout of the page was designed to be retained as long as possible while the screen decreased to tablet size.
  • On a mobile-phone screen, the home screen was developed to transform into a main menu screen that is easily navigable with a browser's fingertips. 

One of the challenges of reducing a screen's size by four or five times is how content is displayed in menus and what order they are in on a given page. Technical challenges for this project included designing and developing mobile and footer menu effects, backporting Drupal 7 core functions to Drupal 6 to support a responsive site, and converting the original theme's CSS to SASS to enhance speed for future support.

Everyone anticipates that the site will need to continue to react to the ever-changing priorities of the college in order to stay in the hands of their customer base and continue to be successful.