Using Responsive Web Design

By Michael S. Finger, PhD

Years ago, it was so easy. Computer-based testing (CBT) meant administering a multiple-choice exam on a desktop computer at a testing vendor’s site. The testing vendor had complete control over the hardware and software used for CBT. Every desktop computer at every test site was identical: same brand, model, CPU, hard drive size, etc. Even the keyboards, mice and monitors were identical. Every one of those desktop computers ran the exact same version of the exact same operating system. When the testing vendor developed their test driver software, their software developers depended on the common specifications of every computer station. 

The good-old days of CBT are gone. These days, certification programs still contend with the standard use case of test delivery to desktop computers. But it can be the case that a testing vendor may have some sites with desktops running Windows XP and other sites with desktops running Windows 7, 8, 10 or even Vista. And the increasing adoption of Apple computers — whether it be Apple’s iMac desktop computer or their MacBook laptops — increases the need for test driver software to be Mac-compatible. Regardless of whether a computer is running a Windows or Mac operating system, there’s still the issue of screen size, which ranges anywhere from 12 to 30 or more inches across the spectrum of laptop and desktop monitors. Or maybe at an event testing at a conference, candidates need to take a certification exam on Google Chromebooks or tablets, such as Apple iPads, Samsung Galaxy Tablets or Microsoft Surfaces. And that still doesn’t cover the use of smartphones, which can range in screen size from four inches small to over six inches large.

Responsive Web Design

The solution to presenting the same exam content on various devices with varying screen sizes lies with the web. Exam content is authored as hypertext markup language (HTML) and cascading style sheets (CSS) and presented in a modern web browser. These web browsers include Firefox and Chrome, both of which are available on nearly all desktop computers, laptops, tablets and smartphones. 

When authoring exam content, the trick is to incorporate the general principles of responsive web design. Responsive web design makes it possible for web content authored in HTML and CSS to adapt itself dynamically to the screen size of the device that’s displaying the content. The day is already upon us when candidates can take remote-proctored certification examinations on their 60-inch TV from the comfort of their couches. 

Before going any further, it’s worth noting that all the usual security considerations with CBT delivery of high-stakes certification examinations are the same, whether exam content is delivered using a standalone test driver application or using a web browser. And all the usual ways test security is addressed is largely the same for browser-based delivery of exam content, including the use of specialty software to lockdown the computer or device, setting the parental controls and internet restrictions on the computer or device, and in-person or remote proctoring.

What Is Responsive Web Design?

At a conceptual level, the basics of responsive web design are straightforward and don’t require any background in computer science to understand. 

The term responsive web design originates from Marcotte (2010), in which the following more technical definition is given: “Design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.” In other words, the on-screen layout of content in the browser is tailored to whatever the screen size is for the device displaying the content. While definitions are good, examples are sometimes better. 

Two examples of responsive web design follow. The web content used in the first example is very simple. The web content in the second example is a disclosed science exam essay item from the National Assessment of Educational Progress (NAEP, 2015).

Example 1: A Basic Web Page

The two screenshots in Figure 1 show the same web page displaying three rectangles. Screenshot (a) shows the web page displayed on an iPad. Screenshot (b) shows the same web page displayed on an iPhone. The contents of this basic web page were authored in a way that incorporates responsive web design.                                             

Notice that when the screen is wide enough, as on the iPad, all three rectangles appear next to each other horizontally, forming a single row. When the screen isn’t wide enough, as on the iPhone, the three rectangles are presented vertically in a single column. The layout of the three rectangles is flexible and adapts to the width of the screen, thanks to the implementation of responsive web design in the authoring of the web page’s content in HTML and CSS.

Example 2: An Essay Item from the NAEP Science Exam

The second example is a disclosed essay item from the 2015 NAEP science exam for grade 12. Figure 2 contains a screenshot of the essay item as it would appear on a standard 13- or 15-inch laptop screen. Notice that the item has some setup information: three paragraphs of text and a line chart. Both the text and the line chart are displayed next to each other horizontally.

The screenshot in Figure 3 shows how this item would appear on a narrower screen without the implementation of responsive web design. As shown, without response web design, the item content doesn’t adapt to the screen size. A candidate would need scroll the contents of the item back and forth in order read the entire item.

Now, suppose that responsive web design was implemented in the authoring of the item. The placement of the line graph could adapt to the width of the screen. When the screen is wide enough to show the all the setup text and the entire line chart side-by-size, the item appears as in Figure 2. When the screen isn’t wide enough, the layout of the page adapts and the line chart is presented directly underneath the setup text, as the screenshot in Figure 4 demonstrates.

Conclusions

Responsive web design is a general approach to authoring web content that adapts in layout and style to the size of the screen on which the web content is viewed. Certification examination content is authored in HTML and CSS, incorporating responsive web design. When the exam content is delivered via web browser (such as with a browser-based test driver), the exam content can dynamically adapt the presentation of each exam item to the size of screen. The HTML and CSS programming and software development aspects of responsive web design were outside the scope of this article. But the concept of responsive web design was introduced and demonstrated to raise awareness of this emerging trend in web development for those in the certification industry who lack a technical background. 

For those interesting in learning more about HTML and CSS, the w3schools website is an excellent starting point for beginners. Additionally, the Mozilla Developer Network contains an extensive number of beginner, intermediate and advanced tutorials on many different aspects of web development.

References

Marcotte, E. (2010, May 25). Responsive web design. A List Apart: For People Who Make Websites, 306. Retrieved from http://alistapart.com/article/responsive-web-design.

National Assessment of Educational Progress (NAEP). (2015). Grade 12 Mathematics, Reading, and Science Sample Questions. Retrieved from http://nces.ed.gov/nationsreportcard/about/booklets.aspx.