1

I've got a design a few days ago where the paddings are defined in percentages in regard to the screen width and height. It could be done with auto-layout, but I am not sure that this is a best practice. Before that I always used paddings like 16px from the left 16px from the right.

I don't know how apple do it, e.g. Does the padding of elements look the same on iPhone4 and iPhone6p in portrait? What is the best practice in native apps?

For example: the padding of the first element in a cell of tableview, it could be 12px or 5%.

It makes sense using percentages, but I couldn't find a reference which says that it should be done in that way or the other way.

So which one is the standard should I use pixel/point based padding for texts and buttons or ratio based?

Image, icon sizes are an exception of course.

Every size in the apple design guidelines and other guidelines are defined in points/pixels.

I hope my question isn't that broad, It could be answered with specific advantages and disadvantages or an article about the topic.

Examples: http://iosdesign.ivomynttinen.com/ https://designcode.io/iosdesign

1 Answer 1

2

The reason people use percentage as opposed to px/or is to make it responsive and show the same on all screen sizes, or in this case iOS Devices. Take a look at these screen sizes and how much they differ. If you set a button to 200px wide it will take up most of the screen on an iPhone 3 in portrait orientation but will be a small fraction of an iPhone 6+ held in landscape orientation.

The reason why you may not but using auto-layout is this app (without knowing exactly what it is) may have been developed on or to be used by a different computing device. If someone built the application using percentages for a full size desktop website it would still work the same on iOS devices. So it could just be a compatibility thing. That or the developer simply wasn't used to the auto-layout tool, I for one don't know what it is other that the article I just read about it, so if given the task to make a responsive webpage I too would just code in the percentages and not use the tool.

As for when to use percentages versus pixel/points that depends on a lot of factors but you can find many articles showing when to use each:

Web Layouts: pixels vs percentages

Percentage layout

Scales with screen size, therefore get to use more space if it's available.

Pixel layout

Always know an element's exact size. Creating precise layout is easier.

Credit to: Pat

And for fonts see:

Font sizes in responsive web design

1
  • Thank you for your answer! It makes sense using percentages on the web for sure. Scaling also can be solved by setting the left and right padding to a certain value e.g 10px so the width of the element is screensize-20px, that case the design is also responsive. Thank you for the web examples, I can learn from them. Unfortunately, I don't know how apple do it, e.g. Does the padding of elements look the same on iPhone4 and iPhone6p in portrait? What is the best practice in native apps?
    – flatronka
    Aug 5, 2015 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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