computer science

Responsive web design

Responsive web design is a computer science topic covered in the lgStudy science library. This page brings together a partial reference excerpt, illustrations, worked examples, real-world applications and a short study plan, so you can understand Responsive web design rather than just read about it. In short: Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. A responsive design adapts the web-page layout to the viewing environment by using techniques such as fluid proportion-based grids, flexible images, and CSS3 media queries, an…

Key takeaways

Responsive web design belongs to computer science; place it in that map before memorising details.
Learn the definition first, then one example that makes the definition concrete.
Connect Responsive web design to a quantity you can measure, compute or draw — that is where exam questions come from.
Reproduce the core statement of Responsive web design from memory before moving on to harder problems.

Reference excerpt

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. A responsive design adapts the web-page layout to the viewing environment by using techniques such as fluid proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, e.g. width of the rendering surface (browser window width or physical display size). Responsive layouts automatically adjust and adapt to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone. Responsive web design became more important as users of mobile devices came to account for the majority of website visitors. In 2015, for instance, Google announced Mobilegeddon and started to boost the page ranking of mobile-friendly sites when searching from a mobile device. Responsive web design is an example of user interface plasticity.

Challenges, and other approaches Luke Wroblewski has summarized some of the responsive and mobile design challenges and created a catalog of multi-device layout patterns. He suggested that, compared with a simple responsive web design approach, device experience or RESS (responsive web design with server-side components) approaches can provide a user experience that is better optimized for mobile devices. Server-side CSS generator implementation of stylesheet languages like Sass can be part of such an approach. Google has recommended responsive design for smartphone websites over other approaches. Although many publishers have implemented responsive designs, one challenge for responsive design adoption was that some banner advertisements and videos were not fluid. However, search advertising and (banner) display advertising came to support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs have been used for different platforms, or Ajax has been used to display different advertisement variants on a page. CSS tables permitted hybrid fixed and fluid layouts. There have been many ways of validating and testing responsive web designs, ranging from mobile site validators and mobile emulators to simultaneous testing tools like Adobe Edge Inspect. The Chrome, Firefox and Safari browsers and developer tools have offered responsive design viewport resizing tools, as do third parties.

History

The W3C specification of HTML+ stated that websites have to be rendered according to the user preferences. The customization of web page layout was lacking however. Many web developers resorted to ordinary HTML tables as a way to customize the layout and bring some basic responsiveness to their websites at the same time. First major site to feature a layout that adapts in a non-trivial manner to browser viewport width was Audi.com launched in late 2001, created by a team at Razorfish consisting of Jürgen Spangl and Jim Kalbach (information architecture), Ken Olling (design), and Jan Hoffmann (interface development). Limited browser capabilities meant that for Internet Explorer, the layout could adapt dynamically in the browser whereas, for Netscape, the page had to be reloaded from the server when resized. Cameron Adams created a demonstration in 2004. By 2008, a number of related terms such as "flexible", "liquid", "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009. Ethan Marcotte coined the term responsive web design—and defined it to mean fluid grid / flexible images / media queries—in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1. Mashable called 2013 the Year of Responsive Web Design.

Related concepts

Mobile-first design and progressive enhancement are related concepts that predate responsive web design. Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice was to create a basic web site and enhance it for smartphones and personal computers, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones. User interface plasticity is the capacity of a user interface to withstand variations of both the system's physical characteristics and the environment while preserving usability.

Illustrations

Worked examples

Example 1 — a first encounter with Responsive web design

Start with the simplest possible case. Write down what Responsive web design claims or describes in one sentence, then invent the smallest concrete situation in which that sentence is true. In computer science, the smallest case is usually a single object, a single equation or a single measurement. Check that every symbol or term in your sentence has a meaning in that case.

Example 2 — changing one variable

Take the situation from Example 1 and change exactly one quantity: double it, halve it, or set it to zero. Predict what should happen to Responsive web design before you calculate. Comparing your prediction with the result is the fastest way to find out whether you understand the idea or only the words.

Example 3 — an exam-style question

Typical questions about Responsive web design ask you to (a) state it precisely, (b) apply it to given data, and (c) explain a limitation. Practise writing all three answers in under five minutes; the third part is what separates a full-mark answer from an average one.

Applications of Responsive web design

In research: Responsive web design appears in computer science research whenever the underlying quantities have to be modelled precisely. Papers usually cite it as a starting assumption and then explore where it breaks down.
In technology and industry: Engineering practice reuses Responsive web design in design rules, simulations and safety margins. Knowing the idea lets you read a specification sheet and understand why the numbers look the way they do.
In the classroom: Responsive web design is common in secondary-school and first-year university syllabi. It links to neighbouring topics 2010s neologisms, Human–computer interaction, Internet properties established in 2001, so understanding it makes those chapters shorter.
In everyday life: Look for Responsive web design outside the textbook — in sport, cooking, traffic, electronics or the sky above you. An example you found yourself is remembered far longer than one you were given.

Affiliate

Preply — study more efficiently by working with a personal tutor. 50% off.

How to study Responsive web design in 20 minutes

Read the reference excerpt below once, without taking notes.
Close the page and write down what Responsive web design means in your own words.
Compare your version with the excerpt and mark what you missed.
Work through the three examples above with pen and paper.
Explain Responsive web design out loud to somebody else — or to Teacher Smith in the lgStudy chat.

Frequently asked questions

What is Responsive web design in simple terms?

Why does Responsive web design matter?

Because it connects several computer science ideas at once: it gives you a definition you can apply, a quantity you can calculate, and a way to check whether a result is plausible.

How should I study Responsive web design?

Read the excerpt, restate it from memory, then work through the examples and applications listed on this page. The five-step study plan above takes about twenty minutes.

What does this page cover?

It gives you a compact reference excerpt plus original lgStudy explanations, examples, applications and study material on Responsive web design.