5

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.

  • 1
    It sounds like users aren't there for the content, and the main reason to use a 320px breakpoint is to facilitate serving good content. Can you design this to be without breakpoints at all? See medium.com/simple-human/… – Izquierdo Sep 16 '19 at 22:54
  • Do you collect any kind of analytics of your users? In my work the debate over browsers to design for is similar to yours about minimum screen width. I checked the Google Analytics to find that 20-30% of my users were still using old versions of IE, so we still have to account for them. If you do not have hard data, it may be better to design for the worst case 320. sorry! – ph33nyx Sep 17 '19 at 14:35
13

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

  • Desktop users can still resize their browser windows to small widths.
  • 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.
| improve this answer | |
  • 1
    I'd say the desktop case is very niche given the prominence of wide screens, the rest is spot on. – Luciano Dec 3 '19 at 10:54
  • @Luciano Maybe a bit niche. As a developer (that only uses one screen most of the time), I do shrink browser windows to minimum width (320) and put them next the the code editor. Developers using desktops with one monitor may be rare, but there are more places a laptop may not have access to a second display. – Barnyard Dec 3 '19 at 14:54
  • 1
    Another bullet: - CSS pixels are not hardware pixels. A mobile device boasting 960 hardware px width with a pixel ratio of 3 would still be counted as 320 (software) px in CSS if the website has a meta tag stating initial-scale=1 (see MDN. See also: juiceboxinteractive.com/blog/… – Tyblitz May 25 at 23:38
  • For the "Desktop users can still resize their browser windows to small widths.": I just tried with Google Chrome and it won't let me scale the browser to less than 500px wide. – np8 Oct 18 at 8:07
5

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.

| improve this answer | |
2

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.

| improve this answer | |
1

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.

| improve this answer | |
1

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.

| improve this answer | |
1

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.

| improve this answer | |
  • Does your design cater for those users or are you targeting 360px? I expect users aren't going to want to be users if the app doesn't work for them. – James Coyle Jan 22 at 10:26
1

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!

| improve this answer | |
1

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.

| improve this answer | |
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.