Presented by Luke Wroblewski.

  • In 1952, Don Stookey experimented on photosensitive glass at the Corning Institute. This was the first synthetic glass ceramic.
  • Corning’s Gorilla Glass is the same previously-shelved 0317 experimental product. It’s now in 1.5 billion devices.

We care about [the display] because we know that’s the window to the software. — Tim Cook, Apple CEO

  • Online time is screen time. We need an intimate understanding of the screen.

Know Your Screen

  • James Pearce’s article, First, understand your screen
  • Flurry’s Size Matters for Connected Devices. Phablets Don’t
  • There’s only a few full-sized tablets out there, but there are a lot of people using them.
  • Medium-sized smartphones (3"-5" displays) are very heavily used.
  • In the coming years, all the people on the planet will be interconnected and getting information from smartphones and other small, portable devices.

Output

  • Typical desktop computers ~100 pixels per inch
  • First generation smartphones ~200 pixels per inch
  • Apple’s Retina dipslay = 326 pixels per inch
  • Samsung’s 441 pixels per inch
  • LG Optimus Quad HD’s 538 pixels per inch (2560×1440 is the same resolution as a 27" desktop display)

Mo’ pixels, mo’ problems — Dave Rupert

Maybe we shouldn’t be so gung-ho about these fullbleed images.

  • min-device-pixel-ratio resolution media query
  • In the US, 50% of downstream traffic is from YouTube and Netflix. Device manufacturers know this and are adapting their devices to match users’ consumption patterns.
  • All of the top 5 selling smartphones last year are widescreen aspect ratio devices.
  • Trent Walton’s Vertical Media Queries & Wide Sites
  • The Statamacist uses vertical media queries.
  • Vertical media queries can be used to curtail The Myth of The Fold.
  1. Trend toward high resolution.
  2. Trend toward widescreen aspect ratios.
  3. Media queries know about more than width.

Input

Any piece of glass you can’t touch and interact with will feel broken. – Steven Sinofsky

  • We’re living in a multi-input world.
  • Polar optimizes for touch and keyboard interactions.

Screen size is a poor proxy for input, but it’s all we’ve got right now.

  • Media Queries Level 4 include pointer (with values of none, coarse, fine), a hover pseudo-class check
  • New media query properties will auto-update (for instance, if a keyboard is removed from the device)
  1. Support all the inputs
  2. Communicate what’s possible (tell the user what they can do with different input types)
  3. Screen size is a poor proxy but it’s all we’ve got

Posture

  • “Posture” in this sense is how people interact with output and input.
  • 83% of people view Netflix with a 10-foot viewing experience. 44% with a 2-foot viewing experience.
  • Roughly 1/2" per foot increase in box art size on Netflix’s various interfaces (phone, tablet, PC, and television)
  • Google Glass’ screen is equivalent to a 25" HD screen viewed from 8 feet away.
  • Ergonomics play into design and layout of navigation and control elements on touch screens (based on how users typically hold devices).
  • Media Queries Level 4 includes light-level
  1. Design to human scale
  2. And environments
  3. Not to screen width