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 meta tag is defined as follows:

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.

Test Website Responsiveness

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:

A can load a stylesheet based on the width of the device. This can be achieved in the link tag through the media attribute.

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.

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.

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.

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?

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:

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.

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’).

There are two popular ways to make navigation menus responsive:

• Convert navigation links to a drop-down menu
• Create a hidden menu that is visible only through a swipe/click.

Free Responsive Testing

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

Bootstrap’s JavaScript functionalities have dependency on jQuery. Before importing Bootstrap’s JS files, import jQuery:

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.

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.

This is the go-to tool for developers to test and debug responsive websites.

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.

Instead of pre-defined screen widths, Responsive Test lets you assess your design on different screen widths for a ‘true’ test of ‘adaptivity’.

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.

Our Responsive tool lets you quickly test your (publicly or locally hosted) responsive websites on real mobile devices.

Responsive Checker Tool

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.