What is Mobile First?
The Mobile-first approach is a principle of progressive improvement. It is the ideology that mobile design because it is the most difficult, must be done first. Once the mobile design questions are answered, designing for other devices will be easier. This comes down to one fact, the smallest of designs will have only the essential features, so you will immediately have designed the heart of your UX
or user experience. The opposite approach is to start from the desktop design. This incorporates all the complexities from the start and then removes them later for smaller devices. The problem with this gradual degradation is that when the all-inclusive design is built from scratch, the core and supplemental elements merge and become more difficult to distinguish and separate.
Why is the principle of “Mobile First” so important in the design of digital products?
As we mentioned earlier, there are tangible reasons to believe that the “mobile-first” principle is important in product design. It is because of the explosion of mobile phone use. 1. The use of mobile Internet has surpassed the use of the desktop in 2016. 2. People spend more and more time on the Internet from their mobile phones. 3. In early 2012, sales of smartphones exceeded those of computers. The explosion of mobile urges designers to pay extra attention to the mobile experience and to follow the “mobile-first” rule in product design.
The Mobile-First design process
We will describe a process that helps us in our designs. As usual, wireframing is a recommended initial step to structure your design more efficiently. When prototyping, we use the breakpoint or breakpoint menu that streamlines the process of moving to different screen sizes, starting with the smallest.
Our process follows these steps:
1. Inventory of contents
It is a spreadsheet or equivalent document that contains all the elements you want to include.
2. Visual hierarchy
Prioritize items in the content inventory and determine how to display the most important items prominently.
3. Design with the smallest breakpoints and then scale
Build the movable structure first, and then use it as a model for larger breakpoints. Enlarge the screen until there is too much blank space
4. Expand touch targets
Fingers are much wider than the pixel-accurate mouse cursors, and therefore need larger elements to click on. At this time, Apple recommends 44 square pixels for touch targets. Give hyperlinks a lot of space, and slightly enlarge the buttons, making sure there is enough space around all the interactive elements.
5. Don’t count on the “hovers”
It almost goes without saying, but designers often rely on hover effects in their interactive work. If you are thinking of a mobile, do not do it. There is still no similar effect for fingertips.
6. Mobile users are used to movement and minimum control within their experience
Think of off-screen navigation, expandable widgets, AJAX calls, or other on-screen elements that users can interact with without refreshing the page.
7. Avoid big graphics
Landscape photos and complex graphics don’t display well when the screen is only a few inches wide. Assist mobile users with images that can be read on laptop screens.
8. Try it on a real device
Nothing is better than discovering for yourself the level of usability of a website. Get away from your desktop or laptop computer and test your product on a real phone or tablet. Is it easy to navigate? Is it optimally loaded? Are the text and graphics easy to read?
This has been our introduction to Mobile First. If you have additional questions or want to develop a website that is perfectly displayed on mobile devices, we can help you.