6.S082 Lecture 11 Universal Design

Unlike print, web design needs to be adaptable

Universal design adapts to a variety of mediums and serves a diversity of users

Universal design is adaptable to…

…a variety of mediums

…a diversity of users

Responsive Web Design

Percentage of global web pages
served to mobile phones

“Mobile is a magnifying glass for your usability problems.”

Josh Brewer

By default, smartphones render pages in a wider virtual viewport, then shrink the result down

Mobile-friendly websites need to opt-out of this handling

<meta name="viewport" content="width=device-width">
More on the viewport meta tag

Avoid absolute widths

Responsive Flexbox
with flex-wrap

  • flex-wrap allows your layout to become vertical if there's no space
  • flex is relative. Any positive flex value makes the element stretch

Sometimes you need to adapt non-continuously

@media (max-width: 300px) {
	body {
	background: yellow;
}
}

@media (min-width: 700px) {
	body {
		background: red;
	}
}
  • Media Queries are like conditionals about the viewing conditions.
  • They support a bunch of criteria, but the most commonly used ones are the width and height of the viewport.
  • You can put any number of rules inside them.
  • You can use and and not operators, and commas for OR
@media (min-width: 600px) {
	body { background: deeppink; }

	@media (min-height: 600px) {
		body {
			background-image:
			  linear-gradient(
				to right,
				gold,
				transparent
			  );
		}
	}
}

Grid Layout

  • With named areas, you just need to change the template to rearrange everything
  • Sometimes flex-wrap doesn’t cut it.
  • For example, in this navigation menu, you may want it to go fully top down once the viewport is so narrow that all items can't fit horizontally
  • A very easy way to convert a flexbox layout to mobile friendly is to just apply flex-flow: column

    • RWD Best Practices

    Do not optimize for specific devices

    Print-friendly CSS

    Who prints webpages?

    If you want to read more, these are some good resources on print-friendly CSS:

    Conceptual shift Paged vs Continuous Media

    Set page defaults

    @page {
	size: letter landscape;
	margin: .8in 1in;
}

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Behind the couch i'm going to lap some water out of my master's cup meow. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose. Thinking longingly about tuna brine. Kitten is playing with dead mouse i show my fluffy belly but it's a trap!

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    Set page defaults

    @page :left {
	margin-right: 2in;
}

@page :right {
	margin-left: 2in;
}

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Behind the couch i'm going to lap some water out of my master's cup meow. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose. Thinking longingly about tuna brine.

    Kitten is playing with dead mouse i show my fluffy belly but it's a trap!

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    Override styles in print

    @media print {
	body {
	font-size: 12pt;
}
}
    • You can also do the opposite, target screens only, via @media screen

    What would we want to override?

    @media print {
	.ad, nav, footer {
		display: none;
	}
}

    Heading 1

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Behind the couch i'm going to lap some water out of my master's cup meow.

    Heading 2

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    h2 {
	break-after: avoid-page;
}

    Heading 1

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on the keyboard.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Behind the couch i'm going to lap some water out of my master's cup meow.

    Heading 2

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    Title

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Annoy the old grumpy cat, start a fight and then retreat to wash

    • Behind the couch i'm going to lap some water
    • out of my master's cup meow.
    • I haven't decided whether or
    • not i wanna go out stare at owner accusingly then wink.
    • I'm going to lap some water out of my master's cup meow skid on floor, crash into wall and crash

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    li {
	break-inside: avoid-page;
}

    Title

    Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce attack dog, run away and pretend to be victim, if human is on laptop sit on.

    I like fish meowzer for chew the plant be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day

    Annoy the old grumpy cat, start a fight and then retreat to wash

    • Behind the couch i'm going to lap some water
    • out of my master's cup meow.
    • I haven't decided whether or not i wanna go out stare at owner accusingly then wink.
    • I'm going to lap some water out of my master's cup meow skid on floor, crash into wall and crash

    Hunt anything that moves making sure that fluff gets into the owner's eyes lick the other cats so flee in terror at cucumber discovered on floor. Leave fur on owners clothes leave fur on owners clothes.

    Pet my belly, you know you want to; seize the hand and shred it! fall over dead (not really but gets sypathy).

    Best Practices

    Display URLs

    @media print {
	a[href^="http"]::after {
		content: "(" attr(href) ")";
	}
}

    Inclusive Design

    What is inclusive design?

    Design that does not exclude on the basis of:

    • Disability
    • Race
    • Ethnicity
    • Religion
    • Language
    • Pronunciation
    • Gender identiy
    • Sexual orientation
    • Age
    @media (prefers-reduced-motion) {
	.fancy {
		animation: none;
	}
}

    Gender diversity

    Gender*:

    What about now?

    Coursera gender selection field
    • Make that field optional as much as you can. This is part of the previous recommendation — the user may know better than you if it’s safe or appropriate to disclose the information based on the context. It may even warm them up to answer the question accurately rather than skipping it.
    • “Prefer not to say” is always good to have. On a side note, the word “Other” may make people feel like an after-thought, particularly when the form doesn’t ask for more detail on what “Other” means.
    • This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion
    • Besides inclusivity, what other problems can you spot here?

    What about this?

    Facebook American English form
    • You can allow the inclusion of any combination of options the user wants to input. As in the Facebook interface below, the type-ahead interaction is a good option. It solves for a long list that, if just displayed, might either imply a hierarchy or order or make it harder to fill. Letting users pick as many labels as they want is also desirable. Lists like this need some keeping up, as new labels are created while others fall out of favor, and internationalization needs to be considered.
    • Lots of labels constantly being updated, a type-ahead search that doesn’t imply a hierarchy of genders, ability to enter more than one label, a free text field, privacy controls, ability to change the content whenever the user wants, increasingly localized labels — all make this a pretty inclusive design meant for the purpose of self-expression.
    • This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion

    Could asking for pronouns suffice?

    • Instead of gender, consider asking for people’s preferred pronouns, and including the gender-neutral “They/their/theirs” as a singular pronoun. While some perceive this to be bad grammar, it was actually used this way until the Victorian era. “They” was even the word of the year in 2016 and was also adopted in 2015 by the Washington Post style guide and more recently by the AP styleguide. If you’re worried this will confuse your cis audience, explain the question as an attempt at inclusiveness, and include a sample sentence.
    • The notes on this slide are from the excellent UX Collective article Designing forms for gender diversity and inclusion

    Another take on pronoun input UI

    Facebook American English form
    • Facebook also allows people to choose their own pronouns. It includes examples to make the question and the intended use bit clearer. Additionally, it prominently warns users that, unlike gender, this information will be public.
    • This screenshot & notes, are from the excellent UX Collective article Designing forms for gender diversity and inclusion

    Test with users across a variety of gender identities

    What if you need to ask about assigned sex at birth for medical reasons?

    Best Practices

    Ethnicity*:
    • Never make ethnicity fields mandatory
    • Never make ethnicity fields mutually exclusive — multiple may apply!
    • These four categories are not only insufficient, but also refer to different axes, and are very US-centric
    • Excellent article on this:

    Test with users across a variety of racial/ethnic identities

    Nextdoor reduced racial profiling by 75% with good UI (re)design

    Test auto-translation

    Test auto-translation

    Ensure your UI is translatable

    The translate attribute

    Original English text

    <p>Click the Resume button on the Status Display or the
   <span translate="no">CONTINUE</span> button
   on the printer panel.</p>

    German translation

    <p>Drücken Sie Fortsetzen in der Statusanzeige oder die
   Taste <span translate="no">CONTINUE</span>
   an Ihrem Drucker.</p>
    • The translate attribute is meant for literal text that should not be translated.
    • More examples at

    Test voice UIs with a variety of accents

    Avoid imposing western restrictions on international info
    safe bet: skip validation altogether for names

    Learn more:

    Hours of work to afford entry-level mobile data package

    “If your bloated images are eating up people’s data plan, then you are literally making them work more hours — and that it is hugely discourteous.”

    Bruce Lawson

    What can you do?

    It's World Wide Web not Wealthy Western Web