Designing Responsively

Responsive design shown across various device viewports

Modern designs prioritize being flexible and adaptable without any restrictions. With the wide variety of devices available in different sizes, especially with most people using mobile devices for information, responsive design is crucial. Responsive design comes with numerous benefits and involves implementing best user experience practices. This ensures that users enjoy a seamless and consistent experience, regardless of the type of device or screen they are using.

Responsive Design Explained

According to the Interaction Design Foundation, “Responsive design is an approach to web design in which the interface adapts to the device's layout, facilitating usability, navigation, and information seeking. Responsiveness is possible thanks to media queries, allowing the design to adjust automatically to the browser space to ensure content consistency across devices, and design elements being sized in relative units (%).”

Responsive design is essentially comprised of a few basic principles:

1. A fluid grid system

2. Media queries

3. Flexible content

Fluid Grid Systems

Columns, gutters, and margins as demonstrated in Material Design 3

A fluid grid system is a structure for consistent, clean layouts comprised of columns, gutters, and margins. When designs conform to this system, they are set up in such a way that they can transition nicely between device breakpoints.

Generally, 4 columns are used for mobile, 8 for tablet, and 12 for desktop using percentages for responsiveness rather than fixed values so that content adapts across various screen sizes. Content is placed and aligned in columns and spaced apart by gutters.

Media Queries

Media queries use CSS to render content to be adaptable to a variety of factors such as resolution, orientation, or screen sizes.

Breakpoints are used in media queries as a condition that changes the layout of a page for certain display sizes. The media queries overwrite styles that are changed by the breakpoint, specified by pixel values. It is recommended to start with the smallest viewport size and work up to the largest when designing for breakpoints - XS (no breakpoint/starting place), S (mobile), M (tablet), L (desktop), XL. Three of these S-M-L are generally required by default. Additionally, there are five viewports to consider:

1. Mobile portrait

2. Mobile landscape

3. Tablet portrait

4. Tablet landscape

5. Desktop

Flexible Content

All content needs to be flexible to respond to the different breakpoints and device sizes. Containers, images, text blocks, cards, and more should be considered and designed flexibly.

To demonstrate flexible content, we created a YouTube short video that shows how to create a responsive card. Check it out here.

benefits of responsive designs

Beyond the obvious benefit of having an optimal seamless boundaryless user experience regardless of the device used, there is a bevy of other potential benefits as well, such as:

• Improved SEO

• Increased time on the site or platform

• Return visitors

• Less time and resources spent fixing issues in development (when designing for responsiveness up front)

• Better interaction

• Increased sales

• …and more

Consider UX Design Principles

When designing for responsiveness, here are some UX considerations:

1. Mobile-first mentality - start with XS and work up from there

2. Design for 3 or more breakpoints

3. Apply consistent design patterns

4. Use a grid system

5. Don’t over-clutter - stick to simple, minimalistic designs

6. Use auto layout and minimum width constraints for wrapping (see our video for steps)

7. Apply flexibility to all content - images, text blocks, containers, cards

conclusion

In conclusion, flexible designs are imperative to meet the diverse demands of users across an array of devices. As mobile devices continue to dominate the landscape of information consumption, responsive design is more necessary than ever before. By embracing a fluid grid system, employing media queries, and incorporating flexible content, responsive design becomes not just a methodology but a commitment to delivering a seamless user experience.

Apply these responsive UX principles and get savvy!

Citations

1. Interaction Design Foundation - IxDF:

   • Source: Interaction Design Foundation - IxDF. (2016, June 3). What is Responsive Design? Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/responsive-design

2. Seobility:

   • Source: Seobility. (n.d.). Media Queries. https://www.seobility.net/en/wiki/Media_Queries

3. Kinsta:

   • Source: Author Last Name, Author First Initial. (Year, Month Day). Title of the Article. Kinsta. https://kinsta.com/blog/responsive-web-design/