Responsive Design Basics: How to Design for Every Screen

TL;DR: What You Will Learn

• Fluid grids let your layout stretch and shrink instead of breaking at fixed pixel widths.
• Breakpoints tell your design when to rearrange itself for different screen sizes.
• Mobile-first means you design for the smallest screen first, then scale up.
• Flexible media keeps images and video from overflowing or looking blurry.
• Cross-device testing catches problems before your customers do.

Take these one section at a time. By the end, you will look at every website, including your own, with a sharper eye for what makes it work on any screen.

What Responsive Design Really Means

Let me start with a simple picture. Imagine one website that flows like water into whatever container you pour it into, whether that container is a phone, a tablet, or a widescreen monitor.

That is responsive design in a nutshell: a single, flexible layout that reshapes itself to fit any screen size, rather than forcing the same rigid page onto every device.

Before we go further, it helps to know this is not my idea, nor a new one. The term was coined back in 2010 by web designer Ethan Marcotte, in an article for  A List Apart that the industry still points to today. He set out the three ingredients that remain the heart of the practice: fluid grids, flexible images, and media queries, and argued that instead of fighting the endless variety of screens, we should embrace the web’s natural “ebb and flow” and let one flexible layout adapt to them all. Everything I share in this guide builds on that single insight.

For years, many businesses solved the mobile problem the clumsy way. They either built a separate mobile site (think of those old m.example.com addresses) or they served one fixed-width page that looked fine on a desktop but forced phone users to pinch and zoom endlessly.

Here in Singapore, that approach simply does not hold up anymore. We are a mobile-first population, and most people reach for their phones first, whether they are logging into SingPass to check a document, scrolling Shopee during a lunch break, or booking a hawker delivery.

Responsive, Adaptive and Fixed Layouts

These three terms get muddled often, so let me separate them clearly.

• Fixed layouts use a set pixel width, so the page never changes shape and often breaks awkwardly on smaller screens.
• Adaptive layouts detect the device and swap in one of several pre-built templates, which works but means maintaining multiple versions.
• Responsive layouts use one fluid design that stretches and rearranges smoothly across every size in between.

Responsive is usually the choice I recommend, because you maintain one codebase and one experience, which is far easier to keep consistent over time.

Why Consistency Builds Trust

When someone browses your site on their phone during the MRT commute, then finishes the purchase on a laptop at home, they expect things to look and behave the same way.

Consistency signals professionalism. If your logo shifts position, your buttons change colour, or your checkout button disappears on mobile, users start to wonder whether they can trust you with their card details.

This is where design thinking pays off, because the visual side and the experience side have to move together. If you want to understand how these two disciplines complement each other, it helps to grasp the difference between UI and UX before you touch a single layout.

The Cost of a Broken Mobile Experience

Picture a small boutique in Bugis that runs an online store alongside its physical shop. A customer finds a dress on Instagram, taps through to the site on her phone, and the product images overflow the screen while the “Add to Cart” button sits half off the edge.

She leaves. That is a lost sale, and worse, a customer who may never return.

For a local retailer, a broken mobile experience is not a cosmetic problem; it is revenue quietly leaking away every day. Getting responsive design right is what stops that leak, and the technical building blocks that follow are how we make it happen.

Understanding Breakpoints and Screen Sizes

When I first started planning layouts, I imagined I needed a separate design for every phone on the market. That thinking will drain your energy fast, and it is the wrong way to approach responsive design.

Let me walk you through how breakpoints actually work using a scenario I see often: a small Singapore F&B brand, say a hawker stall that has grown into a two-outlet cafe, wanting one website that looks right on everything from a 360px Android phone to a 1440px desktop.

What Breakpoints Are and How They Work

A breakpoint is simply the screen width at which your layout changes to stay readable and usable. Below that width, the layout looks one way; above it, the layout shifts to make better use of the space.

Picture our cafe’s menu page. On a narrow phone, the dishes stack in a single column so nothing feels cramped. As the screen gets wider, at a chosen point the layout switches to two columns, then perhaps three on a large desktop.

That switching point is your breakpoint. You are not designing for one device; you are deciding at what width the current layout stops working and needs to rearrange.

Choose Breakpoints From Content, Not Device Models

Here is the mindset shift that saved me a lot of trouble: let your content decide your breakpoints, not the latest phone release.

Chasing specific devices is a losing game because new screen sizes appear constantly. Instead, widen your design gradually and watch where it starts to break.

For the cafe menu, ask practical questions as the screen grows wider. Does a line of text stretch so long it becomes hard to read? Is there awkward space beside the dish photos? The moment something looks wrong is your natural breakpoint, whatever pixel value that happens to be.

This content-first approach means your site adapts to devices you have never even tested, because you designed around readability and comfort rather than a fixed list of models.

Common Width Ranges to Plan Around

You still need rough starting points, and most beginners plan around three broad bands. These are guides, not rules.

• Mobile: Roughly 360px to around 480px, covering common Android phones and smaller handsets.
• Tablet: Roughly 600px to around 1024px, covering iPads and larger phones in landscape.
• Desktop: Roughly 1024px and above, with 1280px and 1440px being common working widths.

For the cafe, I would sketch three layouts: a single-column mobile view, a comfortable tablet view, and a wider desktop view with room for a hero image and reservation button.

Start with those three, then add a breakpoint only where your content genuinely needs one. That keeps your plan simple and your design honest to how people actually browse.

Building Layouts with Fluid Grids

When I first started designing websites, I built everything in fixed pixels. A layout that looked perfect on my laptop fell apart the moment someone opened it on a phone, with content spilling off the edge or squeezed into an unreadable strip.

That is the problem fluid grids solve. Responsive design relies on a fluid grid, which means your layout is built from relative units and percentages so content resizes in proportion to the screen instead of holding a rigid pixel width.

Picture a typical Singapore e-commerce store selling skincare or gadgets. On a desktop, the product grid shows four items across in neat columns. On a tablet, it might drop to two, and on a mobile phone it reflows to a single column you scroll through with your thumb.

The products do not shrink into tiny squares. They resize proportionally and rearrange so each one stays tappable and readable.

Columns, Gutters and Margins Explained Simply

Every grid is made of three parts. Columns are the vertical bands where your content sits, gutters are the consistent gaps between those columns, and margins are the breathing space on the outer edges.

Think of it like arranging product cards on a shelf. The cards are your columns, the space between them is the gutter, and the empty edge of the shelf is the margin.

Keeping these consistent is what makes a page feel tidy rather than cluttered, no matter the device.

Percentages and Relative Units Versus Fixed Pixels

Here is the shift in thinking that matters most. Instead of telling a column to be exactly 300 pixels wide, you tell it to take up 25 per cent of its container.

When the screen gets narrower, that 25 per cent recalculates on its own. A fixed pixel width cannot do that, which is why pixel-based layouts break so easily.

Relative units are simply a way of describing size in relation to something else, whether that is the container width or the base text size. The reasoning behind fluid design is that the layout adapts to the screen, rather than the screen having to accommodate the layout.

How a Flexible Grid Keeps Alignment Consistent

A shared grid gives every element the same reference points, so headings, images, and buttons line up cleanly across breakpoints. That consistency is what stops a mobile view from looking like a broken version of the desktop.

In practice, most designers set this up visually rather than by hand-coding it. Tools like Figma let you build responsive frames and grid layouts you can preview at different widths, and if you are new to it, our guide on Figma design basics every beginner should master walks you through the essentials before you commit anything to code.

Why the Mobile-First Approach Wins

When I first started building websites, I did what everyone did: I designed the big desktop version first, made it look impressive on a large monitor, then squeezed it down for phones as an afterthought. That squeezing almost always went wrong.

The fix was to flip the whole process. Mobile-first responsive design means you design the smallest screen first, then progressively enhance for larger ones, and it changes everything about the decisions you make.

What Mobile-First Actually Means

In a desktop-first workflow, you start wide and strip things away as the screen shrinks. You inevitably end up hiding, shuffling, or cramming content to make it fit a phone.

Mobile-first works the opposite way. You begin with a narrow single column, decide what truly matters, and only add complexity as more space becomes available.

This suits Singapore particularly well. Think about a typical morning: commuters packed onto the North-South Line, one hand on a grab pole, the other thumbing through the DBS PayLah app or checking a local retailer like Love, Bonito.

With near-universal smartphone access in Singapore (DataReportal, Digital 2026: Singapore), the phone is how many customers reach a business first, so for a lot of local sites, designing for mobile is designing for your real majority.

Prioritising Core Content and Tap-Friendly Actions

Starting small forces discipline. On a phone screen, there is simply no room for clutter, so you are pushed to ask what the one thing this page needs to do actually is.

For a hawker stall or an F&B group taking online orders, that might be a single obvious button: “Order now” or “View menu”. Everything else waits.

Tap targets matter too, because fingers are not mouse pointers. When I review student projects, the failure I see most often anecdotally, across the cohorts I teach rather than from any formal count, is buttons and links jammed too close together to tap accurately on the MRT.

A few habits keep mobile designs usable:

• Make primary buttons large enough to tap comfortably with a thumb.
• Give links and icons breathing room so people do not misfire.
• Put the most important action high on the screen where it is easy to reach.
• Keep forms short, since typing on a phone is tedious.

Progressive Enhancement for Larger Screens

Once the mobile version is solid, you enhance rather than rebuild. You add a second column, reveal a fuller navigation menu, or bring in larger imagery as the viewport grows.

The payoff is performance and focus. Because you loaded only what a phone truly needs first, pages tend to be leaner and faster, which matters when someone is on patchy tunnel signal between stations.

Start small, and you end up with a cleaner, faster, more focused product across every screen, not just a shrunken version of a desktop design.

Making Images and Media Flexible

Picture a Singapore travel blog packed with gorgeous hero shots of Bali sunsets and Japanese cherry blossoms. On a desktop with fibre broadband, it looks stunning.

Now picture a reader on the MRT between Bishan and Dhoby Ghaut, on a patchy connection, watching a giant image crawl in row by row. Most people give up and tap away before the page even finishes loading.

That is the core tension in responsive design: your media has to look sharp on every screen without breaking your layout or punishing users on slower connections.

Flexible Media That Scales

The first rule I teach beginners is a simple CSS habit. Set your images and videos to a Or if you want just the minimal change, let the height adjust automatically.

This stops a wide image from spilling out of its column and forcing a horizontal scrollbar on a phone. The image simply shrinks to fit whatever space it has.

Embeds like YouTube videos or Google Maps need the same care. Wrap them in a container that maintains their aspect ratio so they resize cleanly instead of leaving awkward black bars or overflowing the edge of the screen.

Serving the Right Asset Per Device

Making an image fit is not the same as making it lightweight. A three-thousand-pixel-wide hero image squeezed into a phone screen still downloads all three thousand pixels of data.

That is wasted bandwidth. The fix is to serve different resolutions for different devices, so a phone gets a small file and a desktop gets the large one.

In practice, most modern site builders and the HTML picture element let you provide several sizes and let the browser pick the best one. Here are the basics I ask beginners to apply before uploading anything:

• Resize the image to the largest size it will ever actually display, not straight from the camera.
• Compress it with a tool like TinyPNG or Squoosh to cut file size without visible quality loss.
• Prefer modern formats like WebP where your platform supports them.

Why this Matters for SEO

Heavy media is one of the biggest reasons pages fail Google’s Core Web Vitals, especially Largest Contentful Paint, which measures how quickly your main content appears.

A slow, image-heavy page frustrates users and quietly drags down your search rankings. Optimising your media is one of the easiest performance wins you can make.

These choices are not just technical. They are part of the wider UI craft of deciding what a user sees first, how fast they see it, and how comfortable the experience feels on any screen they happen to be holding.

Designing Readable Responsive Typography

Text is where responsive design either serves people or quietly fails them. If your font is 12 points on a laptop and stays exactly 12 points on a phone held at arm’s length, some readers will pinch, squint, or simply give up.

Picture an older resident opening a SingPass-linked government service page on an ageing Android phone to renew something before a deadline. If the type is cramped and the lines run edge to edge, that person cannot complete a task they have every right to complete easily.

Those are the stakes. Readable type is not decoration; it is access.

Relative Units Like Rem and Em Versus Fixed Points

Fixed units such as points or pixels lock your text to one size no matter the device or the user’s own settings.

Relative units solve this. Set your base font size on the root element, then size everything in rem, which scales from that root, or em, which scales from the parent element.

The real win is respect for the user. When someone bumps up their default text size in their browser or phone accessibility settings, rem based type grows with them, while fixed pixel type ignores them completely.

For a government service used by residents of every age, that single choice can decide whether the page is usable.

Controlling Line Length And Line Height for Readability

Font size alone does not make text readable. Line length and line height do a lot of quiet work.

A comfortable line holds roughly 50 to 75 characters. On a wide desktop, that means constraining your text column rather than letting sentences stretch the full screen.

Line height matters just as much. As a starting point, give body text a line height around 1.5, which gives eyes room to find the next line.

Keep these habits in mind for every screen:

• Cap text columns so lines do not run too wide on desktop.
• Give body copy generous line spacing, tighter spacing for large headings.
• Increase spacing slightly on small screens where reading is harder.

Fluid Type That Scales with the Viewport

Setting one size for mobile and another for desktop works, but the jumps can feel abrupt.

Fluid typography lets text grow smoothly between a minimum and maximum size as the viewport changes, using functions like clamp in CSS.

The discipline is to set sensible limits. Define a smallest size that stays legible on a narrow phone and a largest size that never becomes overwhelming on a big monitor.

Do this, and your type holds up on every device, which is exactly what inclusive, accessible design demands.

Navigation and Touch-Friendly Interactions

Here is where responsive design trips up most beginners: you built a lovely navigation bar for a mouse, then you open it on your phone and everything feels cramped, fiddly, and just plain wrong.

The problem is that a cursor is a tiny, precise pointer, while a fingertip is a soft, imprecise pad about the width of a five-cent coin. Design for one and you punish the other.

From Cursor to Thumb

Picture yourself using a Singapore banking app, say DBS PayLah, or a transport app like SimplyGo, while standing on a crowded MRT holding the grab rail with one hand.

You are tapping with your thumb, not clicking with a mouse. So the “Pay” or “Transfer” button needs to sit within thumb reach, usually the lower half of the screen, not tucked up in a top corner you have to stretch for.

This is why so many mobile layouts place primary actions along the bottom. When someone is one-handed and moving, thumb reachability is not a nice-to-have; it is the difference between a smooth payment and a frustrated tap.

Tap Targets and Spacing

Fingers need room. A general rule to internalise is a minimum touch target of roughly 44 by 44 pixels, with comfortable spacing between targets so people do not fat-finger the wrong option.

Think about a transport app where “Add Value” and “Card Settings” sit side by side. If those tap zones are small and touching, a rushed commuter tops up the wrong card. Generous padding fixes that instantly.

Collapsing Desktop Navigation

On a wide desktop screen, you can spread eight menu items across a horizontal bar. On a phone, that same bar becomes an unreadable squeeze, so you collapse it into a hamburger menu.

When you open that hamburger, list the items vertically with large, tappable rows. Each row should be a full-width target, not a tiny link, so people can hit it without aiming.

Avoiding Hover-Only Traps

The biggest touch mistake is hiding functionality behind hover. A dropdown that only appears when you mouse over it simply never appears on a phone, because touchscreens have no hover state.

So if your banking app reveals account details on hover, mobile users see nothing. The fix is to make interactions tap-based, or show the content by default rather than concealing it behind a mouse action.

These usability instincts matter well beyond the code. When you look at the UX designer interview questions hiring managers ask, you will see they probe exactly this: can you design for real fingers on real devices, not just a cursor on your monitor.

Testing Your Design Across Devices

Here is a mistake I see over and over: a team spends weeks perfecting a responsive design in the browser on one big monitor, then launches without ever opening the site on a phone.

Testing on real devices and browsers is not optional. It is the step that catches the broken menu, the overflowing button, and the text that shrinks to nothing before your customers do.

Picture a Singapore SME, say a home bakery in Bedok, about to push a festive promotion. Before spending on ads, they should open the site on an iPhone, a couple of common Android models (a Samsung Galaxy and a mid-range Xiaomi or Oppo, since those are everywhere here), an iPad, and a desktop.

Browser Dev Tools and Responsive Preview Modes

Start with what you already have. Chrome and Firefox both include developer tools with a device toolbar that lets you preview your layout at iPhone, iPad, and Android widths in seconds.

Press F12, click the device icon, and cycle through the preset sizes. Drag the viewport edge slowly and watch for the exact point where a column collapses or an image spills over.

If you are still in the design phase, use the prototype and preview modes in your design tool. I walk beginners through this in a step-by-step Figma tutorial for beginners, where you can play through screens on a simulated phone before a single line of code exists.

Real Physical Devices and Emulators

Dev tools are a great first pass, but they lie about a few things. Fonts render differently, tap accuracy feels different, and Safari on a real iPhone behaves unlike Chrome pretending to be one.

So borrow phones from around the office. Ask a colleague on Android and one on iPhone to open the live link and just use the site normally.

For devices you do not own, emulators and cloud testing services let you load your page on dozens of real Android and iOS versions. Test on the browsers your visitors actually use, which in Singapore means Safari, Chrome, and often the in-app browser inside Instagram or WhatsApp.

Load Speed, Tap Targets, and Readability

Finally, judge the experience, not just the layout.

• Check load speed on mobile data, not just office WiFi, since many people browse on the go.
• Confirm every button and link is big enough to tap with a thumb without hitting its neighbour.
• Read the body text at arm’s length to make sure it stays legible without pinching to zoom.
• Try filling in any form on a small screen to spot cramped fields.

Test early and often, because a bug caught before launch costs you minutes, while one caught after costs you customers.

Common Responsive Design Mistakes to Avoid

I have reviewed enough portfolios and live sites to notice the same responsive design mistakes appearing again and again. The good news is that every one of them is fixable once you know what to look for.

Let me walk you through the pitfalls I see most often, then show you exactly how to correct them.

Hiding Content Instead of Restructuring It

The most common shortcut is hiding entire chunks of content on smaller screens. It feels tidy, but it quietly tells mobile users they matter less.

If a product page shows delivery details and sizing on desktop but strips them out on mobile, you are hiding the exact information a shopper needs before buying. Restructure and reflow that content into an accordion or stacked layout instead of deleting it.

Tiny Tap Targets and Cramped Spacing

Fingers are not mouse cursors. When buttons and links sit too close together, people tap the wrong thing and get frustrated.

Give every interactive element generous padding and space so it can be tapped comfortably with a thumb. This single change often improves both usability and conversions more than any redesign.

Unoptimised Images

Loading a full desktop hero image on a mobile connection is a silent conversion killer. Slow pages hurt user experience and, because Google uses page speed and mobile usability as ranking signals, they hurt your SEO too.

Serve appropriately sized, compressed images so your pages stay fast on a phone on the MRT.

Designing Desktop-First Then Squeezing Down

When you design for a large screen first and cram it onto mobile later, the mobile experience always feels like an afterthought. Starting mobile-first forces you to prioritise what truly matters.

A Singapore Retail Scenario

Picture a small homegrown fashion label selling on its own site. On desktop, the checkout looks clean, but on mobile the form fields overflow, the promo code box is buried, and the pay button sits half off-screen.

A shopper adds two dresses, reaches the cluttered mobile checkout, cannot find where to apply her SkillsFuture-funded workshop discount code (imagine a similar retail voucher), and abandons the cart. That is a lost sale caused entirely by poor responsive execution.

Multiply that across every mobile visitor, and you understand why cluttered checkouts quietly drain revenue.

Here is a quick checklist to audit your own work:

1. Restructure content for mobile rather than hiding it.
2. Make tap targets large and well-spaced.
3. Compress and resize images per breakpoint.
4. Design mobile-first, then scale up.

Fixing these habits also strengthens your portfolio. Since these errors are a big reason why most UX designer job applications get rejected, showing clean, responsive work proves you can build for real users on every screen.

Conclusion

We have covered a lot of ground, so let me pull it together for you.

Responsive design rests on a handful of principles that work together: fluid grids that flex with the viewport, sensible breakpoints chosen around your actual content, a mobile-first mindset that starts small and scales up, flexible media and type that never overflow or squint, and thorough cross-device testing before you ever go live.

Get those right and something quietly powerful happens. A visitor who browses your site on the MRT, then finishes their booking on a laptop at home, sees the same clean, dependable experience each time.

That consistency is what builds trust, and in mobile-first Singapore, where so many customers reach for their phone first, trust is what wins the sale. A hawker stall’s ordering page, a clinic’s appointment form, an e-commerce checkout: each one earns or loses a customer in those first few seconds of layout.

My honest advice is to stop reading and start building. Take a real project, even a personal portfolio or a mock landing page, and apply one principle at a time until it becomes second nature.

When you are ready to go deeper and design with real confidence, take the next step with the WSQ User Experience & User Interface (UX/UI) Design Essentials course. It is SkillsFuture-supported and built entirely around hands-on practice, so you apply these responsive principles to real projects rather than just reading about them. That practical grounding is what turns these basics into skills you can put straight into your portfolio.

You now have the foundation. Go and design something that works beautifully on every screen.