Intentionally dealing with responsive design

2,868 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,868
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
48
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Intentionally dealing with responsive design

  1. 1. Intentionally Dealing withResponsive DesignJoe Kendall and Erin Sparling, Dow Jones
  2. 2. Timeline of the presentation 4 hours is a lot of time to fill Interesting 10 Topics 9 8 7 Technical Deep DiveLevel 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)
  3. 3. PreambleAn Introduction to the Dow Jones Design Studio
  4. 4. Dow Jones Design StudioThe Design Studio is a multi-disciplinary teamfocused on the strategic design needs of the variousmedia and publishing properties of Dow Jones.
  5. 5. 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
  6. 6. Discussing Responsive Design Unicorn Designer / Developer
  7. 7. Discussing Responsive Design Designer / Developer Startup Designer Developer
  8. 8. Discussing Responsive Design Designer / Developer Designer DeveloperEstablishedCompany Designer UX Front-end Back-end
  9. 9. Discussing Responsive Design Designer Developer Designer UX Front-end Back-endLarge HTML/CSS JS Middleware Back-end / DBAOrganization
  10. 10. Discussing Responsive Design Front-end Back-end HTML/CSS JS Middleware Back-end / DBAInternational Architect Engineer SA DBAConglomerate
  11. 11. User Experience DesignerInternal DefinitionDesigner who focuses on user flows,documentation, rules and productresearch:A user experience designer createswireframes with designers and productmanagers.
  12. 12. DesignerInternal DefinitionDesigner who focuses on mock-ups,brand definition, aesthetic guidelines:A designer works with business leadsto create a consistent visual approachto disparate products under acommon brand.
  13. 13. Design TechnologistInternal DefinitionTechnologist whose primaryconcerns are tangible interfaces:A design tech creates html, css,javascript and development systems toenhance the design process. Us ! at ’s T h
  14. 14. 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
  15. 15. JavascriptOur concerns and focus• 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
  16. 16. Outreach
  17. 17. The Way We WorkOur landscape for Development, Integration &Deployment techniques and methodologies
  18. 18. DevelopmentMethods for building deliverables• Local development• Production development framework• Local, dev, qa, production cdn• Documentation via the “Global Header”• Github Enterprise
  19. 19. PlatformInternal DefinitionAn abstract collection oftechnologies used for implementing abrand’s product(s):Tesla is a web app platform used tocreate WSJ Responsive, Portfolio, RealTime and new web-based initiatives.
  20. 20. PropertyInternal DefinitionAn implementation of a brand on aplatform:The WSJ Responsive property isbased on modern best-practices,whereas the WSJ iOS properties arebased on fancy templatingtechnologies.
  21. 21. Design DeliveryWorkflowThe story of how an idea becomes reality
  22. 22. Design Delivery StepsWhile a design process must be flexible in an ever-changing, news-driven work environment, standardsfor application development are ideals, and notwritten in stone. IA Design Design Discovery Tech Integration & Deployment
  23. 23. Editorial WorkflowThe process of storytelling
  24. 24. 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?
  25. 25. EditorInternal DefinitionOne who manages edits to adocument, custom-tailoring adocument to a specific platform, ormanaging the content hierarchy on aplatform:An editor changes what content is onthe homepage, and can edit headlines.
  26. 26. ArticleInternal DefinitionA story and associated metadata,e.g. interactives, graphics, photos,video or slideshows:After its publishing, an editor can addadditional supporting media onto anarticle.
  27. 27. CollectionInternal DefinitionA set of articles:An editor can manipulate the mappingof articles in a collection before,during and after publishing.
  28. 28. ModuleInternal DefinitionAn instantiation and specificconfiguration of a collection articleson a web page:A module’s appearance is determinedby the presence or absence of articlesin the collection that is bound to it.
  29. 29. Template (page)Internal DefinitionA web page configuration, containingmodules with specific collections:The home page template containsmany modules. Each collection may becontrolled by a different editor, and caneither be shared by multiple pagetemplates, or used uniquely.
  30. 30. 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.
  31. 31. 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.
  32. 32. Module AppearanceModules can be present because of a combination of content,newsworthiness, edition, subscription level and 3rd-partyintegration• 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.
  33. 33. Page RenderingThe output of a story
  34. 34. Page Equation (approximate) ({ }* ) modules + target edit requirements + platforms user rolespage = ( required assets / dynamically cdn delivery )
  35. 35. Optimized Rendering TechniquesTemplates, and their configured modules and content, and the userviewing them, are all variables to what the final experience is of anygiven 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.
  36. 36. Module AssetsHTML, CSS, Javascript documentation CSS Dependencies Header Strap Article Content Image reset.css grid.css typography.css Additional metadata headlineSummary.css
  37. 37. Module Asset DocumentationModules are given a unique ID, which is then tied to collectionconfigurations 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>
  38. 38. Page Asset ConfigurationPage templates have defined modules, and separately mappedappearance dependencies<page> <collection id="top"> <unit id="headlineSummary" /> </collection> <collection id="top"> <unit id="whatsNews" /> </collection></page>
  39. 39. Collection ConfigurationHeader Strap Header Strap •reset.cssArticle Content Image •grid.css Image •typography.css •headlineSummary.css •whatsNews.css Article ContentAdditional metadataHeader StrapArticle Content ImageAdditional metadata Additional metadata
  40. 40. Page Asset Configuration •reset.css •grid.css Header Strap Header Strap Article Content Image •typography.css Image •headlineSummary.css Additional metadata Article Content •whatsNews.css Header Strap •nav.css Article Content Image •footer.css •sidebar.css Additional metadata Additional metadata
  41. 41. Page Asset Configuration •reset.css •grid.css Header Strap Header Strap Article Content Image •typography.css Image •headlineSummary.css Additional metadata Article Content •whatsNews.css Header Strap •nav.css Article Content Image •footer.css •sidebar.css e Additional metadata Additional metadata id •subscriber.css sIn e Jo k
  42. 42. IntegrationCode hand-off & iteration• Structured Wiki for Asset Documentation• Front-end Dependency Management
  43. 43. DeploymentProduction “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
  44. 44. Responsive DesignA brief history
  45. 45. HTML with Inline Styles
  46. 46. HTML & CSS
  47. 47. Responsive DesignTimeline Graceful Degradation Progressive Enhancement Responsive Design Mobile First
  48. 48. 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
  49. 49. URL http://wsj.comRich 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
  50. 50. New York Times
  51. 51. Quartz
  52. 52. Time
  53. 53. Boston Globe
  54. 54. Boston Globe appears as if it was designed for eachscreen size it is rendered on.
  55. 55. Tablet-optimized navigation is loaded in a medium size layout.
  56. 56. Mobile layout is extremely focused on content, light on design.
  57. 57. 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
  58. 58. ~700k in assets700k for BostonGlobe.com desktop is efficient.
  59. 59. Same assetsThe same assets for BostonGlobe.com Mobile are used,creating an efficient workflow, but an inefficient experience.
  60. 60. 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.
  61. 61. Looks pretty important1 2 8 345 6 7Theoretical 3-column 10-unit Page Layout
  62. 62. 1 2 3 4 5 6 7 Not very important 8Theoretical 2-column 6-unit Page Layout
  63. 63. ? 1 2 3Is it even here? 4 Theoretical 1-column 3-unit Page Layout
  64. 64. e jo r M ma anc r rns fo e r e ncP 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 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 manufacturers approved service centers.
  65. 65. 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.
  66. 66. Code DiscussionDesigners talking to Developers Ideal Easy to work with Generic Specific code code Reality Hard to work with
  67. 67. Code DiscrepanciesDesktop-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>
  68. 68. Code DiscrepanciesGeneric 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>
  69. 69. 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.
  70. 70. 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.
  71. 71. Responding toResponsive DesignA departure
  72. 72. Responsive GridThe Intersection of Concerns mobile tablet desktop luxury Windows 8 iPhone Tablet touch ? ? Blackberry 27" Monitors mouse X X ?
  73. 73. Responsive AxisInternal DefinitionThe intersection for disparateplatform concerns, usually limited tointeraction type and screen size:The mobile responsive axis of anintentional site uses the assumptionsthat the target device set areapproximately 3" wide, and touch-enabled.
  74. 74. ContextInternal DefinitionThe target user experience:The users intent in the mobile contextis to have access to the latestinformation in the shortest amount ofinteractions.
  75. 75. Intentional Design (theory)Proposed Public DefinitonAn approach to web design anddevleopment that supersedes theDOM-based limitations imposed byresponsive design:An intentional design implementscomplete freedom of hierarchy, basedon a per-context configuration.
  76. 76. Intention.js (library)Public DefinitionA framework-independent library forimplementing the ideals of intentionaldesign:Dow Jones uses intention.js tocircumvent the limitations ofresponsive design.
  77. 77. Responsive AxisBandwidth optimization Fast Slow
  78. 78. Responsive AxisBandwidth, screen-size, interaction type intersection Small se ou M Fast Slow La rg e ch u To
  79. 79. Responsive AxisConflated Cube Conundrum se Sm ou M all Low-res Hi-res Fast Slow ch La u rg To e
  80. 80. Responsive AxisHypercube of hyperbole Small se ou M Local Remote Low-res Hi-res Fast Slow ch Large u To
  81. 81. Responsive Axis (sample)• Screen size • Scroll depth• Pixel density • Visit frequency• Connection speed • Physical location• Interaction type • Distance from screen• User type • Background noise
  82. 82. Contexts• Mobile • TV• Tablet • Kindle• Standard • Jumbotron• Luxury • iWatch
  83. 83. Intentional Design (theory)intentions = ( Responsive Axis )( )Contexts Ease of Editorial + authoring flexibility
  84. 84. Editorial ConcernsSubtextSorry, Data. Commander William Riker of the Starship Wait a minute - youve been declared dead. You cantEnterprise. Could someone survive inside a transporter give orders around here. Your head is not an artifact!buffer for 75 years? Youre going to be an interesting They were just sucked into space. How long can twocompanion, Mr. Data. For an android with no feelings, he people talk about nothing? When has justice ever beensure managed to evoke them in others. Ill be sure to as simple as a rule book? Im afraid I still dontnote that in my log. Fear is the true enemy, the only understand, sir. You did exactly what you had to do. Youenemy. Fate. It protects fools, little children, and ships considered all your options, you tried every alternativenamed "Enterprise." Computer, lights up! Captain, why and then you made the hard choice. I recommend youare we out here chasing comets? Whats a knock-out dont fire until youre within 40,000 kilometers. A lot oflike you doing in a computer-generated gin joint like this? things can change in twelve years, Admiral. Travel timeAnd blowing into maximum warp speed, you appeared to the nearest starbase?for an instant to be in two places at once. I suggest youdrop it, Mr. Data. I am your worst nightmare! Earl Grey Congratulations - you just destroyed the Enterprise. Thistea, watercress sandwiches... and Bularian canapés? is not about revenge. This is about justice. The look inAre you up for promotion? Smooth as an androids your eyes, I recognize it. You used to have it for me.bottom, eh, Data? Is it my imagination, or have tempers What? Were not at all alike! Flair is what marks thebecome a little frayed on the ship lately? In all trust, there difference between artistry and mere competence. Talkis 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, Its better than music. Its jazz. We could cause acores, cross-linked with a redundant melacortz ramistat, diplomatic crisis. Take the ship into the Neutral Zonefourteen 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 asThat mightve been one of the shortest assignments in we feel one of those close to us, human history wouldthe history of Starfleet. I cant. As much as I care about be far less bloody. Ive had twelve years to think about it.you, my first duty is to the ship. We know youre dealing And if I had it to do over again, I would have grabbed thein stolen ore. But I wanna talk about the assassination phaser and pointed it at you instead of them. Thenattempt on Lieutenant Worf. About four years. I got tired maybe you should consider this: if anything happens toof hearing how young I looked. Sure. Youd be surprised them, Starfleet is going to want a full investigation. Yourhow 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 closeto us, human history would be far less bloody. When hasjustice ever been as simple as a rule book? Wouldntthat bring about chaos? Now we know what they meanby advanced tactical training. Maybe we better talk outhere; the observation lounge has turned into a swamp.
  85. 85. Editorial ConcernsSubtextSorry, Data. Commander William Riker of the Starship That mightve been one of the shortest assignments inEnterprise. Could someone survive inside a transporter the history of Starfleet. I cant. As much as I care aboutbuffer for 75 years? Youre going to be an interesting you, my first duty is to the ship. We know youre dealingcompanion, Mr. Data. For an android with no feelings, he in stolen ore. But I wanna talk about the assassinationsure managed to evoke them in others. Ill be sure to attempt on Lieutenant Worf. About four years. I got tirednote that in my log. Fear is the true enemy, the only of hearing how young I looked. Sure. Youd be surprisedenemy. Fate. It protects fools, little children, and ships how far a hug goes with Geordi, or Worf. Maybe if we feltnamed "Enterprise." Computer, lights up! Captain, why any human loss as keenly as we feel one of those closeare we out here chasing comets? Whats a knock-out to us, human history would be far less bloody. When haslike you doing in a computer-generated gin joint like this? justice ever been as simple as a rule book? WouldntAnd blowing into maximum warp speed, you appeared that bring about chaos? Now we know what they meanfor an instant to be in two places at once. I suggest you by advanced tactical training. Maybe we better talk outdrop 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 androids Congratulations - you just destroyed the Enterprise. Thisbottom, eh, Data? Is it my imagination, or have tempers is not about revenge. This is about justice. The look inbecome 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? Were not at all alike! Flair is what marks thesystem is controlled by three primary main processor difference between artistry and mere competence. Talkcores, cross-linked with a redundant melacortz ramistat, about going nowhere fast. We have a saboteur aboard.fourteen kiloquad interface modules. Worf, Its better than music. Its jazz. We could cause a diplomatic crisis. Take the ship into the Neutral ZoneWait a minute - youve been declared dead. You cant Some days you get the bear, and some days the beargive orders around here. Your head is not an artifact! gets you. Maybe if we felt any human loss as keenly asThey were just sucked into space. How long can two we feel one of those close to us, human history wouldpeople talk about nothing? When has justice ever been be far less bloody. Ive had twelve years to think about it.as simple as a rule book? Im afraid I still dont And if I had it to do over again, I would have grabbed theunderstand, sir. You did exactly what you had to do. You phaser and pointed it at you instead of them. Thenconsidered all your options, you tried every alternative maybe you should consider this: if anything happens toand then you made the hard choice. I recommend you them, Starfleet is going to want a full investigation. Yourdont fire until youre within 40,000 kilometers. A lot of shields were failing, sir.things can change in twelve years, Admiral. Travel timeto the nearest starbase?
  86. 86. WSJ.com public home page
  87. 87. 10-unit 959px grid
  88. 88. 10-unit header, 6/4 column split
  89. 89. 10-unit desktop grid
  90. 90. 6-unit tablet grid
  91. 91. 3-unit phone grid
  92. 92. Idealized Hierarchy Modifications
  93. 93. header 1a 2a 2b 2c 1b 1cIdealized Content Wireframe
  94. 94. header 1a 2a 2b 2c 1b 1cDOM Folding
  95. 95. header 1a • Secondary content folds under primary content 1b • Content hierarchy is 1c subject to actual html page structure • Editorial flexibility is fixed 2aDOM Folded Responsive Layout
  96. 96. header 1a 2a 2b 2c 1b 1cIdealized Content Reflow
  97. 97. header • Content hierarchy defined 1a separately for desktop, mobile • Tools can be built to customize this 2a 1b 1cFuturistic Crazy Magic
  98. 98. More Content VisibleAdditional content may be displayed for userson larger, more capable devices.
  99. 99. Odd Ad Placement1 2 Ad 9 3 10 114 12 135 6 7 Theoretical Page Layout 4-columns 14-units
  100. 100. 1 2 8 9 3 10 114 Valuable Ad5 6 7 Theoretical Page Layout 4-columns 14-units
  101. 101. Ridiculously Valuable1 2 8 Ad 3 94 105 6 7 Theoretical Page Layout 4-columns 14-units
  102. 102. What exists already?• JS • HTML / CSS• Bootstrap • Regions• Breakpoints • Content-flow• Conditionizr • srcset• Aware
  103. 103. HTML and CSSExisting techniques and solutions
  104. 104. Current Media Queries• Limited axes• screen dimensions (approximate)• orientation• pixel density• Performance hit
  105. 105. CSS Regions & Content Flow• Not backwards compatible• Require per-page dynamically generated css authoring to emulate ideal behavior
  106. 106. Srcset• Not backwards compatible• Only for images, as currently specified
  107. 107. JavascriptExisting libraries and techniques
  108. 108. Aware.js and Breakpoints.js• Multi-class structure leads to harder-to-maintain code at scale• Fewer responsive axes
  109. 109. Conditionizr• Good at managing low/high-res images, but only aimed at image swapping
  110. 110. 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
  111. 111. 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
  112. 112. Ads deserve their respect• Enable ad implementations to integrate the most relevant ad size and type per page context You• Ensure that the minimum configuration 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!
  113. 113. Sustainable Workflows• 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
  114. 114. <div class="col2wide"> ... </div> <div class="col3wide"> ... </div> <div class="col4wide"> ... </div>2, 3 and 4-column module variations and code sample
  115. 115. <div class="col2wide"> ... </div> <div class="col3wide"> ... </div> <div class="col4wide"> ... </div>These should all be the same, but cannot be.
  116. 116. 10-unit phone grid
  117. 117. 3-unit phone grid
  118. 118. Fin ally !Intentional DesignA philosophical introduction
  119. 119. Core Ideas of Intentional Design• 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.
  120. 120. Intention.jsA technical introduction
  121. 121. A Formula forImplementingResponsive DesignA demonstration
  122. 122. 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?
  123. 123. 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
  124. 124. Intention.js Context.js Your HTMLall your users devices with your HTML perfectly formatted
  125. 125. Context.js ExplainedDescribing differencesKnowing when to expect one thing and not another
  126. 126. 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
  127. 127. 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
  128. 128. Attributes• Single value• In a conflict? • Priority can be specified
  129. 129. Placement• Same resolving strategy as attributes (priority)• Four placements • before • after • prepend • append
  130. 130. Context.js defaults• Base• Touch• Mobile• Tablet• Standard• Highres
  131. 131. Context.js defaults• Base• Touch axis• Mobile axis• Tablet• Standard axis• Highres axis
  132. 132. Context.js defaults• Base• Touch Fallback• Mobile Input• Tablet• Standard Size (width)• Highres Screen resolution
  133. 133. Context.js defaults• Base• Touch Priority 4• Mobile Priority 3• Tablet• Standard Priority 2• Highres Priority 1
  134. 134. Any combination ofcontexts, one from eachaxis, is possible
  135. 135. • mobile• touch• highres• base
  136. 136. • base• standard
  137. 137. • base• standard• touch
  138. 138. • base• tablet• touch
  139. 139. 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
  140. 140. Making ChangesThe HTML Interface
  141. 141. Step 1: Indicating your intent<body intent> <header><nav intent>...</nav></header> <section> <h1 intent></h1> </section></body>
  142. 142. Valid markup is supported<body data-intent> <header> <nav data-intent>...</nav> </header> <section> <h1 data-intent></h1> </section></body>
  143. 143. Step 2: Specify what to change whenprefix-context-change="value"i.e.in-mobile-class="threeColumn and more"
  144. 144. Changing Classes<section intent in-mobile-class="threeColumn">...</section>
  145. 145. 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>
  146. 146. Changing Classes<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn">...</section>
  147. 147. Results for iPhone 5<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn"></section>becomes:<section class="headlineList swipe threeColumn"></section>
  148. 148. And for desktop <= 810<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn"></section>becomes:<section class="headlineList sixColumn"></section>
  149. 149. Changing Classes How it Works• Formula using:• Existing classes• Classes to remove• Classes to add
  150. 150. 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
  151. 151. What is to add?• All classes assigned to the current contexts• Union of the classes specified in each attribute
  152. 152. 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
  153. 153. Take this example<section class="headlineList" intent in-touch-class="swipe" in-mobile-class="threeColumn" in-tablet-class="sixColumn" in-standard-class="tenColumn">...</section>
  154. 154. 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
  155. 155. The Formula(existing – remove) ∪ current = result
  156. 156. The formula(existing – remove) ∪ current = result Union the objects that belong to existing but not to remove
  157. 157. Changing Arbitrary AttributesConditional highres images<img title="beautiful image" intent in-mobile-src="small_image.png" in-highres-src="big_image.png" />
  158. 158. What gets applied?Highest priority context<img title="beautiful image" src="big_image.png" />"highres" trumps size contexts
  159. 159. What gets applied?Highest priority context<img title="beautiful image" src="" />Oops...No context specified, that is what"base" is for... Surprise! iPad 2 Low-res
  160. 160. Conditional highres images do-over<img title="beautiful image" intent in-base-src="small_image.png" in-highres-src="big_image.png" />
  161. 161. What gets applied?Highest priority context<img title="beautiful image" src="small_image.png" />Much better
  162. 162. Context.js priorityIn order of lowest to highest priority• base (default)• mobile, tablet, standard (size)• touch (input method)• highres (screen resolution)
  163. 163. 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)
  164. 164. Beyond the HTML
  165. 165. Th Intention.js se is ns a m e ke Context.js no s w! Your HTMLall your users devices with your HTML perfectly formatted
  166. 166. Intention.jsContext.js pluginA.js pluginB.js Your HTML all your users devices with your HTML perfectly formatted
  167. 167. Intention.jspluginA.js pluginB.js pluginC.js Your HTML all your users devices with your HTML perfectly formatted
  168. 168. 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
  169. 169. The "intent" event• $(#elm).on(intent, function(){ alert(woohoo);});• The callback • function(event, intent){ /* do stuff */ });• Fires on every element added to intent
  170. 170. 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
  171. 171. 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
  172. 172. 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
  173. 173. Adding multiple elements• Chaining works• intent.add($(#element)).add($(#another));
  174. 174. Add element and specify responsiveattributesintent.add($(#element), {mobile:{class:awesome}});<div id="element" intent in-mobile-class="awesome">...</div>
  175. 175. 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>
  176. 176. Rolling your ownExtending Context.js or starting from scratch
  177. 177. Creating a responsive axis arrayvar axis =intent.responsive(contexts), functionalt =intent.responsive(ctx, matcher), functionfancy =intent.responsive(ctx, match, measure);
  178. 178. Contextsintent.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"
  179. 179. Matcherintent.responsive(contexts, match, measure);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
  180. 180. Overriding Matcherintent.responsive(contexts, match, measure);var contexts = [ {name:shallow, depth:200}, {name:deep, depth:1/0}], // Responsive function depth = intent.responsive(contexts, function(measure, ctx){ return measure <= ctx.depth; });
  181. 181. So...depth(300); // deep
  182. 182. Measureintent.responsive(contexts, match, measure);// responsive functiondepth = intent.responsive(contexts, matcherFunction, // measure function function(){ return $(window).scrollTop(); });$(window).on(scroll, depth);
  183. 183. 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
  184. 184. 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
  185. 185. A few responsive ideas• Page load time• Scroll depth• Integration of aware.js • Time of day • Returning visitor• Time on site• Geolocation
  186. 186. Experiments:
  187. 187. 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)); } } }; });
  188. 188. Angular.js integration• The Markup (or can be completely standard intention tags) looks like: <div intent={mobile:{class:"beautiful"}></div>
  189. 189. Conditional CSS Stylesheet LoadercssLoader( //stylesheets to load [css/amazing-touch-mobile.css, css/amazing-highres.css], // when these contexts [mobile, touch, highres]);
  190. 190. 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
  191. 191. Extending the responsive functionality ofTwitter Bootstrap• Data attribute implementation of js widgets on top of context specific intentional attributes• Theoretically possible, and cool
  192. 192. Lots to do, lots thatcan be done.Thank you.
  193. 193. Intentionally Dealing with Responsive DesignDow Jones Design Studio, SXSW 2013, http://intentionjs.comThis presentation was created in New York, NY, Pittsburgh,PA and Austin, TX, based on research that began in Octoberof 2011, representing the culmination of the Dow JonesDesign Studio’s work towards a more flexible web designand development process.Erin Sparling Joe Kendallerin.sparling@dowjones.com joe.kendall@dowjones.com

×