Short presentation about responsive javascript in Drupal websites

1. Presented by your friends atPresented by your friends at
Responsive JavascriptResponsive Javascript
in Drupal Sitesin Drupal Sites

2. About MeAbout Me
CEO of Trellon
on drupal.org@techsoldaten
Chief Internet Strategist
for Trellon
One of the first Drupal firms in North America
10+ years architecting large scale Drupal
environments
Passionate about scalability, third-party
integration, contributions
Responsive Javascript in Drupal Sites

3. Responsive JavascriptResponsive Javascript
Responsive Javascript in Drupal Sites
Scripts that run:
In specific browser dimensions
On devices with specific capabilities
Can be activated / removed in response to changes
in device dimensions, including rotation

4. There's No One WayThere's No One Way
Responsive Javascript in Drupal Sites
Popular solutions. Each has benefits and drawbacks:
jQuery Mobile
jQuery Factories
Conditional javascript with @media
Just using display: none and duplicating the markup
with a different selector

5. Why is This a DrupalWhy is This a Drupal
Problem?Problem?
Responsive Javascript in Drupal Sites
Drupal has a lot of things that don't respond well to mobile.
CKEditor: Try using this on mobile
Views Slideshow: No destroy method
Breakpoints: No integration outside theme

6. Recipe for ResponsiveRecipe for Responsive
JavascriptJavascript
Responsive Javascript in Drupal Sites
jRespond
Define breakpoints in theme
Views
Just views, no slideshows

7. jRespondjRespond
Allows you to set breakpoints
Responsive Javascript in Drupal Sites
<script>
// adds breakpoints used by javascript
var jRes = jRespond([
{
label: 'handheld',
enter: 0,
exit: 640
},{
label: 'tablet',
enter: 768,
exit: 979
},{
label: 'desktop',
enter: 1200,
exit: 10000
}
]);
</script>

8. jRespondjRespond
Allows you to set breakpoints
Responsive Javascript in Drupal Sites
<script>
jRes.addFunc({
breakpoint: 'handheld',
enter: function() {
// turns on slideshows
nav = showSlideshow('#slideshow');
},
});
function showSlideshow(item){
item.cycle();
}
</script>
Structured around functions
that fire when dimensions
change (instead of user
activity)

9. jRespondjRespond
Allows you to set breakpoints
Responsive Javascript in Drupal Sites
<script>
jRes.addFunc({
breakpoint: 'handheld',
enter: function() {
// turns on slideshows
nav = showSlideshow('#slideshow');
},
// here's my exit function
exit: function() {
// removes slideshows
'#slideshow'.cycle('destroy');
},
});
function showSlideshow(item){
item.cycle();
}
</script>
Code executes when users
enter and exit
Structured around functions
that fire when dimensions
change (instead of user
activity)

10. ViewsViews
Instead of using a Views plug in to generate something,
use responsive jQuery
Responsive Javascript in Drupal Sites

11. ExamplesExamples
Let's look at some sitesLet's look at some sites

12. Questions?

13. Thank you!
https://github.com/ten1seven/jRespond
heytrellon@trellon.com
twitter.com/trellon