Responsive Whales

Logan Franken
Logan Franken
@loganfranken
goo.gl/oed3yY
goo.gl/MLwIhD

Images

What Do We Have?

Fluid Images

img { max-width: 100%; }

Examples

So What's Wrong?

Same image, despite context

What Do We Need?

Pssh, So What?

This is Easy

<img src="low-res-version.jpg" class="low-res" />
<img src="high-res-version.jpg" class="high-res" />
.high-res { display: none; }
						
@media (min-width: 1000px) {
   .low-res { display: none; }
   .high-res { display: block; }
}

Preparsing

Screenshot of both image resources downloading in Chrome Dev Tools

Solutions

Background Images

.banner { background-image: url('low-res-version.jpg'); }
		
@media(min-width: 1000px)
{
   .banner { background-image: url('high-res-version.jpg'); }
}

Server-side

Serve images through a server-side handler

Adaptive Images uses a cookie

Hosted Services

Serve images through a third-party hosted service

JavaScript Swap

<img src="low-res-version.jpg"
   data-fullsrc="high-res-version.jpg" />

Use JavaScript to swap out with the appropriate version

Go Crazy

...with some clever hacks

File Formats

Is there a responsive file format?

Lower Level

What if the browser could provide more information about the device to the server?

GET /index.html HTTP/1.1
Client-Hint: device-pixel-ratio=2, viewport=1280x720, ...

Client Hints

Extending HTML

srcset

<img src="high-res-version.jpg" 
     srcset="low-res-version.jpg 1000w 1x,
	     low-res-version-hd.jpg 1000w 2x">

Compact media query-ish syntax

Picture

<picture>
   <source media="(min-width: 1000px)"
      srcset="high-res-version.jpg 1x,
              high-res-version-hd.jpg 2x">
   <source
      srcset="low-res-version.jpg 1x,
              low-res-version-hd.jpg 2x">
   <img src="low-res-version.jpg">
</picture>

Standard media queries with video-like syntax

Polyfills

Tables

Problem

Responsive Forms vs. Data Readability

Solutions

Chart Summary

(Scott Jehl: Create pie chart with jQuery Visualize)

Desktop version of chart summary responsive table implementation Mobile version of chart summary responsive table implementation

Link to Full Version

(Scott Jehl: Shrink table to mini version, click to expand)

Desktop version of link to full version responsive table implementation Mobile version of link to full version responsive table implementation

Color-Coded List

(Brad Czerniak: Color and inline everything)

Desktop version of color-coded list responsive table implementation Mobile version of color-coded list responsive table implementation

Expand-Collapse

(FooTable: Move data from marked columns into expandable rows)

Desktop version of expand-collapse responsive table implementation Mobile version of expand-collapse responsive table implementation

Hide Columns

(Filament Group: Hide columns marked with class)

Desktop version of expand-collapse responsive table implementation Mobile version of expand-collapse responsive table implementation

Pinned Column

(David Bushell: Float thead and overflow tbody)

Desktop version of pinned column responsive table implementation Mobile version of pinned column responsive table implementation

Linearized Table

(CSS Tricks: Inject column headers with td:before)

Desktop version of linearized responsive table implementation Mobile version of linearized responsive table implementation

Questions?