Is 320px wide designs still relevant? (responsive web)

Question

For a couple of years the smallest design I make for responsive websites is 375px wide. Now our new frontend developer eats my brain that I should provide 320px wide. And even if I will not she will scale to this minimum anyway. Smallest breakpoint is 480px. But the message is - good old 320px must be covered and scaling 375->320 is annoying (can't argue with latest thou).

I tried to ask Google, and got an article "Why your mobile site should still stay 320px wide" dated 2012... Should we, still, in 2019?

Need reasoned opinions.

Current project TA in short - a payable developer (more rarely - a scientist) located in a Western country. It's an API service, what increases probability of browsing from desktop - you won't manage and download api keys or copy paste code from documentation on a phone.

Answer 1

I believe 320 points wide is not an unreasonable width in 2019 because:

• iPad apps in split view (including Safari) can be 320 points wide.
• iPhone SE^{^} (which was sold new within the last year) has a 320 points wide screen.
• Desktop users can still resize their browser windows to small widths^*.

_{^{^} iPhone SE 1st generation, not the iPhone 8 style SE announced in 2020.
^* Safari on Mac has a minimum width of 574. However, if you open the bookmarks sidebar it shrinks to 333px wide.}

Answer 2

I can only speak from personal project experience for a multi million pound website re design.

We're designing with 320 mobile in mind as a worse case scenario for mobile screen sizes. It may be a bit small for 2019 but it's a resolution that will catch all and work.

Answer 3

Only 1%-1.5% of our users utilize a screen width less than 360. That's a lot of energy wasted to design for 320 when the number of users is so low. That's not a good ROI.

Answer 4

The difference between 375px and 320px is really not that much: it sounds to me like your design isn't truly responsive and is purely using fixed breakpoints. I have yet to find a situation in which my UI would not scale to fit on the smallest screen sizes assuming once I reached the mobile breakpoint I treat everything as a single full width column rather than fixed width items and allowed content to wrap onto newlines as needed. All of my projects can be scaled down all the way to at least 320px as it is not really that difficult to do if you're already targeting mobile devices.

My advice would be to make your content fluid and able to adapt to any width you define by reflowing itself when there is no longer enough space. Use breakpoints only to alter the number of columns your design is using. No single UI element should need to be more than 300px wide so you should always be able to get down to that width just by stacking all of the components vertically rather than horizontally.

Now the question is whether this is worth doing for an existing project. The only way to know would be to collect data from your users on their screen widths and analyze your code to estimate how hard it would be to implement. Be sure to factor in the fact that users with screens smaller than your minimum are probably going to quickly stop using your app and that the changes can be made incrementally as you maintain the software.

Answer 5

It all depend on our target user as we are designing our app for small town and as we research, we find that our target audience are using 320 devices so that we have to design for them because we don't want to restrict our product for large devices.

Answer 6

I always wondered the same. I checked our GA on compera.at today I saw that more than 5% of users are still on some kind of 320x? resolution.

After some research I found out that using Figma and it's auto layout function is a good solution for this. You can set up your mobile frames so that they act (almost) fully responsive.

Play around by resizing the frame in my example here: https://www.figma.com/file/awNTqPTu2ns7sBPu36tAfG/Responsive-Layout-Example?node-id=2%3A2

I created a whole layout with this (which I can't share unfortunately). Every dev will love you for this kind of handoff, as you can show a fluid layout for the range 320-375px for example.

Answer 7

I had been designing at 375 for many years then recently started designing for 320 and I totally hate it. It's just so narrow! Though I like to make sure everything looks alright and the messaging is clear for the worst possible scenario.

The argument that people can still take their desktop browser and size it down to 320 isn't really valid to me. Regular users don't really do that as often as we do and when I do scale down my browser, the smallest that Safari will go on my Mac is 490px wide and Chrome stops scaling down at 500px.

Answer 8

I agree with Baldev Singh. It all depends on your target users, personas, or whatever term you use. Every time I do a website redesign for my clients, I always ask them to provide me their Google Analytics statistics (or something similars). So I know where most of the user come from and which device they use to access the website.

As we live in agile era, if you think 320px is not necessary, you can always implement it when there's enough data that it is indeed needed.

Answer 9

In my opinion, this is an accessibility issue.

Should you design for a viewport width of 320px, probably not because market share for that size is very low.

Should you make sure it renders properly and is usable at 320, absolutely!

Answer 10

I think designing to render in 320 is the best option. In my main role, we design for 320, it makes sense to make sure it renders. Most content should auto wrap so there shouldn't be an issue.

The main scenario where this is a major issue is when you're designing a full page application where there's no scroll. In my other freelance work, I have a solution around this. I mark out the grid for 320pt and design around it first. Once I'm sure it all fits, I'll stretch it out to fit 375pt.