As a business, are you aware that the majority of web traffic comes from mobile devices? Yet still,
businesses do not take the effort to optimise their web pages for different screen sizes, resolutions
and orientations. With the increased number of different devices and resolutions, it’s near
impossible for a business to create web designs for every device on the market (phones, tablets,
kindle, desktop, laptop, games consoles and even smartwatches). But – that doesn’t mean the webpage shouldn’t be accessible to all of them.
What is Responsive Web Design
Responsive web design was originally defined by Ethan Marcotte in ‘A List Apart’ :
“Now more than ever, we’re designing work meant to be viewed along a
gradient of different experiences. Responsive web design offers us away
forward, finally allowing us to “design for the ebb and flow of things.”
He simply states the importance for web design is to respond to the needs of the users; through
the devices, they’re using, the installed fonts on their device, the screen resolution and many other
intangible aspects. So, the solution: instead of creating different web pages under different
subdomains, create one which is flexible. One which can adapt and be suitable for anybody using any device.
There is “more than 4 devices for every human on earth.”
The Three Technical Ingredients for Responsive Web Design
Marcotte explains how “flexible designs make no assumptions about a browser window’s width,
and adapt beautifully to devices that have portrait and landscape modes.” When fluid grids are
created using CSS, the columns on a web page automatically adjust to fit the screen size of the
device being used. This is beneficial in maintaining a consistent theme and image across all devices and means only one web page is needed.
2. Flexible Images
Marcotte discovered that images displayed on both smaller and larger dimensions and resolutions
than what they were created to become illegible. As most websites are designed on a computer,
these images normally appear fine on a normal desktop, but when reduced down to a phone
screen become cropped, and even when expanded to a larger dimension they grow to “unwieldy sizes”.
The way to overcome this? By changing the columns, as well as the dimensions of the image, this can be easily adapted through the use of an image cropping tool. As different devices have different
dimensions, by using code to prevent media files from exceeding the dimensions, more columns
can be created. For example, when the dimensions fall below 400px (say, a phone screen), the
image layout can change from a three-column layout to a two-column layout (as shown).
Images by Ethan Marcotte
3. Media Queries
As explained by Marcotte, “a media query allows us to target not only certain device classes but to
actually inspect the physical characteristics of the device rendering our work.”
Media queries allow developers to make sure the web pages are suitable for the device’s dimensions. For example:
Media= “screen and (max-device-width: 480px)”
This piece of code is asking the device if its “horizontal resolution is equal to or less than 480px.” If
the device’s horizontal resolution is equal or less than 480px, then the device will load the web page applicable for that device.
Now we’ve run through the basics of responsive web design, let’s look at some popular examples:
Labelled as “the first artist-owned global music and entertainment platform”, Tidal has a really
good example of responsive web design. The size and location of the text change when
viewed on a desktop, tablet and mobile phone. The images differ from all three user devices and
the ‘start free trial’ button is changed for the best location for each device. The search bar at the
top condenses into a drop-down menu when on a smaller device to accommodate for smaller
Everybody’s (statistically speaking) favourite fast food! McDonald’s attempt of responsive web
design is impressive. The main banner image changes size and layout depending on the user’s
device. Notice how the arrangement of images, background text and foreground text changes from
mobile, to tablet, to desktop. Similar to tidal, the navigation is condensed into a clickable drop-down menu due to the restricted space on a smaller device.
The richest company in the world. Apple’s website is a prime example of responsive web
design. Notice the major difference of the images from the three different screen sizes. This
enables customers to have the best view of their products no matter what device they are using.
When the mobile phone is turned landscape, the images alter to the ones shown on the tablet
and desktop. Yet again, the navigation is simplified into a drop-down menu for the mobile screen.
Ethan Marcotte was a pioneer in the development of responsive web design, and his work has
never been more relevant than today. With the number of devices increasing yearly, and the
number of web searches completed on different sized devices increasing every day, a responsive
website is critical to reaching customers, no matter how they are searching for you.