Responsive Design: How Museums Can Thrive in the Universe of Desktops, Tablets, Smartphones, and More
Jack Ludden, USA
Abstract
In the world of cultural institutions, an interesting trend is emerging in the digital space. More and more museums are presenting their Web content using “responsive design.” This means that online content will be presented in different ways depending on the device on which it is being viewed. In other words, a museum’s website may appear different when it is seen on a desktop versus a tablet versus a smartphone. The “responsiveness” of these designs allows online content to be more facile across today’s ever-changing universe of devices. It no longer assumes a superiority of one device over another. This gives a greater breadth of creativity to museums in creating their interface, as well as their other content.
Responsive design is an extraordinarily important technique for museums to embrace. This session will address three aspects of the impact of using responsive design. First, the paper will examine the core of this coding architecture. An institution must carefully examine a variety of code bases before selecting the one that best fits its needs. Second, the session will examine how people’s job roles and responsibilities are impacted by the use of responsive design. In the past, people’s job roles were often quite segregated from one another. Third, the session will review how the use of responsive design impacts the audience of a cultural institution. The digital space continues to grow at impressive rates. In addition, this growth occurs at a relatively rapid rate. Those who tend to rely on technology are used to devices arriving with fanfare, only to be quickly replaced with the “newer and better version.” People are not forced to choose between a smartphone, tablet, and desktop. Instead, people are invited to simply own them all. For better or for worse, responsive design teaches the audience of a cultural institution to expect a more flexible and responsive digital experience overall.
Keywords: responsive design, mobile development, organizational change, audience expectations
1. Introduction
In the world of cultural institutions, an interesting trend is emerging in the digital space. More and more museums present their Web content using “responsive design.” This means that online content is presented in different ways depending on the device on which it is viewed. In other words, a museum’s website may appear differently when it is being seen on a desktop versus a tablet versus a smartphone. The “responsiveness” of these designs allows online content to be more facile across today’s ever-changing universe of devices. It no longer assumes a superiority of one device over another. This gives a greater breadth of creativity to museums when creating relevant user experiences. It is essential for museums to embrace responsive design, but museums must carefully examine a number of important issues:
- How might your technical environment and coding practices be altered?
- How will people’s job roles and responsibilities be impacted?
- How will your online visitors interact differently with your new, responsive website?
2. 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 (bit.ly/1isf5Rc) and Foundation (bit.ly/18yUPaX). At the Getty, we selected Foundation. The two key elements that were attractive to our institution were its flexible grid and 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 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 also use 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 (e.g., Drupal, WordPress). A responsive design codebase, 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 content on a site (images, text, media, etc.) is presented within a grid system. This grid system enables 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 user experience (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 to 75 characters per line are considered ideal. That number drops to 35 to 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 presentation 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.
3. Changing job roles and responsibilities = Effective business solutions
In traditional Web design, a person (e.g., Web developer or writer) completes work and then typically hands it off to the next person in the production line. In this siloed production process, Web developers can be isolated from one another. As a result, any given team member may not reap the benefits from certain types of collective knowledge and expertise that their team has amassed. The use of responsive design disrupts that linear production flow, and the production environment becomes much more iterative. Words and images can convey a much different story when viewed on different types of devices. Because of this, content experts and Web developers need to constantly prototype and evaluate their work throughout all production stages. Writers cannot simply hand off their copy, but now need to review and refine their content as enhancements to the site are made by other team members. Also, the overlying code base allows for production teams to prototype and, thus, user test much more effectively. This promotes an iterative production process and a dynamic, creative work environment. With the introduction of a more dynamic production process, museums can now introduce exciting and innovative production models such as design thinking (bit.ly/1gz4Fyj). As with many technical projects, pre-production is a critical phase of the responsive design process. Now with responsive design, we no longer assume we should create a static experience consumed by a generic audience. Pre-production must be more dynamic, creative, and expansive as we take into account the diversification of our audience’s consumption habits. As a result, many experts are committed and invested in the project in its early stages. Content experts and producers re-architect and optimize their images and their copy. UX specialists evaluate and properly establish the various relevant use cases. Developers prepare and build code elements that can improve visitors’ experiences by optimizing content and layout for a faster, more seamless product. As can be expected, building upon existing production work is nothing new, but within a responsive design environment, a production team is inherently committed to sustaining and maintaining one primary set of code, layout, and content principles. Even more, these production plans carry over to the “live site,” where they promote clearer company branding and improved storytelling. This approach allows for greater consistency and simplicity, which are two critical components of good branding and storytelling.
4. Impact to audience experience = Remaining relevant to your visitors
The digital space continues to grow at impressive rates. Those who rely on technology are used to devices arriving with fanfare, only to be quickly replaced with the “newer and better version.” A person’s portfolio of devices is expanding rather than contracting. People are not forced to choose between a smartphone, tablet, and desktop. Instead, they are invited to simply own them all. Museums should use responsive design to satisfy the growing expectations of a contemporary audience. As we become agnostic as to which platform or device we use, museums need to be aware that their content must be relevant, regardless of a visitor’s location and proximity to their museum. The flexibility of responsive design gives us an important opportunity to engage with and connect to our visitors, regardless of where they are. In early fall of 2013, the Getty launched a new Visit section on getty.edu (bit.ly/2q4g4). Our designers, writers, and engineers took time to evaluate our audience’s needs and expectations. We built a comprehensive (and complex) responsive design system that displays content in a simple, elegant manner across many devices. One of the elements we used to inform our design was statistics concerning our current website.
- Of all visits to getty.edu, 25 percent are from mobile phones or tablets
- On weekends, Web traffic to getty.edu from mobile phones or tablets goes over 36 percent
- On weekends, our Visit section receives almost 50 percent of its traffic from mobile phones or tablets
These statistics helped the Getty initiate an aggressive responsive design implementation plan for our most trafficked areas on getty.edu. As stated, we started with our Visit section, but we are quickly following with our collection pages, exhibition pages, and online calendar. All museums need to be attentive to their users’ needs and expectations. Responsive design should inspire us to investigate the ways in which users consume our online content. Once we understand how devices are conduits to our online product, we can use that information to help us build better online experiences. Along with the Getty’s visit section, two examples of museum responsive designs are the Children’s Museum of Pittsburgh (bit.ly/18yVTvt) and Pacific Standard Time Presents (bit.ly/19fhxFR).
5. Conclusion
Responsive design allows museums to create a more flexible and complex digital experience. This is an enormous opportunity for our field. As geolocating technologies, smart objects, and low-powered beacons continue to become more prevalent, museums will find creative and interesting ways to connect visitors to more relevant, personalized, and engaging content. If you are on the verge of considering responsive design, here are some simple questions that can help you start:
- Could you introduce responsive design to a new site or section of your website?
- What section of your website would be most successful on mobile devices?
- How can you help your content experts tell their stories online, using mobile Web?
It is instructive to look at other industries using the same types of technologies that museums use. For example, industries such as healthcare (e.g., Oakwood Healthcare – bit.ly/Ug1SVr), e-commerce (e.g., Starbucks – bit.ly/1TDQMG), non-profit (e.g., World Wildlife Federation – bit.ly/qoRun), higher education (e.g., Harvard/Index – bit.ly/145rEkH), and data-mining (e.g., QlikTech – bit.ly/gybxTJ) use responsive design in specific and effective ways to improve their businesses. In addition, resources like the New Media Consortium’s Museum Horizon Report (bit.ly/19e8FBD) are invaluable when developing strategic plans. Responsive design has had a positive and measureable impact on the Getty. As we worked to release the new Visit section, it became apparent that our production system, job responsibilities, and online user experience were changing—for the better. Responsive design promotes a sound production model and allows museums to create content that is more accessible to its users. For these reasons, museums should take the time to investigate the benefits responsive design could provide to their institutions.
Acknowledgements
I would like to thank and acknowledge the entire Web Group at the J. Paul Getty Trust. I work with a remarkable group of technologists. I’d like to also specially call out the production team that worked on the Getty’s new Visit section. Mark Stone, Susan Edwards, Will Lanni, Ahree Lee, Kathie Han, and Wes Walker did a wonderful job building an elegant and sustainable Web presence.
Reference
Cousins, Carrie, last updated 13-Mar-2013. Available http://www.adobe.com/devnet/html5/articles/ten-things-you-need-to-know-about-responsive-design.html
Cite as:
J. Ludden, Responsive Design: How Museums Can Thrive in the Universe of Desktops, Tablets, Smartphones, and More. In , N. Proctor & R. Cherry (eds). Silver Spring, MD: Museums and the Web. Published November 6, 2013. Consulted .
https://mwa2013.museumsandtheweb.com/paper/responsive-design-how-museums-can-thrive-in-the-universe-of-desktops-tablets-smart-phones-and-more/