Contents

• Mobile First Web Design
• What is affordance?
• Considerations of largest audience within reason
• Building a highway
• Highways design & web design
• What's your lowest-common-denominator? What is "within reason"
• The Autobahn & Progressive Enhancements
• Progressive Enhancements vs. Graceful Degradations
• The problems with building for graceful degradation
• Ensuring hover-effects have a fallback
• Hiding and showing different sections
• Different components for mobile
• Desktop first is more expensive
• Iterative Excellence

What is affordance?

The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment. — James J. Gibson in The Senses Considered as Perceptual Systems (1979, p. 127)

In user-first design, affordance is used to denote what "features" a user of a browser has available to them. In order to build a site accessible to the largest audience (within reason), one must understand what affordances are not a given.

Considerations of largest audience within reason

Building a highway

Imagine you're tasked with building a highway. A dirt road to accommodate horse & buggy wouldn't be something within reason. Aside from some small groups of people like the amish, it's safe to assume people on roads will travel by motorized vehicle.

• What will be the slowest vehicle frequently traveling on your roads?
• What will be the largest vehicle traveling on your roads?
• Are overpasses high-enough for trucks?
• Should their be a slow lane for slower-drivers & vehicles?

Highways design & web design

Similar to the considerations for building a highway, there's different audiences and devices using a website.

What's your lowest-common-denominator? What is "within reason"

Perhaps 2G or dial-up is the horse and buggy speed in your decision making. To ensure great user-experience for horse and buggy would likely come at the reduced experience for a majority of your drivers.

At the same time, if for example, you had a slow-lane and a passing late the amish could still travel your highway and faster cards could drive around. The experience is less than optimal for the horse but it's not impossible for one.

Similarly, your site should still load for users with dial-up or 2G, but for regular user-testing focusing on perhaps 3G would be more pragmatic.

The lowest-common-denominator isn't one type of user, device, peripheral, or browser

• Some desktops can be powerful but have bad internet.
• Some mobile devices are limited in screen real-estate but are very powerful with 5G support.
• A tablet might have the screen real-estate of a desktop, but lack the affordance of hover.

Mobile first is the design-philosophy that you should start by building a page that can accommodate all of these limitations.

The Autobahn & Progressive Enhancements

You're website works for the lowest-common-denominator of devices, but is boring. No slick animations, hover effects, or high-res images. At this point you've designed the slow-lane & passing lane of your highway. But what about our Ferrari users? A new gaming PC with a 4k display or an iPhone with high-pixel-density display and 5G are the devices being left out.

Progressive Enhancements is like adding an autobahn lane. To provide a great user-experience we shouldn't stop at a great user-experience for your grandfather and his 2001 Camry. The website should delight users with capable devices too. Once there's a baseline of functionality, we can start to add more lanes for additional audiences. An HOV lane, a bike lane, or even an autobahn lane.

• if a device supports hover for example, you could add an additional effect
• if a device supports service-workers, you can enable the site to work offline
• if a device has a high-res display & has unlimited data, you can serve larger images

Progressive Enhancements vs. Graceful Degradations

When building a site "desktop-first", we'll often have to engineer solutions for graceful degradations.

Graceful Degradations is often explained with the classic scenario of an escalator. When an escalator breaks it becomes stairs.

Graceful Degradations could mean

• ensuring hover-effects need to be engineered to work with "taps" on touch devices
• it could mean hiding sections on mobile that don't fit in the smaller screen
• it could mean changing the type of AD ux from a modal to drawer component

The problems with building for graceful degradation

Desktop first is like building an autobahn before needs of even basic roads are met.

Ensuring hover-effects have a fallback

Device capability detections are likely needed to check if tapping is supported. If it is, maybe you must "turn-off" the hover effects. Was the user-experience tested with hover turned off? If it wasn't you're designing for only half of your audience.

Hover-effects aren't accessible. What if you're using a screen-reader? In this scenario how would someone know there's an interaction at all? Screen-readers communicate buttons to users, allowing users to interact with dynamic components, but building a fall-back for non-hover requires a lot of aria meta-data to communicate what comes for free when using standard elements for such an interaction like a Button

The additional JS & HTML to support the degraded experience, results in a larger initial payload.

• This is bad for performance
• This is bad for a11y

Also what about 2-in-one computers i.e. tablets with a keyboard doc? Assuming only touch is available on 320px screen sizes is folly. Assuming only mouse interactions on screens over 1080px is folly.

Hiding and showing different sections

Hiding and showing different sections of a page to account for smaller screens usually means that you're still serving two sections.

• This is bad for performance
• This is bad for SEO
• This is bad for a11y

The smaller-screened devices are downloading but not seeing all of the HTML. Additional work needs to be done such that web-crawlers don't read the duplicate content. Then additional work needs to be done to ensure users with screen-readers don't end-up reading both sections.

Different components for mobile

Google started reducing the "signal" of websites that had pop-ups / modal adds in mobile. The solution by websites was to switch to a slide-in / drawer component or a banner.

Because the design was first made on desktop with a modal, you'll likely have to design a second experience before you can ship.

Desktop first is more expensive

The "mobile" web is ever growing. And the amount of devices to support and the differing capabilities is growing as well.

You cannot ship a page that only works in desktop. But you can ship a page that works in mobile.

• A website with a width of 320px will load just fine on a large desktop monitor
• A website without hover effects will work just fine in a desktop that supports hover
• A website with lower-res images will load just fine on a 5G internet.

Development time is greater for a desktop-first approach because you cannot ship a page without supporting mobile. This means there must be designs for mobile & desktop.

Iterative Excellence

When designing for mobile-first, a page can be shipped designing only for the lowest-common-denominator i.e. mobile and it will work everywhere.

Mobile first is laying the asphalt for the slow-lane. Then once there's a road in place, layering on additional lanes and side-walks.

Lanes of the road can be tweaked, lines re-painted, bike-lanes added, sidewalks added as the need from the community evolves or is better understood. The process of progressive enhancements is iterative.