Review the information below to ensure your webpage can be easily viewed on smaller screens, like tablets and smartphones, for users on the go.
Fonts
HeadStart.gov fonts are standardized across the board, which prevents issues that may otherwise arise:
- Title: Roboto, 2em, #264b65
- Heading: Roboto, 1.5em, #264b65
- Sub-heading: Roboto, 1.123em, #264b65
- Body: Lato, 1em, #333333
Images
- Images should disappear on the mobile viewport
- Exception: An image that is key to the content discussed should remain visible (e.g., infographic, results chart, etc.)
Interaction
It is important that user interaction occur even on the mobile platform. Since "hover" isn't available, actions such as "active" or touch technology, swipe, and screen movement are critical. They acknowledge the user and ease use of the site.
Load Time
Even with faster load time, image file sizes should be very low for mobile. There is no standard file size requirement, but you must optimize all images prior to use.
Modal Windows
Windows should resize themselves according to the viewport.
