Responsive Design

“Think of responsive design like a fluid container that automatically adjusts its shape to fit any shelf you place it on. Whether the shelf is wide, narrow, tall, or short, the container reshapes itself to fit perfectly, ensuring it always looks good and works well, no matter the dimensions of the shelf.”

Responsive design is about creating web pages that look good and function well on a variety of devices and screen sizes. This often involves changing the design so that it does not look exactly the same everywhere but provides the best path to the page functionality everywhere.

Adaptability: Responsive design adapts the layout and content to the user’s screen size, ensuring usability and readability. This means a website will look and function optimally whether viewed on a smartphone, tablet, laptop, or desktop monitor.
Fluid Grids: Responsive design uses fluid grids that proportionally scale based on the size of the screen. Unlike fixed layouts, which have a set width, fluid grids allow elements to resize in a relative manner.
Flexible Images: Images in a responsive design adjust within their containing elements, scaling up or down as needed to avoid breaking the layout.
Media Queries: These are CSS techniques that apply different styles depending on the screen size or device characteristics. Media queries help deliver a tailored user experience by adjusting fonts, colors, layouts, and other elements based on the device being used.
User Experience: The primary goal of responsive design is to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling.

To help him visualize this, there are some examples of well-designed responsive sites on different devices and point out how the layout changes to fit the screen while maintaining usability and aesthetics below.

Responsive design is about adaptability and enhancing the user experience across various devices, not about making the design look identical everywhere.

Viewport Size Matters More Than Device Type

Analogy: “Imagine that various rooms in your house all have a ‘whoopsie cupboard’ for small accidents. Each room has a cupboard that is a different size and you need to organize each cupboard with items that fulfill the same essential functions (i.e. bandaids, hydrogen peroxide, iodine). To get everything you need in each cupboard, you need to rearrange the shelves and items to fit each specific cupboard size (perhaps change the layout around items that cannot be resized, like iodine, or put a smaller box of bandaids in to make it all work), making the essential items easily accessible no matter which cupboard you are using.”

We often talk about different device types (like iPhones and iPads), but the key aspect of responsive design is actually the viewport size, not the specific device.

Viewport Size vs. Device Type: Responsive design focuses on the size of the screen (viewport) rather than the type of device. This is because different devices, even within the same category (like iPhones), can have different screen sizes and resolutions.
Example with iPhones: Let's look just at iPhones; they have different screen sizes and resolutions. For instance, the iPhone SE has a smaller screen compared to the iPhone 12 Pro Max. Responsive design ensures that both these devices display the website appropriately, tailored to their respective screen sizes.
Adapting to Screen Size: This is where the CSS media queries are used to apply different styles based on the viewport width. This way, the design adapts to small screens (like phones), medium screens (like tablets), and large screens (like desktops), ensuring optimal usability and aesthetics on each.
Visual Demonstration: The trick where you resize your browser shows how a responsive website adjusts the layout as you make the window smaller or larger, simulating different screen sizes. (See note below about this method.)
Consistent User Experience: The goal is to provide a consistent and user-friendly experience across all devices, which means making adjustments to layout, text size, images, and navigation based on the viewport size.

Responsive design is about flexibility and adaptability to various screen sizes, ensuring a good user experience across all devices.

Guidelines for Small Viewports

“Think of it like trying to press a small button on a TV remote control. If the button is too small or too close to other buttons, it’s easy to press the wrong one. Similarly, on a mobile device, buttons need to be large enough and spaced out to ensure users can tap them accurately.”

To ensure a great user experience on smaller viewports, especially mobile devices, it’s essential to follow some general guidelines.

Touchable Targets:
- Button Size: Make sure buttons are large enough to be easily tapped with a finger. The recommended minimum size is 44×44 pixels.
- Spacing: Provide adequate spacing between touch targets to prevent accidental taps. A minimum of 8-10 pixels of space around buttons is a good practice.
Readability:
- Font Size: Use a base font size of at least 16 pixels to ensure readability without zooming.
- Line Height: Increase line height to around 1.5 to improve text readability.
Layout Adjustments:
- Single Column Layouts: Use single-column layouts for small screens to make content easier to read and interact with.
- Avoid Horizontal Scrolling: Ensure all content fits within the viewport width to avoid horizontal scrolling.
Button Design:
- Shape and Size: If using pill-shaped buttons, ensure they are tall enough to be easily tapped. Consider making them taller on mobile devices compared to the desktop version.
- Contrast and Visibility: Ensure buttons have high contrast and are easily visible. Use distinct colors for buttons to make them stand out.
Navigation:
- Simplify Navigation: Use simple and easily accessible navigation menus. Consider a collapsible menu (hamburger menu) for small screens.
- Sticky Navigation: Implement sticky navigation bars to keep important actions easily accessible.
Content Prioritization:
- Show Essential Content: Prioritize and display essential content first. Hide or collapse less critical content to reduce clutter.
- Readable Forms: Ensure form fields are easy to interact with. Use appropriate input types and larger input fields.
Responsive Images:
- Optimize Image Size: Use responsive images that adapt to different screen sizes. Optimize images for faster loading times on mobile networks.
Testing:
- Cross-Device Testing: Test the design on multiple devices and screen sizes to ensure a consistent and user-friendly experience.
- User Feedback: Gather feedback from real users to identify and address any usability issues.

Note about Resizing the Browser Window

“Think of it like a play where the stage crew changes the set between scenes. If you watch closely during the transition, you might see things out of place. However, the audience only sees the final set for each scene, which looks perfect. Similarly, users only see the final layout at each breakpoint, not the transitional states.”

When testing responsive design by resizing the browser window, it’s important to understand that some “funky” layouts can appear at certain viewport sizes that most users will never see. Here’s why that happens and what is going on.

Understanding Viewport Breakpoints

Breakpoints Defined: Responsive design uses breakpoints to define specific viewport widths where the layout changes. These breakpoints are chosen based on common device widths to ensure the site looks good on most screens.
In-Between States: As you resize your browser window pixel by pixel, you may encounter in-between states where the layout looks odd. These states occur just before or after a major breakpoint, where the design transitions from one layout to another.
Real-World Usage: Most users will access the site on standard device widths, such as those of popular smartphones, tablets, and desktop monitors. They won’t see the in-between states because their device screens fall within the defined breakpoints.
Minimizing Funky Layouts: While designers strive to minimize these odd layouts, it’s not always possible to eliminate them entirely. The goal is to ensure the site looks and functions well at the breakpoints that matter most.

Practical Testing

Test on Real Devices: Emphasize the importance of testing the site on actual devices or using responsive design tools that simulate these devices. This provides a more accurate representation of how users will experience the site.
Key Breakpoints: Focus testing on the key breakpoints, such as:
- Small screens (320px – 480px) for smartphones
- Medium screens (481px – 768px) for tablets
- Large screens (769px – 1024px) for small laptops
- Extra-large screens (1025px and up) for desktops
Avoid Pixel-by-Pixel Resizing: Explain that moving the browser window pixel by pixel can reveal transitional states that are not representative of typical user experiences. It’s more practical to focus on how the site performs at common viewport sizes.

Addressing Concerns

Usability Focus: The priority is to ensure the site is usable and attractive at the viewports most users will see. Transitional states are less critical as they don’t affect the overall user experience.
Iterative Improvements: While it’s important to catch and fix layout issues, focusing too much on transitional states can lead to unnecessary complications. A balanced approach to testing and fixing layout problems is more effective.

Here are a few examples of well-designed responsive websites, particularly those that excel in sign-up and payment forms:

There first two have sign up / payment pages you can experment with a bit –

1.Stripe Checkout – https://checkout.stripe.dev/	2.PayPal demo – https://demo.paypal.com/us/demo/home
Why It’s Good: Stripe Checkout’s forms are highly responsive, providing a seamless experience across devices. Their forms are clean, straightforward, and easy to navigate, with large touch targets and clear instructions.	Why It’s Good: PayPal offers a responsive design that works well on any device. Their sign-up and payment forms are designed with usability in mind, featuring large buttons, clear labels, and accessible form fields that make transactions easy and secure on mobile.

3. Airbnb

URL: Airbnb
Why It’s Good: Airbnb’s site adapts beautifully to different screen sizes. Their sign-up and booking forms are user-friendly, with a step-by-step process that works well on both desktop and mobile devices. Buttons and form fields are appropriately sized for touch interaction.

4. Dropbox

URL: Dropbox
Why It’s Good: Dropbox’s website features a clean, responsive design. Their sign-up forms are simple and easy to use, with large input fields and buttons that are well-suited for mobile devices.

5. Spotify

URL: Spotify
Why It’s Good: Spotify’s responsive site provides a great user experience on both desktop and mobile. Their sign-up and payment forms are designed to be intuitive, with clear calls to action and easy-to-fill fields.

6. Slack

URL: Slack
Why It’s Good: Slack’s website is highly responsive, offering a consistent user experience across devices. Their sign-up process is streamlined, with well-designed forms that are easy to complete on mobile.

Key Features of These Examples:

Large Touch Targets: Buttons and form fields are large enough to be easily tapped on mobile devices.
Clear Instructions: Forms include clear labels and instructions to guide users through the process.
Step-by-Step Process: Multi-step forms are broken down into manageable chunks, making them easier to complete.
Responsive Layouts: The layout adjusts fluidly to different screen sizes, ensuring usability and readability.
High Contrast and Readability: Text and interactive elements are easy to see and read on small screens.
Simplified Navigation: Navigation menus are simplified and accessible, often using collapsible menus for mobile devices.

Device and Viewport Comparison

Analogy: “Imagine you have a collection of adjustable frames that can expand or contract to fit different pictures perfectly. The frames represent different devices, and the pictures represent the website content. Each frame can adjust to ensure the picture looks its best, regardless of the frame size. Some frames (devices) may be smaller but have high-definition glass (high resolution), making the picture look incredibly sharp. Others might be larger frames but with standard glass (lower resolution), so while the picture is still clear, it might not be as sharp. Responsive design is about ensuring that no matter the frame size or quality, the picture always looks good and fits perfectly.”

Understanding different viewport sizes and screen resolutions is essential for designing responsive websites. By focusing on media queries, we can ensure your design adapts to various screen sizes. Handling resolution-specific changes would require additional backend resources to support the frontend. Currently, the industry is not at a point where this is universally necessary, but it could become more relevant as standard resolutions become established.

Common Viewport Sizes

Small Screens (320px – 480px)
- Examples:
  - iPhone SE: 320px
  - iPhone 12 Mini: 375px
  - Samsung Galaxy S9: 360px
- Usage: Smartphones
- Design Considerations: Ensure touch targets are large enough, navigation is simple, and content is easily readable.
Medium Screens (481px – 768px)
- Examples:
  - iPad Mini: 768px
  - Amazon Kindle Fire: 600px
- Usage: Tablets
- Design Considerations: Use a mix of single and multi-column layouts, optimize touch interactions, and ensure text is readable.
Large Screens (769px – 1024px)
- Examples:
  - iPad Pro: 1024px
  - Small laptops: 800px to 1024px
- Usage: Small laptops, large tablets
- Design Considerations: Utilize multi-column layouts, ensure navigation is accessible, and optimize images.
Extra-Large Screens (1025px and up)
- Examples:
  - Desktop monitors: 1025px to 1920px
  - 4K monitors: 3840px
- Usage: Desktops, large monitors
- Design Considerations: Take advantage of the larger screen real estate with multi-column layouts, larger images, and more complex navigation.

Screen Resolutions

Standard Resolution
- Examples:
  - Typical laptops and desktop monitors
- Usage: Everyday computing
- Design Considerations: Ensure text and images are clear and crisp at typical resolutions.
Retina and High DPI Screens
- Examples:
  - iPhones with Retina display: 2x or 3x pixel density
  - MacBook Pro with Retina display
- Usage: High-end devices with superior display quality
- Design Considerations: Use high-resolution images and scalable vector graphics (SVGs) to maintain clarity and quality.
4K and 5K Monitors
- Examples:
  - Ultra HD monitors: 3840px x 2160px (4K)
  - 5K monitors: 5120px x 2880px
- Usage: Professional and high-end computing
- Design Considerations: Provide high-resolution images and ensure UI elements are appropriately scaled for high-resolution displays.

Specific Device Examples

iPhones
- Viewport Widths:
  - iPhone SE: 320px
  - iPhone 12 Mini: 375px
  - iPhone 12 Pro Max: 428px
- Device Pixel Ratio:
  - iPhone SE/7/8/XR/11/SE 2/SE 3: 2x
  - iPhone 12 Mini/13 Mini: 3x (emulated)
  - iPhone 12/12 Pro/13/13 Pro: 3x
iPads
- Viewport Widths:
  - iPad Mini: 768px
  - iPad Pro 12.9-inch: 1024px
- Device Pixel Ratio: 2x
High-Resolution Handheld Devices
- Examples:
  - Samsung Galaxy S21 Ultra: 1440px width (Quad HD+)
  - Google Pixel 6: 1080px width (Full HD+)
- Device Pixel Ratio: Typically 3x or higher

All of this info is so that we can better design and test responsive websites to ensure they work well across a wide range of devices and screen sizes, providing an optimal user experience.

Looking at just Apple devices (not including desktops)

iPhone sizing example

These are the viewport's widths and DPRs available when using the viewport meta tag width=device-width on different deivces.

iPhone #

Viewport width (in CSS pixels):

320: iPhone SE 1
375: iPhone 7/8/X/Xⓢ/11 Pro/SE 2/12 mini/13 mini/SE 3
390: iPhone 12/12 Pro/13/13 Pro/14
393: iPhone 14 Pro
414: iPhone 7+/8+/Xⓢ Max/XⓇ/11/11 Pro Max
428: iPhone 12 Pro Max/13 Pro Max/14 Plus
430: iPhone 14 Pro Max

Device Pixel Ratio (resolution, in dppx):

2: iPhone SE/7/8/XⓇ/11/SE 2/SE 3
3 (emulated): iPhone 7+/8+/12 mini/13 mini
3 (real): iPhone X/Xⓢ/Xⓢ Max/11 Pro/11 Pro Max/12/12 Pro/12 Pro Max/13/13 Plus/13 Pro/13 Pro Max

Apple Watch Browser #

Viewport width (in CSS pixels):

320: All Apple watch without disabled-adaptations meta tag present
136: Apple Watch Series 1 to 3 38mm with disabled-adaptations
156: Apple Watch Series 1 to 3 42mm with disabled-adaptations
162: Apple Watch Series 4, 5 and SE 40mm with disabled-adaptations
184: Apple Watch Series 4, 5 and SE 44mm with disabled-adaptations

Device Pixel Ratio (resolution, in dppx):

2 (emulated): All Apple Watches

iPad #

Different viewports for iPad

Viewport width (in CSS pixels):

320: iPad/iPad Air/iPad Mini in Split View 1/3 or Side View
375: iPad Pro in Split View 1/3 or Side View
438: iPad/iPad Air/iPad Mini in Split View 2/3 (Portrait-only)
507: iPad/iPad Air/iPad Mini in Split View 1/2
678: iPad Pro Split View 1/2
639: iPad Pro Split View 2/3 (Portrait-only)
694: iPad/iPad Air/iPad Mini in Split View 2/3 (Landscape-only)
768: iPad/iPad Air/iPad Mini
980: iPad/iPad Air/iPad Mini with no viewport meta tag is present
981: iPad Pro Split View 2/3 (Landscape-only)
1024: iPad Pro

The attribute shink-to-fit in the viewport meta tag can change how iPad renders the viewport while in Side or Split views. Read more

Device Pixel Ratio (resolution, in dppx):

2: All iPads

Responsive Design | what it is / how it works / what it can do *

Responsive Design