Mobile First = User First

by Posted on

Intro

Do you remember as a child if your mother told you to eat your broccoli before you can have dessert? Though broccoli is nutritionally better for your diet, the dessert tastes better. My mother would tell me and my siblings that if you eat the worst thing on your plate first then everything else is easier to eat. The concept of mobile first design  can be seen the same way. It means that before building a desktop website, a mobile version should be done first. It is becoming more widespread as new web designers begin adhering to it. In the past, the desktop website was always given priority and there are web designers who still practice designing the ‘big’ website first. So why change it now?

  • Eat Your Broccoli!

Mobile Device Usage

“Today, the mobile experience is more important to consumers than ever before.”

This is according to a February 2019 article on Bittbox.com, Ways to Keep the Mobile Experience in the Forefront of Your Website’s Design. The mobile experience is important to consumers because these days people are always “on the go”. As a result, the usage of mobile devices has increased. At least, one of the following mobile devices is owned by most people: smartwatch, cellphone, tablet, and laptop. So one major reason for making a change in web design strategies is because people are using their mobile devices first. 

The results of a June 2019 survey, Mobile Fact Sheet, by Pew Research shows that 96% of Americans (across a wide range of demographic groups) own some kind of cellphone. Smartphone ownership, in particular, is 81%.  Also, dependency on mobile devices is growing since some people either rarely or never use a desktop browser. The same survey found that 1 in 5 American adults only use their phones to access the internet and don’t have a Wi-Fi service provider like ATT, Xfinity, Suddenlink, etc. 

  • chart from pewresearch.org

Graceful Degradation

For years, it has been the trend to build a website for the most current desktop browsers. These browsers give users access to more content simultaneously due to their larger screen size. The use of technology (such as the processing power) in a desktop computer is greater than that of mobile devices and can more easily run programs and applications.

Older versions of the browser and mobile browsers were made to work afterwards. Even if certain technologies expected by the design are missing, the goal of Graceful Degradation is for a web page to degrade so that the content is still presented. With mobile devices having smaller screen sizes, the content would need to be arranged to fit the mobile perspective. If an older browser is being used, it may not render certain features that the latest browser had.

Some problems that arise with Graceful Degradation include the following:

  • It’s always harder to strip away than it is to make additions to a website because the main content and sub-content are harder to separate.
  • The content on a desktop website doesn’t always translate well for a mobile view.

Websites built using the Graceful Degradation method are not responsive to mobile devices. This was a concept that was first mentioned by Ethan Marcotte in his 2010 article Responsive Web Design. He explained that building a responsive website refers to the ability of a website to adapt to different resolutions and devices on which it is displayed (PCs, laptops, tablets, smartphones, etc.) without undergoing degradation. Out of this lack came the tenet of Progressive Enhancement. 

Graceful Degradation vs Progressive Enhancement

Progressive Enhancement

Based on the above diagram, you can see that the 2 strategies have the opposite workflow. 

 It might even seem that they are very similar upon first glance but they aren’t. Building a website starting with the mobile browser and “enhancing” the website for a desktop version makes designing for larger screen devices easier.  “It is the ideology that mobile design, as the hardest, should be done first.”, according to a blog article on Unpix.com titled, Hands-on-Guide to Mobile First Design. 

Progressive Enhancement is now the new trend but it really isn’t so new anymore. I mentioned in the intro that many web designers are putting this strategy into practice and are liking the results. “Nowadays, responsive web design is no longer a new technique in tests, but a technical trend. Since 2013 it  is the most used, because more and more owners of websites want to offer a pleasant experience to users as they use the mobile Internet, and the phones, tablets and mobile devices find their way in daily life.”, according to the article Responsive Web Techniques on Research.net. 

 In a post by CSS Stars, they list some advantages of using Progressive Enhancement:

  •  It starts with the basic version and adds further enhancements on top of it later.
  •  It’s considered favorable crawling by search engines.
  •  It’s easier to test and verify whether it works properly.

Conclusion

Designing mobile websites forces designers to only add content that is needed and prioritize content accordingly.  It is the best way to offer a good user experience. In doing so, you are building responsive websites that adapt to the user’s device without the website degrading. That’s why designing websites with mobile first is putting the user first.

Works Cited 

Published by ngreer