Intentionally dealing with responsive design

Responsive DesignIntentionally Dealing with

Joe Kendall and Erin Sparling, Dow Jones

4 hours is a lot of time to fillTimeline of the presentation

40 0.5 1 1.5 2 2.5 3 3.5

10

0

1

2

3

4

5

6

7

8

9

Time (in hours)

Leve

l of I

nter

est (

ove

r ti

me

)

LongWeekend

InterestingTopics

SnackTime

TechnicalDeep Dive

An Introduction to the Dow Jones Design StudioPreamble

Dow Jones Design StudioThe Design Studio is a multi-disciplinary team focused on the strategic design needs of the various media and publishing properties of Dow Jones.

• WSJ, Barrons, NYPost iOS app templates

• WSJ Responsive Web

• MarketWatch Tablet App

• DJ Financial Services

Dow Jones Design Studio Properties• WSJ

• Barrons

• MarketWatch

• Factiva

• DJ Risk & Compliance

• WSJ Real Time

Discussing Responsive Design

Designer / Developer

Unicorn

Discussing Responsive DesignDesigner / Developer

Designer DeveloperStartup

Designer Developer

Discussing Responsive DesignDesigner / Developer

Designer UX Front-end Back-end

EstablishedCompany

Discussing Responsive DesignDesigner Developer

Designer UX Front-end Back-end

HTML/CSS JS Middleware Back-end / DBALarge Organization

HTML/CSS JS Middleware Back-end / DBA

Discussing Responsive Design

Architect Engineer SA DBA

Back-endFront-end

InternationalConglomerate

Internal DefinitionUser Experience Designer

Designer who focuses on user flows, documentation, rules and product research:

A user experience designer creates wireframes with designers and product managers.

Internal DefinitionDesigner

Designer who focuses on mock-ups, brand definition, aesthetic guidelines:

A designer works with business leads to create a consistent visual approach to disparate products under a common brand.

Internal DefinitionDesign Technologist

Technologist whose primary concerns are tangible interfaces:

A design tech creates html, css, javascript and development systems to enhance the design process.

That’s Us!

Techniques of a Design Technologist• Good sense of design

• Focused on the user experience

• Knowledgable of middleware and back-end, but not focused on them

• Front-end trend conscious

• Systematic problem-solver and flag-waver

• Extremely verbose in communication

• Community outreach

Our concerns and focusJavascript• We care about the friction coefficient of the

deceleration of a sliding navigation item

• We care about developing slight-of-hand tricks to increase performance, via both real and perceived metrics

• We do not care about systems to determine whether or not you have permission to view an article

• We do not care about building an a/b test suite, but we love using them

Outreach

The Way We WorkOur landscape for Development, Integration & Deployment techniques and methodologies

Methods for building deliverablesDevelopment• Local development

• Production development framework

• Local, dev, qa, production cdn

• Documentation via the “Global Header”

• Github Enterprise

Internal DefinitionPlatform

An abstract collection of technologies used for implementing a brand’s product(s):

Tesla is a web app platform used to create WSJ Responsive, Portfolio, Real Time and new web-based initiatives.

Internal DefinitionProperty

An implementation of a brand on a platform:

The WSJ Responsive property is based on modern best-practices, whereas the WSJ iOS properties are based on fancy templating technologies.

Design Delivery WorkflowThe story of how an idea becomes reality

Design Delivery StepsWhile a design process must be flexible in an ever-changing, news-driven work environment, standards for application development are ideals, and not written in stone.

Discovery

IA Design

Design Tech

Integration &Deployment

Editorial WorkflowThe process of storytelling

Editorial Components• Who are editors, and what do they do?

• What do we mean by “content” ?

• What effects do the editorial process have on the design of a property?

Internal DefinitionEditor

One who manages edits to a document, custom-tailoring a document to a specific platform, or managing the content hierarchy on a platform:

An editor changes what content is on the homepage, and can edit headlines.

Internal DefinitionArticle

A story and associated metadata, e.g. interactives, graphics, photos, video or slideshows:

After its publishing, an editor can add additional supporting media onto an article.

Internal DefinitionCollection

A set of articles:

An editor can manipulate the mapping of articles in a collection before, during and after publishing.

Internal DefinitionModule

An instantiation and specific configuration of a collection articles on a web page:

A module’s appearance is determined by the presence or absence of articles in the collection that is bound to it.

Internal DefinitionTemplate (page)

A web page configuration, containing modules with specific collections:

The home page template contains many modules. Each collection may be controlled by a different editor, and can either be shared by multiple page templates, or used uniquely.

Editorial Content Rules• Editors control the design of a page by

manipulating the content in collections, which affects the aesthetic of modules.

• Modules can be placed flexibly in a page template, but are optimized to adhere to a design grid.

• The metadata content of an article can affect the aesthetic of a module.

Module Aesthetic• An instantiation of a module can have a

configuration of the rules associated with it.

• The rules of a module can dictate the size of images allowed, the presence or absence of multimedia and the addition of adjacent, related content.

Modules can be present because of a combination of content, newsworthiness, edition, subscription level and 3rd-party integration

Module Appearance

• Editions can be geo-specific (Europe, Asia) or audience-specific (CFO edition, Education).

• Subscription levels include anonymous, registered user, paid user, premium user, single sign-on, 3rd-party content aggregator, etc.

Page RenderingThe output of a story

( dynamicallyrequiredassets

Page Equation (approximate)

modules +edit requirements +user roles

targetplatforms

page ={ } *

cdndelivery/

( ))

Templates, and their configured modules and content, and the user viewing them, are all variables to what the final experience is of any given page.

Optimized Rendering Techniques

• Dependencies are defined for each module.

• Dependencies are tracked separately for css and javascript.

• Dynamically created, concatenated css and js files are created for each page configuration, based on the currently useable modules.

CSS Dependencies

reset.css

grid.css

typography.css

headlineSummary.css

HTML, CSS, Javascript documentationModule Assets

Header Strap

Article Content

Additional metadata

Image

Modules are given a unique ID, which is then tied to collection configurations in a page template.

Module Asset Documentation

<unit id="headlineSummary">

<name="reset.css" />

<name="grid.css" />

<name="typography.css"/>

<name="headlineSummary.css"/>

</unit>

<unit id="whatsNews">

<name="reset.css" />

<name="grid.css" />

<name="typography.css"/>

<name="headlineSummary.css"/>

<name="whatsNews.css/>

</unit>

Page templates have defined modules, and separately mapped appearance dependencies

Page Asset Configuration

<page>

<collection id="top">

<unit id="headlineSummary" />

</collection>

<collection id="top">

<unit id="whatsNews" />

</collection>

</page>

Collection ConfigurationHeader Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image

•reset.css

•grid.css

•typography.css

•headlineSummary.css

•whatsNews.css


•reset.css

•grid.css

•typography.css


•whatsNews.css

•nav.css

•footer.css

•sidebar.css

Header Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image


Header Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image

Header Strap

Article Content

Additional metadata

Image

•reset.css

•grid.css

•typography.css


•whatsNews.css

•nav.css

•footer.css

•sidebar.css

•subscriber.css

Inside

Joke

Code hand-off & iterationIntegration• Structured Wiki for Asset Documentation

• Front-end Dependency Management

Production “Go Live” techniquesDeployment• CSS

• Per-server configuration rules

• Minified, re-written on upload

• Jenkins to NPM workflow for back-end modules

• Dependency-managed, dynamically-concatenated JS and CSS on a per-page basis

Responsive DesignA brief history

HTML with Inline Styles

HTML & CSS

TimelineResponsive Design

Graceful Degradation Progressive Enhancement

Mobile First

Responsive Design

Responsive Design• Remove the concept of “mobile” from “mobile first”

• Create sites that are flexible for a variety of different sizes, interaction types

• Focus on key implementations of common context intersections

Resizing the screen in Responsive Design

What size of device is the user

on?

http://wsj.com

Mobile-size optimized

experience

Load Additional Assets

Rich Interactive Site

Tablet

Desktop

Mobile

Tablet-size optimized

experience

Load Additional Assets

Custom Interactive Site Resized Window?

URL

New York Times

Quartz

Boston Globe

Boston Globe appears as if it was designed for each screen size it is rendered on.

Tablet-optimized navigation is loaded in a medium size layout.

Mobile layout is extremely focused on content, light on design.

Performance Implications• Front-end only implementations can cause bloat

• Platform-specific approaches cause a degraded developer experience, end-user performance

• Major back-end investments are needed

700k for BostonGlobe.com desktop is efficient.

~700k in assets

The same assets for BostonGlobe.com Mobile are used, creating an efficient workflow, but an inefficient experience.

Same assets

Hierarchy Implications• User expectations change depending on the device

type.

• Storytelling capabilities change depending on a number of concerns.

• Advertiser needs change depending on an intersection of the user and author needs.

Theoretical 3-column 10-unit Page Layout

21

3

4

8

Looks pretty important

5 6 7


21

3

4

8

5 6 7 Not very important


2

1

3

4Is it even here? ?

* The way of the future not guaranteed by any claims or statements, either direct or interpreted, via this presentation. No metrics were complied to support graphic flourishes used on this slide. Artisanal, locally-sourced drop shadows were used in the making of these pop-out labels. All characters portrayed in this slide are works of fiction. Any relationship between actual people, and the red stickers herein, are purely coincidental, and do not in any way imply a statement of grandeur for either the company, or the employees standing before you. Non-stick adhesive was used to adhere these stickers. Do not use rubbing alcohol to remove them. No expressed warranty is implied via the use of the techniques in this slide, but all warranties will be void if opened or damaged outside of the manufacturer's approved service centers.

Responsive DesignThe way of the future*

50% MoreHierarchy Problems

Major

Performance

Concerns

Buzzword

Approved

Code Modifications• Media Queries are a band-aid to fix non-ideal

workflows.

• HTML is generally considered “locked in place”, whereas CSS and JS are flexible.

• The more generic html gets, the harder it is to have meaningful conversations about it.

Designers talking to DevelopersCode Discussion

Generic code

Specific code

Easy to work with

Hard to work with

Ideal

Reality

Generic HTMLCode Discrepancies<style>

.main { width: 100%; }

.secondary { width:60%; }

.tertiary { width: 40%; }

@media all and (width:320px) {

.main, .secondary, .tertiary { width: 100%; }

}

</style>

<section class="main">

<div class="secondary"> ... </div>

<div class="tertiary"> ... </div>

</section>

Vague / Meaningless

Responsive Problems• Layout flexibility tends to increase likeliness of

performance problems.

• Hierarchy is limited by initial structure.

• HTML/CSS either is too broad, or too specific, and both need to be corrected for using additional code and techniques.

Requirements of a Solution• Layout flexibility is a must.

• Performance of asset delivery must be evaluated at each step.

• Organizational change is difficult, and have a scaling level of complexity.

• Content flexibility of all types have to be considered constantly.

• Someone actually has to build and use it.

Responding to Responsive DesignA departure

mobile tablet desktop luxury

touch ? ?

mouse X X ?

The Intersection of ConcernsResponsive Grid

iPhone

Blackberry

Windows 8 Tablet

27" Monitors

Internal DefinitionResponsive Axis

The intersection for disparate platform concerns, usually limited to interaction type and screen size:

The mobile responsive axis of an intentional site uses the assumptions that the target device set are approximately 3" wide, and touch-enabled.

Internal DefinitionContext

The target user experience:

The user's intent in the mobile context is to have access to the latest information in the shortest amount of interactions.

Proposed Public DefinitonIntentional Design (theory)

An approach to web design and devleopment that supersedes the DOM-based limitations imposed by responsive design:

An intentional design implements complete freedom of hierarchy, based on a per-context configuration.

Public DefinitionIntention.js (library)

A framework-independent library for implementing the ideals of intentional design:

Dow Jones uses intention.js to circumvent the limitations of responsive design.

Bandwidth optimizationResponsive Axis

Fast Slow

Bandwidth, screen-size, interaction type intersectionResponsive Axis

Small

LargeFast Slow

Touch

Mouse

Conflated Cube Conundrum Responsive Axis

Small

LargeFast Slow

Touch

Mouse

Low-res Hi-res

Hypercube of hyperboleResponsive Axis

Small

LargeFast Slow

Touch

Mouse

Low-res Hi-res

Local Remote

• Scroll depth

• Visit frequency

• Physical location

• Distance from screen

• Background noise

Responsive Axis (sample)• Screen size

• Pixel density

• Connection speed

• Interaction type

• User type

• TV

• Kindle

• Jumbotron

• iWatch

Contexts• Mobile

• Tablet

• Standard

• Luxury

Intentional Design (theory)

Responsive Axis Contexts( )( )intentions =

Ease of authoring + Editorial

flexibility

SubtextEditorial Concerns

That might've been one of the shortest assignments in the history of Starfleet. I can't. As much as I care about you, my first duty is to the ship. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. About four years. I got tired of hearing how young I looked. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. When has justice ever been as simple as a rule book? Wouldn't that bring about chaos? Now we know what they mean by 'advanced' tactical training. Maybe we better talk out here; the observation lounge has turned into a swamp.

Sorry, Data. Commander William Riker of the Starship Enterprise. Could someone survive inside a transporter buffer for 75 years? You're going to be an interesting companion, Mr. Data. For an android with no feelings, he sure managed to evoke them in others. I'll be sure to note that in my log. Fear is the true enemy, the only enemy. Fate. It protects fools, little children, and ships named "Enterprise." Computer, lights up! Captain, why are we out here chasing comets? What's a knock-out like you doing in a computer-generated gin joint like this? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. I suggest you drop it, Mr. Data. I am your worst nightmare! Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? Smooth as an android's bottom, eh, Data? Is it my imagination, or have tempers become a little frayed on the ship lately? In all trust, there is the possibility for betrayal. The Enterprise computer system is controlled by three primary main processor cores, cross-linked with a redundant melacortz ramistat, fourteen kiloquad interface modules.

Congratulations - you just destroyed the Enterprise. This is not about revenge. This is about justice. The look in your eyes, I recognize it. You used to have it for me. What? We're not at all alike! Flair is what marks the difference between artistry and mere competence. Talk about going nowhere fast. We have a saboteur aboard. Worf, It's better than music. It's jazz. We could cause a diplomatic crisis. Take the ship into the Neutral Zone Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Then maybe you should consider this: if anything happens to them, Starfleet is going to want a full investigation. Your shields were failing, sir.

Wait a minute - you've been declared dead. You can't give orders around here. Your head is not an artifact! They were just sucked into space. How long can two people talk about nothing? When has justice ever been as simple as a rule book? I'm afraid I still don't understand, sir. You did exactly what you had to do. You considered all your options, you tried every alternative and then you made the hard choice. I recommend you don't fire until you're within 40,000 kilometers. A lot of things can change in twelve years, Admiral. Travel time to the nearest starbase?

Wait a minute - you've been declared dead. You can't give orders around here. Your head is not an artifact! They were just sucked into space. How long can two people talk about nothing? When has justice ever been as simple as a rule book? I'm afraid I still don't understand, sir. You did exactly what you had to do. You considered all your options, you tried every alternative and then you made the hard choice. I recommend you don't fire until you're within 40,000 kilometers. A lot of things can change in twelve years, Admiral. Travel time to the nearest starbase?

SubtextEditorial Concerns

That might've been one of the shortest assignments in the history of Starfleet. I can't. As much as I care about you, my first duty is to the ship. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. About four years. I got tired of hearing how young I looked. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. When has justice ever been as simple as a rule book? Wouldn't that bring about chaos? Now we know what they mean by 'advanced' tactical training. Maybe we better talk out here; the observation lounge has turned into a swamp.

Sorry, Data. Commander William Riker of the Starship Enterprise. Could someone survive inside a transporter buffer for 75 years? You're going to be an interesting companion, Mr. Data. For an android with no feelings, he sure managed to evoke them in others. I'll be sure to note that in my log. Fear is the true enemy, the only enemy. Fate. It protects fools, little children, and ships named "Enterprise." Computer, lights up! Captain, why are we out here chasing comets? What's a knock-out like you doing in a computer-generated gin joint like this? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. I suggest you drop it, Mr. Data. I am your worst nightmare! Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? Smooth as an android's bottom, eh, Data? Is it my imagination, or have tempers become a little frayed on the ship lately? In all trust, there is the possibility for betrayal. The Enterprise computer system is controlled by three primary main processor cores, cross-linked with a redundant melacortz ramistat, fourteen kiloquad interface modules.

Congratulations - you just destroyed the Enterprise. This is not about revenge. This is about justice. The look in your eyes, I recognize it. You used to have it for me. What? We're not at all alike! Flair is what marks the difference between artistry and mere competence. Talk about going nowhere fast. We have a saboteur aboard. Worf, It's better than music. It's jazz. We could cause a diplomatic crisis. Take the ship into the Neutral Zone Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Then maybe you should consider this: if anything happens to them, Starfleet is going to want a full investigation. Your shields were failing, sir.

WSJ.com public home page

10-unit 959px grid

10-unit header, 6/4 column split

10-unit desktop grid

6-unit tablet grid

3-unit phone grid

Idealized Hierarchy Modifications

Idealized Content Wireframe

2aheader

1a

1b

1c

2b

2c

DOM Folding

2aheader

1a

1b

1c

2b

2c

DOM Folded Responsive Layout

2a

header

1a

1b

1c

• Secondary content folds under primary content

• Content hierarchy is subject to actual html page structure

• Editorial flexibility is fixed

Idealized Content Reflow

2aheader

1a

1b

1c

2b

2c

Futuristic Crazy Magic

2a

header

1a

1b

1c

• Content hierarchy defined separately for desktop, mobile

• Tools can be built to customize this

Additional content may be displayed for users on larger, more capable devices.

More Content Visible

21

3

Theoretical Page Layout4-columns 14-units

4

5 6 7

Ad 9

10 11

12 13

Odd Ad Placement

21

3


4

5 6 7

8 9

10 11

Ad

Valuable

21

3


4

5 6 7

8 Ad

9

10

Ridiculously Valuable

• JS

• Bootstrap

• Breakpoints

• Conditionizr

• Aware

• HTML / CSS

• Regions

• Content-flow

• srcset

What exists already?

HTML and CSSExisting techniques and solutions

Current Media Queries• Limited axes

• screen dimensions (approximate)

• orientation

• pixel density

• Performance hit

CSS Regions & Content Flow• Not backwards compatible

• Require per-page dynamically generated css authoring to emulate ideal behavior

Srcset• Not backwards compatible

• Only for images, as currently specified

JavascriptExisting libraries and techniques

Aware.js and Breakpoints.js• Multi-class structure leads to harder-to-maintain

code at scale

• Fewer responsive axes

Conditionizr• Good at managing low/high-res images, but only

aimed at image swapping

What does a solution look like?• Context-abstracted front-end development

• Flexible assets that do not negatively impact performance

• Handle inflexible ads with grace

• Create sustainable workflows to support n-up contexts

• Build a system that is not tied to a specific layout, screen size, or interaction model

• Create systems for outputting code efficiently for only the relevant context, in a way that does not preclude switching contexts

• Enable editorial hierarchy to be configurable on a per-context basis

Context-abstracted Front-end Development

• Enable ad implementations to integrate the most relevant ad size and type per page context

• Ensure that the minimum configuration for a page context supports ads implemented

• Determine if ad calls should be issued per page request, or per context change

Ads deserve their respect

Your boss loves this slide!

• Create documentation systems for validating target contexts, from an IA and QA perspective

• Inform the design process of the implications that target and variable contexts create

• Specify code-creation workflows that can tie into existing development systems, but encourage creation of new, optimized technical designs around the neccessities of performance Responsive Design

Sustainable Workflows

2, 3 and 4-column module variations and code sample

<div class="col2wide"> ... </div>



These should all be the same, but cannot be.




10-unit phone grid

3-unit phone grid

Intentional DesignA philosophical introduction

Finally!

• Clearer delineation between the responsibilities of html, css and javascript.

• Treat per-context content hierarchy as a first-class citizen.

• Go beyond the limitations of css-based media queries.

• Allows for one set of code to efficiently serve the needs of n-up contexts.

Core Ideas of Intentional Design

Intention.jsA technical introduction

A Formula for Implementing Responsive DesignA demonstration

A few kinds of users• I want to hit the ground running Twitter bootstrap

style

• I’ve got really specific problems that need specific solutions

• Somewhere in between?

What to use?• Intention.js

• allows you to create custom responsive contexts

• do things in those contexts

• Context.js

• an implementation of Intention.js with a whole lot of useful default responsive contexts

• can be easily extended to add your own

Intention.js

Context.js

Your HTML

all your users' devices with your HTML

perfectly formatted

Context.js ExplainedDescribing differencesKnowing when to expect one thing and not another

Things that you can change• HTML classes

• Other attributes

• src, href, title, data-whatever, etc.

• Placement of an element in the document

• append, prepend, before, after

Classes• Multi-value attribute

• Classes are applied as the union of all classes specified in the current contexts

• Does not mess with classes that are not specified

Attributes• Single value

• In a conflict?

• Priority can be specified

Placement• Same resolving strategy as attributes (priority)

• Four placements

• before

• after

• prepend

• append

Context.js defaults• Base

• Touch

• Mobile

• Tablet

• Standard

• Highres


• Touch

• Mobile

• Tablet

• Standard

• Highres

axis

axis

axis

axis


• Touch

• Mobile

• Tablet

• Standard

• Highres

Screen resolution

Size (width)

Input

Fallback


• Touch

• Mobile

• Tablet

• Standard

• Highres

Priority 4

Priority 3

Priority 2

Priority 1

Any combination of contexts, one from each axis, is possible

• mobile

• touch

• highres

• base

• base

• standard

• base

• standard

• touch

• base

• tablet

• touch

Context.js: When do things change?• Widths (mobile, tablet, standard): on resize and

orientationchage

• touch: never. (it is or is not)

• highres: same

• base: always on

Making ChangesThe HTML Interface

Step 1: Indicating your intent<body intent> <header><nav intent>...</nav></header> <section> <h1 intent></h1> </section></body>

Valid markup is supported<body data-intent> <header> <nav data-intent>...</nav> </header> <section> <h1 data-intent></h1> </section></body>

Step 2: Specify what to change when

prefix-context-change="value"

i.e.in-mobile-class="threeColumn and more"

Changing Classes<section intent in-mobile-class="threeColumn">...</section>

Changing Classes With Valid HTML...

<section data-intent data-in-mobile-class="threeColumn">...</section>

// result in mobile:<section class="threeColumn"></section>

// result everywhere else:<section></section>

Changing Classes<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn">...</section>

Results for iPhone 5

<section class="headlineList swipe threeColumn"></section>

<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn"></section>

becomes:

And for desktop <= 810

<section class="headlineList sixColumn"></section>

<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn"></section>

becomes:

Changing Classes How it Works• Formula using:

• Existing classes

• Classes to remove

• Classes to add

Existing classes• Intention.js does not mess with them

• Might include classes that are specified via intention

• In which case it might mess with them

What is to add?• All classes assigned to the current contexts

• Union of the classes specified in each attribute

What is to remove?• What responsive axis (or group) triggered the

change?

• In Context.js this is only the width axis

• The union of all classes specified for contexts other than the valid context

• This will come up later

Take this example<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn">...</section>

The current context is mobile<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn">...</section>

So the classes to remove are:

sixColumn and tenColumn

The Formula

(existing – remove) ∪ current = result

The formula

(existing – remove) ∪ current = result

Unionthe objects that belong toexisting but not to remove

Changing Arbitrary Attributes

<img title="beautiful image" intent in-mobile-src="small_image.png" in-highres-src="big_image.png" />

Conditional highres images

Highest priority contextWhat gets applied?<img title="beautiful image" src="big_image.png" />

"highres" trumps size contexts

<img title="beautiful image" src="" />

Oops...No context specified, that is what"base" is for...

Highest priority contextWhat gets applied?

Surprise!iPad 2 Low-res

Conditional highres images do-over

<img title="beautiful image" intent in-base-src="small_image.png" in-highres-src="big_image.png" />

<img title="beautiful image" src="small_image.png" />

Much better

Highest priority contextWhat gets applied?

In order of lowest to highest priorityContext.js priority• base (default)

• mobile, tablet, standard (size)

• touch (input method)

• highres (screen resolution)

Changing Placement• Same resolution strategy as any arbitrary attribute

• in-context-[placement]="[selector]"

• Placement=append, prepend, before, after

• Selector=any valid css selector

• $([selector]).[placement](element)

Beyond the HTML

Intention.js

Context.js

Your HTML


perfectly formatted

This makes

sense now!

pluginA.js

Intention.js

Context.js

Your HTML


perfectly formatted

pluginB.js

pluginB.js

Intention.js

pluginA.js

Your HTML


perfectly formatted

pluginC.js

Events• Element events

• "intent" events are triggered on any element that has responsive attributes

• The intent object is passed as the second parameter to the callback

• Context events

• Context.js returns an "intent" object that can have events bound to it

The "intent" event• $('#elm').on('intent', function(){ alert('woohoo');});

• The callback

• function(event, intent){ /* do stuff */ });

• Fires on every element added to intent

Context specific events• intent.on('mobile', function(){ /* do something */ });

• The callback

• function(event, intent){ /* do stuff */ });

• Fires every time the context is entered

• Fires after the html manipulation occurs

If using Context.js• Rely on all elements with the intent or data-intent attributes existing on page load to get the "intent" event

• Context.js queries the DOM as soon as it sets up all of the responsive functionality

Adding Responsive Elements • At any time an element can be made responsive

• You can add one or many

• Attributes can be specified by generating html attributes dynamically or by providing a js object of options

Adding multiple elements• Chaining works

• intent.add($('#element')).add($('#another'));

Add element and specify responsive attributesintent.add($('#element'), {mobile:{class:'awesome'}});

<div id="element" intent in-mobile-class="awesome">...</div>

Add all elements inside the "nav"intent.elements($('nav'));

<nav><div id="element" intent in-mobile-class="awesome">

<img intent in-mobile-src="grumpycat.gif" />

</div></nav>

Rolling your ownExtending Context.js or starting from scratch

Creating a responsive axisvar axis = intent.responsive(contexts),

alt = intent.responsive(ctx, matcher),

fancy = intent.responsive(ctx, match, measure);

function

function

array

intent.responsive(contexts, match, measure);Contexts• Array of context objects

• [{name:'shallow'}, {name:'deep'}]

• Name property is required

• Used for the context event type

• Used for the responsive attributes

• i.e. in-shallow-class="fixed"

intent.responsive(contexts, match, measure);Matchervar depth = intent.responsive(contexts);

// Default matching function:function(measure, context){ return measure === context.name;}

//so...depth('shallow'); // Makes "shallow" a current context// because the parameter to depth is // the measure parameter in the matcher

intent.responsive(contexts, match, measure);Overriding Matchervar contexts = [ {name:'shallow', depth:200}, {name:'deep', depth:1/0}],

// Responsive function depth = intent.responsive(contexts, function(measure, ctx){ return measure <= ctx.depth; });

So...depth(300); // deep

intent.responsive(contexts, match, measure);Measure// responsive functiondepth = intent.responsive(contexts, matcherFunction, // measure function function(){ return $(window).scrollTop(); });

$(window).on('scroll', depth);

How to create priority• The order of making responsive axis

• The first responsive axis definition is the lowest priority

• Can be re-prioritized via sorting the intent.contexts property

How a plugin works• Checks for the existence of intent

• Adds responsive axis to the intent object

• Returns the intent object so other plugins can extend it

A few responsive ideas• Page load time

• Scroll depth

• Integration of aware.js

• Time of day

• Returning visitor

• Time on site

• Geolocation

Experiments:

Angular.js integration• Custom directive

• "intent" becomes a directive to add elements to intention

app.directive('intent', function () { return { restrict:'A', link:function (scope, element, attrs) {

if(window.intent){ window.intent.add($(element), JSON.parse(attrs.intent)); } } };});

Angular.js integration• The Markup (or can be completely standard

intention tags) looks like:<div intent='{mobile:{class:"beautiful"}'></div>

Conditional CSS Stylesheet LoadercssLoader( //stylesheets to load ['css/amazing-touch-mobile.css', 'css/amazing-highres.css'], // when these contexts ['mobile', 'touch', 'highres']);

Totally Impractical Animation Demo• Uses scroll depth on two different axis

• One to check forwards and backwards

• One to progress the animation based on scrolldepth

Extending the responsive functionality of Twitter Bootstrap• Data attribute implementation of js widgets on top

of context specific intentional attributes

• Theoretically possible, and cool

Lots to do, lots that can be done.Thank you.

This presentation was created in New York, NY, Pittsburgh, PA and Austin, TX, based on research that began in October of 2011, representing the culmination of the Dow Jones Design Studio’s work towards a more flexible web design and development process.

Erin [email protected]

Intentionally Dealing with Responsive DesignDow Jones Design Studio, SXSW 2013, http://intentionjs.com

Joe [email protected]

mailto:[email protected]

mailto:[email protected]

http://intentionjs.com

http://intentionjs.com

mailto:[email protected]?subject=

mailto:[email protected]?subject=

Intentionally dealing with responsive design

Documents

Transcript of Intentionally dealing with responsive design