Mobile-First Design

Question 1

What Is Mobile-First Design?

Answer 1

Mobile-first design is essentially what it sounds like—product teams creating content and design for the mobile version of websites before considering the content and design for tablet or desktop versions

Question 2

What is Content within the context of mobile design?

Answer 2

Generally includes all of the imagery, functionality, and written text on a website.

e.g, onboarding text, social sharing links, images, videos, etc.

Question 3

Mobile-first design only applies when designing _______ web applications or websites

Answer 3

responsive

Question 4

What is responsive web design?

Answer 4

A technical approach that enables web pages to re-organize their content based on the type and size of the device they are being viewed on.

Question 5

Responsive websites are not native to any kind of device and run in what?

Answer 5

web browsers, such as Chrome, Firefox, and Safari

Question 6

What are native apps?

Answer 6

Designed to work with one specific operating system, such as IOS or Android, and are downloaded directly to a device that uses a particular operating system.

Question 7

Why mobile-first?

Answer 7

1. Forces designers to think about users (they have to concentrate on providing content the users absolutely need)
2. Moving up in scale to tablet and desktop designs becomes easier as all the hard work has already been done on mobile
3. Allows us as designers to offer a faster experience to users.
   They often don’t have a large amount of imagery and other media assets that need to be loaded, resulting in quick download speeds on the devices that need them the most.

Question 8

What can you say to your boss when you want to advocate for a mobile-first design strategy?

Answer 8

1. Designing in this way ensures that your organization will be headed in the same direction that web usage trends are headed, and this will help to future-proof your product, resulting in fewer costly product updates as usage of the web evolves.
2. It’s a more user-centered approach. mobile-first design forces you to think about the user and the content in a more focused way.
3. It opens up new doors in functionality. With a mobile-first strategy, these technologies can be considered at the beginning of a project, and innovative thinking when moving into tablet and desktop breakpoints (defined resolution sizes that cause layouts to shift for users) becomes more possible for your design team.
4. Minimal design and minimal code.

Question 9

What is progressive enhancement?

Answer 9

A design strategy that offers the most basic functionality to users first.

Question 10

In Apple’s iOS Human Interface Guidelines, they recommend a min hit space of?

Answer 10

44pt x 44pts

Question 11

What is a major benefit of “lean” mobile sites that don’t contain many media assets?

Answer 11

Faster download speeds

Question 12

Fill in the blank: Mobile websites often use a “_____ menu” navigation system, which hides the menu items when the user doesn’t need it.

a. Toggle
b. Footer
c. Anchor
d. Hamburger

Answer 12

d. Hamburger

Question 13

Your colleague, Mar Marley, has designed the desktop version of her website first, including several beautiful hover effects on images and buttons. Which of the following is a possible design solution for translating those hover effects onto mobile? Mobile websites often use a “_____ menu” navigation system, which hides the menu items when the user doesn’t need it.

a. Double click
b. Tap and hold
c. Right click
d. Drag and drop

Answer 13

b. Tap and hold

Question 14

Mobile sites are used by our fingers and therefore need which of the following unique design considerations? Mobile websites often use a “_____ menu” navigation system, which hides the menu items when the user doesn’t need it.

a. Zoomable options
b. Enhanced resolutions
c. Hover effects
d. Touch targets

Answer 14

d. Touch targets

Question 15

When applying mobile-first design to your own projects, what can you do to avoid loading website designs that are too small or completely undisplayable across mobile devices? Mobile websites often use a “_____ menu” navigation system, which hides the menu items when the user doesn’t need it.

a. Hire an accessibility expert to review site content and IA
b. Review the functional requirements with your stakeholders
c. Test your designs on multiple devices during site creation
d. Test your proto-personas with your local UX community

Answer 15

c. Test your designs on multiple devices during site creation