Home » Tech News, Tutorials

Mobile-First Design: Pros and Cons

17 June 2012 No Comment

Traditionally, web development professionals and clients focus on the desktop part of the project first and leave the mobile side as a secondary goal. Even with the availability of responsive design techniques, we tend to begin with the “full-size” version first and work our way down. However, there is now a growing trend among Web designers to start from smaller form factor. Experts in the industry have found the right way to flip the traditional workflow on its head, which allow us to safely work up to bigger version of the design.


Many Web designers still have it in their heads that web design for mobile sites is a niche in the industry. But mobile is no longer a trend nor it is the future. It’s already in the present and there are some statistics to prove that. There are nearly 1.5 billion users of mobile Web worldwide. In the United States alone, 25% percent of internet users are mobile-only and they rarely use desktops or laptops to access the Web. These facts bring to light that many users are more likely to use the mobile web. Also, the fact that many users recycle mobile phones shows how responsible the audience is.

We can now carry the Internet in our pocket; it is no longer something that sits on our desk. This is a pervasive global trend that will continue to grow for years to come as there’s still plenty of room for it to expand. Web developers should be ready for this and prepare the skill set that is needed to establish a solid presence in the mobile Web.

Pros

Graceful degradation was a popular concept years ago and it arose out of a need to have website designs that work on as many as platforms and browsers as possible. Web development professionals always want to take advantage new technologies without excluding potential users with setups that receive little support. The idea is to serve up the best user experience possible, put it on a smaller display and take out anything inessential while ensuring that the website would stay functional. It means a fully featured Web design can be scaled back by removing inessential features and content as the display size becomes smaller. For example, a Flash-enhanced site needs to remove anything that iOS doesn’t support.

A new powerful idea arose and it was called progressive enhancement. This is essentially a type of mobile-first design. Web developers often put their best foot forward, providing everything technically possible on a small screen real estate. As the need arises, it can be enhanced gradually and even expanded for desktop users.

At a glance, graceful degradation and progressive enhancement seem roughly the same. Who cares which one you chose as long as everything gets done, right? The reality is a bit more complicated though. When you choose the desktop first approach, it is easy to be compelled to take advantage of everything the platform has to offer.

Many Web developers develop a websites that leverage useful desktop technologies, only to realize that almost none scale well down to mobile. This situation often leads to mobile websites that feel severely watered down and look more like ugly afterthoughts than fully finished products. It may not happen with every web development project, but it happens far more common than we’d like to believe.

If we take a look at the workflow of progressive enhancement more closely, things look significantly different. Here developers are starting with something that’s both impressive and super lean. They have taken all the initial energy and put it into a design that functions and looks well despite some restraints they face.

With progressive enhancement, you no longer need to go through the problem of trimming down a design to its most vital elements. Now, when you want to bring the whole design to a bigger display, you don’t need to be concerned about how to water down the design and what features to cut.  The above argument comes from an entirely philosophical standpoint with the final conclusion being that mobile first approach tends to provide better end results. When we choose the graceful degradation approach, all the content – texts, images, videos, audio and others – is served up to a large platform, typically desktops with wide screen HD monitors. From here, establishing a mobile version may mean removing much of the content. The problem though, this approach could cause your mobile to be less informative to users and provide less value.  With progressive enhancement approach, Web designers start of from bare essentials on the smallest platform. Desktop version of a mobile website usually provides snappier user experience with minimal lag. Additional resources and features are added solely on an as-needed basis.

So where responsive design fits in? Fortunately, responsive design isn’t a competing strategy and you can use it regardless of which approach you choose. Responsive design is based on the media queries concept that target specific display sizes and devices. With this fact in mind, developers can code up their initial CSS for the smallest display size and use media queries to serve up additional styling selectively as the display size increases. This is the opposite of common responsive design method, which is to start big and then reduce. There’s obviously more than enough logic behind structuring media queries from smaller displays to bigger ones.

Cons

So far, hooray for mobile-first design and it is definitely a significant milestone in web development industry. But, the fact that 25 percent of internet users being mobile-only also mean that the rest of them aren’t. Without doubt, personal computers are still important for users they won’t be pushed back to the back burner and forgotten completely. Considering this fact, why many Web developers are taking the mobile first approach for granted?  Even though they gush over responsive design, they often downright avoided this topic. The reason is obvious: it’s neither easy nor fun.

When Web developers choose mobile-first design, they are often hit over the head with numerous constraints, such as smaller display, weaker hardware, lack of support for certain technologies and others. Mobile-first design can be a bunch of headache and it is often not a comfortable territory for many contemporary web developers. If you have spent most of your web design career using desktops or laptops; building layout based on fingers taps and swipes may not be your strongest suit. From a strict design perspective, professionals often find it hard to really dive into a project if they are staying from mobile and working their way up.

Conclusion

It appears, in the “pros” category, we have logical and straightforward arguments that we can’t easily downplay. But in the “cons” category, it seems to be mostly related to developers’ personal hesitation. So, which side wins the battle?

Perhaps, others can come up with better arguments for both categories. However, from objective and professional viewpoints, it’s quite evident that the mobile-first approach is stronger. This means, Web developers need to get over themselves and rise to the challenges by starting projects completely from mobile viewpoints. If you are not comfortable with a mobile-first approach, it means you still have many things to learn.

Ultimately, it is recommended to choose mobile-first approach due to user-centric considerations, because it is all about giving the best for your users.

About: This post was written by Raja, A Regular Blogger at TechnologiesReview.com

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.