The Marion Blog

February 7, 2017

Mobile-First Web Design 101

Mobile-First Web Design 101

The modern consumer is more mobile than ever. As a result, mobile marketing and mobile web design have become a prominent focus for many businesses. Because both of those initiatives start with powerful and compelling mobile design, the web design industry has recently become highly focused on effectively designing and building mobile experiences that convert users.

Consumer data is the foundation for their focus. Consider the following statistics about mobile device use, mobile sales, and web design:

  • In 2014, the number of global mobile users surpassed the number of global desktop users.
  • BI Intelligence estimates that m-commerce (e-commerce on a mobile platform) will reach $284 billion, or 45 percent of the total U.S. e-commerce market, by 2020.
  • Two-thirds of people would rather consume beautifully designed content than something that’s plain.
  • 38 percent of people will stop engaging with a website if the content is unattractive.

To win today’s on-the-go consumer and maximize success, today’s businesses must place a substantial focus on mobile marketing and mobile web design.

What Is Mobile-First Web Design?

Mobile-first web design is similar to eating the steamed spinach on your plate before moving onto the filet. It assumes that the best approach to responsive web design means doing the hardest work first.

It means designing a site’s mobile UI (user interface) before its desktop UI.

It’s a commonly held belief in the web design industry that designing for mobile interfaces is the most challenging stage in the design process – and for many reasons.

  1. You’re working with less real estate. A mobile screen is significantly smaller than a desktop, so designers have to be very focused and intentional about what they want users to do, and should make the process of completing an action very obvious.Because only the best content can make the cut, it forces designers to be highly selective about the content that’s displayed.
  2. It’s easier to expand content than it is to condense it. It’s much more difficult to shrink a full web page of content down to a four-inch screen than it is to expand and add on to condensed content.
  3. It goes against the traditional approach to web design. Five years ago, a designer would likely begin imagining a web experience on a larger desktop screen, then only consider the mobile experience afterward.With mobile-first web design, that designer now must go against that instinct and maximize the mobile experience first, while giving just as much consideration to how a site will look when expanded on a full desktop screen.





24 Website Must Haves - ebook download




Why Is Mobile-First Web Design Important?

Mobile-first web design is important for many reasons. First, it’s the path of least resistance. Our designer from above will have a much easier time expanding on mobile designs than condensing a desktop screen. When you’re working on a tight timeline and restricted budget, those resources matter, and it’s important that you stick to the path of least resistance.

Mobile-first web design also results in a better customer experience. When a designer starts a project by considering who’s on the other end of that device, rather than by devising a way to shrink down too much content, the result is a better customer experience.

Additionally, mobile-first web design forces designers to be selective about their content. The capabilities of the web are seemingly limitless, and often that means companies create too much unnecessary content, sacrificing quality for quantity. With limited space to design, mobile-first web designers identify the most powerful content rather than throwing it all onto a page to see what sticks.

Finally, mobile web design is just as important to a marketing mix as print designs, email marketing campaigns, branding strategies, social media and more. And it should be thought of as a key player, not an afterthought to desktop web design. As mobile web consumption continues to grow, the companies that consider a mobile-first approach to web design will likely see higher rates of mobile conversion than companies that don’t.

Is a mobile-first web design right for you?

Is your website working on mobile?  Is it built with a responsive design?  Can it be updated or will you have to rebuild the entire site?  These are most likely questions that prompted you to read this article.

The first step for anyone considering mobile-first design is to determine the current state of their website.  Does it have a responsive design, optimized for a broad range of devices?  Not sure?  Simply pull your website up on your cell phone, that should give you a good idea of whether your site was built with a responsive design or not.

If a website is not responsive, the next step would be to determine if the website, as it currently exists, can be optimized.  There are factors that weigh heavily into whether a site can or should be converted into a responsive design.  The main factors to be considered are:

  • Site structure (html, css, etc…)
  • Site complexity (size, content management system, etc…)
  • The technologies used to build your site (JavaScript, Flash, etc…)

If for example, a site relies heavily on Flash-based elements, then a large portion of the site will be unusable on a mobile device, and there would be no point in converting it into a responsive design.

In this situation, unfortunately, the answer is most likely a full redesign of the website.  The bright side is that this will give you the opportunity to re-develop your site using a mobile-first approach ensuring that, to some extent, you have a design that will last for years.

If your website is structured correctly and is not overly complex, it may be a good candidate to convert into a responsive design.  An audit will need to be done to determine if it falls into this “Goldilocks” range.

In some cases, it may be that redesigning your website from the ground up, or mobile out in this case, will realistically be more cost-effective than converting the existing design.  You should consult with a reputable web design company to make this determination.

Regardless, the simple truth is that, as a business owner or marketer, you can no longer ignore mobile web design.  It’s just as likely that a visitor will hit your website from a mobile device as a desktop.  If they cannot successfully engage with your website on whatever device they are using, they are extremely likely to abandon your site and find a site that they can engage with, and that site will probably belong to a competitor.