Responsive Design
Responsive Design allows a website to ‘adapt’ to various screen sizes. It frees you from the need to create and maintain separate versions of a single website.
What is Responsive Design?
Responsive Design lets websites ‘adapt’ to different screen sizes without compromising usability and user experience. Text, UI elements, and images rescale and resize depending on the viewport.
Responsive design allows developers to write a single set of HTML, CSS, and JavaScript code for multiple devices, platforms, and browsers. Responsive design is device-agnostic and aligns with the popular development philosophy of Don’t Repeat Yourself (DRY).
But there’s more to it than that. It can be challenging to make an existing site responsive, but the benefits of investing in responsive design early on in a project far outweigh the effort required to achieve it.
This post covers the evolution of responsive design, the basic components that make it work, and a guide to creating and testing responsive web applications.
The Evolution of Responsive Design
In the late 1990s, when browser wars were effectively reaching a (shortlived) end, most users had one browser (Internet Explorer) on one operating system (Microsoft Windows). They had one device (desktop) with screen sizes that were more or less consistent everywhere. Designing websites for these specifications didn’t involve abstracting differences between numerous browser engines, platforms, and devices—it could be done with components of static sizes.
Eventually, web developers began creating components whose dimensions were specified in percentages relative to the viewport. This approach allowed the components to the browser window. This philosophy came to be known as ‘fluid design’.
In 2010, Ethan Marcotte published an article in which he spoke of ‘Responsive Web Design’. The article discussed the variety of devices that readers used to access the web—which meant accounting for screen sizes, browsers, orientations, and modes of interaction while creating content for them. This article changed the way developers approached web design.
Towards the end of 2016, mobile browsing overtook web browsing. This further emphasized the importance of thinking mobile-first when it came to web development.
Today, the market has over 9000 different mobile devices, with their own dimensions and graphics processing capabilities. Google prioritizes mobile-friendly websites in its search results. In 2019, you can not maximize your online reach without a responsive website.
Responsive Web Design: Setting the Scope
Before creating a responsive website, take a look at your target market and audience. The aim is to find out:
- How your users access the web: Look at your site’s traffic analytics and combine the insights with Test on the Right Devices report to find out the top ten browsers/devices in your target market.
- What are the website’s ‘core’ features: These must render uniformly across browsers/devices. Everything else can be improved upon in later iterations.
Responsive Design: The Basics
In this section, we’ll quickly take you through some responsive design basics.
Define a Viewport
The first step is to define a meta viewport tag that tells the browser how to scale and size the content while rendering the page. All the information you want to convey in the meta tag will go into the content attribute. Without the viewport meta tag, a mobile browser will render a page with the dimensions and scale of the desktop version.
-
- The viewport, the window, and the screen
The viewport meta tag is defined as follows:
<meta name="viewport" content="width=device-width, initial-scale=1">
In addition to the initial-scale setting above, you will have to define minimum-scale and maximum-scale to set the minimum and maximum scaling of content.
Once a viewport is defined, you need to modify the elements on your page to fit the viewport. Keep in mind that users expect to scroll vertically and not horizontally.
CSS Media Queries
While resizing the elements of your page, make sure to not assign fixed widths to any element. Relevant content also needs to render in the appropriate order. This is possible when different properties are associated with the same DOM element, depending on the device that the page is rendered on. CSS media queries enable you to do this.
CSS introduced media queries in CSS3. Media queries allow your page to adapt to the viewport. For example, if you have these criteria:
- When device width is less than 640px, font size is 15pt.
- When device width is less than 480px, font size is 12pt.
You can modify your CSS to do this using the media attribute:
/* When device width is less than 640px, change font size to 15pt */
@media screen and (max-width: 640px) {
body {
font-size: 15pt;
}
}
/* When device width is less than 480px, change font size to 12pt */
@media screen and (max-width: 480px) {
body {
font-size: 12pt;
}
}A can load a stylesheet based on the width of the device. This can be achieved in the link tag through the media attribute.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="stylesheet.css" />
In this case, the browser will use the stylesheet.css file only if the screen and device widths are lower than or equal to 640 pixels.
Additionally, you can use the @media keyword in CSS3 to associate specific CSS properties based on screen based filters.
/* For devices with width between 480 px and 640 px */
@media only screen
and (min-device-width : 480px)
and (max-device-width : 640px) {
/* Custom Styles */
}This feature is helpful if you do not wish to create separate files for different screen sizes.
You can also execute media queries based on the orientation of a device using orientation.
@media only screen
and (orientation : landscape){
/* Landscape Styles */
}
@media only screen
and (orientation : portrait){
/* Portrait Styles */
}The orientation attribute is not supported by all devices. That’s why developers use a combination of max-device-width and min-device-width instead.
Optimize Text
Text size can be denoted in absolute terms using px or pt, or in relative terms using em, rem, or percentage.
You can put the text properties within media queries for different viewport dimensions. Some important considerations:
- How many words should there be in a single line, for the smallest device?
- What is the smallest legible text size for a specific scale and viewport?
Responsive Images
You can make images ‘fluid’ by linking the width of the image to the width of the container DOM element. This ensures that the image can resize according to the width of the container element—which itself can change based on the viewport.
Once you have placed an img tag within a container tag, size the images as follows:
img { max-width: 100%; }Keep in mind that this approach has a significant performance overhead, especially on mobile devices. About half the payload of an average web page is because of images. Optimizing your images for mobile device-context can help improve latency. Alternatively, you can write a back-end script that displays the best image file to serve based on device and network capabilities.
Data Tables
When your table contains too many columns to fit smaller viewports, users are forced to scroll horizontally.
One solution is to convert each row into an element and make it responsive. This way, each row is displayed through multiple lines in smaller devices. Another approach is to hide some columns in smaller screens and provide a button which displays the other columns when the user clicks it (by adding a horizontal scroll, but with user’s ‘consent’).
Now that you understand the basics of responsive design, let’s see how it translates to practice today with Bootstrap and pre-designed templates.
Getting Started with Responsive Design
You can quickly start building a responsive website using a CSS3 library called Bootstrap and extending a pre-designed template. Here’s how:
Bootstrap
Bootstrap is a framework that contains HTML, CSS, and JavaScript libraries. It enforces a mobile-first approach and lets you create a responsive website quickly.
To use Bootstrap in your project, import the Bootstrap CSS and JS files
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Bootstrap’s JavaScript functionalities have dependency on jQuery. Before importing Bootstrap’s JS files, import jQuery:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Bootstrap provides a starter template, complete with a viewport tag. The basic premise of Bootstrap’s design is a 12 grid layout that a developer can use while defining DOM elements. These columns are available across screen sizes and define relative widths.
Images in Bootstrap can be scaled to the parent element using the img-fluid class. Screen-specific images can be rendered using the picture HTML element.
Data tables in Bootstrap need horizontal scrolling. To adapt them, use .table-responsive class with .table class to make tables responsive.
Pre-Designed Responsive Templates
Responsive templates allow non-designers to modify existing templates with custom styles. This lets you create entire websites with zero design experience.
The GUI at Wix is a popular option which lets you browse through themes and edit them. W3Schools is another resource that provides themes in various color palettes that you can use and modify.
As you can see, it’s pretty easy to create a responsive website. The real challenge is making sure it actually resizes and rescales to fit viewports across browsers and devices. That’s where responsive design testing comes in.
Responsive Website Testing
Once you have successfully created a responsive website, you need to test to make sure it can:
- Display and align the content consistently.
- Render text legibly on all scales and viewports.
- Keep content (text and images) within their containers.
- Display and resize images as needed.
- Allow users to scroll vertically (or horizontally, as in the case of responsive data tables).
- Let users navigate via links and menus on all devices.
- Scale/resize content based on portrait or landscape orientations in mobile devices.
In a responsive test, start by manually testing the website on various viewport sizes to check if the content scales to fit correctly. To find inconsistencies in colors, fonts, illustrations, etc. you will need to do a mobile responsive test using real mobile devices.
Here are some responsive design testing tools you can use:
Chrome Developer Tools
This is the go-to tool for developers to test and debug responsive websites.
-
- Responsive design testing with Chrome Developer Tools
The tool simulates a range of mobile screen-sizes and orientations to help you see how the layout and elements adapt to different viewports, find and fix errors quickly, and see the changes in real-time.
Responsive Test by DesignModo
Instead of pre-defined screen widths, Responsive Test lets you assess your design on different screen widths for a ‘true’ test of ‘adaptivity’.
-
- Responsive Test by DesignModo
Once you enter the website URL, you can change the width of the screen to see how your UI ‘adapts’ to fit it in real-time. You can switch the orientation and jump to popular device sizes from the menu.
Cross browser testing a responsive design by resizing a browser window is okay, but it doesn’t really tell you how your website will actually look on real devices. Consider this: Some fonts render more ‘weighty’ on Chrome than on Safari. There are also device-and-platform-specific differences that affect rendering, like anti-aliasing (aka smoothing) and screen resolution.
BrowserStack Responsive Tool
Our Responsive tool lets you quickly test your (publicly or locally hosted) responsive websites on real mobile devices.
-
- Responsive by BrowserStack
For a few pages, get started with our Live interactive testing tool.
For a large number of responsive pages, manual testing might not be enough. To catch inconsistencies that your manual testers can miss, automate your responsive testing across real browsers and devices using WebDriverIO with BrowserStack Automate.
To efficiently test for responsive design, check out our The Ultimate Responsive Design Testing Checklist.
