We create digital experiences that are flexible, efficient, and usable on any device. When we create new digital assets, mobile can't be an afterthought. In the U.S., people now spend more time online on mobile phones than on desktop. Of Americans who own a smartphone, 62% used their phone in the past year to look up information about a health condition. What's more, for many low-income people and people in developing countries, mobile is the only available way to access the internet. For these reasons, multiple platforms and screen sizes have to be part of our process from start to finish. The outcome of designing for mobile first is a digital experience that feels just as clear and easy to use on a smartphone or tablet as it does on a desktop.
It is important to note that the content and data rendered in a mobile experience is the same content and data rendered in a non-mobile one. A mobile experience is not less than a non-mobile one, its simply rendered in a narrower form with potentially some slight interaction differences.
Mobile First Tips
- Create mobile versions of design comps or wireframes before you create desktop versions. This establishes a clear vision for what the site would look like on mobile as you design and write.
- Prioritize features and functionalities for a smaller screen. Make the highest priority information visible on the screen, not hidden in a menu.
- Build the layout for pages based on a responsive grid.
- Use media queries to adapt designs to different screen sizes.
- Use familiar and consistent interactions and components.
- Take care when using images and videos that will slow the time it takes for the page to load on mobile. Take the appropriate technological approach to create sites that load within 2 seconds.