This document aims to help Korean users who are learning Framer resolve difficulties due to a lack of Korean resources by translating content from the official blog and adding practical information. We hope it serves as a small support to those using Framer.

The era of pinch, zoom, and horizontal scrolling on mobile is gone. Today’s users expect smooth experiences on mobile devices. This article demonstrates how Framer enables a perfect user experience without code modifications.

The Evolution of Responsive Design

Responsive web design refers to websites that automatically adjust to fit any device or browser. Whether using a smartphone or a desktop computer, customers can enjoy a consistent experience.

In the early days of responsive design, web designers would start with the desktop version and then adjust the design for mobile and tablets. Using breakpoints for desktop, mobile, and tablet remains a core concept of responsive design, but today, the variety of device types makes designing for every resolution impractical.

In 2018, 23% of users were using the most popular resolution (360x640), but now, no single resolution holds more than 8% of the market share.

Source: Statcounter

One alternative is auto-resizing with stacks. By converting designs into stacks, layouts automatically adjust to changes, eliminating the need to manually adjust breakpoints. Tools like fluid grid layouts, relative positioning, responsive images, and typography can be used in this environment.

Creating Responsive Websites with Framer

Discover the various features Framer offers to make implementing responsive design more intuitive.

1. Start with Wireframes

Creating wireframes with Framer differs from traditional design tools. Instead of creating mockup frames that need to be rebuilt later to fit various screen sizes, Framer’s components are built to be responsive from the start.

The platform’s component library includes pre-built elements that automatically adapt to different screen sizes.

• Navigation can automatically transform to fit mobile views

• Hero sections can automatically adjust to fit screen sizes

• Content blocks can rearrange to fit available space

Consider the following when building wireframes.

• Make navigation simple and intuitive

• Think about what users should see first and focus on content hierarchy

• Consider how elements stack and rearrange on small screens

• Use Framer’s built-in components to speed up the process

Starting with basic content blocks and gradually adding complexity is recommended.

This allows you to focus on the structure and hierarchy of the design without being bogged down by technical specifics. Additionally, navigation varies greatly between mobile and desktop environments, so it’s advisable to create different versions for different screen sizes easily using Framer.

2. Setting Breakpoints: The Basics of Responsive Design

Breakpoints are crucial in responsive design. However, anyone who has worked with CSS media queries knows, breakpoints can be tricky. Something that looks good at exactly 768px might break at 767px or 769px.

Framer makes this technical process intuitive and visual. For instance, Framer’s breakpoint editor lets you drag handles to set breakpoints and see design changes in real-time. Also, Framer’s responsive preview mode allows you to instantly check how designs look across different screen sizes.

One of Framer’s most powerful features is automatic application of changes when breakpoints adjust. Here’s how it works: when you change the base layout, those changes are automatically applied to other screen sizes, significantly reducing repetitive tasks.

3. Approach Mobile First

With 61% of web traffic coming from mobile, designing desktop-first is no longer practical. Instead, design for mobile first and then adapt for desktop later. Designing for small screens forces you to strategically decide what to include from the early stages to avoid running out of space later.

With Framer, you can easily set mobile as the base layout, then progressively enhance designs for larger screens. Consider the following.

• Expand single-column layouts to multiple columns

• Show additional content on larger screens

• Add more complex interaction features for desktop users

• Transform mobile navigation to be desktop-friendly

• Adjust typography size per screen for better readability

• Optimize image layout and cropping to suit different screen sizes

Navigation in mobile responsive design is one of the trickiest parts but can be easily managed with Framer. Mobile patterns like hamburger menus or bottom navigation bars can be seamlessly transformed into full menus on desktops, maintaining brand consistency and user experience.

4. Creating Fluid Grid Layouts

Framer's Grid feature provides an intuitive approach to responsive grids. Utilizing auto layout features handles gaps, maintains consistent spacing between elements, adjusts layout sizes, and tackles several common responsive design issues automatically.

Using Framer's grid system allows you to:

• Specify the number of columns per breakpoint

• Adjust how elements expand across columns

• Manage flow and resizing of elements

• Automatically adjust spacing

One of the most powerful aspects of Framer’s grid system is its ability to handle dynamic content such as CMS collections, user-generated content, and dynamic images. When new items are uploaded, Framer's grid maintains the layout as initially designed.

5. Utilizing Stacks and Relative Positioning

While grids handle overall page structure, Framer's stacks manage how elements relate to each other within that structure. Stacks are intelligent containers that automatically handle spacing and alignment between elements. You can arrange elements horizontally (rows) or vertically (columns), and stacks maintain appropriate spacing even when screen sizes change.

The key is relative positioning. Instead of fixing elements to specific coordinates, using stacks allows elements to adapt their positioning based on the container and adjacent elements.

Common use cases for stacks include:

• Navigation menus that seamlessly transition between desktop and mobile

• Card layouts with consistent spacing regardless of content

• Form interfaces where inputs and labels align perfectly

• Content sections that apply cleanly to all screen sizes

The true power of stacks is realized when they are nested. By combining horizontal and vertical stacks, you can create sophisticated layouts with each stack having its own auto-layout properties like "container fill" and "content wrap". Learn more about the differences between stacks and grids at Framer's Academy.

6. Optimizing Images and Typography

Framer's responsive image approach goes beyond simple resizing. It optimizes image delivery through delayed loading, automatically generates responsive image source sets, and uses automatic cropping tools to focus on important parts during image scaling.

Framer's tools help ensure images look great at any size by:

• Providing appropriate image sizes for various devices

• Using SVGs where possible for crisp scaling

• Offering adjustable positioning and sizing

• Providing suitable image sizes per device

• Supporting sharp scaling with SVG

• Offering lazy loading and dynamic cropping features

Framer's typography system lets you manage font size, line height, and spacing across different breakpoints. It also optimizes font loading to prevent layout shifts, maintaining text readability even while custom fonts are loading.

To avoid responsive design issues, you can set fluid font sizes that expand smoothly. Additionally, activate minimum and maximum sizes to prevent text from becoming too small or large. Framer's text fitting feature allows you to design attention-grabbing headers and paragraphs that adjust their size to fit the browser or section.

Responsive Testing Before Launch

Framer offers two powerful ways to test site responsiveness before launch.

1. Preview Mode: Use the built-in preview mode to check designs across multiple devices without leaving the editor. Instantly check different device environments within the editor

2. Testing on Real Devices: Share your designs using Framer’s links to test them directly on smartphones, tablets, monitors, and more across various environments. Conduct design work across various smartphones, tablets, and monitors to ensure functionality works as expected before unveiling a new website.

Creating Beautiful Websites on All Screens

Responsive web design has become essential, and Framer provides tools to easily implement it. Instead of static layouts, create flexible and scalable websites.

Explore Framer’s templates to start with responsive design. Visit the gallery to see responsive websites created by others, and sign up for a free Framer account to start building responsive websites today.

This article is adapted and translated from Framer's official blog post ‘How to design responsive websites without code’.