Mobile First

Mobile First's approach is exactly what it sounds like: designing for mobile screens and then focusing on the desktop version. It is one of the best strategies to create a responsive or adaptive design.
mobile first

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.
 

Share this Post

Share on facebook
Share on linkedin
Share on twitter
Share on email
Share on whatsapp

Other Digital Terms

What should I do now?

If you have more questions and want to know how we work, contact us and one of our consultants will contact you for advice.

For further information on this subject and many more you can consult other articles in our blog where you will find references on this subject and many more.

If you liked this article you can share it on LinkedIn, Facebook or Twitter, I’m sure you have contacts who will like it as much as you do.

Free digital terms course

Sign up and get a new digital concept every week.

Want to boost your business?

Check out our digital services

small_c_popup.png

We are here to help

Discover how we have helped more than 40 SMEs and large companies to improve their digital strategy.