Effective Responsive Frontend Slicing: Overcoming Screen Size Challenges

Effective Responsive Frontend Slicing: Overcoming Screen Size Challenges

In frontend development, creating a responsive web layout for different screen sizes is a challenge that cannot be underestimated. Especially when the provided design only includes mobile and desktop views without considering other screen sizes.

A mistake I used to make was starting slicing from the desktop view based on my laptop screen and then adjusting it to mobile. However, when the QA team tested it on devices with smaller or larger screen sizes, the layout often changed. This issue became even more complex with various types of devices such as tablets, foldable phones (flip & fold), and high-resolution screens. As a result, I had to repeatedly adjust the CSS using media queries, leading to a long bug-fixing cycle between the development and QA teams.

Recently, during a revamp project for a bank in Indonesia, I encountered a case where the layout did not match the expectations of the design team. After discussions, I found a solution to prevent this issue from recurring in future projects.

The design team wanted a consistent look across all devices, particularly in terms of font scaling and image assets. Typically, on smaller laptop screens, fonts and images appear larger, and the same applies to mobile and tablet views, which now have many variations in size.

Therefore, the old approach of using only three breakpoints (mobile, tablet, and desktop) is no longer sufficient. Instead, I implemented more detailed breakpoints to accommodate all device variations, as follows:

Device Type

Screen Width (px)

CSS Media Query

Mobile (Small)

< 360

@media (max-width: 359px) { ... }

Mobile (Medium)

360 - 479

@media (min-width: 360px) and (max-width: 479px) { ... }

Mobile (Large)

480 - 639

@media (min-width: 480px) and (max-width: 639px) { ... }

Mobile XL / Small Tablet

640 - 767

@media (min-width: 640px) and (max-width: 767px) { ... }

Tablets & Small Laptops

768 - 1023

@media (min-width: 768px) and (max-width: 1023px) { ... }

Laptops & Small Desktops

1024 - 1279

@media (min-width: 1024px) and (max-width: 1279px) { ... }

Large Laptops & Desktops

1280 - 1439

@media (min-width: 1280px) and (max-width: 1439px) { ... }

Large Desktops & Monitors

1440 - 1919

@media (min-width: 1440px) and (max-width: 1919px) { ... }

4K & Ultra Wide Screens

1920++

@media (min-width: 1920px) { ... }

For 4K and ultra-wide screens, it is recommended to set a max-width on the body content to ensure it remains centered with margin: 0 auto.


Effective Tips for Web Slicing

  1. Start from the Smallest Screen Size
    • Begin slicing from the mobile-small view using Inspect Element or Mobile Simulator (e.g., iPhone 12 Mini).
    • Ensure the design and slicing results match before moving to larger screens.
    • Adjust font scaling and assets to maintain proportionality across all screen sizes.
  2. Pay Attention to Non-Static Elements
    • Modal windows, pop-ups, and dynamic elements often have different positions on various screens.
    • Thoroughly test these elements to avoid layout issues.
  3. Maintain Communication with the Design, QA, and Client Teams
    • Ensure all parties have the same expectations.
    • Instead of lengthy arguments, focus on improving and refining the layout.
  4. Use a CSS Framework to Save Development Time
    • I personally use Tailwind CSS because it is utility-based and speeds up development.

This approach may not be 100% perfect for every project, but so far, it has been the most effective method I use. Hope this helps!