Slide 1

Slide 1 text

Responsible Responsive & filament group Scott Jehl

Slide 2

Slide 2 text

filament group We design engaging sites and applications that are simple to use and accessible to all.

Slide 3

Slide 3 text

Mitch Hedberg “An escalator can never break: it can only become stairs. ”

Slide 4

Slide 4 text

A natural subset of Progressive Enhancement. Responsive Design

Slide 5

Slide 5 text

Delightful and inclusive. Responsible

Slide 6

Slide 6 text

Inclusive Delightful It works in my browser. It feels intuitive. It allows me to complete my task It’s fun to use! It’s damned fast!

Slide 7

Slide 7 text

...and work especially well in newer browsers! Make it work everywhere.

Slide 8

Slide 8 text

to skin an app. There are, in fact, Many ways

Slide 9

Slide 9 text

“it depends.” - Every speaker at this conference.

Slide 10

Slide 10 text

Should it be responsive? • Commonality across experiences • Developer Skillset • Time up-front vs. maintenance • Interest in a challenge

Slide 11

Slide 11 text

Make no mistake! PE, done right, is hard.

Slide 12

Slide 12 text

can be rich, without being exclusive. A proposition: A layered approach

Slide 13

Slide 13 text

Talk = cheap.

Slide 14

Slide 14 text

Let’s tear it apart, shall we? We built something.

Slide 15

Slide 15 text

A One-Web Case Study

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Design-velopment Team @beep @upstatement @filamentgroup @mirandamulligan

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

But is it responsible? Responsive.

Slide 21

Slide 21 text

Areas of Responsibility Accessibility Performance Usability Sustainability

Slide 22

Slide 22 text

Responsive... ble baseline • “Content” first • Mobile-first images • Mobile-friendly layout

Slide 23

Slide 23 text

Asset Baseline • Basic CSS file • Basic JS file • Qualified Enhanced CSS file

Slide 24

Slide 24 text

Defensive Development = Qualified Upgrades Experience Divisions

Slide 25

Slide 25 text

Basic CSS

Slide 26

Slide 26 text

“Basic” = safe defaults • Tweaks to browser typography • Horizontal rules • Text alignment • Display: Inline / Block • No complex layout or positioning

Slide 27

Slide 27 text

“Basic”

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Enhanced Experience

Slide 30

Slide 30 text

The @media qualifier

Slide 31

Slide 31 text

Ethan Marcotte “If you’re awesome, or you’re Internet Explorer, you get enhanced.”

Slide 32

Slide 32 text

@media-fortified design.

Slide 33

Slide 33 text

All in your

Slide 34

Slide 34 text

The Concatenator

Slide 35

Slide 35 text

Server-side Concatenation Minify + Gzip

Slide 36

Slide 36 text

Enhanced CSS /* styles for everyone go here.. */ @media all and (min-width: 500px){ .. } @media all and (min-width: 620px){ .. } @media all and (min-width: 950px){ .. }

Slide 37

Slide 37 text

Inheritance Prevention @media all and (min-width: 500px) and (max-width: 700px){ /* styles constrained to 500-700px */ }

Slide 38

Slide 38 text

Left Right Left

Slide 39

Slide 39 text

Display: table + table-cell

Slide 40

Slide 40 text

Ems all the way down. Ems allow for components to adapt differently in different containers

Slide 41

Slide 41 text

• ResponsiveImages.js • Respond.js • Modernizr / extensions / HTML5 Shim • The Boston Globe JS Framework Basic.js: “just enough”

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Also.

Slide 44

Slide 44 text

Responsive Images

Slide 45

Slide 45 text

Edge Cases

Slide 46

Slide 46 text

Edge Cases

Slide 47

Slide 47 text

Respond.js https://github.com/scottjehl/Respond Now available as part of

Slide 48

Slide 48 text

Also: matchMedia polyfill window.matchMedia( “only all” ); github.com/paulirish/matchMedia.js

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Globe JS Framework

Slide 51

Slide 51 text

The globe, um... global. globe = {};

Slide 52

Slide 52 text

Feature flags from Modernizr globe.support.touch globe.support.applicationcache respond.mediaQueriesSupported

Slide 53

Slide 53 text

Internet Explorer Flags globe.browser.ie6 = document.documentElement .className.indexOf( “ie6” ) >= 0;

Slide 54

Slide 54 text

Again, with the @media globe.enhanced = respond.mediaQueriesSupported || globe.browser.ie6 || globe.browser.ie7 || globe.browser.ie8; Conditional-comment driven

Slide 55

Slide 55 text

JS Experience Divide if( !globe.enhanced ){ //last stop for old browsers! return; } else{ //remove Basic CSS //bring on the enhancements }

Slide 56

Slide 56 text

great browser, too slow. And one caveat... No Enhanced JS for BB5

Slide 57

Slide 57 text

No JS? That’s okay.

Slide 58

Slide 58 text

On removing Basic.css... head.removeChild( basicCSS ); • Convenient when basic.css does not easily cascade. • A convenience that can’t be guaranteed.

Slide 59

Slide 59 text

Enhancing Further

Slide 60

Slide 60 text

Loading Assets

Slide 61

Slide 61 text

Different for every browser. Highly optimized. Enhanced page weight

Slide 62

Slide 62 text

~ hand-crafted delivery ~ The assets you receive depend on width, section, features

Slide 63

Slide 63 text

Defining Assets to Load //Arrays of JS and CSS files globe.jsToLoad = [ “jquery.js” ]; globe.cssToLoad = []; jQuery is dynamically-loaded too!

Slide 64

Slide 64 text

Feature-based Loading if( globe.support.touch ){ jsToLoad.push( “touchEvents.js” ); }

Slide 65

Slide 65 text

Section-specific Loading if( globe.hasClass( “gallery”, body ) ){ jsToLoad.push( “galleries.js” ); }

Slide 66

Slide 66 text

Device Size Decisions if( window.screen.width > 500 ){ cssToLoad.push( “fonts.css” ); } screen, not window

Slide 67

Slide 67 text

Our width usage rule of thumb: screen for assets window for design

Slide 68

Slide 68 text

Why Screen, not viewport? • Fixed per device • Assets delivered to device’s potential, not just current state. • Orientation-change makes resize relevant again.

Slide 69

Slide 69 text

Pack & Load globe.load.script( jsToLoad.join(",") ); globe.load.style( cssToLoad.join(",") );

Slide 70

Slide 70 text

Again, concat. “js/file1.js,file2.js,file3.js” Minify + Gzip

Slide 71

Slide 71 text

Responsive Behavior

Slide 72

Slide 72 text

Collapsible Sections

Slide 73

Slide 73 text

We value all input...

Slide 74

Slide 74 text

On the desktop... photo: flickrich

Slide 75

Slide 75 text

...and on the device Touch & Mouse Events Mouse Events

Slide 76

Slide 76 text

Normalized Events • vclick • vmousedown • vmouseover • vmouseup • vmousecancel

Slide 77

Slide 77 text

Click - or - Gesture

Slide 78

Slide 78 text

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ Drag pagination

Slide 79

Slide 79 text

#!hashbang

Slide 80

Slide 80 text

Less JS execution, faster page loads Single-Page Apps

Slide 81

Slide 81 text

Degrees of #!%$hashbang Foo Foo http://example.com/#!foo.html Not great: Less... not great:

Slide 82

Slide 82 text

Great: history.replaceState http://example.com/#!foo.html http://example.com/foo.html

Slide 83

Slide 83 text

...in code. window.addEventListener( “hashchange”, function(){ history.replaceState( {}, document.title, location.hash.replace("#!","" ) ); }, false );

Slide 84

Slide 84 text

Many ways to “Save”

Slide 85

Slide 85 text

Hidden Touch Interface

Slide 86

Slide 86 text

Even save without JS Simple Form

Slide 87

Slide 87 text

Extends the ability for a site to meet you where you are PE + offline is possible!

Slide 88

Slide 88 text

Accessibility enhancements

Slide 89

Slide 89 text

Keep it accessible

Slide 90

Slide 90 text

Keys + WAI ARIA

Slide 91

Slide 91 text

pairs with mobile, resolution-independent audible interface

Slide 92

Slide 92 text

One-Web Challenges

Slide 93

Slide 93 text

Content Negotiation

Slide 94

Slide 94 text

What if we treat them like navigation? Landing pages are heavy

Slide 95

Slide 95 text

Anchor-Include Pattern T https://gist.github.com/983328

Slide 96

Slide 96 text

Ideal Delivery In page source Delivered via Ajax

Slide 97

Slide 97 text

Ads.

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Ads are not awesome. • Third-party, potential for conflicts • They block content loading • Potentially overtake page • Pixel dimensions, contractually • Filled with document.write

Slide 100

Slide 100 text

Best. Line. Ever. document.write( “.....” );

Slide 101

Slide 101 text

Dynamically injected, naturally. How we “solve” ads:

Slide 102

Slide 102 text

Resize + Hide + Append

Slide 103

Slide 103 text

Where to append? CSS: @media all and (min-width: 500px){ .a .ad { display: none; } } JavaScript: //on window resize: if( !$( “.ad” ).is( “:visible” ) ){ $( “.ad” ).appendTo( “.b” ); }

Slide 104

Slide 104 text

Not an edge-case. Edge Caching

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

In conclusion... to build sites that are rich without being exclusive. We have the tools

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

What about “apps?”

Slide 109

Slide 109 text

FlipPics http://bit.ly/pBJciO

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

@scottjehl thanks everyone.