Intentionally dealing with responsive design

Intentionally Dealing with

Responsive DesignJoe Kendall and Erin Sparling, Dow Jones

Timeline of the presentation
4 hours is a lot of time to ﬁll

Interesting
10 Topics
9
8
7 Technical
Deep Dive
Level of Interest (over time)

6
Long
5 Weekend Snack
4 Time
3
2
1
0
0 0.5 1 1.5 2 2.5 3 3.5 4
Time (in hours)

Preamble
An Introduction to the Dow Jones Design Studio

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

Dow Jones Design Studio Properties
• WSJ • WSJ, Barrons, NYPost
iOS app templates
• Barrons
• WSJ Responsive Web
• MarketWatch
• MarketWatch Tablet App
• Factiva
• DJ Financial Services
• DJ Risk & Compliance

• WSJ Real Time

Discussing Responsive Design

Unicorn

Designer / Developer


Startup Designer Developer


Designer Developer

Established
Company

Designer UX Front-end Back-end

Designer Developer

Designer UX Front-end Back-end

Large
HTML/CSS JS Middleware Back-end / DBA
Organization

Front-end Back-end

HTML/CSS JS Middleware Back-end / DBA

International
Architect Engineer SA DBA
Conglomerate

User Experience Designer
Internal Deﬁnition

Designer who focuses on user ﬂows,
documentation, rules and product
research:
A user experience designer creates
wireframes with designers and product
managers.

Designer

Designer who focuses on mock-ups,
brand deﬁnition, aesthetic guidelines:
A designer works with business leads
to create a consistent visual approach
to disparate products under a
common brand.

Design Technologist

Technologist whose primary
concerns are tangible interfaces:
A design tech creates html, css,
javascript and development systems to
enhance the design process.
Us !
at ’s
T h

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 ﬂag-waver

• Extremely verbose in communication

• Community outreach

Javascript
Our concerns and focus

• We care about the friction coeﬃcient 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

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

Development
Methods for building deliverables

• Local development
• Production development framework
• Local, dev, qa, production cdn
• Documentation via the “Global Header”
• Github Enterprise

Platform

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.

Property

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
Workﬂow
The story of how an idea becomes reality

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

IA Design

Design
Discovery
Tech

Integration &
Deployment

Editorial Workﬂow
The process of storytelling

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

• What do we mean by “content” ?

• What eﬀects do the editorial process have on the
design of a property?

Editor

One who manages edits to a
document, custom-tailoring a
document to a speciﬁc platform, or
managing the content hierarchy on a
platform:
An editor changes what content is on
the homepage, and can edit headlines.

Article

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.

Collection

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

Module

An instantiation and speciﬁc
conﬁguration 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.

Template (page)

A web page conﬁguration, containing
modules with speciﬁc 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
conﬁguration 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.

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

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

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

Page Rendering
The output of a story

Page Equation (approximate)

({ }* )
modules +
target
edit requirements +
platforms
user roles
page =

( required
assets /
dynamically
cdn
delivery )

Optimized Rendering Techniques
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.

• 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.

Module Assets
HTML, CSS, Javascript documentation

CSS Dependencies
Header Strap

Article Content Image reset.css

grid.css

typography.css
Additional metadata
headlineSummary.css

Module Asset Documentation
Modules are given a unique ID, which is then tied to collection
conﬁgurations in a page template.
<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 Asset Conﬁguration
Page templates have deﬁned modules, and separately mapped
appearance dependencies
<page>
<collection id="top">
<unit id="headlineSummary" />
</collection>
<collection id="top">
<unit id="whatsNews" />
</collection>
</page>

Collection Conﬁguration
Header Strap Header Strap •reset.css
Article Content Image •grid.css
Image
•typography.css
•headlineSummary.css
•whatsNews.css
Article Content
Additional metadata

Header Strap

Article Content Image

Additional metadata Additional metadata

•reset.css
•grid.css
Header Strap Header Strap

Article Content Image •typography.css
Image
Additional metadata
Article Content •whatsNews.css
Header Strap •nav.css

•footer.css
•sidebar.css

•reset.css
•grid.css
Header Strap Header Strap

Article Content Image •typography.css
Image
Additional metadata
Article Content •whatsNews.css
Header Strap •nav.css

•footer.css
•sidebar.css

e

id
•subscriber.css

s
In e
Jo k

Integration
Code hand-oﬀ & iteration

• Structured Wiki for Asset Documentation
• Front-end Dependency Management

Deployment
Production “Go Live” techniques

• 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 Design
A brief history

Responsive Design
Timeline

Graceful Degradation Progressive Enhancement Responsive Design

Mobile First

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

URL
http://wsj.com

Rich Interactive Site Load Additional
Assets

Mobile Mobile-size
optimized
experience

What size of
Custom Interactive
device is the user Desktop Resized Window?
Site
on?

Load Additional
Assets

Tablet Tablet-size
optimized
experience

Resizing the screen in Responsive Design

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-speciﬁc approaches cause a degraded
developer experience, end-user performance

• Major back-end investments are needed

~700k in assets

700k for BostonGlobe.com desktop is eﬃcient.

Same assets

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

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.

Looks pretty
important
1 2 8

3

4

5 6 7

Theoretical 3-column 10-unit Page Layout

1 2

3

4

5 6 7 Not very
important

8


?
1

2

3

Is it even here?
4


e jo r
M ma anc
r rns
fo e
r
e nc
P o
C
Responsive Design
The way of the future*
50%
Hie Mor
o
zw d
rd
rarc e
B uz ve Pro hy
ro
A pp blem
* The way of the future not guaranteed by any claims or statements, either direct or interpreted, via this presentation. No metrics were complied to

s
support graphic ﬂourishes 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 ﬁction. 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.

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.

Code Discussion
Designers talking to Developers
Ideal
Easy to
work with

Generic Speciﬁc
code code

Reality

Hard to
work with

Code Discrepancies
Desktop-focused HTML

<style>
.ten.columns { width: 100%; }
.six.columns { width:60%; }
.four.columns { width: 40%; }
Lies
@media all and (width:320px) {
.ten.columns, .six.columns, .four.columns { width: 100%; }
}
</style>

<section class="ten columns">
<div class="six columns"> ... </div>
<div class="four columns"> ... </div>
</section>

Code Discrepancies
Generic HTML

<style>
.main { width: 100%; }
.secondary { width:60%; }
.tertiary { width: 40%; } Vague / Meaningless

@media all and (width:320px) {
.main, .secondary, .tertiary { width: 100%; }
}
</style>

<section class="main">
<div class="secondary"> ... </div>
<div class="tertiary"> ... </div>
</section>

Responsive Problems
• Layout ﬂexibility tends to increase likeliness of
performance problems.

• Hierarchy is limited by initial structure.

• HTML/CSS either is too broad, or too speciﬁc, 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 Design
A departure

Responsive Grid
The Intersection of Concerns

mobile tablet desktop luxury
Windows 8
iPhone Tablet

touch ? ?
Blackberry 27" Monitors

mouse X X ?

Responsive 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.

Context

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.

Intentional Design (theory)
Proposed Public Deﬁniton

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 conﬁguration.

Intention.js (library)
Public Deﬁnition

A framework-independent library for
implementing the ideals of intentional
design:
Dow Jones uses intention.js to
circumvent the limitations of
responsive design.

Responsive Axis
Bandwidth optimization

Fast Slow

Responsive Axis
Bandwidth, screen-size, interaction type intersection

Small

se
ou
M
Fast Slow
La
rg
e
ch
u
To

Responsive Axis
Conﬂated Cube Conundrum

se
Sm

ou
M
all

Low-res Hi-res
Fast Slow
ch

La
u

rg
To

e

Responsive Axis
Hypercube of hyperbole

Small

se
ou
M
Local Remote

Low-res Hi-res

Fast Slow
ch

Large
u
To

Responsive Axis (sample)
• Screen size • Scroll depth

• Pixel density • Visit frequency

• Connection speed • Physical location

• Interaction type • Distance from screen

• User type • Background noise

Contexts
• Mobile • TV

• Tablet • Kindle

• Standard • Jumbotron

• Luxury • iWatch

Intentional Design (theory)

intentions =
(
Responsive Axis
)( )Contexts

Ease of Editorial
+
authoring ﬂexibility

Editorial Concerns
Subtext
Sorry, Data. Commander William Riker of the Starship Wait a minute - you've been declared dead. You can't
Enterprise. Could someone survive inside a transporter give orders around here. Your head is not an artifact!
buffer for 75 years? You're going to be an interesting They were just sucked into space. How long can two
companion, Mr. Data. For an android with no feelings, he people talk about nothing? When has justice ever been
sure managed to evoke them in others. I'll be sure to as simple as a rule book? I'm afraid I still don't
note that in my log. Fear is the true enemy, the only understand, sir. You did exactly what you had to do. You
enemy. Fate. It protects fools, little children, and ships considered all your options, you tried every alternative
named "Enterprise." Computer, lights up! Captain, why and then you made the hard choice. I recommend you
are we out here chasing comets? What's a knock-out don't fire until you're within 40,000 kilometers. A lot of
like you doing in a computer-generated gin joint like this? things can change in twelve years, Admiral. Travel time
And blowing into maximum warp speed, you appeared to the nearest starbase?
for an instant to be in two places at once. I suggest you
drop it, Mr. Data. I am your worst nightmare! Earl Grey Congratulations - you just destroyed the Enterprise. This
tea, watercress sandwiches... and Bularian canapés? is not about revenge. This is about justice. The look in
Are you up for promotion? Smooth as an android's your eyes, I recognize it. You used to have it for me.
bottom, eh, Data? Is it my imagination, or have tempers What? We're not at all alike! Flair is what marks the
become a little frayed on the ship lately? In all trust, there difference between artistry and mere competence. Talk
is the possibility for betrayal. The Enterprise computer about going nowhere fast. We have a saboteur aboard.
system is controlled by three primary main processor Worf, It's better than music. It's jazz. We could cause a
cores, cross-linked with a redundant melacortz ramistat, diplomatic crisis. Take the ship into the Neutral Zone
fourteen kiloquad interface modules. Some days you get the bear, and some days the bear
gets you. Maybe if we felt any human loss as keenly as
That might've been one of the shortest assignments in we feel one of those close to us, human history would
the history of Starfleet. I can't. As much as I care about be far less bloody. I've had twelve years to think about it.
you, my first duty is to the ship. We know you're dealing And if I had it to do over again, I would have grabbed the
in stolen ore. But I wanna talk about the assassination phaser and pointed it at you instead of them. Then
attempt on Lieutenant Worf. About four years. I got tired maybe you should consider this: if anything happens to
of hearing how young I looked. Sure. You'd be surprised them, Starfleet is going to want a full investigation. Your
how far a hug goes with Geordi, or Worf. Maybe if we felt shields were failing, sir.
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.

Editorial Concerns
Subtext
Sorry, Data. Commander William Riker of the Starship That might've been one of the shortest assignments in
Enterprise. Could someone survive inside a transporter the history of Starfleet. I can't. As much as I care about
buffer for 75 years? You're going to be an interesting you, my first duty is to the ship. We know you're dealing
companion, Mr. Data. For an android with no feelings, he in stolen ore. But I wanna talk about the assassination
sure managed to evoke them in others. I'll be sure to attempt on Lieutenant Worf. About four years. I got tired
note that in my log. Fear is the true enemy, the only of hearing how young I looked. Sure. You'd be surprised
enemy. Fate. It protects fools, little children, and ships how far a hug goes with Geordi, or Worf. Maybe if we felt
named "Enterprise." Computer, lights up! Captain, why any human loss as keenly as we feel one of those close
are we out here chasing comets? What's a knock-out to us, human history would be far less bloody. When has
like you doing in a computer-generated gin joint like this? justice ever been as simple as a rule book? Wouldn't
And blowing into maximum warp speed, you appeared that bring about chaos? Now we know what they mean
for an instant to be in two places at once. I suggest you by 'advanced' tactical training. Maybe we better talk out
drop it, Mr. Data. I am your worst nightmare! Earl Grey here; the observation lounge has turned into a swamp.
tea, watercress sandwiches... and Bularian canapés?
Are you up for promotion? Smooth as an android's Congratulations - you just destroyed the Enterprise. This
bottom, eh, Data? Is it my imagination, or have tempers is not about revenge. This is about justice. The look in
become a little frayed on the ship lately? In all trust, there your eyes, I recognize it. You used to have it for me.
is the possibility for betrayal. The Enterprise computer What? We're not at all alike! Flair is what marks the
system is controlled by three primary main processor difference between artistry and mere competence. Talk
cores, cross-linked with a redundant melacortz ramistat, about going nowhere fast. We have a saboteur aboard.
fourteen kiloquad interface modules. Worf, It's better than music. It's jazz. We could cause a
diplomatic crisis. Take the ship into the Neutral Zone
Wait a minute - you've been declared dead. You can't Some days you get the bear, and some days the bear
give orders around here. Your head is not an artifact! gets you. Maybe if we felt any human loss as keenly as
They were just sucked into space. How long can two we feel one of those close to us, human history would
people talk about nothing? When has justice ever been be far less bloody. I've had twelve years to think about it.
as simple as a rule book? I'm afraid I still don't And if I had it to do over again, I would have grabbed the
understand, sir. You did exactly what you had to do. You phaser and pointed it at you instead of them. Then
considered all your options, you tried every alternative maybe you should consider this: if anything happens to
and then you made the hard choice. I recommend you them, Starfleet is going to want a full investigation. Your
don't fire until you're within 40,000 kilometers. A lot of shields were failing, sir.
things can change in twelve years, Admiral. Travel time
to the nearest starbase?

10-unit header, 6/4 column split

Idealized Hierarchy Modiﬁcations

header
1a 2a

2b

2c
1b

1c

Idealized Content Wireframe

header
1a 2a

2b

2c
1b

1c

DOM Folding

header
1a

• Secondary content folds
under primary content
1b
• Content hierarchy is
1c subject to actual html page
structure

• Editorial ﬂexibility is ﬁxed

2a

DOM Folded Responsive Layout

header
1a 2a

2b

2c
1b

1c

Idealized Content Reﬂow

header
• Content hierarchy deﬁned
1a separately for desktop,
mobile

• Tools can be built to
customize this

2a

1b

1c

Futuristic Crazy Magic

More Content
Visible

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

Odd Ad
Placement
1 2 Ad 9

3

10 11
4
12 13
5 6 7

Theoretical Page Layout
4-columns 14-units

1 2 8 9

3

10 11
4 Valuable

Ad

5 6 7

4-columns 14-units

Ridiculously
Valuable
1 2 8 Ad

3

9
4
10

5 6 7

4-columns 14-units

What exists already?
• JS • HTML / CSS

• Bootstrap • Regions

• Breakpoints • Content-ﬂow

• Conditionizr • srcset

• Aware

HTML and CSS
Existing 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 speciﬁed

Javascript
Existing 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 inﬂexible ads with grace

• Create sustainable workﬂows to support n-up
contexts

Context-abstracted Front-end Development
• 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

Ads deserve their respect
• Enable ad implementations to integrate the most
relevant ad size and type per page context

You
• Ensure that the minimum conﬁguration for a page
context supports ads implemented
rb
• Determine if ad calls should belissued per pages
ove o s
request, or per context change s th
slid is
e!

Sustainable Workﬂows
• 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 workﬂows that can tie into
existing development systems, but encourage
creation of new, optimized technical designs
around the neccessities of performance
Responsive Design

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

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


These should all be the same, but cannot be.

Fin
ally
!
Intentional Design
A philosophical introduction

Core Ideas of Intentional Design
• Clearer delineation between the responsibilities of
html, css and javascript.

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

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

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

Intention.js
A technical introduction

A Formula for
Implementing
Responsive Design
A demonstration

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

• I’ve got really speciﬁc problems that need speciﬁc
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 Explained
Describing diﬀerences
Knowing 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
speciﬁed in the current contexts

• Does not mess with classes that are not speciﬁed

Attributes
• Single value

• In a conﬂict?

• Priority can be speciﬁed

Placement
• Same resolving strategy as attributes (priority)

• Four placements

• before

• after

• prepend

• append

Context.js defaults
• Base

• Touch

• Mobile

• Tablet

• Standard

• Highres

Context.js defaults
• Base

• Touch axis

• Mobile
axis
• Tablet

• Standard
axis
• Highres

axis

Context.js defaults
• Base

• Touch Fallback

• Mobile
Input
• Tablet

• Standard
Size (width)
• Highres

Screen
resolution

Context.js defaults
• Base

• Touch Priority 4

• Mobile
Priority 3

• Tablet

• Standard Priority 2

• Highres

Priority 1

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

• mobile

• touch

• highres

• base

• 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 Changes
The 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

preﬁx-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
intent
</section>

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

And for desktop <= 810
intent
</section>

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

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 speciﬁed 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 speciﬁed 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 speciﬁed for contexts other
than the valid context

• This will come up later

Take this example
intent
...
</section>

The current context is mobile
intent
...
</section>

So the classes to remove are:

sixColumn and tenColumn

The Formula
(existing – remove) ∪ current = result

The formula
(existing – remove) ∪ current = result

Union
the objects that belong to
existing but not to remove

Changing Arbitrary Attributes
Conditional highres images

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

What gets applied?
Highest priority context

src="big_image.png" />

"highres" trumps size contexts

What gets applied?

src="" />

Oops...
No context speciﬁed, that is what
"base" is for...

Surprise!
iPad 2 Low-res

Conditional highres images do-over

intent
in-base-src="small_image.png"
in-highres-src="big_image.png" />

What gets applied?

src="small_image.png" />

Much better

Context.js priority
In order of lowest to highest 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)

Th
Intention.js
se is
ns a m
e ke
Context.js
no s
w!
Your HTML

with your HTML
perfectly formatted

Intention.js

Context.js pluginA.js pluginB.js

Your HTML

with your HTML
perfectly formatted

Intention.js

pluginA.js pluginB.js pluginC.js

Your HTML

with your HTML
perfectly formatted

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 speciﬁc 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 speciﬁed 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
attributes
intent.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 own
Extending Context.js or starting from scratch

Creating a responsive axis
array
var axis =
intent.responsive(contexts),
function
alt =
intent.responsive(ctx, matcher),
function
fancy =
intent.responsive(ctx, match, measure);

Contexts
intent.responsive(contexts, match, measure);

• 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"

Matcher

var 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

Overriding Matcher

var contexts = [
{name:'shallow', depth:200},
{name:'deep', depth:1/0}],

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

Measure

// responsive function
depth = 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 ﬁrst responsive axis deﬁnition 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

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 Loader
cssLoader(
//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 diﬀerent 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 speciﬁc intentional attributes

• Theoretically possible, and cool

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

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

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 ﬂexible web design
and development process.

Erin Sparling Joe Kendall
erin.sparling@dowjones.com joe.kendall@dowjones.com

Intentionally dealing with responsive design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Intentionally dealing with responsive design

Ähnlich wie Intentionally dealing with responsive design (20)

Intentionally dealing with responsive design