Responsive design

Responsive design is about creating websites and apps whose designs automatically adjust for different screen sizes, from small smartphones to big desktop screens.

Updated on March 21st, 2023


Designers and developers can achieve this by working together. Designers must design with a mobile-friendly perspective, while developers use CSS rules to allow the website to change its design based on the screen size.

Bootstrap is a commonly used framework to support this responsive design collaboration.

Why is it important?

Responsive design is important because it ensures you show your website optimally for each screen size. While most of the daily traffic on the web is on mobile devices, many people are still browsing the same web on tablets and desktops. These devices come in different shapes and sizes, making responsive design even more important.

As designers, your job is to create the best user experience for the product you're working on. This includes allowing people to enjoy the same experience no matter the device they're using. The user experience must be consistent across different touch points (devices).

In addition, Google has recently changed the way its search engine works. Now, a responsive website is essential to have a better search index and rank for your website. Google prioritizes mobile-first websites; it has become the primary way to experience the web.

What to consider when designing a mobile-friendly website

Now that you know what responsive design is, the next step is to put theory into practice. Here's an overview of what to consider when designing a responsive, mobile-friendly website.

Responsive Images

Responsive images are essential because small screen sizes mean that you have to use smaller images as well. These images have to remain readable on all screen sizes.

You can do this by using SVG images, especially for logos and icons. The resolution of this type of image will remain the same at any size.

Never use text that's essential for users to read within your images. Due to the responsive nature of the image, you can't guarantee that your users will be able to read the text on any device.

Prioritize content

Smaller screen sizes have less room for content. Therefore, designers must identify what content must always be visible and what content can be hidden below the fold.

In most cases, a summary or main call-to-action will always be on the screen. It motivates users to keep scrolling and find the rest of your content.

Useful resources

Responsive Design: Best Practices & Examples - UX Pin

Responsive design - Interaction Design Foundation

Responsive Design: Best Practices and Considerations - Toptal



Page link

Want to learn more about Responsive design?

Learn together with other UX designers in our community. Join by picking one of the options below.


  • Same as annual, but billed monthly.


Choose plan


Save 18% compared to monthly

  • 1️⃣ Join our Discord community

  • 2️⃣ Monthly UX Master Classes

  • 3️⃣ Office hours in the community


Choose plan


One purchase. Join forever.

  • Support the development and upkeep of UX Dictionary


Choose plan

Once you choose your plan, you'll be redirected to our Stripe page. After that, you'll be redirected to our dashboard. You can cancel, pause, or upgrade at any time.