responsive-gilt-presentation

Responsive Gilt.com

What tools and processes did we use to make a legacy micro-services architected app responsive?

Overview

History of mobile web at Gilt

What does "Responsive" mean?

Adaptive and responsive tool sets

Development process

Quirks & hiccups & testing

Who are we?

Jose Sanchez

Software Engineer, 5 years

jsanchez@gilt.com

Kyle Dorman

Software Engineer, 1 year

kdorman@gilt.com

Greg Mazurek

Lead Software Engineer, 3 years

gmazurek@gilt.com

We are Gilt.com's Special Operations team

History of Mobile Web at Gilt

m.gilt.com

First: minimum viable product, Spring/JSP, no JS, little CSS

Second: BackboneJS

1 engineering resource on m.gilt.com...

couldn't keep up with 70 resources on gilt.com.

No feature parity across devices.

M Dot in 2014

Third: migrated legacy gilt.com app to a responsive gilt.com experience

Responsive led to "mobile-same-time" product development.

What does "Responsive" mean?

We're talking about both adaptive and responsive design.

When we think about responsive design, we think about the width of the viewport.

When we think about adaptive design, we think about device capabilities (power, features) and network conditions

Our adaptive tool set...

Not all devices are equal.

The server reads user agent

and then triages to one of three buckets we call "target experiences."

Three target experiences:

Minimal

Intermediate

Full

Minimal Target Experience

isIPod || isIPhone || isBlackberry || isIE6 || isIE7 || isAndroidShell || isAndroid

Intermediate Target Experience

isIPad

Full Target Experience

!isMinimalTargetExperience && !isIntermediateTargetExperience

Access to target experience logic:

Handlebars

JavaScript

Scala

Handlebars:

JavaScript:

Scala:

Other adaptive tools...

Modernizr: CSS touch/no-touch classes

Browser detect features:

Example!

Carousel vs. Scrolling

Responsive design tool set

Four Viewport Breakpoints

wide: > 1024px

medium: between 768px and 1023px

narrow: between 480px and 767px

tiny: < 479px

LESS Variables

Inline Selector Overrides

Native CSS features

% widths

box-sizing: border-box

width: calc(30% - 5px)

What does this look like?

Sales Listing Page - Wide

Sales Listing Page - Medium

Sales Listing Page - Narrow

Sales Listing Page - Tiny

Product Listing Page - Wide

Product Listing Page - Medium

Product Listing Page - Narrow

Product Listing Page - Tiny

Product Detail Page - Wide

Product Detail Page - Medium

Product Detail Page - Narrow

Product Detail Page - Tiny

Images

We have a lot of them.

Sale listing pages load around 50 high quality images per request.

Product listing pages have infinite scroll and load 15 high quality images up front.

This is expensive for slow network conditions.

This is inefficient if we use the same image aspect ratio for each breakpoint.

Akamai & Picturefill.js

Akamai lets us serve compressed images from the cdn.

image/path/dress.png?q=85

No discernible loss in quality.

Image size reduced by 40%.

Picturefill.js is a polyfill for the <picture> element.

The <picture> element lets us serve the appropriate image for each breakpoint.

Compress your images and use Picturefill.js!

Development Process

With a legacy app, we didn't want to rewrite. We wanted to iterate on existing code.

First step: discover the technical limitations.

Second: create a functional and ugly responsive site.

Third: Involve the design team and make the site beautiful.

Testing Caveats

Chrome Emulator is OK

iOS Emulator is better

Device is best and required before merging to master

JSBin.com and company are your friends

Do not build for a specific device. iPhone 5 is 580px but a desktop browser could be 580px as well.

But, develop for your users' devices

This

Not This

QA & Automation

Regression

Overnight Testing

Android 4.0+ | iPhone4+

Most Browsers, iPads, Kindle Fire, and Nexus Tablet

Selenium

Testing tool for automating web applications

We use it to run tests before each production deploy

Selenium Testing Helper

Pay Attention!

Page Scroll Width <= Viewport Width

Quirks & Hiccups

Width Auto vs. 100%

Inline block adds a 4px margin.

vw and vh units

Device rotation event listeners

onrotation

orientationchange

matchmedia

Android 2.3

Evangelize

Creating tools and process is fun!

Telling people that they have to use them stinks.

We tried to explain why we thought our tools were best in class.

Internal learning workshops.

Internal presentations and conversations.

External blog posts and presentations.

As much as possible, involve the people who will use the tools in the process of making the tools as early as possible.

Thank you!

gmazurek@gilt.com

kdorman@gilt.com

jsanchez@gilt.com