SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How to Develop and Test a Site Using Mobile-First Design

September 6, 2018 by Spyre Studios

mobile app development

You’ve spent hours honing in the branding. You’ve followed SEO best practices for every page.  You’ve even painstakingly mapped out user flows to find the optimal page architecture. In short, you’ve built a beautiful website that you’re sure your visitors will love. It looks gorgeous on your 17” retina display.

But how’s it going to work for someone visiting the site on a 4-year-old Nokia phone?

As of 2018, more than half of all web traffic comes from mobile devices. Yet many companies and developers still build their site on and for desktop users. Mobile visitors are often an afterthought – even though they are, at this point, the majority.

As smartphone adoption and LTE network penetration continue to climb, mobile web traffic will only grow in importance. If you’re building a website, that means testing and optimizing the site for mobile users can no longer be an afterthought. It has to be front and center.

To adapt to the changing trends in user behavior and device usage, many developers are adopting the practice of mobile-first design: prioritizing a website’s functionality and UX on mobile devices first and foremost, then making any necessary tweaks to keep the site looking good for desktop users. The data tell us that this is the way of the future – so here are some practical tips for developing, testing, and perfecting a website using mobile-first design principles.

Responsive Design Is a Must

At this point, building a responsive website is almost a given, but it still bears repeating. Responsive design is at the very core of a mobile-first design framework.

In essence, a responsive website is one that detects the visitor’s screen size, then shuffles the content automatically to fit optimally on that screen. This stands in contrast to a website that simply scales the site linearly or loads the full-size website and has users scroll around to see off-screen content.

A responsive website is a must-have for any mobile-optimized website, but this is only the first step to mobile-first design. To truly build the website “mobile-first,” you can’t simply design the website on a desktop and then hit the “responsive” button: you have to fundamentally shift your design process and priorities. It’s a fundamental change in approach.

Progressive Enhancement Over Graceful Degradation

Traditionally, web developers achieved mobile optimization through something called “graceful degradation.” This approach involves building the website first for a desktop user, then designing the website to be responsive but eliminating less important content as the viewer’s screen size shrinks. There’s nothing inherently wrong with this approach: the website will still be usable on a small screen. The problem is that graceful degradation treats mobile users as an afterthought.

Mobile-first design involves taking an inverse approach. Instead of building the site on desktop and eliminating content for mobile screens, true mobile-first design uses an approach called “progressive enhancement.”

In progressive enhancement, you design your website for the smallest screen first: a smartphone. The first step is to create a layout on a smartphone screen, arranging the most important content and site elements for the best possible user experience on that screen. This means designing the site with an eye towards the absolute most important things for users and for the business.

For an e-commerce website, this would mean featuring your newest and top-selling items as the centerpiece of your website, as these are what most users will be looking for and what lead directly to sales. From there, you start to add in other elements like less popular items and miscellaneous information on the business.

Designing this way is what “mobile-first” really means: very literally, you start the design process with the mobile website. Then, you add elements as the screens get bigger.

Inverted Priorities

Another key element of mobile-first design is thinking about how the needs of mobile users might differ from desktop users, then designing the website to suit those needs as a first priority.

What this looks like in practice depends on the nature of your business and what your customers want from it. For a physical store, most mobile users will probably come to your site in search of things like address, phone number, and business hours. Accordingly, that information should be placed at the top of the screen, where a mobile user can see it immediately, instead of in the footer, where they might normally reside.

This is just one example, however. For a blog or content-based website, this could mean putting popular, new, or trending content first on the page. For a service business, it may mean putting a CTA or contact button at the top the page.

The point is that when it comes to deciding what’s important, the needs of mobile users come first. In a mobile-first website, the design reflects that prioritization.

Mobile-First Website Testing

Finally, mobile-first web design means taking a specific approach to user testing. In line with the previous points, your UX testing process should cater to mobile users as the priority. You want to design a good UX for mobile users first, then worry about how the site functions on a desktop. But mobile-first web testing goes beyond this.

In addition to straight-ahead user testing, you need to understand how your site functions in a wide range of possible mobile scenarios. This applies to more than just layout and screen size: you need to consider factors like network connection type, signal strength, the model and generation of a user’s device, even the web browser app that a visitor is using. To fully optimize your site for mobile, you must understand how the site performs under all these different conditions.

The testing process doesn’t end once your site goes live, though. You want testing to be an iterative, continuous process, which means you’ll need to continue collecting system performance and usage data for every user that visits your site. As the Rootstrap Blog explains:

“Keep those performance scripts running constantly. By leveraging these, you will do your whole business a favor. It allows an in-depth evaluation into usage scenarios and how these impact revenue. System performance monitoring is a huge aid to improving overall business intelligence.”

By all means, you should test as many scenarios as possible while your site is in development. But the reality is you can’t predict everything. Continuous performance monitoring lets you identify problems as they happen in the real world, which means you can iteratively improve your site over time.

Mobile-First Means a Change in Thinking

Ultimately, mobile-first design means flipping the entire design process on its head. Your core, fundamental target user changes: you’re no longer primarily concerned with how your site operates on a desktop platform. Instead, mobile visitors are your primary use case – desktop comes second.

For many web designers, mobile-first design can feel odd and sometimes unsatisfying. Designing for such a tiny screen is less fun, and it’s tempting to spend most of your time building out the big, beautiful desktop site.

But as traffic data show us, designing this way doesn’t match the world we live in. If you’re designing primarily for a desktop user, you’re designing for the minority. Inevitably, your users will feel that. As we move into 2020 and beyond, web designers will need to embrace the mobile-first mentality. Desktop is no longer the default – and it’s time for our design practices to reflect that.

5 Mobile UX Trends To Implement In 2018 And Beyond

Author Bio

Ben Lee is a tech influencer, one of Inc.’s 30 Under 30 Most Brilliant Entrepreneurs, and cofounder of Rootstrap, a digital creative studio that helps clients including Fortune 100 companies and early-stage startups with strategy, development, and growth. Rootstrap’s award-winning flagship service, Roadmapping, has helped over 500 entrepreneurs and startups hone their digital product for development & market success, with alumni raising an average of $250,000 in seed capital. Rootstrap regularly works with clients to develop mobile apps, web platforms, chatbots, and emerging tech projects, and past clients range from Snoop Dogg to Google and Spotify.

Filed Under: Design, Mobile Tagged With: mobile first web design

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022