Standard mobile design guidelines. Use Dev Tools for testing, and run a final check on your mobile device to double check.
- Dev Tools, please check the below resolutions:
- iPhone 12 Pro
- iPhone 14 Pro Max
Font Size and Text
- Body text: 14px default
- Between 12px and 16px is okay too
- H1 Heading: 32px default
- Between 28px and 38px is okay too
- H2 Heading: 26px default
- Between 24px and 28px is okay too
- Be sure that all content is using paragraph tags and not break tags, so that on mobile we don’t have uneven breaks.
Padding and Spacing
- There should always be a padding of some kind. Its not acceptable to have text hard aligned with the edge of the screen or image, etc.
- Padding default should be small, somewhere around 5px to 10px.
- We should not have big empty spaces anywhere. Examples:
- Lists should be in at least two columns, unless the text in the list is long and fills the screen.
- Images should span the full screen if possible, or if multile images, add in two rows.
- Spacing and padding should be very consistent throughout the page, we don’t want a big padding value and then a small padding value.
Colors and Links
- There should be a strong contrast between the background and text.
- The hover state of links should also have good contrast.
- Links should be underlined (rare cases it might sense to remove underline for a specific design).