While redesigning our website, we were bothered by the screen title of the app on the introductory page appearing off-center. Admittedly, we had noticed this before, but had never taken the time to fix it properly. Until now.

Three things were wrong:

• Screen titles appeared slightly to the left of the center of the navigation bar.
• Longer screen titles were cut short with an ellipsis (“…”) much too early, even on screens without a Next button.
• On some screens, the Next button appeared suddenly after you moved to the screen and pushed the title out of the way.

These issues didn’t stop an app from working, but screen titles are among the first things your users see. They should look right.

What happened?

Calcapp builds on a third-party code library which, among other things, draws the navigation bar. The library reserves the same space on both sides of a title, which left longer titles short of room. It also measures the buttons only once, as you enter a screen, so the title had to move for a Next button that appeared later.

What we changed

Screen titles that fit are now centered in the navigation bar.

Longer screen titles are now centered in the space between the buttons, which means that they make use of the space available to them. They are only cut short if they actually don’t fit.

The Next button now takes up its space from the moment you enter a screen, so that the title is in its final position right away. The button then fades in once the transition to the new screen has completed.

These changes apply to all apps, and you don’t need to do anything to benefit from them.

Let us know

Details like these are easy to overlook, but they add up. If something about your app doesn’t look the way you expect it to, please let us know. Your reports make Calcapp better for everyone.