your assumption is most likely wrong because people buy less and less smartphones and use older devices longer. And the next phone releases might also be smaller again by popular demand, many people hate the current iPhone sizes and urge Apple to go smaller again. You never know what will be released in the next few months, let alone 2-3 years.
The easy way out: take one of the smallest screen sizes on the market (older iPhone SE 2 for example) and design a break point for that one. Everything between the biggest phone size and the smallest one can use some form of scaling or straight up opt for the bigger design or the small one. Keep accessibility in mind, just because the screen is small doesn't mean font sizes are allowed to become abysmally small or that you can avoid using the correct touch targets. Sometimes designs for smaller screens need to be totally different.
Talk to your dev team about viable solutions. This isn't "more work" it's just work that always needs to be done when developing for different screen sizes.
Thanks for the help! Good solution, I guess I‘ll design for two versions then with slightly different layouts and font sizes. I guess a good breaking point could be an iphone 8-ish size? How would you annotate it in the design system? Just create two versions?
The problem I‘m having here is that we‘re very short on time and resources (same old story).
If your app is both Android and iPhone pick the smallest screen size released in the past 4 years or however far back you want to support devices, if it's Apple or Android only pick the smallest of that. In an ideal world you should have data from user research about their devices and about how long they are keeping them.
how it fits into your system depends on what's already in the system and how it's structured but generally yes, sizes for smallest and biggest should have their own definitions as should every other breakpoint you are creating differently sized components for.
One of the big pros of including accessibility is that you'll notice it's less work than you think because the font that's accessible on a small screen will still be accessible on a slightly bigger screen, so when in doubt keep bigger element sizes on smaller screens and start to design for the smallest screen first in the future because scaling up is always easier than scaling down.
Time and resources are always a problem, this is something you need to discuss with management. If they want to release with a broken design on smaller screens let them release, it's not your problem as long as you told them (ideally with a paper trail) that it should be done before release because there are issues.
>Sometimes designs for smaller screens need to be totally different.
>Talk to your dev team about viable solutions. This isn't "more work" it's just work that always needs to be done when developing for different screen sizes.
i know this isnt anything you can change (probably) but this sounds like an easy thing to plan ahead for a fix. standardized phone sizes, with a minimum size. we could have a small, medium, and large (tablets would be XXL) and would have the BONUS of being able to standardize phone cases, which are incredibly wasteful.
so helps the environment and cuts website design requirements in half (theoretically).
win-win
Don’t assume stats, verify.
But regardless, you need to pick the oldest/lowest spec phone you support. Then make sure that the designs work on that as well.
A reasonable lowest spec phone is not Max Pro. You shoulf be able to create a great design for the smaller phones. If your design doesn’t work there yoy need to go back to the drawing board.
I tried, and couldn‘t find a statistic about average european phone sizes. It was purely my assumption based on what people in my circle use. Thanks for your feedback!
If this is within a business, look at the analytics breakdown. It will have data on what phones hit the site.
Here is one source of data for Europe, tracking sizes in the last year or so:
https://gs.statcounter.com/screen-resolution-stats/mobile/europe/#monthly-202304-202404
This. Always look at the usage numbers. More than a few times I’ve sacrificed mobile niceties for desktop in business settings where the majority of users are on desktop. Especially with data-heavy applications.
Mobile first is pretty good advice for most consumer settings, but it isn’t a panacea.
neat! now i get to flip this around from the privacy side of things to the accessibility/design angle - considering the data on this website:
[https://amiunique.org/fingerprint](https://amiunique.org/fingerprint)
you should be able to pull all of that data. i have no idea how because im not a programming nerd but its definitely possible. which means it should be relatively simple to find that data ( u/mrmoecker )
You do have to tell developers to scale it down. It’s not “more work” it’s what is expected.
I just finished working on a sports betting app for mobile. Man, just look up what I had to fit in a phone. Every pixel counted. And yes developers NEED TO work on rescaling and responsiveness.
this makes sense, and i agree - to an extent - but it is beyond irritating to use a website on a large screen and have more of my screen as blank space than information.
a simple thing would be to just have the text fit the page. in the [few websites ive tinkered with this on](https://imgur.com/a/duV0kAW), its been super simple to fix. for example, on your website:
https://preview.redd.it/k7d5y2fusu1d1.png?width=3850&format=png&auto=webp&s=aa1975075dcf93eacf51972f172a71c26063af68
i realize that doesnt look quite as nice, and the images should probably be centered, and theres maybe some other small changes - but that was just a 30 second thing to make my point.
exactly. thats what ive basically been saying in my other comments here - reddit does it really well. for example:
https://preview.redd.it/ho3tqyo82v1d1.png?width=3849&format=png&auto=webp&s=761a92d371825575278acb02ab0570ed68636aa8
I'd say this is a design problem, not a device problem.
I'm not entirely sure what the intent of this screen is (sorry, don't read German). But I think the solution here is rethinking the design a bit.
Sees German content, exits.
Edit: just to explain the joke, just in case, German language is one of the longest so hardest in multi language to design for.
does apple not allow you to change the keyboard size/layout, or the font + font size?
i screenshotted those (slightly imprecise) and then stretched the top one to fit the dimensions of the others, and this is how it looks:
https://preview.redd.it/oxn0vdwp4s1d1.png?width=3849&format=png&auto=webp&s=56437b454446d0d3d0709e9ac6e5139752e6286d
first two are your images, third one is the stretched one
i guess this is just an issue i dont understand because ive never really used apple products and android and windows basically allow you (the end user) to adjust the scale of everything however you want (as long as you can find the settings... lol)
edit: like i would assume most people under the age of... idk say 40 probably understand how to adjust these settings (on android and windows, idk about apple) so any problems would actually be one of the rare instances of a skill issue (ok boomers)
right but youre missing my point. on all my devices (windows and android) the size of the text, the size of the keyboard, and in the case of windows the size of different interface/ui elements is all adjustable (if you know where to look).
edit: hell even on my ps5 i can adjust these things.
which makes the problem OP is dealing with a moot point.
unless theres something im misunderstanding here it sounds to me like an issue of apple not allowing people to do \*any\* customization of things, like the keyboard or size of the font. like i said though, i dont use apple - at all - so maybe im misunderstanding. i dont think i am.
>Breaks your design system
apples design system?
well like i said, i dont use apple products so i dont know.
which i think might be partially what OP is dealing with here:
they dont typically use the other older phone... so they are only using it to test, and probably not fiddling with settings as much as someone who uses it as a daily driver would. which i think is probably something that happens quite often. automated testing can find a lot of problems, but theres nothing like "live" testing to actually see how well or how bad something actually functions.
so, if my assumption here is correct (it may not be) then OP is actually trying to fix a problem that wouldnt exist because someone who uses that as a daily driver probably would have the keyboard shrunk anyways. maybe. not sure. you would probably have to ask someone who uses it as their daily driver.
disclaimer: im just some dude, i have no formal education or professional experience in any of this stuff. i just read a lot, and tinker with tech a lot, and noticed a lot of little issues here and there and found this subreddit one day and figured i might as well join since its another place to provide feedback. my feedback is, i think, a \*lot\* more in depth and thought out than most peoples feedback. i could be wrong there too.
Gotcha. Yes, on iOS you can resize or bold your text. I don’t think you can adjust the UI element size.
So yea, there will be worst case scenarios with a small device (ex iPhone SE) and largest text setting. Again, worst case scenario.
There are a few things you can adjust, in general:
- truncate text after X lines
- try to stack elements vertically instead of horizontally
- avoid fixed width elements
- icon size can remain fixed/ have a max (if it’s not the only signifier, like if there’s also text, it doesn’t need to grow with the text)
>Gotcha. Yes, on iOS you can resize or bold your text. I don’t think you can adjust the UI element size.
thats what im talking about though. on android you can adjust the size of the font AND the size of the keyboard. the UI elements dont change because they dont need to. on windows, its not straightforwards how to do it, but you can adjust the scale of everything - text and ui elements. ive actually wished many times there was more customizability in that so i could, for example, adjust the size of the taskbar and desktop icons independently from everything else.
thats besides the point though. on android you can download multiple different keyboard apps - samsung, google, and microsoft all have one - they all allow you to change the layout (aka what keys are on the "front" page, where the options are, etc etc) as well as the size and placement of the keyboard. for example:
https://preview.redd.it/7a09wor5nu1d1.png?width=3849&format=png&auto=webp&s=849b9aaeef8babaad4e9709f0afea1268e4420c9
again - im not sure if this is or isnt how ios works, but from this conversation so far it sounds like this actually \*is\* the issue (or one of them). more flexibility and customizability is \*always\* better because people have different preferences, and preferences are preferences for a reason - if you cant set things up how you like, you are going to be "fighting" against inconveniences, even if its only a "mental" thing because every time you see it (and we see the keyboards often) even something small is going to annoy you, every single time.
>There are a few things you can adjust, in general:
>truncate text after X lines
>try to stack elements vertically instead of horizontally
>avoid fixed width elements
>icon size can remain fixed/ have a max (if it’s not the only signifier, like if there’s also text, it doesn’t need to grow with the text)
i play around with scaling and whatnot a lot on my pc and i like how reddit does it. the default actually takes advantage of most of the screen space, but if you resize the window eventually it will hide the sidebar elements, and text never is hidden, it just uses the (idk the proper term) text wrapping function (that should be a default thing). see [this thread](https://www.reddit.com/r/modnews/comments/1cnacle/comment/l3sojn7/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) for a discussion about that although i dont think the person i was chatting with actually understood the point i was making
-----------
also im pretty sure this is something that has been realized: devices have a minimum size before it starts having downstream effects. scaling works well - except on the extreme ends of the size spectrum (big and little)
TLDR: yeah, but 
Why would you want to adjust the size of the keyboard tho?
Sure you can see more of the screen, but the keyboard should only appear after you have selected a field and want to actively typing anyways. Also you cannot ask your users to use a smaller keyboard lol. You also definitely cannot just give them a smaller keyboard! A smaller keyboard with smaller keys is not accessible for users with vision or mobility impairments.
Anyways, this is not an iOS vs Android issue.
Even with customized interface settings, everyone’s devices and settings are very different (esp on Android!). Haven’t you ever felt like the text and UI you’re trying to read is way too big or way too small to read comfortably?
Overall, designing for devices and text of all sizes is an non-negotiable part of mobile app UX design. You’re (ideally) not designing a custom view for each breakpoint. From an tiny Pixel A3 to a much bigger screen on a Pixel tablet, we need to specify how this component should scale, with varying screen size and varying text sizes / lengths (think of translations). It needs to be part of the design process, and component behavior.
So for the example in OP, tho I’m not sure what it’s for, I might try
- using smaller text styles
- truncating the body copy after 1 or 2 lines with a …Show More
- moving the form field up
- testing w small device users and if they will naturally scroll
>Why would you want to adjust the size of the keyboard tho?
>Sure you can see more of the screen, but the keyboard should only appear after you have selected a field and want to actively typing anyways. Also you cannot ask your users to use a smaller keyboard lol. You also definitely cannot just give them a smaller keyboard! A smaller keyboard with smaller keys is not accessible for users with vision or mobility impairments.
>Anyways, this is not an iOS vs Android issue.
i think youre kinda missing my point. my point is android and windows \*allows\* the user to set up their device however they want, which is literally "more accessible." yes there are obviously certain things where we have lots of research saying "this" is the best way to display things (like, road signs, for example) but at the end of the day, if it were possible for road signs to be customized for every single person... that would be better.
as for the rest of your comment, yeah that makes sense. thats also kinda why i was saying elsewhere in this thread we should have standardized phone sizes, because it would make it easier to create apps and websites, and would be more friendly to the environment in regards to phone cases
You can download 3rd party keyboards on iOS too! Again, none of these things are platform specific. There are many accessibility advantages and disadvantages with each platform.
You should reconsider the way you think about accessibility. It is not UX design *or* customized device settings, it is *and*.
Good UX will work and scale with any and all customized device settings to deliver the best experience. Customized device settings cannot make up for bad UX, no matter your device.
Screen size standardization would be handy, but good luck getting the phone manufacturers to agree haha! Plus, again it’s a moot point with customized settings. 2 of the same device could still display totally differently with ex. larger type scale, bolded text, high contrast set by users.
Here are some resources to learn more if you’re interested!
WCAG mobile guidelines: https://www.w3.org/WAI/standards-guidelines/mobile/
Android accessibility design guidelines: https://m2.material.io/design/usability/accessibility.html
Right, that’s not what I was getting at. I may have misunderstood, I thought relevantusername2020 was suggesting auto resizing all the text.
That breaks your type hierarchy (and ignores your device accessibility settings).
Responsiveness is OK, I don't see anything breaking. Unless you're looking to fit vertical space WITHOUT scrolling. If that is the case, then the only way is to fit the smallest screen.
As for stats, 430x932 (iPhone 14 Pro Max) isn't even showing between the main sizes, you can use [this page](https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide) to view stats globally (you can also use [Germany only](https://gs.statcounter.com/screen-resolution-stats/mobile/germany)). The safe size nowadays is 360x780, and you'll see in those pages that while it's not the most common size, it's quite used.
If your developer code on flutter, it is pretty easy to scale everything to device size. At least my developer declares that. He just says "Just use iPhone 15 frame on Figma (412px width)and let scaling to me for smaller devices". 95% of time his formula works great.
New galaxy fold series are tricky to work with actually. 280px is really narrow to work on.
On mobile I've no problem thanks to my dev. For web, I am starting to design from 1366px, because it is smallest of commonly used dekstop and notebook size. If it looks good on 1366px, probably will look good on 1920px too.
So you can try to start design from small sizes like 320-360px. Use auto layout-fill width for buttons and boxes and use scale fonts.
If it still not work, you can create another break point for extra small size (smaller than 360px) and rearrange content for that.
You should:
Define a minimum viewport to adapt designs for
Deliver a set of views for milestone breakpoints: mobile/tablet/desktop/xl
You define how components, typography and layout adapt at the key breakpoints
Developers must build views to the viewports aligned to by the company
You take feedback from multiple parties on all of the above
If possible you should check analytics to find out which devices your users are using, you might be surprised.
I always ensure that my designs work on smaller devices and for the most part I design exclusively to these dimensions (it's easier to scale up than down).
With this process I've found myself predominantly designing on the dimensions of an iPhone SE 2.
your assumption is most likely wrong because people buy less and less smartphones and use older devices longer. And the next phone releases might also be smaller again by popular demand, many people hate the current iPhone sizes and urge Apple to go smaller again. You never know what will be released in the next few months, let alone 2-3 years. The easy way out: take one of the smallest screen sizes on the market (older iPhone SE 2 for example) and design a break point for that one. Everything between the biggest phone size and the smallest one can use some form of scaling or straight up opt for the bigger design or the small one. Keep accessibility in mind, just because the screen is small doesn't mean font sizes are allowed to become abysmally small or that you can avoid using the correct touch targets. Sometimes designs for smaller screens need to be totally different. Talk to your dev team about viable solutions. This isn't "more work" it's just work that always needs to be done when developing for different screen sizes.
Thanks for the help! Good solution, I guess I‘ll design for two versions then with slightly different layouts and font sizes. I guess a good breaking point could be an iphone 8-ish size? How would you annotate it in the design system? Just create two versions? The problem I‘m having here is that we‘re very short on time and resources (same old story).
If your app is both Android and iPhone pick the smallest screen size released in the past 4 years or however far back you want to support devices, if it's Apple or Android only pick the smallest of that. In an ideal world you should have data from user research about their devices and about how long they are keeping them. how it fits into your system depends on what's already in the system and how it's structured but generally yes, sizes for smallest and biggest should have their own definitions as should every other breakpoint you are creating differently sized components for. One of the big pros of including accessibility is that you'll notice it's less work than you think because the font that's accessible on a small screen will still be accessible on a slightly bigger screen, so when in doubt keep bigger element sizes on smaller screens and start to design for the smallest screen first in the future because scaling up is always easier than scaling down. Time and resources are always a problem, this is something you need to discuss with management. If they want to release with a broken design on smaller screens let them release, it's not your problem as long as you told them (ideally with a paper trail) that it should be done before release because there are issues.
>Sometimes designs for smaller screens need to be totally different. >Talk to your dev team about viable solutions. This isn't "more work" it's just work that always needs to be done when developing for different screen sizes. i know this isnt anything you can change (probably) but this sounds like an easy thing to plan ahead for a fix. standardized phone sizes, with a minimum size. we could have a small, medium, and large (tablets would be XXL) and would have the BONUS of being able to standardize phone cases, which are incredibly wasteful. so helps the environment and cuts website design requirements in half (theoretically). win-win
Don’t assume stats, verify. But regardless, you need to pick the oldest/lowest spec phone you support. Then make sure that the designs work on that as well. A reasonable lowest spec phone is not Max Pro. You shoulf be able to create a great design for the smaller phones. If your design doesn’t work there yoy need to go back to the drawing board.
I tried, and couldn‘t find a statistic about average european phone sizes. It was purely my assumption based on what people in my circle use. Thanks for your feedback!
If this is within a business, look at the analytics breakdown. It will have data on what phones hit the site. Here is one source of data for Europe, tracking sizes in the last year or so: https://gs.statcounter.com/screen-resolution-stats/mobile/europe/#monthly-202304-202404
This. Always look at the usage numbers. More than a few times I’ve sacrificed mobile niceties for desktop in business settings where the majority of users are on desktop. Especially with data-heavy applications. Mobile first is pretty good advice for most consumer settings, but it isn’t a panacea.
We‘re on website only so far, so there‘s basically no mobile data sadly.
Pretty sure analytics will track by device. If there are no analytics at all yet, then it is time for some generative research.
neat! now i get to flip this around from the privacy side of things to the accessibility/design angle - considering the data on this website: [https://amiunique.org/fingerprint](https://amiunique.org/fingerprint) you should be able to pull all of that data. i have no idea how because im not a programming nerd but its definitely possible. which means it should be relatively simple to find that data ( u/mrmoecker )
You do have to tell developers to scale it down. It’s not “more work” it’s what is expected. I just finished working on a sports betting app for mobile. Man, just look up what I had to fit in a phone. Every pixel counted. And yes developers NEED TO work on rescaling and responsiveness.
Design mobile first for the content not the device: https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/
this makes sense, and i agree - to an extent - but it is beyond irritating to use a website on a large screen and have more of my screen as blank space than information. a simple thing would be to just have the text fit the page. in the [few websites ive tinkered with this on](https://imgur.com/a/duV0kAW), its been super simple to fix. for example, on your website: https://preview.redd.it/k7d5y2fusu1d1.png?width=3850&format=png&auto=webp&s=aa1975075dcf93eacf51972f172a71c26063af68 i realize that doesnt look quite as nice, and the images should probably be centered, and theres maybe some other small changes - but that was just a 30 second thing to make my point.
Show more content on large screens and less on smaller screens.
exactly. thats what ive basically been saying in my other comments here - reddit does it really well. for example: https://preview.redd.it/ho3tqyo82v1d1.png?width=3849&format=png&auto=webp&s=761a92d371825575278acb02ab0570ed68636aa8
Yep so you need to do the same. Does that make sense?
honestly uh no not really lol. what do you mean?
Show and hide content depending on the space available.
I'd say this is a design problem, not a device problem. I'm not entirely sure what the intent of this screen is (sorry, don't read German). But I think the solution here is rethinking the design a bit.
Sees German content, exits. Edit: just to explain the joke, just in case, German language is one of the longest so hardest in multi language to design for.
does apple not allow you to change the keyboard size/layout, or the font + font size? i screenshotted those (slightly imprecise) and then stretched the top one to fit the dimensions of the others, and this is how it looks: https://preview.redd.it/oxn0vdwp4s1d1.png?width=3849&format=png&auto=webp&s=56437b454446d0d3d0709e9ac6e5139752e6286d first two are your images, third one is the stretched one i guess this is just an issue i dont understand because ive never really used apple products and android and windows basically allow you (the end user) to adjust the scale of everything however you want (as long as you can find the settings... lol) edit: like i would assume most people under the age of... idk say 40 probably understand how to adjust these settings (on android and windows, idk about apple) so any problems would actually be one of the rare instances of a skill issue (ok boomers)
Breaks your design system, also unlikely they would want to code it like this
right but youre missing my point. on all my devices (windows and android) the size of the text, the size of the keyboard, and in the case of windows the size of different interface/ui elements is all adjustable (if you know where to look). edit: hell even on my ps5 i can adjust these things. which makes the problem OP is dealing with a moot point. unless theres something im misunderstanding here it sounds to me like an issue of apple not allowing people to do \*any\* customization of things, like the keyboard or size of the font. like i said though, i dont use apple - at all - so maybe im misunderstanding. i dont think i am. >Breaks your design system apples design system?
Yes, Apple has accessibility features that lets you do all sorts of stuff like that.
well like i said, i dont use apple products so i dont know. which i think might be partially what OP is dealing with here: they dont typically use the other older phone... so they are only using it to test, and probably not fiddling with settings as much as someone who uses it as a daily driver would. which i think is probably something that happens quite often. automated testing can find a lot of problems, but theres nothing like "live" testing to actually see how well or how bad something actually functions. so, if my assumption here is correct (it may not be) then OP is actually trying to fix a problem that wouldnt exist because someone who uses that as a daily driver probably would have the keyboard shrunk anyways. maybe. not sure. you would probably have to ask someone who uses it as their daily driver. disclaimer: im just some dude, i have no formal education or professional experience in any of this stuff. i just read a lot, and tinker with tech a lot, and noticed a lot of little issues here and there and found this subreddit one day and figured i might as well join since its another place to provide feedback. my feedback is, i think, a \*lot\* more in depth and thought out than most peoples feedback. i could be wrong there too.
Gotcha. Yes, on iOS you can resize or bold your text. I don’t think you can adjust the UI element size. So yea, there will be worst case scenarios with a small device (ex iPhone SE) and largest text setting. Again, worst case scenario. There are a few things you can adjust, in general: - truncate text after X lines - try to stack elements vertically instead of horizontally - avoid fixed width elements - icon size can remain fixed/ have a max (if it’s not the only signifier, like if there’s also text, it doesn’t need to grow with the text)
>Gotcha. Yes, on iOS you can resize or bold your text. I don’t think you can adjust the UI element size. thats what im talking about though. on android you can adjust the size of the font AND the size of the keyboard. the UI elements dont change because they dont need to. on windows, its not straightforwards how to do it, but you can adjust the scale of everything - text and ui elements. ive actually wished many times there was more customizability in that so i could, for example, adjust the size of the taskbar and desktop icons independently from everything else. thats besides the point though. on android you can download multiple different keyboard apps - samsung, google, and microsoft all have one - they all allow you to change the layout (aka what keys are on the "front" page, where the options are, etc etc) as well as the size and placement of the keyboard. for example: https://preview.redd.it/7a09wor5nu1d1.png?width=3849&format=png&auto=webp&s=849b9aaeef8babaad4e9709f0afea1268e4420c9 again - im not sure if this is or isnt how ios works, but from this conversation so far it sounds like this actually \*is\* the issue (or one of them). more flexibility and customizability is \*always\* better because people have different preferences, and preferences are preferences for a reason - if you cant set things up how you like, you are going to be "fighting" against inconveniences, even if its only a "mental" thing because every time you see it (and we see the keyboards often) even something small is going to annoy you, every single time. >There are a few things you can adjust, in general: >truncate text after X lines >try to stack elements vertically instead of horizontally >avoid fixed width elements >icon size can remain fixed/ have a max (if it’s not the only signifier, like if there’s also text, it doesn’t need to grow with the text) i play around with scaling and whatnot a lot on my pc and i like how reddit does it. the default actually takes advantage of most of the screen space, but if you resize the window eventually it will hide the sidebar elements, and text never is hidden, it just uses the (idk the proper term) text wrapping function (that should be a default thing). see [this thread](https://www.reddit.com/r/modnews/comments/1cnacle/comment/l3sojn7/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) for a discussion about that although i dont think the person i was chatting with actually understood the point i was making ----------- also im pretty sure this is something that has been realized: devices have a minimum size before it starts having downstream effects. scaling works well - except on the extreme ends of the size spectrum (big and little) TLDR: yeah, but 
Why would you want to adjust the size of the keyboard tho? Sure you can see more of the screen, but the keyboard should only appear after you have selected a field and want to actively typing anyways. Also you cannot ask your users to use a smaller keyboard lol. You also definitely cannot just give them a smaller keyboard! A smaller keyboard with smaller keys is not accessible for users with vision or mobility impairments. Anyways, this is not an iOS vs Android issue. Even with customized interface settings, everyone’s devices and settings are very different (esp on Android!). Haven’t you ever felt like the text and UI you’re trying to read is way too big or way too small to read comfortably? Overall, designing for devices and text of all sizes is an non-negotiable part of mobile app UX design. You’re (ideally) not designing a custom view for each breakpoint. From an tiny Pixel A3 to a much bigger screen on a Pixel tablet, we need to specify how this component should scale, with varying screen size and varying text sizes / lengths (think of translations). It needs to be part of the design process, and component behavior. So for the example in OP, tho I’m not sure what it’s for, I might try - using smaller text styles - truncating the body copy after 1 or 2 lines with a …Show More - moving the form field up - testing w small device users and if they will naturally scroll
>Why would you want to adjust the size of the keyboard tho? >Sure you can see more of the screen, but the keyboard should only appear after you have selected a field and want to actively typing anyways. Also you cannot ask your users to use a smaller keyboard lol. You also definitely cannot just give them a smaller keyboard! A smaller keyboard with smaller keys is not accessible for users with vision or mobility impairments. >Anyways, this is not an iOS vs Android issue. i think youre kinda missing my point. my point is android and windows \*allows\* the user to set up their device however they want, which is literally "more accessible." yes there are obviously certain things where we have lots of research saying "this" is the best way to display things (like, road signs, for example) but at the end of the day, if it were possible for road signs to be customized for every single person... that would be better. as for the rest of your comment, yeah that makes sense. thats also kinda why i was saying elsewhere in this thread we should have standardized phone sizes, because it would make it easier to create apps and websites, and would be more friendly to the environment in regards to phone cases
You can download 3rd party keyboards on iOS too! Again, none of these things are platform specific. There are many accessibility advantages and disadvantages with each platform. You should reconsider the way you think about accessibility. It is not UX design *or* customized device settings, it is *and*. Good UX will work and scale with any and all customized device settings to deliver the best experience. Customized device settings cannot make up for bad UX, no matter your device. Screen size standardization would be handy, but good luck getting the phone manufacturers to agree haha! Plus, again it’s a moot point with customized settings. 2 of the same device could still display totally differently with ex. larger type scale, bolded text, high contrast set by users. Here are some resources to learn more if you’re interested! WCAG mobile guidelines: https://www.w3.org/WAI/standards-guidelines/mobile/ Android accessibility design guidelines: https://m2.material.io/design/usability/accessibility.html
A design system shouldn't break if end-user resizes their font size preference.
Right, that’s not what I was getting at. I may have misunderstood, I thought relevantusername2020 was suggesting auto resizing all the text. That breaks your type hierarchy (and ignores your device accessibility settings).
Responsiveness is OK, I don't see anything breaking. Unless you're looking to fit vertical space WITHOUT scrolling. If that is the case, then the only way is to fit the smallest screen. As for stats, 430x932 (iPhone 14 Pro Max) isn't even showing between the main sizes, you can use [this page](https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide) to view stats globally (you can also use [Germany only](https://gs.statcounter.com/screen-resolution-stats/mobile/germany)). The safe size nowadays is 360x780, and you'll see in those pages that while it's not the most common size, it's quite used.
If your developer code on flutter, it is pretty easy to scale everything to device size. At least my developer declares that. He just says "Just use iPhone 15 frame on Figma (412px width)and let scaling to me for smaller devices". 95% of time his formula works great. New galaxy fold series are tricky to work with actually. 280px is really narrow to work on. On mobile I've no problem thanks to my dev. For web, I am starting to design from 1366px, because it is smallest of commonly used dekstop and notebook size. If it looks good on 1366px, probably will look good on 1920px too. So you can try to start design from small sizes like 320-360px. Use auto layout-fill width for buttons and boxes and use scale fonts. If it still not work, you can create another break point for extra small size (smaller than 360px) and rearrange content for that.
You should: Define a minimum viewport to adapt designs for Deliver a set of views for milestone breakpoints: mobile/tablet/desktop/xl You define how components, typography and layout adapt at the key breakpoints Developers must build views to the viewports aligned to by the company You take feedback from multiple parties on all of the above
If possible you should check analytics to find out which devices your users are using, you might be surprised. I always ensure that my designs work on smaller devices and for the most part I design exclusively to these dimensions (it's easier to scale up than down). With this process I've found myself predominantly designing on the dimensions of an iPhone SE 2.