Windows Phone UI Tip – 95px padding at the bottom

I’ve found this tip recently that isn’t documented at all, and yet is important for every Windows Phone designer and developer. If you have scrollable content on your page, you should put 95px bottom padding at the end of your content. This way the content doesn’t reach all the way to the very bottom of the page.

For example, here is a simple page that is slightly higher than the visible area:

Simple scrollable page with zero padding at the bottom

Simple scrollable page with zero padding at the bottom

If user scrolls to the end of the page, the rubber band effect will come into view and the content will be pulled slightly above the bottom. But once the scroll is released, the content bounces back down to the edge of the screen once again.

Simple scrollable page with zero padding at the bottom scrolled all the way up

Simple scrollable page with zero padding at the bottom scrolled all the way up

While it doesn’t poke your eyes and it generally works OK, having content stretched all the way to the bottom is not ideal. The quick fix for this is adding 95px margin to the bottom to move your content away from the bottom – regardless if it is bottom of the phone chrome or the application bar. The final result is more pleasing to the eye.

Scrollable page scrolled to the bottom with 95px padding

Scrollable page scrolled to the bottom with 95px padding

You can see the same padding in effect if you check the profile and history pages on any of your contact. It is also present on the new appointment page in the Calendar app and in the Internet Explorer’s settings page. Speaking of settings, scroll down to the bottom in the Settings application.

Like every other design tip – the effect is subtle, but it works :)

Last updated by at .