Mobile-friendly websites are critical given that smartphones are the most accessible (and often only) way for many applicants to apply for Unemployment Insurance benefits. While many states have true mobile-friendly sites today for claimant applications and continuing claims, there are still those who need to make this available.. According to a Pew Research study titled, “Racial and ethnic differences in how people use mobile technology,” 25% of minority populations have smartphones as their only internet device. 

Using cascading style sheets (CSS) media queries, you can make huge improvements to the mobile-friendliness of your site, often without needing to upgrade your software stack or infrastructure. There are three key steps to this process: 

  1. Define breakpoints to know at what screen sizes will trigger a special kind of rendering. There are typically two breakpoints, one between phones and tablets, and another between tablets and desktops. See Media query example below. 
  2. Define basic style classes for the content on the page, keeping in mind both usability and accessibility 
    1. TIP: If you don’t want to reinvent the wheel, go with an existing design system like the US Web Design system (Use a design system with built-in accessibility and mobile-responsiveness | U.S. Department of Labor (dol.gov)). Robust existing design systems will give you a good starting point for both breakpoints and styles, though you’ll almost certainly have to make additional changes to account for your branding and other styling rules that already exist on the page. You will do that by creating an additional design file (CSS) that overrides and adds onto the base design system. 
  3. Decide whether you are going to add, remove, reorder, or change any content on the page at the same time as you update the styling of existing elements. 
    1. TIP: While many possibilities exist, be judicious with the changes you want to make. For now, the goal is mobile device enablement. Don’t try to do everything now; come up with a roadmap of what changes you’ll make in what order.  

Below is an example of New Jersey improving the mobile experience without upgrading infrastructure:  

Mobile - before

A before view of the NJ UI application on a mobile device.

Mobile - after

An after view of the NJ UI application on a mobile device with improved mobile-responsiveness.

Media query example

The following code snippet shows a few sections of text aligned side-by-side on a page using the CSS flex display property. This works well for wide screens, but appears too narrow on mobile.

<style>
  .container {
    display: flex;
    gap: 1rem;
  }
  .container div {
    background-color: #eee;
    padding: 1rem;
    flex-grow: 1;
  }
</style>
<div class="container">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

To fix this, we can add a media query. The added code in the following snippet translates to "apply these styles if the viewport width is less than or equal to 480 pixels." In this case, we change the container from display: flex to display: block and add some margin around the container's children.

<style>
  .container {
    display: flex;
    gap: 1rem;
  }
  .container div {
    background-color: #eee;
    padding: 1rem;
    flex-grow: 1;
  }
  /* Added media query */
  @media (max-width: 480px) {
    .container {
      display: block;
    }
    .container div {
      margin: 1rem;
    }
  }
</style>
<div class="container">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

With this change, when we cross the 480px breakpoint, our layout changes to be more mobile-responsive. For the example below, the mobile version automatically stacks content vertically to be easy to read on mobile. The pseudo-Latin text is only a placeholder to show visual arrangement of the text.

Desktop

Two side by side text panels showing how these will look on a desktop computer.

Mobile

Two text boxes now arranged vertically to show how they will look on a mobile device

Interested in getting involved? Email the UI Modernization Team

Was this page helpful? Fill out a short survey