Impact on Production

Responsive Design Coding Examples

• Foundation - coding framework (

• Code flexibility and complexity

• Data source doesn't need to be an issue - You can have a publishing model, an application, etc...

• CMS implications - code base, architecture & workflow

• Coding Examples:

      • Layout
      • Navigation
      • Visibility
      • Interchange


Coding Elements and Technical Environment = Elegant Design

There are important technical and user experience criteria that museums need to review before implementing responsive design: screen size and resolution, size and weight of typeface, and size and placement of images.

There are a number of responsive design frameworks that can be used, most notably, Bootstrap ( and Foundation ( At the Getty, we selected Foundation. The two key elements that were attractive to our institution were its flexible grid as well as the capability for rapid prototyping.

Fundamentally, one of the most important things to understand about the Foundation framework is that it is an HTML, CSS and a JS system. In other words, it can run off any type of web server (or locally in a browser). Of course, once you bring the code base into your own technical environment, there are necessary presentation modifications and development considerations. We wanted to make sure our site was IE8 compatible so we had to create a number of our own CSS templates. We are also using Foundation’s SCSS option. While this requires additional production tools, we did this to improve project-prototyping and, ultimately, speed up updates to the “live site.” To implement SCSS, developers need a compiler called Compass (similar to CodeKit), have Ruby running, and then install a few of Ruby Gems. We then use PHP to compile includes and dynamic information.

While modifying and building upon Foundation’s codebase can require significant expertise, the technical environment is quite standard. For many museums, this is a huge relief. Many museums across the United States, Europe and Asia are required to use existing technical infrastructures or technologies such as proprietary databases or rigid content management systems. This can restrict certain types of dynamic web delivery systems (such as Drupal, Wordpress, etc.) A responsive design code base, like Foundation, sits “above” the dynamic application. It is one of the best examples of separating the presentation layer from the application system.

Responsive design frameworks detect a device’s screen resolution. Once the resolution is identified, all the content on a site (images, text, media, etc.) is presented within a grid system. This grid system enables all of the content to be arranged within distinct areas on the page. Each of these areas of content can be reduced, expanded or removed from the presentation depending on the screen size. Grid presentation systems are not new to the industry; however, the idea of an adjustable grid that changes with each device has caused significant impact.

From a UX point-of-view, the grid presentation system is both functional and well designed. Many museums have a number of different web destinations that need to accommodate the growing number of web-enabled devices. This variety can fracture visual branding and other elements of the user experience. Because responsive design coding is only a presentation layer, an organization can have a more cohesive yet layered design managed in one place. It should also be noted that responsive design improves search engine optimization by allowing for fewer pages as well as more targeted content on those pages.

Presentation and functional design elements should also be carefully examined with respect to responsive design. Dropdown menus, for example, do not work well on touch devices. Moreover, touch screen devices always require simple yet elegant solutions regarding buttons sizes. While responsive design should not be seen as only for mobile content, it is helpful to start with the smallest screen sizes. Depending on the type of screen, navigation can change significantly. On larger screens, you may have a full menu present at all times. As the screen gets smaller, menus typically get “rolled up” and become viewable by clicking on a button that then reveals the navigation. In this case, simple and intuitive navigational elements should be used. Responsive design allows for navigation that works best with whatever the screen size.

Just as images may enhance the user experience, legible written content is also essential to good storytelling. To maintain readability, type should be optimized based on screen width. For websites viewed on a desktop computer, 50-75 characters per line are considered ideal. That number drops to 35-50 characters per line on mobile devices. (Carrie Cousin, 2013) Line spacing is another important feature to consider. For smaller devices, adding more line spacing can enhance readability. Finally, a typeface needs to be decided upon. While there are many font types to consider, regular Sans Serif seems to work best across the many possible presentations options.

One of the most complex decisions with respect to responsive design is how to use, place and process your images. One option is to simply use fewer images; however, for museums, this is not a desirable choice. Currently, the growing trend is to create multiple images (derivative images) for the various presentation grids you plan to build for. At the Getty, we have three grid stops: 1024-768, 768-480 and 480-320.

Jack Ludden, Head of Web & New Media Development | J Paul Getty Trust | Museums and the Web ASIA 2013