Mobile-First Approach — why is it important?
Progressive Enhancement and Graceful Degradation
There are two techniques that can be applied to designing a website. One is Graceful Degradation, which most designers use in Responsive Web Design (RWD). It assumes that the first build of a product is for desktop browsers. Then tablet and mobile designs are produced, reducing the number of elements at each phase, due to platform constraints.
Out of this idea, a new trend developed: Progressive Enhancement. It's strongly associated with a mobile-first approach. It entails designing for the smallest screen first and moving gradually upwards to the largest one. It's all about adding enhancements, like complicated interactions or effects that are possible on bigger screen sizes.
Pros and cons
Worth mentioning here is the fact that these methodologies are not exclusive and both RWD and mobile-first approach are widely used by designers. However there is a tendency to employ the former more often. Why? Because it was the first methodology applied to designing websites. And it doesn’t have to mean that this is a wrong approach. Most designers are just used to it. They are aware of tablet and mobile constraints and bear these in mind from the very first stage of creating a digital product. Secondly, it is just more fun to dive into a big screen design. There, you can let your creativity loose and produce a highly interactive, beautifully illustrated website.
On the other hand, the mobile-first approach wouldn’t be in use these days if it hadn’t be for benefits for businesses and for the user experience that a product built in this way provides. The greatest strength of this methodology is that it concentrates on the core UX elements of a website. This means the focus is on content, which is the most important aspect for mobile users. Not fancy effects that may slow down the website or distract them from a task. It is estimated that a 1 second delay may cause a 7% loss in website conversions.
Another vital advantage of Progressive Enhancement came about because of Google. In 2016, they decided to change their indexing policy and said:
“Today, most people are searching on Google using a mobile device. However, our ranking systems still typically look at the desktop version of a page’s content to evaluate its relevance to the user. This can cause issues when the mobile page has less content than the desktop page […] To make our results more useful, we’ve begun experiments to make our index mobile-first.”
Google is planning to fully implement mobile-first indexing this year. This will have a huge impact on search results and businesses that haven't optimised their websites for mobile may suffer. Deciding to employ a mobile-first approach may help new and redesigned websites achieve higher search engine listings.
Is this an approach for me?
First, you need to evaluate and decide what your goals are. For some companies, opting for Progressive Enhancement can be very expensive and may not generate expected results, so applying RWD may be a better choice. For example if most of their clients use desktop products.
Start by determining who visits your website and what devices they use. This will give you enough information about your user base and what they want from your website. If you notice that most traffic comes from smartphones, mobile-first approach is definitely worth going for.
Mobile-first approach plays a crucial role in design. It tends to focus on the content of a website, which may be significantly beneficial for a product’s success. Although good UX should always be a main goal of a design process, deciding whether to use Progressive Enhancement or not remains a big question for many businesses. Nevertheless, looking at big companies like Google, we can predict that this approach has the potential to completely eliminate other methodologies on the market in the near future.
See 5 reasons why you should outsource your mobile app development here and if you're willing to start your adventure with mobile and have any questions, contact us.