Recently I got a redesigning project of an app screen for our Client Appland. The time I saw their original design, I was planning on what all we can incorporate to make the user experience unique but at the same time relevant to the brief. So my team and I planned to design the tab side first while leaving the mobile part as a secondary goal that gets accomplished later. But this time, our client asked for a mobile first design. This was unusual from all the UI/UX projects I have worked on.
“Progressive Enhancement” & “Graceful Degradation”
For a long time, with the rise of responsive design, many of us begin with the “full size” site design first and then work our way down to smaller screens. This approach is known as Graceful Degradation. But while researching for this project, I got to know about a growing trend in the industry to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version. In 2011, Luke Wroblewski devised the concept of mobile first design. The mobile-first approach is a tenet of progressive enhancement, as opposed to degradation. The ideology is that mobile design is the hardest and should be done first. It essentially revolves around the premise that once all mobile design questions are answered, designing for other devices should be a piece of cake.
Why Mobile First Design Wins?
You might be wondering that how is progressive enhancement a better approach? I have put it all together in the infographic below. Let’s take a look!
The Mobile-First Design Process
1. Content is the hero
The best design focuses on delivering what’s essential and Content is the most important part of telling your story in a way that’s meaningful to your users.
2. Prioritize Hierarchy
You must prioritize the elements in your content and determine how to display the most important elements prominently.
3. Design with the smallest breakpoints and then scale up
Build your wireframe according to the mobile screen first, then use that as the model for larger screens.
4. Enlarge the touch targets
Think about the fingers which are much wider than pixel-precise mouse cursors, and use larger elements on which the user can tap.
5. Don’t depend on Hovers
Designers often rely on hover and mouse-over effects in their interactive work. If you’re thinking mobile-friendly design, then don’t depend on Hovers. There is no hover control for fingertips yet.
6. Avoid Large Graphics
Landscape photos and complex graphics don’t display well when your screen is only a few inches across. Always use images and graphics that are readable on handheld screens.
7. Test on a real Device
Load up your product on a real phone and ask yourself all the important questions. Is the site easy to navigate? Does it load in a timely fashion? Are the text and graphics easy to read?
Give it a try
However, we don’t have any mobile first functions with our current version. That’s why we have been meticulously brewing something new for the future. Personally, delivering a pleasurable user experience should be at the heart of what we do. Using this mobile first design will not only make your life easier as a designer but it’ll make the life of the user easier too. And isn’t that why we do this? So what’s holding you back? Try this and let me know if it helped you.
Feel free to use the comment section to write your doubts.
