Designing HTML for iOS Welcome and Category Screens

The below details the total screen-sizes, and the actual area you have to work with.

Welcome and Category pages fill 100% of the available width and height of the target devices screen.

One consideration is that toolbars and tab bars are automatically added by the app when it’s compiled, and these will ultimately encroach on your designs, so it’s important to ensure that there’s nothing you wouldn’t want covered up present at the very top or very bottom.

If you can take into account these toolbars, and use margins to nudge down the designs then your provided HTML will look identical to the final version.


(All versions, including retina devices and iPad mini)





See how the top toolbar is 40px, if you want to ensure that say, a logo, isn’t obscured by this toolbar, then give it a margin-top of 40px. If you are using Adobe Edge, ensure your stage size is always going to be 2048px X 1536px for landscape and vice versa for portrait.

Have more questions? Submit a request Print Friendly and PDF


Powered by Zendesk