A01 chaf6542 06 se fm indd

Responsive design

Layout and formatting 

of website content is 

modified at the point of 

rendering to suit different 

screen resolutions and 

capabilities to produce a 

better experience to users 

of a range of desktop, 

tablet and smartphone 

devices using web 

development methods 

like CSS and image 

scaling.

Figure 11.21

Responsive design showing updated layout for different content blocks

Source: Author.

M11_CHAF6542_06_SE_C11.indd   564

7/23/14   1:27 PM

---

565

Chapter 11  Analysis and design

Responsive design is an increasingly popular approach to building mobile sites since 

it enables a single version of the site and content to be maintained which adapts for 

different resolutions. It was formerly called a ‘fluid design’ since the layout ‘flows’ as 

resolution is changed (as you change the size of a browser, for instance). Contrast this 

to what we often see when browsing using a smartphone on a  non-  responsive site: tiny 

text and difficult to select buttons and navigation which require us to zoom in to select 

the next page.

Technically speaking, responsive design uses cascading style sheets, in particular an 

approach called 

Media Queries

 (Worldwide Web Consortium, 2013) to specify how the 

page is laid out based on device type and resolution. See, for example, Knight (2011) for 

an introduction to the technical approaches. This will produce an improved experience 

for users across a range of devices, but there are limitations such as break points where 

less common devices may not be supported or sites which aren’t ‘upwardly responsive’, i.e. 

 high-  resolution displays, may be less well supported than lower resolution. Responsive 

design disadvantages include its being more technically complex to implement and test, 

which leads to higher costs and a larger codebase (particularly of style sheets) to load, which 

can harm page load times. Despite this, it is now implemented for many new sites and site 

redesigns. The disadvantages of responsive design can be overcome at cost through adap-

tive design.