That is the first mistake.

A mobile screen, a tablet screen, and a desktop screen do not need the same layout with different sizes.

They need the same product idea, but with different layout decisions.

So when I think about responsive design, I do not start with “how can I scale this screen?”

I start with a better question:

What should stay, what should move, and what should change at this screen size?

Screen size is not the full story

Screen size matters, but it is not enough by itself.

Device resolution, browser viewport, safe areas, navigation bars, zoom level, keyboard, and operating system UI can all change the real space you have.

This is why I do not design only for one device size.

A single iPhone artboard can be a good starting point. But it should not be the whole responsive strategy.

I wrote a separate practical guide about mobile sizes here: Mobile Screen Sizes for UI Design.

The Turkish version is here too: Mobil Arayüz Tasarımı Ekran Boyutları Nedir?.

Think in ranges, not only devices

Designers often ask for exact sizes.

Which iPhone size?

Which iPad size?

Which desktop width?

These are useful questions, but responsive design works better with ranges.

For example, you can think like this:

• Mobile: narrow layout, one column, touch-first actions
• Tablet: more horizontal space, possible split layout, still touch-first
• Desktop: wider canvas, multi-column layout, mouse and keyboard support

This helps you avoid designing one fixed screen and hoping it works everywhere.

Mobile: focus and priority

Mobile UI design is about focus.

There is not much room.

So every section needs a reason to be there.

On mobile, I usually ask:

• What is the main user action?
• What content must be visible first?
• Can this card become simpler?
• Does the user need this secondary information now?
• Is the touch target large enough?

Mobile is not the place to show everything.

It is the place to show the right thing first.

Tablet: do not treat it like a large phone

Tablet design is often ignored.

Many products simply stretch the mobile layout.

This usually feels weak.

A tablet has more space than a phone, but it is still touch-based. This makes it different from desktop.

On tablet, you can use:

• Two-column layouts
• Side panels
• Master-detail patterns
• Larger cards
• More visible navigation
• More comfortable reading areas

But you should not fill every empty area just because space exists.

Tablet UI needs balance.

Desktop: more space can create more noise

Desktop gives you more room.

But more room does not automatically make the design better.

It can also create more noise.

On desktop, designers often add too many panels, too many cards, too many filters, and too many secondary actions.

The layout becomes powerful but hard to scan.

For desktop UI, I usually think about:

• Clear grid structure
• Readable content width
• Useful sidebars
• Good table behavior
• Hover and focus states
• Keyboard-friendly flows

Desktop should use space with purpose.

Common breakpoint thinking

You do not need to memorize every breakpoint.

But you should understand the logic.

A simple responsive system can start like this:

• Small mobile: around 320-375 px wide
• Modern mobile: around 390-430 px wide
• Tablet portrait: around 744-834 px wide
• Tablet landscape / small desktop: around 1024-1194 px wide
• Desktop: 1280 px and above

These are not strict laws.

They are starting points for design checks.

The real goal is to see where your layout breaks.

Cards should not only stretch

Cards are one of the first things that break in responsive design.

A card that works well on mobile may look too wide on desktop.

A desktop card grid may become too dense on mobile.

So cards need responsive rules.

For example:

• Mobile: one card per row
• Tablet: two cards per row
• Desktop: three or four cards per row
• Large desktop: keep max width instead of stretching forever

The important thing is not the number.

The important thing is readability.

Navigation changes with screen size

Navigation is another big responsive decision.

Mobile may need a bottom tab bar, hamburger menu, or simple top action.

Tablet can sometimes support side navigation.

Desktop can use sidebar, top navigation, or both, depending on the product.

Do not force the same navigation everywhere.

The navigation should match the screen, the task, and the product depth.

Touch targets matter more than visual size

On mobile and tablet, the user touches the screen.

This changes the design.

A button can look fine visually but still be hard to tap.

Small icons, dense table rows, tiny close buttons, and tight filter chips can create friction.

Responsive design should check interaction size, not only visual layout.

This is one reason tablet design deserves more attention.

Content priority is the real responsive work

The hardest part of responsive design is not resizing components.

The hardest part is deciding content priority.

What should stay visible on mobile?

What can move into a secondary screen?

What should become a collapsed section?

What should turn into a tab, drawer, or filter panel?

Responsive design is full of these product decisions.

This is also why a good design system helps. I wrote about that here: Design Systems for Beginners.

My practical responsive checklist

Before I call a UI responsive, I like to check these:

• Does the layout work on narrow mobile?
• Does the main action stay clear?
• Are touch targets comfortable?
• Does tablet use space better than mobile?
• Does desktop avoid becoming too noisy?
• Do cards have max width or grid rules?
• Does navigation change when needed?
• Are empty, loading, and error states considered?
• Does the component system support these sizes?

This checklist is simple, but it catches many problems early.

Final note

Responsive UI design is not a technical afterthought.

It is part of product design.

A good responsive layout understands the device, but it also understands the user task.

Mobile needs focus.

Tablet needs balance.

Desktop needs structure.

If you design with that mindset, screen sizes become less scary.

They become design constraints you can work with.

For more related posts, check my UI/UX, Product Design, Technology, Tools, and Growth categories.

Source Signals

• Material Design – Window Size Classes
• Apple Human Interface Guidelines – Layout
• Android Developers – Window Size Classes
• MDN – Responsive Design
• web.dev – Learn Responsive Design
• Nielsen Norman Group – Responsive Web Design

The post Responsive UI Design: Mobile, Tablet and Desktop Screen Sizes Designers Should Know first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

This sounds like a small detail, but it changes the whole design process.

If the screen size is wrong, spacing, grid, typography, and preview tests can feel wrong too.

So this post is a practical mobile screen size guide for UI/UX designers. Not a perfect technical document. More like a useful reference when you start a Figma, Sketch, Framer, or product design file.

Screen size and viewport are not the same thing

One important thing first.

The official device resolution and the design viewport are not always the same.

For example, Apple or Samsung can list a very high physical display resolution. But in UI design tools, we usually work with a scaled viewport size.

That is why you may see an iPhone with a physical resolution like 2556×1179, but design files commonly use something like 393×852.

For daily UI work, the viewport value is usually more useful.

My common starting point

For many mobile UI projects, I still like starting around 390×844 px or 393×852 px.

It is a good middle point for modern iPhone design, and it also helps me preview the product on real devices without too much surprise.

But I do not design only for one phone.

The real work is not only choosing one artboard. The real work is building a grid, spacing system, components, and responsive behavior that can survive different screens.

Older but still useful mobile screen sizes

I do not want to delete older devices from this list.

Some products still have users on older phones. Also, old sizes help us understand how mobile UI dimensions changed over time.

Updated mobile screen sizes for 2026

This is the updated part of the guide.

These values are practical viewport or artboard sizes for design work. I use them as starting points, not as strict rules for every project.

Do not design only for one size

A mobile design can start from one artboard, but it should not live only inside one artboard.

When I design a mobile product, I try to check at least three things:

• a smaller mobile width
• a common modern phone size
• a larger phone or tablet-like layout

This is where grid and component logic becomes important.

If the card, button, input, navigation, and spacing rules are weak, changing the screen size will break the design very fast.

Foldable phones need extra thinking

Foldable devices are not only bigger phones.

They can have a cover screen and a main screen. The user can start a task on one screen and continue on another.

For product design, this means we should think about continuity, layout adaptation, and what information should stay visible.

So I do not treat foldable screens as only a nice extra size. They can create different UX decisions.

My practical advice

If you are starting a mobile UI project, pick one clean starting size first.

For example, 393×852 px or 390×844 px can be a good start for many projects.

Then test the same design in smaller and larger sizes.

Do not only scale everything. Check the real layout behavior.

Does the main button still feel reachable? Is the content too dense? Does the navigation still make sense? Are cards too tall? Is the empty state still readable?

These questions are more important than memorizing every device size.

Final note

Mobile screen sizes are useful, but they are only the start.

Good mobile UI design needs grid, spacing, typography, components, states, and real product thinking.

A correct artboard helps you begin. A good system helps the design survive.

You can also read the Turkish version of this topic here: Mobil Arayüz Tasarımı Mobil Ekran Boyutları Nedir?

For more related posts, check my UI/UX, Product Design, Technology, and Tools categories.

Sources

• Apple iPhone 16 technical specifications
• Apple iPhone 16 Pro technical specifications
• Apple iPhone 16e technical specifications
• Apple iPad Pro technical specifications
• Apple iPad Air technical specifications
• Apple iPad mini technical specifications
• Samsung Galaxy S25 Ultra
• Samsung Galaxy Z Fold7
• Samsung Galaxy Z Flip7
• Google Pixel 9 technical specifications

The post Mobile Screen Sizes for UI Design: Updated Viewport Guide first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.