Loading...
Day 20: Mobile First2017-08-02T17:11:26+00:00

Project Description

Project Description

MOBILE FIRST

The concept “Mobile First” came out of a movement to improve the mobile user experience by focusing on progressive enhancement instead of graceful degradation.

What it is.

It’s a design philosophy that puts the design of the mobile experience front and center in the process, rather than as an afterthought.

How it’s used.

When we say we’re designing “mobile first” we’re really saying that we’re thinking about how the application or website will function on the mobile device as a primary focus of our designs.

We’re paring down the features of any experience to it’s primary function, and making sure that is easy to do on mobile. Then we add features for tablets and desktop.

When a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish.

Luke Wroblewski

Discussion.

Back in the day when mobile devices were new, the last thing designers thought about (literally) was how to translate their beautiful websites into the tiny mobile screen. It was an afterthought, and usually was handed over to a specialist who just designed for mobile experiences.

But those days are long gone. Today, more people access websites and applications from their mobile devices than from their desktops or laptops.

And all designers are expected to be designing for all screen sizes.

Graceful degradation

When designing for mobile was an afterthought, the approach was to take the existing website and remove as much as possible until it could fit on a smart phone-sized screen.

We called this “graceful degradation.” But really, there was nothing graceful about it.

What was often left was a series of list menus and very little content. It was a terrible user experience.

Progressive enhancement

The approach I use and recommend is to first understand the primary use of your application. What does the main persona want to do when they land on your website? That is the core functionality — the one thing that must always be working, and working well, at any screen size.

Then design a mobile experience for that core function.

Once you’ve designed the mobile flows, interface and IxD for that core function, you can work on the tablet and desktop versions. With bigger screens, you’ve got more real estate to add more features. So go ahead and add them.

I like to use the Sketch Web Design template and see all my screen sizes in one view.

The point is, you’ll have a better mobile experience for the majority of users who access your website from a mobile device if you design specifically for that device.

Progressive enhancement over graceful degradation.

Objectives

  • Understand why designing for mobile first is important.
  • Learn the difference between progressive enhancement and graceful degradation.
  • Practice designing a mobile-friendly user experience.

Tips & Tricks

  • If you’re doing this in Sketch, use the Web design template that includes all 4 main screen sizes. That makes it easy to think about mobile as you’re designing.
  • What is the core competencies of your application? What must it do no matter what?
  • Think about how people who are using your application on-the-go will be using it.

Resources

Your Assignment

Compare and contrast mobile and desktop experience in the same application or website.

Select a website that also has a mobile option.

  1. Run through a task on desktop and the same task on mobile
  2. Identify:
    • how using the mobile version differs from using the desktop version, and
    • how the site designers accommodated those differences

Suggested sites to examine: Warby Parker, Facebook, Twitter,  AirBNB, Paypal, Goodreads, Shoebox, or LinkedIn

Deliverables

Create a pdf and share your insights in the comments and/or on Dribbble and Twitter #100daysdesign.

Leave A Comment