5. [5]
RWD Performance versus Experience
“8k – 10k man hours to get a homepage load time of
26s on Smartphone”
50 elements, 500KB on 4G/LTE
30 elements, 300KB on 4G
10 element, 100KB on 3G
Page weight is increasing:
End 2013: 1,701KBEnd 2012: 1,286KB
Source: http://www.sitepoint.com/average-page-
weights-increase-32-2013/
Retailers wanting a fast performing mobile
optimised site should limit pages to:
Development is not easy:
Conversion demands more engagement:
Consumers are demanding Contextual
experiences:
Consumers are demanding faster
Response times:
Flat UI
Micro UX
Less Text
Minimalist Navigation
Bigger Better Imagery
Richer Content
Single Page Experience
Varied Typograhy
Monochromatic Design
Cards and Tiles
source: Keynote / Internet Retailer
source: eBags.com
6. [6]
RWD Performance is Poor
http://www.internetretailer.com/2014/06/02/ugly-truth-about-responsive-design-and-how-fix-it?p=1
1s delay in page load times typically equates to
-7% conversion
A 3.15s Desktop Page load time can equate to
18.24s on Smartphone
Your RWD site could be costing you 73% of
potential conversions
8. [8]
Traffic Flow
Request to m., t.
or single domain
Request
forwarded to
Origin site
Origin site
response
t. engine transforms
response as defined in
the Moovweb Project
Response
forwarded to client
Client
Origin
~100mS
10. [10]
Tritium
“Tritium is a simple scripting language for
efficiently transforming structured data.”
Tritium
HTML, JSON, XML
HTML, JSON, XML
Selector
(css or xpath)
function
Tritium Libraries (known as Mixers) add specific functionality to your project.
Mixers in Tritium are like RubyGems in Ruby or NPM Modules in NodeJS.
12. [12]
Tritium Selectors (css)
$$(Text %css_selector){
#Now we are in a scope and can do something with it…
}
$$("#one"){
#Now we have selected all divs with an ID of one…
}
Note: the $$ converts the CSS selector to an XPath-style selector. It converts it
into a local deep search, so could potentially be slower than an XPath selector. For
example, the selector $$("#one") will be converted into $(".//*[id='one']"). The
double-forward-slash deep search could affect performance.
22. [22]File download: http://is.gd/VKUg9o
Project Anatomy
Images, JavaScript and styling that we
are injecting into our project
Reusable functions
Transformation Scripts
Domain mapping
Tritium Mixers that are we including
24. [24]File download: http://is.gd/VKUg9o
Some Tritium Mixers
Core-rewriter: Rewrites JS and Links to the correct domain
Stdlib: Standard Tritium functions needed for every project
Jsonlib: Convert HTML to JSON
Jquery-mobile: Helpers to implement JQM
Perf: Optimize images and JavaScript
Assert: Test your Tritium to monitor for breaks
Cache: Enable caching to improve site performance
Full language specification and definition of
mixers: http://www.tritium.io/
37. [37]File download: http://is.gd/VKUg9o
Project Flow (1)
1
@import: A Layer that will be imported
@optional: A Layer that may be imported
@optional “@/main.ts” expands out to e.g. mobile/main.ts
38. [38]File download: http://is.gd/VKUg9o
Project Flow (2) - shared
2
Defined in /functions/main.ts
Match:
http://www.tritium.io/current#match(Text
%20%25match_target)%20Text
If the Origin server responds with html, we’ll import html.ts
40. [40]File download: http://is.gd/VKUg9o
Going back to main.ts and looking at @optional (1)
1
Will route if the UA passes the
regex defined in the control
center for that mode
https://console.moovweb.com/igadgetcommerce/production/settings
Note: Requires an Enterprise Project to deploy or manage.
42. [42]File download: http://is.gd/VKUg9o
@optional (2) – assuming mobile layer
Make links, scripts and img’s point to the
correct domain
Clean meta tags and inject mobile ones
Dump CSS and remove html comments
Add layer specific SCSS, JS, fav-icon,
touchicons
Move css above scripts
Transform Header and Footer
Decide if we need a page specific
transform
43. [43]File download: http://is.gd/VKUg9o
That’s great but what about styling?
Site wide styles go here
Useful mixins and
classes
Variables for: Color scheme,
basic styles for fonts, borders,
gradients and headers
44. [44]File download: http://is.gd/VKUg9o
Images and Sprites
Images go in here
Generated sprites
Associated style sheet
generated here
Don’t forget to import the scss
into assets/stylesheets/layers/
mobile/mobile.scss