Overview

Skill Level: Any Skill Level

Ingredients

Responsive design has become a standard expectation for modern sites and applications. Users want to be able to easily and consistently access content regardless of which device they’re using. This flexibility is relatively easy to accomplish in simple sites with low interactivity. More complex sites, however, require you to adapt your site or application’s JavaScript (JS) accordingly. 


In this article, you’ll learn what responsive design is and what role JS plays in creating it. You’ll also be introduced to a variety of tools that can help you easily and effectively design responsive sites and applications.

Step-by-step

  1. What Is Responsive Design?

    Responsive design is a method of designing sites or applications that dynamically adjusts content based on device specifications. The purpose of responsive design is to make sites and content functional and accessible regardless of device specs or size. You can use responsive design to customize displayed content to a variety of devices, including tablets, smartphones, and laptops. 

    Typically, responsive sites send the same HTML to all devices and then manipulate that HTML using CSS and JS. This manipulation can involve resizing, hiding, moving, or replacing elements. 

    Responsive design in regards to JS impacts how a site functions based on device specs. For example, you can switch between the use of modal windows (i.e. pop-ups) or animations. To accomplish this, you need to manage both conditional logic and attribute toggling functionalities.

  2. Using JS in Responsive Design

    While you can design a responsive site using just HTML and CSS, your functionality is limited. Using JS, you can more efficiently and effectively alter images and text as well as customize media rendering and site behavior. For example, JS can enable you to dynamically decide which ad or image resolution to show.

    There are several ways of incorporating JS into responsive design. The two primary methods are JS-adaptive design and combined detection.

    JavaScript-Adaptive Design 

    Using this method, all devices receive the same site data and only the rendering or behavior is altered. JS-adaptive design works similarly to CSS with media queries. In this method, device detection occurs in the JS and then attributes are changed accordingly. This method is the one Google recommends using.

    Combined Detection

    Using this method, JS device detection determines what content is served. You use JS methods to detect device specs and send that information to your web server. The server then modifies the code that is sent to the device. In combined detection, different HTML is served to different devices.

    A variation of combined detection is the dynamically-served JS method. In this method, the same HTML and CSS are served to all devices but JS is served differently depending on the device.

  3. Responsive Design Frameworks

    Frameworks are the fastest way to incorporate responsive design into your sites and applications. Frameworks can provide you with templates, libraries, and guidelines for building a consistent site or app.

    Bootstrap

    Bootstrap is an open-source framework designed for responsive, mobile-first development. It is the most popular framework and includes a variety of pre-built templates and functionalities.

    Bootstrap is based on a combination of HTML, CSS, and JS. Using it requires jQuery, Popper.js, and Bootstrap JS plugins. You can either download the framework and host it yourself or include it from a Content Delivery Network (CDN), like MaxCDN. If you include Bootstrap from a CDN, you might get faster loading times since users may already have it in their cache from another site.

    Foundation

    Foundation is an open-source, mobile-first framework for responsive design. It includes a variety of pre-built templates and functionalities. You can also customize Foundation with your own JS plugins built from its publically accessible libraries.

    Foundation is based on a combination of HTML, CSS, SASS, and JS. Using it requires jQuery. To use Foundation, you need to download and self-host the framework.

  4. Responsive Design Libraries

    Individual libraries can provide you an easy and fast way to add responsive functionality to your sites and applications. 

    Intention

    Intention is an open-source library designed to reduce reliance on media queries-based overrides. It works by manipulating the Document Object Model (DOM) through HTML attributes. Intention enables you to dynamically adjust the attributes, classes, and placement of your HTML elements.

    SimpleStateManager

    SimpleStateManager is an open-source library that enables you to easily add JS methods for entering, leaving, and resizing responsive states based on browser width. With this library, you can add an unlimited number of states with overlapping code for minimal duplication. You can extend SimpleStateManager through plugins for geolocation and touch.

    styled components

    styled components is an open-source library you can use to incorporate CSS styling into JS components. It works by combining tagged template literals in JS with CSS styling. This library also enables you to use style objects to port CSS from inline styles. Style objects are JS objects with CSS styling coded as properties.

  5. APIs for Responsive Design

    The following APIs and API methods can provide useful data about user devices and conditions. This data can serve as a guide for how site data and styling should be manipulated.

    Media Queries API Methods

    There are two methods you can use to perform media queries from JS. The Window.matchMedia method enables you to test the current state of a window. The MediaQueryList.addListener() method notifies you when a media query state changes. Alone or in combination, you can use these methods to initiate scripts, resize elements, or serve different media. 

    Page Visibility API

    The Page Visibility API enables you to know if your page is currently being viewed (i.e. if it is the active tab in a browser). This information enables you to pause communications and processes when a page is not active, saving resources and bandwidth. For example, you can pause live-updating or audio playback when a user moves to a different tab.

    Device Orientation API

    The Device Orientation API provides methods that enable you to access device gyroscope and compass data. You can access both orientation change or device movement events. You can use these events to trigger resizing or activation of scripts. This API is particularly useful for mapping, altered reality, or gaming applications.

    Navigation Timing API

    You can use the Navigation Timing API to gain information related to website performance. This information includes page load times, request/response delays, and load handler times. 

    You can use the data provided by this API to scale media up or down and selectively load elements for certain devices. The benefit of this API is that it is often more reliable and accurate than libraries offering similar functionality.

  6. Conclusion

    Although responsive design technically only uses HTML and CSS, you should not ignore the JS components of your sites when designing. To build a truly responsive and device-customized user experience you need to adapt your JS scripts accordingly. JS also enables you to more finely control your design and incorporate responsiveness in real-time.

    Hopefully, this article helped you better understand what tools are available to you for incorporating JS in responsive design. The tools introduced here should enable you to quickly and consistently build responsive sites, providing a better experience for your users.

Join The Discussion