Tweet
Tweet

Slide 1

Slide 1 text

RESS: An Evolution of Responsive Web Design Dave Olsen, @dmolsen WVU University Relations - Web Refresh Pittsburgh, May 15 2012

Slide 2

Slide 2 text

slideshare.net/dmolsenwvu

Slide 3

Slide 3 text

programmer 9 years at wvu wvu has 30,000 students

Slide 4

Slide 4 text

What I’ll Talk About •The Responsive Age •What is RESS •Two Server-side Solutions

Slide 5

Slide 5 text

The Responsive Age We’ve entered...

Slide 6

Slide 6 text

http://www.alistapart.com/articles/responsive-web-design/

Slide 7

Slide 7 text

http://flic.kr/p/9UmsCJ

Slide 8

Slide 8 text

DESKTOP WEB TABLET WEB MOBILE WEB It’s All One Web

Slide 9

Slide 9 text

http://modernizr.com

Slide 10

Slide 10 text

http://flic.kr/p/9Qp3A

Slide 11

Slide 11 text

The client is now in charge

Slide 12

Slide 12 text

One... http://flic.kr/p/5pGcyx Why Be Responsive

Slide 13

Slide 13 text

One... URL. Why Be Responsive

Slide 14

Slide 14 text

One... Set of Mark-up. Why Be Responsive

Slide 15

Slide 15 text

One... Deployment. Why Be Responsive

Slide 16

Slide 16 text

futurefriend.ly

Slide 17

Slide 17 text

balloons Time to Party... http://flic.kr/p/h6McT

Slide 18

Slide 18 text

http://flic.kr/p/8x6b8X “Not so fast, my friends...”

Slide 19

Slide 19 text

Media... Images & Video RWD Challenges

Slide 20

Slide 20 text

3rd Party Content... Ads & Social Widgets RWD Challenges

Slide 21

Slide 21 text

One Set of Mark-up... Double-edged Sword RWD Challenges

Slide 22

Slide 22 text

Learned the hard way... http://happyholidays.wvu.edu

Slide 23

Slide 23 text

Standards Process Standards Process is Evolving http://www.w3.org/community/respimg/

Slide 24

Slide 24 text

Mind the Gap http://flic.kr/p/638wPy Bridging the Gap

Slide 25

Slide 25 text

adaptive images website http://adaptive-images.com/ Existing Solutions

Slide 26

Slide 26 text

image of a path for showing RESS as a way forward Take a New Path http://flic.kr/p/7cGN8g

Slide 27

Slide 27 text

What is RESS?

Slide 28

Slide 28 text

Responsive Web Design + Server Side Components (I have no idea what becomes of the W, D, or C)

Slide 29

Slide 29 text

“In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392

Slide 30

Slide 30 text

“...browser-detection can be used to help inform an overall responsive design as opposed to being the be-all- end-all for templating. - Dave Olsen @dmolsen http://bit.ly/wW91Ie

Slide 31

Slide 31 text

•If you want layout adjustments across devices. •And optimization at the component level to increase performance or tune user experience. •You trust server-side device detection with sensible defaults. http://www.lukew.com/ff/entry.asp?1509 RESS is Good if... “ - Luke Wroblewski @lukew

Slide 32

Slide 32 text

Simple Example: Swapping a Header & Footer Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392

Slide 33

Slide 33 text

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 {{>header}} [...document content...] {{>footer}}

Slide 34

Slide 34 text

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 {{>header}} [...document content...] {{>footer}}

Slide 35

Slide 35 text

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 index.html header.html mobile_header.html footer.html mobile_footer.html

Slide 36

Slide 36 text

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 index.html header.html mobile_header.html footer.html mobile_footer.html

Slide 37

Slide 37 text

DESKTOP WEB M-ADVANCED ress.dmolsen.com MOBILE BASIC

Slide 38

Slide 38 text

Infancy RESS is in Its Infancy... http://flic.kr/p/7B7uyp

Slide 39

Slide 39 text

Untested ...and untested. http://flic.kr/p/nNZRV

Slide 40

Slide 40 text

ND data http://weedygarden.net/2012/05/a-case-for-ress/ U. of Notre Dame Example

Slide 41

Slide 41 text

ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136 requests @ 2.7MB Small Screen: 23 requests @ 291K

Slide 42

Slide 42 text

bridge We Still Need to Bridge the Gap http://flic.kr/p/7FyCB2

Slide 43

Slide 43 text

developers and designers Designers + Developers? http://flic.kr/p/7Ma9n

Slide 44

Slide 44 text

So how would we implement? http://flic.kr/p/5ATc7g How Do We Implement RESS?

Slide 45

Slide 45 text

Responsive Web Design is “easy” Skipping RWD http://flic.kr/p/4YM8

Slide 46

Slide 46 text

Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna

Slide 47

Slide 47 text

Browser Detection #1

Slide 48

Slide 48 text

Old dog http://flic.kr/p/bWQicm Been Around a While

Slide 49

Slide 49 text

82% of the Alexa 100 top sites use some form of server-side mobile device detection to serve content on their main website entry point. “ - Ronan Cremin @xbs http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/ Used Quite a Bit

Slide 50

Slide 50 text

WURFL DeviceAtlas OpenDDR 51Degrees.mobi Lots of Solutions

Slide 51

Slide 51 text

Personal Fav*: ua-parser node.js, Python, PHP, & Ruby libraries built upon a standard YAML file https://github.com/tobie/ua-parser/ * - I help maintain the project ;)

Slide 52

Slide 52 text

Arms Race? http://flic.kr/p/6RVLY2

Slide 53

Slide 53 text

Server-side Feature Detection #2

Slide 54

Slide 54 text

Infancy Also in Its Infancy... http://flic.kr/p/7B7uyp

Slide 55

Slide 55 text

Untested ...and untested. http://flic.kr/p/nNZRV

Slide 56

Slide 56 text

Can be Simple or Complex Taking a Cue from Front-End Dev

Slide 57

Slide 57 text

Server-side Future Friendly?

Slide 58

Slide 58 text

Server-side Breakpoints 320px 640px 960px

Slide 59

Slide 59 text

Simple Example: Setting a file path based on window.innerWidth function writeCookie(name, value) { //cookie code } // store the innerWidth of the window in a cookie writeCookie("RESS", window.innerWidth); http://www.netmagazine.com/tutorials/getting-started-ress Server-side Breakpoints

Slide 60

Slide 60 text

”; ?> Simple Example: Setting a file path based on window.innerWidth http://www.netmagazine.com/tutorials/getting-started-ress

Slide 61

Slide 61 text

Robust Feature Detection http://detector.dmolsen.com

Slide 62

Slide 62 text

"; $simpleLink = "Your browser doesn't appear to support HTML5. {...}"; // use the $ua properties to switch if ($ua->video->h264 || $ua->video->webm) { ! print $html5Embed; } else { ! print $simpleLink; ! } ?> Simple Example: Inserting a video link http://detector.dmolsen.com/demo/ytembed/ Robust Feature Detection

Slide 63

Slide 63 text

Complicated Example: Templates Using Detector & Mustache http://ress.dmolsen.com & click “Learn more...” Robust Feature Detection

Slide 64

Slide 64 text

RESS isn’t a silver bullet. (anymore than RWD is) RESS Challenges

Slide 65

Slide 65 text

Server-side feature detection can be spoofed. RESS Challenges

Slide 66

Slide 66 text

Requires server-side languages. RESS Challenges

Slide 67

Slide 67 text

Data needs to be separated from layout. RESS Challenges

Slide 68

Slide 68 text

It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. RESS Challenges “ - Jon Arnes Sæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

Slide 69

Slide 69 text

The evolution of web development continues... The of Web Development Continues http://flic.kr/p/3Q4To4

Slide 70

Slide 70 text

Questions or comments?

Slide 71

Slide 71 text

On Twitter @dmolsen...

Slide 72

Slide 72 text

Or at dmolsen.com...

Slide 73

Slide 73 text

Thank You