Truly adaptive layout in iOS

different factors to consider while making the adaptive layout for the iOS app

Here are challenges and attributes, which need to be taken care of while making any layout adaptive in iOS.This is a kind of checklist, for making the layout truly adaptive in the iOS application. This is a kind of self-note and ongoing list that I will update in the future. And this is kind of starting for blogging for me.

1. Large font:

(This applies only if the dynamic font size is supported by your application) Check with the smallest font size to the largest font size, you can take the help of automating this part with help of Fastlane or XCUITesting. There is a term attributed to this technique: screenshot test, where you automate changing font size, visiting view, and taking screenshots. And visually checking if in all the cases your layout is rendered as expected.

2. Bond Font:

(This applies only if the dynamic font size is supported by your application) After reaching the maximum text font size, there is the slightest chance of increasing font size by enabling bold font.

3. Orientation:

iPhone users hardly notice a lot of application avoid supporting landscape orientation, to avoid handling these orientation changes and issue. If your application supports landscape orientation check if your layout shows as expected.

4. Screen sizes:

There is a lot of screen sizes available, from iPhone SE to iPad Pro. Even it is not possible to manually test on each device, all the devices can be categorized into 3 categories (small, medium, and large). Apple categories in just two based on the layout (compact and regular). To test auto layout you can go with three categories.

5. Different multitasking mode for iPad:

This applies only if your application, supports multitasking for iPad. For different sizes of iPad, different orientations and layouts lie in a different category, which is clearly defined by apple. Custom controls became a headache for this case.

6. Different languages:

(L-toR, R-to-L): Even you tested with your development changes with the largest possible size. The same text may be larger in some other language, so figure out the most verbose language supported by your application, and test in that language. Again screenshot testing may help you here. Another factor included here is the indentation of language, if your app support language with different indentation, then make sure you check the layout in both indentations.

7. Hotspot connection:

This may look a bit odd, but when the hotspot is connected, or any call in the background, it takes some space around the status bar. For costume views it may be the issue, try layout with simulating this.

No Comments Yet